diff --git a/.env.development b/.env.development
index bc58c3c..03270b0 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
  # @LastEditors: JC9527
- # @LastEditTime: 2024-03-07 20:51:13
+ # @LastEditTime: 2024-03-21 17:55:10
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题
@@ -14,10 +14,10 @@ ENV = 'development'
 # 若依管理系统/开发环境
 # /dev-api
 # VUE_APP_BASE_API = 'http://39.101.188.84:9037'
-VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
+# VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
 VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
 VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
-# VUE_APP_BASE_API = 'http://192.168.0.110:9037'
+VUE_APP_BASE_API = 'http://192.168.0.112:9037'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/api/bigScreenApi/index.js b/src/api/bigScreenApi/index.js
index 8dfc226..0903a1a 100644
--- a/src/api/bigScreenApi/index.js
+++ b/src/api/bigScreenApi/index.js
@@ -226,4 +226,18 @@ export function getDept(id){
     url: '/jn/department/getDept/' + id,
     method: 'get'
   })
+}
+// 展开的部门加人员数结构
+export function getUserCount(){
+  return request({
+    url:"/jn/department/getUserCount",
+    method:"get",
+  })
+}
+// 根据名字，手机号模糊查询人员
+export function getImeiUserOnline(user){
+  return request({
+    url:"/jn/department/getImeiUserOnline/" + user,
+    method:"get",
+  })
 }
\ No newline at end of file
diff --git a/src/assets/images/矩形 987@2x.png b/src/assets/images/bgtongyongTwo.png
similarity index 100%
rename from src/assets/images/矩形 987@2x.png
rename to src/assets/images/bgtongyongTwo.png
diff --git a/src/assets/images/organizationChart.png b/src/assets/images/organizationChart.png
new file mode 100644
index 0000000..5abd7ac
Binary files /dev/null and b/src/assets/images/organizationChart.png differ
diff --git a/src/assets/images/organizationChartTwo.png b/src/assets/images/organizationChartTwo.png
new file mode 100644
index 0000000..36e7f13
Binary files /dev/null and b/src/assets/images/organizationChartTwo.png differ
diff --git a/src/assets/images/soundWave.png b/src/assets/images/soundWave.png
new file mode 100644
index 0000000..51b7130
Binary files /dev/null and b/src/assets/images/soundWave.png differ
diff --git a/src/views/bigScreen/components/mapLeftContent.vue b/src/views/bigScreen/components/mapLeftContent.vue
index 5f668fb..9fcd425 100644
--- a/src/views/bigScreen/components/mapLeftContent.vue
+++ b/src/views/bigScreen/components/mapLeftContent.vue
@@ -4,101 +4,176 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2024-03-08 08:56:50
+ * @LastEditTime: 2024-03-22 10:00:19
 -->
 <template>
-  <div class="left-box">
-    <div class="item left-list-title" :style="itemTwo">
-      <title-box title="今日事件情况"></title-box>
-      <div class="item-main">
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 上报事件总数</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/incident.png" alt="">
-            <div class="list-num">{{ MYsummarystatdata.total || "0" }}</div>
+  <div class="left-wai-box">
+    <div class="left-box" v-show="!isUnfold">
+      <div class="item left-list-title" :style="itemTwo">
+        <title-box title="今日事件情况"></title-box>
+        <div class="item-main">
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 上报事件总数</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/incident.png" alt="">
+              <div class="list-num">{{ MYsummarystatdata.total || "0" }}</div>
+            </div>
           </div>
-        </div>
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 已受理事件</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/incident.png" alt="">
-            <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
-              item.status == 1) : []) }}</div>
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 已受理事件</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/incident.png" alt="">
+              <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
+                item.status == 1) : []) }}</div>
+            </div>
           </div>
-        </div>
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 未受理事件</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/incident.png" alt="">
-            <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
-              item.status == 0) : []) }}</div>
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 未受理事件</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/incident.png" alt="">
+              <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
+                item.status == 0) : []) }}</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="item left-list-title" :style="itemTwo">
-      <title-box title="今日任务情况"></title-box>
-      <div class="item-main">
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 派发任务总数</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/task.png" alt="">
-            <div class="list-num">{{ tasksummarystatdata.total || '0' }}</div>
+      <div class="item left-list-title" :style="itemTwo">
+        <title-box title="今日任务情况"></title-box>
+        <div class="item-main">
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 派发任务总数</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/task.png" alt="">
+              <div class="list-num">{{ tasksummarystatdata.total || '0' }}</div>
+            </div>
           </div>
-        </div>
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 已处理任务数量</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/task.png" alt="">
-            <div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div>
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 已处理任务数量</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/task.png" alt="">
+              <div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div>
+            </div>
+          </div>
+          <div class="lists">
+            <div class="bgc"></div>
+            <div class="list-text"> · 未处理任务数量</div>
+            <div class="list-bottom">
+              <img src="@/assets/images/task.png" alt="">
+              <div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div>
+            </div>
           </div>
         </div>
-        <div class="lists">
-          <div class="bgc"></div>
-          <div class="list-text"> · 未处理任务数量</div>
-          <div class="list-bottom">
-            <img src="@/assets/images/task.png" alt="">
-            <div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div>
+      </div>
+      <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
+        <title-box title="人员在线情况" :id="1"></title-box>
+        <map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" @unfold="unfold" :numberArray="peopleArray"
+          :height="oneHeight" :id="1" v-on="$listeners"></map-number>
+        <div style="display:flex;justify-content:flex-end;">
+          <div class="pagesBtnChange">
+            <div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div>
+            <div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div>
           </div>
         </div>
       </div>
+      <div class="item lfet-list-two" :style="itemOne">
+        <title-box title="车辆在线情况"></title-box>
+        <map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
+          :id="3" v-on="$listeners"></map-number>
+      </div>
     </div>
-    <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
-      <title-box title="人员在线情况"></title-box>
-      <map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" :numberArray="peopleArray"
-        :height="oneHeight" :id="1" v-on="$listeners"></map-number>
-      <div style="display:flex;justify-content:flex-end;">
-        <div class="pagesBtnChange">
-          <div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div>
-          <div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div>
+    <div class="unfold-click" v-show="isUnfold" v-loading="mapLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
+      <div class="unfold-header">
+        <div class="header-title">
+          <div class="t-left">
+            <img src="@/assets/images/soundWave.png" alt="">
+            <span>组织人员</span>
+          </div>
+          <img class="t-right" @click="offUnfold" src="@/assets/images/dialogbg/close.png" alt="">
+        </div>
+        <!-- <el-autocomplete
+          prefix-icon="el-icon-search"
+          class="inline-input"
+          v-model="unfoldInput"
+          :fetch-suggestions="querySearch"
+          placeholder="请输入关键字进行搜索"
+          :trigger-on-focus="false"
+          @select="handleSelect"
+        ></el-autocomplete> -->
+        <el-input 
+          placeholder="请输入关键字进行搜索" 
+          prefix-icon="el-icon-search" 
+          v-model="unfoldInput"
+          @input="inputChange"
+        ></el-input>
+      </div>
+      <div class="unfold-middle" v-show="isBreadcrumb">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id">
+            <div class="zhuzijiagou-list" @click="breadcrumbClick(item)">
+              <img :src="item.id == breadcrumb.length ? require('@/assets/images/organizationChart.png') : require('@/assets/images/organizationChartTwo.png')" alt="">
+              <span :class="item.name.length > 5 ? 'spanText':''">{{ item.name }}</span>
+            </div>
+          </el-breadcrumb-item>
+          <!-- <el-breadcrumb-item>
+            <div class="zhuzijiagou-list">
+              <img src="@/assets/images/organizationChart.png" alt="">
+              <span>江宁开发区</span>
+            </div>
+          </el-breadcrumb-item> -->
+        </el-breadcrumb>
+      </div>
+      <div class="unfold-foot" v-show="isPerson">
+        <ul>
+          <li @click="personInfo(item)" v-for="(item,index) in deptArr" :key="item.deptId">
+            <img src="@/assets/images/organizationChart.png" alt="">
+            <div>
+              {{ item.deptName }}  <span v-if="item.zdsb">（<span>{{ item.online }}</span>/{{ item.allNumber }}）</span>
+            </div>
+            <i class="el-icon-arrow-right"></i>
+          </li>
+        </ul>
+      </div>
+      <div class="unfold-foot-two" v-show="!isPerson" v-loading="personLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
+        <div class="main-lists" v-for="(item,index) in personList" :key="item.imei" :class="(index+1) % 2 == 0? 'main-lists2':''">
+          <div class="list-title">
+            {{ item.userName }}
+          </div>
+          <div class="list-right">
+            <div class="real-time-location" @click="realTimeLocation(item)">
+              <img src="@/assets/images/location1.png" alt="">
+              <span>实时定位</span>
+            </div>
+            <div class="route-track" @click="historicalRoute(item)">
+              <img src="@/assets/images/track.png" alt="">
+              <span>行程轨迹</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="item lfet-list-two" :style="itemOne">
-      <title-box title="车辆在线情况"></title-box>
-      <map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
-        :id="3" v-on="$listeners"></map-number>
-    </div>
+    <personage-track ref="personageTrack"></personage-track>
   </div>
 </template>
 <script>
 import titleBox from '../../components/title/index.vue'
 import mapNumber from '../../components/mapLeftNumber/index.vue'
 import { getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js'
-import { getQueryViewListPage, onlinePeople, onlineNumSize } from "@/api/bigScreenApi/index.js"
+import { getQueryViewListPage, onlinePeople, onlineNumSize, getUserCount, getImeiUserOnline } from "@/api/bigScreenApi/index.js"
+import personageTrack from "../../components/personagetrack/index.vue";
 export default {
   name: 'mapLeftContent',
-  components: { titleBox, mapNumber },
+  components: { titleBox, mapNumber, personageTrack },
   data() {
     return {
       perpsonNum: 0,
       personOnLine: 0,
       peopleArray: [],
+      peopleNewArray:[],
       vehicleArray: [],
       itemOne: {
         height: '',
@@ -115,19 +190,21 @@ export default {
         pageSize: "10"
       },
       page: 1,
-      eventData: {
-        "queryValue": [
-          // {
-          //   "colCode": "name",
-          //   "queryValue": "111"
-          // },
-        ],
-        "myInstanceClassify": "all"
-      },
       MYsummarystatdata: {
         records: []
       },//事件统计概况数据 
-      tasksummarystatdata: {} // 任务概况分类统计
+      tasksummarystatdata: {}, // 任务概况分类统计
+      isUnfold:false,
+      unfoldInput:"",
+      isPerson:true,
+      breadcrumb:[],
+      deptArr: null,
+      allDeptArr:null,
+      myId: 1,
+      personList:[],
+      mapLoading:false,
+      personLoading:false,
+      isBreadcrumb:true,
     }
   },
   props: ['personLine', 'carLine'],
@@ -176,13 +253,11 @@ export default {
       })
     },
     getEvent() {
-      // getQueryViewListPage(this.eventList, this.eventData).then(res => {
-      //   console.log(res, 'resres');
-      // })
-      
       onlinePeople({pageNum:1,pageSize:10}).then(res=>{
-        this.perpsonNum = res.total;
-        this.peopleArray = res.rows;
+        // console.log(res,"res");
+        this.perpsonNum = res.data.length;
+        this.peopleNewArray = [...res.data];
+        this.peopleArray = res.data.slice(0,10);
       })
     },
 
@@ -193,36 +268,33 @@ export default {
     },
 
     changePage(id){
-      
       if(id == 1) {
         if(this.page == 1) {
           this.$modal.msgError("已到第一页");
           return;
         }
         this.getOnline();
-        onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{
-          // this.personOnLine = res.rows;
-          this.peopleArray = res.rows;
-        })
+        this.peopleArray = this.peopleNewArray.slice((this.page-2)*10,(this.page-1)*10);
+        this.page--;
+        // onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{
+        //   // this.personOnLine = res.rows;
+        //   this.peopleArray = res.rows;
+        // })
       } else if(id == 2) {
         if(this.page == parseInt(this.perpsonNum / 10) + 1){
           this.$modal.msgError("已到最后一页");
           return;
         }
         this.getOnline();
-        onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{
-          // this.personOnLine = res.rows;
-          this.peopleArray = res.rows;
-        })
+        this.peopleArray = this.peopleNewArray.slice(this.page*10,(this.page+1)*10);
+        this.page++;
+        // onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{
+        //   // this.personOnLine = res.rows;
+        //   this.peopleArray = res.rows;
+        // })
       }
     },
 
-    // 人员页码变化时间
-    pagesChange(pageNum){
-    // 拿到当前页码
-      console.log(pageNum,"pageNum");
-    },
-
     MYsummarystat() {
       //获取事件统计概况
       summarystat().then(res => {
@@ -237,6 +309,117 @@ export default {
     Fnsummarystat(data) {
       let mydata = data.length != 0 ? data[0].count : '0'
       return mydata
+    },
+    // 接收到展开按钮的信号
+    unfold(){
+      this.isUnfold = true;
+      this.mapLoading = true;
+      getUserCount().then(res=>{
+        if(res.code == 200){
+          let obj = {id:1,name:res.data[0].deptName}
+          this.breadcrumb.push(obj);
+          // console.log(res.data[0].children);
+          this.deptArr = res.data[0].children;
+          this.allDeptArr = [...res.data];
+          this.mapLoading = false;
+        }
+      })
+    },
+    // 关闭展开
+    offUnfold(){
+      this.isUnfold = false;
+      this.isPerson = true;
+      this.breadcrumb = [];
+    },
+    // 搜索人员
+    // querySearch(){},
+    // handleSelect(){},
+    // 点击指定中队展开的人员信息
+    personInfo(item){
+      if(item.children) {
+        this.deptArr = item.children;
+        this.isPerson = true;
+      } else {
+        this.isPerson = false;
+        this.personList = item.zdsb;
+      }
+      if(item.parentId == 0) return
+      let id = this.myId++;
+      let obj = {id:++id,name:item.deptName}
+      // console.log(obj,"obj");
+      this.breadcrumb.push(obj);
+    },
+    // TODO:实时定位
+    realTimeLocation(item){
+      this.$emit("realTimeLocationClick", item,1);
+    },
+    // 历史轨迹
+    historicalRoute(item){
+      this.$refs.personageTrack.open("person", item);
+    },
+    // 面包屑点击
+    breadcrumbClick(row){
+      // if(row.id == 2 && this.breadcrumb.length > 2) {
+      //   this.breadcrumb = this.breadcrumb.slice(0,row.id);
+      //   this.isPerson = true;
+      // }
+      this.recursion(this.allDeptArr,row.name)
+      this.myId = row.id;
+      this.breadcrumb = this.breadcrumb.slice(0,row.id);
+      this.isPerson = true;
+    },
+    // 递归拿到当前部门的信息
+    recursion(item,name) {
+      // item.map(item => {
+      //   if(item.deptName == name) {
+      //     this.deptArr = item.children;
+      //   } else {
+      //     this.recursion(item.children,name);
+      //   }
+      // })
+      for (let i = 0; i < item.length; i++) {
+        if (item[i].deptName === name) {
+          this.deptArr = item[i].children;
+          return;
+        } else {
+          let result = this.recursion(item[i].children,name);
+          if (result) {
+            return result;
+          }
+        }
+      }
+    },
+    // 输入框的变化事件
+    inputChange(value){
+      if(value) {
+        this.isPerson = false;
+        this.personLoading = true;
+        this.isBreadcrumb = false;
+        const throttledSearch = this.throttle(()=>{
+       getImeiUserOnline(value).then(res=>{
+            this.personList = res.data;
+            this.personLoading = false;
+          })
+        },500)
+        throttledSearch(value)
+      } else {
+        this.isPerson = true;
+        this.isBreadcrumb = true;
+      }
+    },
+    // 节流函数
+    throttle(fn, delay) {
+      let timer = null;
+      return () => {
+        let context = this;
+        let args = arguments;
+        if (!timer) {
+          timer = setTimeout(function() {
+            fn.apply(context, args);
+            timer = null;
+          }, delay);
+        }
+      }
     }
   },
   mounted() {
@@ -247,11 +430,6 @@ export default {
     this.getDomHeight();
     this.getEvent();
     this.getOnline();
-    // getTrend({ type: 1 }).then(res => {
-    //   console.log(res, '事件来源');
-    // })
-
-
   },
   created() {
     this.MYsummarystat()
@@ -260,6 +438,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.left-wai-box {
+  height: 100%;
+}
 .left-box {
   display: grid;
   grid-column: 1fr;
@@ -357,4 +538,163 @@ export default {
     height: 100%;
   }
 }
+.unfold-click {
+  height: 100%;
+  .unfold-header {
+    padding: 10px 20px;
+    .header-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .t-left {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        img {
+          width: 25px;
+          margin-right: 5px;
+        }
+        span {
+          color: #05eef5;
+        }
+      }
+      .t-right {
+        width: 20px;
+        cursor: pointer;
+      }
+    }
+    ::v-deep .el-input {
+      background-image: url("../../../assets/images/bgtongyongTwo.png");
+      background-size: 100% 100%;
+      .el-input__inner {
+        background-color: transparent;
+        // width: 222px;
+        width: 100%;
+        height: 38px;
+        color: #fff;
+        border: none;
+      }
+      .el-input__inner::placeholder {
+        /* 在这里添加你想要修改的 placeholder 样式 */
+        font-size: 14px;
+        font-family: "Source Han Sans CN-Regular";
+        font-weight: 400;
+        color: #d3eef2;
+        line-height: 20px;
+      }
+    }
+    .el-input__suffix {
+      line-height: 44px;
+      color: #d3eef2;
+      right: 10px;
+      cursor: pointer;
+      .el-icon-search:before {
+        font-size: 24px;
+        color: #d3eef2;
+      }
+    }
+  }
+  .unfold-middle {
+    padding: 10px 20px;
+    background: #2a67a4;
+    ::v-deep .el-breadcrumb__item {
+      display: flex;
+      align-items: center;
+      .el-breadcrumb__inner {
+        display: inline-block;
+        .zhuzijiagou-list {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          img {
+            width: 15px;
+            margin-right: 5px;
+          }
+          span {
+            color: #b8cce1;
+          }
+          .spanText {
+            white-space:nowrap;/*强制单行显示*/
+            text-overflow:ellipsis;/*超出部分省略号表示*/
+            overflow:hidden;/*超出部分隐藏*/
+            width: 80px;/*设置显示的最大宽度*/
+          }
+        }
+      }
+    }
+  }
+  .unfold-foot {
+    padding: 10px 20px;
+    ul {
+      padding-left: 0;
+      li {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+        cursor: pointer;
+        img {
+          width: 15px;
+          margin-right: 10px;
+        }
+        div {
+          flex: 1;
+          color: #ebeff5;
+          span {
+            color: #02f7fb;
+          }
+        }
+        i {
+          color: #ebeff5;
+        }
+      }
+    }
+  }
+  .unfold-foot-two {
+    padding: 10px 0;
+    height: 100%;
+    overflow-y: auto;
+    .main-lists {
+      display: flex;
+      justify-content: space-between;
+      background: rgba(216,216,216,0.05);
+      height: 33px;
+      align-items: center;
+      padding: 0 20px;
+      .list-title {
+        flex: 1;
+        font-size: 14px;
+        font-family: 'Source Han Sans CN-Regular';
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        // padding-left: 24px;
+      }
+      .list-right {
+        // flex: 1;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-family: 'Source Han Sans CN-Regular';
+        font-weight: 400;
+        color: #52B1FF;
+        .real-time-location {
+          margin-right: 22px;
+        }
+        .real-time-location,.route-track {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          img {
+            width: 18px;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    .main-lists2 {
+      background: rgba(187,220,255,0.2);
+    }
+  }
+}
 </style>
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index aa02d2a..8d81de2 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-03-14 16:12:31
+ * @LastEditTime: 2024-03-20 13:15:38
 -->
 <template>
   <div class="map-main">
@@ -621,9 +621,31 @@ export default {
       visible: false,   // 卫星底图是否显示
       onIcon:null,
       offIcon:null,
+      videoPoint:[],
     };
   },
   methods: {
+    // 网页刷新/浏览器关闭
+    beforeunloadHandler(event){
+      if(this.destID && this.imei) {
+        this._beforeUnload_time = new Date().getTime();
+        videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
+          this.destID = "";
+          this.imei = "";
+        })
+      }
+    },
+    unloadHandler(e){
+      this._gap_time = new Date().getTime()-this._beforeUnload_time;
+      if(this._gap_time <= 5){
+        if(this.destID && this.imei) {
+          videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
+            this.destID = "";
+            this.imei = "";
+          })
+        }
+      }
+    },
     init(map) {
       this.map = map;
       // o.setMapStyle('amap://styles/darkblue')
@@ -958,7 +980,7 @@ export default {
         imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
       }
       var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
-      var offset = new AMap.Pixel(-30.5, -48.5);
+      var offset = new AMap.Pixel(-32.5, -48.5);
       context.marker.setContent(content);
       context.marker.setOffset(offset);
       context.marker.on('click',(ev)=>{
@@ -1064,7 +1086,7 @@ export default {
       this.mapLoading = status ? false : true;
       if(id == 1) {
         this.personLine = [];
-        let videoPoint = [];
+        this.videoPoint = [];
         // 获取人员信息
         getDeviceList().then((res) => {
           this.mapLoading = false;
@@ -1083,12 +1105,12 @@ export default {
                 obj.userId = element.userId;
                 obj.info = element;
                 // this.markers.push(obj)
-                videoPoint.push(obj)
+                this.videoPoint.push(obj)
               }
             })
-            this.count = videoPoint.length;
+            this.count = this.videoPoint.length;
             AMap.plugin(['AMap.MarkerCluster'],()=>{
-              this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+              this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
                 gridSize: 60, // 设置网格像素大小
                 styles: sts,
                 maxZoom: 15,
@@ -1117,7 +1139,7 @@ export default {
         ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
           this.mapLoading = false;
           if(res.code == 200) {
-            let videoPoint = [];
+            this.videoPoint = [];
             res.result.records.forEach((element)=>{
               let obj = {position:[]};
               let location = element.location?.split(',');
@@ -1135,11 +1157,11 @@ export default {
               obj.imgSrc = ico2;
               obj.info = element
               // this.markers.push(obj)
-              videoPoint.push(obj)
+              this.videoPoint.push(obj)
             })
-            this.count = videoPoint.length;
+            this.count = this.videoPoint.length;
             AMap.plugin(['AMap.MarkerCluster'],()=>{
-              this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+              this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
                 gridSize: 60, // 设置网格像素大小
                 maxZoom: 17,
                 styles: sts,
@@ -1164,7 +1186,7 @@ export default {
         getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
           // console.log('车辆',res);
           this.carLine = res.rows
-          let videoPoint = [];
+          this.videoPoint = [];
           this.mapLoading = false;
           res.rows.forEach((element)=>{
           // console.log(element);
@@ -1176,13 +1198,13 @@ export default {
             obj.imgSrc = ico4;
             obj.info = element;
             // this.markers.push(obj)
-            videoPoint.push(obj)
+            this.videoPoint.push(obj)
           })
-          this.count = videoPoint.length;
+          this.count = this.videoPoint.length;
 
           AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
 
-            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
               gridSize: 60, // 设置网格像素大小
               styles: sts,
               maxZoom: 15,
@@ -1206,7 +1228,7 @@ export default {
         getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
           this.mapLoading = false;
           // console.log(res,"res");
-          let videoPoint = [];
+          this.videoPoint = [];
           res.data.forEach((element)=>{
             let obj = {position:[]};
             let lonLat;
@@ -1223,11 +1245,11 @@ export default {
             obj.imgSrc = ico5;
             obj.info = element
             // this.markers.push(obj)
-            videoPoint.push(obj)
+            this.videoPoint.push(obj)
           })
-          this.count = videoPoint.length;
+          this.count = this.videoPoint.length;
           AMap.plugin(['AMap.MarkerCluster'],()=>{
-            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
               gridSize: 60, // 设置网格像素大小
               maxZoom: 15,
               styles: sts,
@@ -1251,7 +1273,7 @@ export default {
         //   }
         // })
         getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
-          let videoPoint = [];
+          this.videoPoint = [];
           this.mapLoading = false;
           res.rows.forEach((element)=>{
             let obj = {position:[]};
@@ -1262,13 +1284,13 @@ export default {
             obj.imgSrc = ico6;
             obj.info = element;
             // this.markers.push(obj)
-            videoPoint.push(obj)
+            this.videoPoint.push(obj)
           })
-          this.count = videoPoint.length;
+          this.count = this.videoPoint.length;
 
           AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
 
-            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
               gridSize: 60, // 设置网格像素大小
               styles: sts,
               maxZoom: 15,
@@ -1424,6 +1446,7 @@ export default {
       this.player.detachMediaElement()
       this.player.destroy()
       this.player = null
+      videoSurveillance({destId:this.personInfo.userId,imei:this.personInfo.info.imei,msgType:0})
       if(this.timer) clearInterval(this.timer)
     },
     // 位置分享
@@ -1789,8 +1812,6 @@ export default {
           }
         })
       } else if(id == 3 && this.actionMap == 3){
-        // console.log("进来了");
-        // console.log(this.carInfo);
         this.carLine.forEach(car=>{
           if(item.id == car.id) {
             this.map.setZoomAndCenter(16,[car.longitude,car.latitude]);
@@ -2455,7 +2476,7 @@ export default {
           var restaurants = res.result.records;
           let a = [];
           restaurants.forEach((per=>{
-            let item = { value: per.name, location: per.location ? per.location : "" };
+            let item = { value: per.name, location: per.location ? per.location : "" ,info: per };
             a.push(item);
           }))
           cb(a);
@@ -2467,10 +2488,11 @@ export default {
       } else if(this.actionMap == 5) {
         // 店铺的搜索
         getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
+          // console.log(res,"店铺信息")
           var restaurants = res.rows;
           let a = [];
           restaurants.forEach((per=>{
-            let item = { value: per.shopName, imei: per.id, longitude:per.longitude, latitude:per.latitude };
+            let item = { value: per.shopName, info: per, longitude:per.longitude, latitude:per.latitude };
             a.push(item);
           }))
           cb(a);
@@ -2480,19 +2502,41 @@ export default {
     // 点击事件
     handleSelect(item){
       // console.log(item,"item");
+      // console.log(this.actionMap,"this.actionMap");
+      this.getMarkers(this.actionMap);
       if(this.actionMap == 1) {
         if(item.imei) {
           // 根据imei查询设备
           getDeviceList({imei:item.imei}).then(res=>{
             if(res.code == 200 && res.data.msg == "操作成功") {
-              this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
+              // if(this.cluster) {
+              //   this.cluster.setMap(null)
+              // }
+              // this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
+              getUserByImei({imei:item.imei}).then(resTwo=>{
+                if(resTwo.code == 200) {
+                  this.map.setZoomAndCenter(18,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
+                  setTimeout(()=>{
+                    this.personInfo.position = [res.data.obj[0].longitude,res.data.obj[0].latitude];
+                    this.personInfo.info = res.data.obj[0];
+                    this.personInfo.personinfo = resTwo.data[0];
+                    this.personInfo.visible = true;
+                  },1500)
+                }
+              })
+              return getUserByImei({imei:item.imei})
             }
           })
         }
       } else if (this.actionMap == 2) {
         if(item.location) {
           let location = item.location?.split(',');
-          this.map.setZoomAndCenter(16,[location[0],location[1]]);
+          this.map.setZoomAndCenter(18,[location[0],location[1]]);
+          setTimeout(()=>{
+            this.eventInfo.position = [location[0],location[1]];
+            this.eventInfo.info = item.info;
+            this.eventInfo.visible = true;
+          },1500)
         }
       } else if (this.actionMap == 3) {
         // 车辆的搜索
@@ -2501,9 +2545,18 @@ export default {
       } else if(this.actionMap == 5) {
         // 店铺的搜索
         if(item.longitude && item.latitude) {
-          this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
+          let longitude = item.longitude
+          let latitude = item.latitude
+          
+          this.map.setZoomAndCenter(18,[longitude,latitude]);
+          setTimeout(()=>{
+            this.shopInfo.position = [longitude,latitude];
+            this.shopInfo.info = item.info;
+            this.shopInfo.visible = true;
+          },1500)
         }
       }
+      
     },
     // 新增事件的点击事件
     createdTask() {
@@ -2630,6 +2683,7 @@ export default {
         }
       })
     },
+    // 坐标转换
     wgs84togcj02(lng, lat) {
       // 定义一些常量
       var PI = 3.1415926535897932384626;
@@ -2676,9 +2730,14 @@ export default {
     this.getPersonIcon();
     this.getCarList();
     this.getrobotToken();
-
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
+    window.addEventListener('unload', e => this.unloadHandler(e));
     // this.markerInterval();
   },
+  destroyed(){
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.removeEventListener('unload', e => this.unloadHandler(e));
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/components/mapLeftNumber/index.vue b/src/views/components/mapLeftNumber/index.vue
index 300570b..80a6495 100644
--- a/src/views/components/mapLeftNumber/index.vue
+++ b/src/views/components/mapLeftNumber/index.vue
@@ -1,18 +1,28 @@
 <template>
   <div class="left-number" id="parent">
     <div class="number-title">
-      <div>· {{ title }}</div>
+      <div class="title-left">
+        <div>· {{ title }}</div>
+        <div class="title-num" v-show="id == 1" @click="unfold">
+          展开
+        </div>
+      </div>
+      
       <div>{{ onLine }}/{{ sum }}{{ type }}</div>
     </div>
     <div class="header-title">
-      <div>{{ id == 1 ? "姓名" : "车牌号" }}</div>
+      <div class="header-title-left" :class="id == 1 ? 'header-title-left-two' : ''">{{ id == 1 ? "姓名" : "车牌号" }}</div>
+      <div class="header-title-center" v-show="id == 1">是否在线</div>
       <div class="header-title-right">实时定位/行程轨迹</div>
     </div>
     <!-- <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}"> -->
     <div class="left--lists" id="box" :style="{'height':(height - lists.height + 5) + 'px'}">
       <div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''">
-        <div class="list-title">
-          {{ item.nickName  || item.carCode}}
+        <div class="list-title" :class="id == 1 ? 'list-titleTwo' : 'list-title'">
+          {{ item.userName  || item.carCode}}
+        </div>
+        <div class="list-isLine" v-show="id == 1">
+          {{ item.status == "1" ? '在线' : '离线'}}
         </div>
         <div class="list-right">
           <div class="real-time-location" @click="realTimeLocation(item)">
@@ -86,6 +96,9 @@ export default {
       } else if(this.id == 3) {
         this.$refs.personageTrack.open("car", item);
       }
+    },
+    unfold(){
+      this.$emit("unfold")
     }
   },
   mounted(){
@@ -128,6 +141,27 @@ export default {
       color: #D3EEF2;
       line-height: 23px;
     }
+    .title-left {
+      display: flex;
+      align-items: center;
+    }
+    .title-num {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      padding: 0px 20px;
+      // color: #52B1FF;
+      color: #fff;
+      border: 1px solid #52B1FF;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 15px;
+      height: 30px;
+      // background-color: #077fff;
+      border-radius: 5px;
+      margin-left: 10px;
+    }
   }
   .header-title {
     display: flex;
@@ -136,13 +170,26 @@ export default {
     border: 1px solid #077FFF;
     height: 33px;
     &>div {
-      flex: 1;
+      // flex: 1;
+      width: 33%;
       padding-left: 24px;
       font-size: 14px;
       font-family: 'Source Han Sans CN-Bold';
       font-weight: bold;
       color: #D3EEF2;
     }
+    .header-title-left {
+      flex: 1;
+    }
+    .header-title-left-two {
+      flex: .5;
+    }
+    .header-title-center {
+      flex: 1;
+    }
+    .header-title-right {
+      flex: 1;
+    }
   }
   .left--lists {
     // height: 120px;
@@ -163,6 +210,17 @@ export default {
       line-height: 20px;
       padding-left: 24px;
     }
+    .list-isLine {
+      flex: .5;
+      font-size: 14px;
+      font-family: 'Source Han Sans CN-Regular';
+      font-weight: 400;
+      color: #D3EEF2;
+      line-height: 20px;
+    }
+    .list-titleTwo {
+      flex: .5;
+    }
     .list-right {
       flex: 1;
       display: flex;
diff --git a/src/views/components/title/index.vue b/src/views/components/title/index.vue
index 0dca15b..72ea2a7 100644
--- a/src/views/components/title/index.vue
+++ b/src/views/components/title/index.vue
@@ -4,15 +4,15 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:52:05
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-12 23:50:11
+ * @LastEditTime: 2024-03-21 14:55:27
 -->
 <template>
   <div class="mytitle">
     <div class="title-text" :text="title">
       {{ title }}
     </div>
-    <!-- <div class="title-num" v-show="numShow > 0">
-      {{ numShow }} <span>条</span>
+    <!-- <div class="title-num" v-show="id == 1" @click="unfold">
+      展开
     </div> -->
   </div>
 </template>
@@ -24,10 +24,15 @@ export default {
       type: String,
       default: '默认标题'
     },
-    // numShow: {
-    //   type: Number,
-    //   default: 0
-    // }
+    id: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods:{
+    unfold(){
+      this.$emit("unfold")
+    }
   }
 }
 </script>
@@ -42,6 +47,7 @@ export default {
   background-size: 100% 100%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   .title-text {
     font-size: vw(20);
     letter-spacing: vw(2);
@@ -64,17 +70,20 @@ export default {
     }
   }
   .title-num {
-    margin-right: vw(15);
-    font-size: vw(20);
-    font-family: 'DIN';
-    font-weight: bold;
-    color: #32fcc5;
-    & span {
-      font-size: vw(14);
-      font-family: 'Regular';
-      font-weight: 400;
-      color: #c7cddb;
-    }
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    padding: 0px 20px;
+    // color: #52B1FF;
+    color: #fff;
+    border: 1px solid #52B1FF;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    height: 35px;
+    background-color: #077fff;
+    border-radius: 5px;
   }
 }
 </style>