From 31d0779baa38356e763d7688dc1c62ee84aa6415 Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Wed, 13 Dec 2023 11:15:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E7=BD=91=E6=A0=BC=EF=BC=8C?=
 =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=9C=A8=E7=BA=BF=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bigScreenApi/index.js                 |  31 +++
 src/assets/styles/leaflet.scss                |   6 +-
 src/permission.js                             |   3 +-
 src/router/index.js                           |  10 +-
 .../bigScreen/components/mapLeftContent.vue   |  32 ++-
 .../bigScreen/components/mapRightContent.vue  |  28 ++-
 src/views/bigScreen/map/index.vue             | 231 ++++++++++++------
 src/views/components/mapLeftNumber/index.vue  |  14 +-
 src/views/components/mapRight/index.vue       |  29 ++-
 src/views/components/personagetrack/index.vue |  60 +++--
 10 files changed, 317 insertions(+), 127 deletions(-)

diff --git a/src/api/bigScreenApi/index.js b/src/api/bigScreenApi/index.js
index 4e0bf79..9051340 100644
--- a/src/api/bigScreenApi/index.js
+++ b/src/api/bigScreenApi/index.js
@@ -1,4 +1,26 @@
 import request from "@/utils/request"
+/**
+ * 
+ * 人员
+ */
+
+// 终端设备坐标采集、在线状态接口
+export function getDeviceList(params) {
+  return request({
+    url: "/jn/dockingEq/getDeviceList",
+    method:'get',
+    params
+  })
+}
+
+// 获取历史轨迹
+export function getLocInfoByImei(data) {
+  return request({
+    url: "/jn/dockingEq/getLocInfoByImei",
+    method:'post',
+    data
+  })
+}
 
 // 重点区域
 export function regionalsettings(params){
@@ -18,6 +40,15 @@ export function roadsetting(params){
   })
 }
 
+// 根据等级查询所有区域网格
+export function levelQywg(query) {
+  return request({
+      url: '/jn/bgridsetting/getListBylevel',
+      method: 'get',
+      params:query
+  })
+}
+
 // 围栏
 export function fence(params){
   return request({
diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss
index 049da04..ae85a07 100644
--- a/src/assets/styles/leaflet.scss
+++ b/src/assets/styles/leaflet.scss
@@ -27,6 +27,7 @@
     .title {
       font-size: 14px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
       font-weight: 700;
       color: #E9F4FF;
       line-height: 19px;
@@ -120,6 +121,7 @@
     .title {
       font-size: 14px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
       font-weight: 700;
       color: #E9F4FF;
       line-height: 19px;
@@ -210,6 +212,7 @@
     .title {
       font-size: 14px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
       font-weight: 700;
       color: #E9F4FF;
       line-height: 19px;
@@ -297,6 +300,7 @@
     .title {
       font-size: 14px;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      margin-bottom: 0;
       font-weight: 700;
       color: #E9F4FF;
       line-height: 19px;
@@ -412,7 +416,7 @@
 }
 
 .land-name5 {
-  font-size: 16px;
+  // font-size: 16px;
   // font-weight: bold;
   text-align: center;
   color: #62E1FA;
diff --git a/src/permission.js b/src/permission.js
index f22f266..e18ff85 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -19,6 +19,7 @@ router.beforeEach((to, from, next) => {
       next({ path: '/' })
       NProgress.done()
     } else {
+      console.log('store.getters.roles',store.getters.roles)
       if (store.getters.roles.length === 0) {
         isRelogin.show = true
         // 判断当前用户是否已拉取完user_info信息
@@ -32,7 +33,7 @@ router.beforeEach((to, from, next) => {
         }).catch(err => {
             store.dispatch('LogOut').then(() => {
               Message.error(err)
-              next({ path: '/' })
+              next({ path: '/login' })
             })
           })
       } else {
diff --git a/src/router/index.js b/src/router/index.js
index bfa8f3b..648b06d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -61,10 +61,10 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
-  // {
-  //   path: '',
-  //   component: Layout,
-  //   redirect: 'index',
+  {
+    path: '',
+    component: Layout,
+    redirect: '/bigScreen',
   //   children: [
   //     {
   //       path: 'index',
@@ -73,7 +73,7 @@ export const constantRoutes = [
   //       meta: { title: '首页', icon: 'dashboard', affix: true }
   //     }
   //   ]
-  // },
+  },
   {
     path:'/bigScreen',
     component: () => import('@/views/bigScreen'),
diff --git a/src/views/bigScreen/components/mapLeftContent.vue b/src/views/bigScreen/components/mapLeftContent.vue
index 60c7031..bcc0d73 100644
--- a/src/views/bigScreen/components/mapLeftContent.vue
+++ b/src/views/bigScreen/components/mapLeftContent.vue
@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-18 20:42:47
+ * @LastEditTime: 2023-12-13 11:10:36
 -->
 <template>
   <div class="left-box">
@@ -109,25 +109,25 @@ export default {
       ],
       vehicleArray:[
         {
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },{
-          title:'苏A123456'
+          userName:'苏A123456'
         },
       ],
       itemOne:{
@@ -140,6 +140,16 @@ export default {
       screenHeight:'',
     }
   },
+  props:['personLine'],
+  watch:{
+    personLine:{
+      handler(newPerson){
+        console.log(newPerson,'在线人员情况');
+        this.peopleArray = newPerson
+      },
+      immediate:true,
+    },
+  },
   methods:{
     getDomHeight(){
       this.$nextTick(()=>{
diff --git a/src/views/bigScreen/components/mapRightContent.vue b/src/views/bigScreen/components/mapRightContent.vue
index 9f39cc1..6ccecad 100644
--- a/src/views/bigScreen/components/mapRightContent.vue
+++ b/src/views/bigScreen/components/mapRightContent.vue
@@ -4,17 +4,17 @@
  * @Author: JC9527
  * @Date: 2023-08-15 11:09:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-11 17:00:41
+ * @LastEditTime: 2023-12-13 10:58:50
 -->
 <template>
   <div class="right-box">
     <div class="item" :style="relativeHeight">
       <title-box title="区域网格"></title-box>
-      <map-right :rightArray="quyuArray" :height="getHeight"></map-right>
+      <map-right :rightArray="wanggeArray" :height="getHeight"></map-right>
     </div>
     <div class="item" :style="relativeHeight">
       <title-box title="重点区域"></title-box>
-      <map-right :rightArray="areaArray" :height="getHeight"></map-right>
+      <map-right :rightArray="quyuArray" :height="getHeight"></map-right>
     </div>
     <div class="item" :style="relativeHeight">
       <title-box title="考勤围栏"></title-box>
@@ -36,27 +36,27 @@ export default {
     return {
       griddingArray:[
         {
-          area:'网格1',
+          name:'网格1',
           event:60,
           resolved:40,
           unsolved:20
         },{
-          area:'网格2',
+          name:'网格2',
           event:60,
           resolved:40,
           unsolved:20
         },{
-          area:'网格3',
+          name:'网格3',
           event:60,
           resolved:40,
           unsolved:20
         },{
-          area:'网格1',
+          name:'网格1',
           event:60,
           resolved:40,
           unsolved:20
         },{
-          area:'网格2',
+          name:'网格2',
           event:60,
           resolved:40,
           unsolved:20
@@ -97,9 +97,10 @@ export default {
       quyuArray:[],
       weilanArray:[],
       luduanArray:[],
+      wanggeArray:[],
     }
   },
-  props:['quyuData', 'weilanData', 'luduanData'],
+  props:['quyuData', 'weilanData', 'luduanData', 'wanggeData'],
   watch:{
     quyuData:{
       handler(newQuyu){
@@ -128,6 +129,15 @@ export default {
       },
       immediate:true,
     },
+    wanggeData: {
+      handler(newWange){
+        // console.log(newLuduan,'路段');
+        if(newWange) {
+          this.wanggeArray = newWange
+        }
+      },
+      immediate:true,
+    }
   },
   methods:{
     getDomHeight(){
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index d7898ef..acb204d 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -6,7 +6,7 @@
     </div>
     <transition name="left-animationMap">
       <div class="map-left" v-if="leftAnimationData">
-        <map-left></map-left>
+        <map-left :personLine='personLine'></map-left>
       </div>
     </transition>
 
@@ -93,7 +93,7 @@
     </div>
     <transition name="right-animationMap">
       <div class="map-right" v-if="rightAnimationData">
-        <map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData"></map-right>
+        <map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData" :wanggeData="wanggeData"></map-right>
       </div>
     </transition>
 
@@ -170,11 +170,11 @@ import crewAssign from "../../components/crewAssign/index.vue";
 import videoWall from "../../components/videoWall/index.vue";
 import shop from "../../components/shop/index.vue";
 
-import jiangningwangge from "@/utils/data/江宁开发区网格.json";
+// import jiangningwangge from "@/utils/data/江宁开发区网格.json";
 
 import weilan from "@/utils/data/围栏1.json";
 
-import { regionalsettings, roadsetting, fence } from "@/api/bigScreenApi"
+import { regionalsettings, roadsetting, fence, getDeviceList, levelQywg } from "@/api/bigScreenApi"
 
 export default {
   name: "myMap",
@@ -222,10 +222,11 @@ export default {
       electronicMap: null,            // 电子地图
       satelliteMap: null,             // 卫星地图
       satelliteNoteMap:null,          // 卫星地图注记
-      wanggeData: null,                // 重点网格数据
+      wanggeData: null,                // 区域网格数据
       quyuData: null,                  // 重点区域数据
       weilanData: null,                // 考勤围栏数据
       luduanData: null,                // 重点路段
+      personLine: [],                  // 在线人员情况
     };
   },
   methods: {
@@ -357,7 +358,7 @@ export default {
       });
       // this.addLayer2();
       this.addLayer1();
-      this.addMark("执法人员");
+      this.getTem();
       // this.addLayer2();
       // this.addLayer3();
       // this.addLayer4();
@@ -378,34 +379,41 @@ export default {
     },
     // 网格and围栏
     addLayer8() {
-      // 加载geojson
-      let geojson = L.geoJSON(jiangningwangge, {
-        pane: "mapLayer2",
-        style: function (feature) {
-          return {
-            color: "#ffa500",
-            weight: 3,
-            fillColor: "#ffa500",
-            fillOpacity: 0.3,
-          };
-        },
-        onEachFeature: (feature, layer) => {
-          let text = feature.properties.name;
-          let bounds = layer._bounds;
-          let center = bounds.getCenter();
-          let myIcon = L.divIcon({
-            className: "land-name2",
-            html: text,
-            iconSize: [150, 24],
-            iconAnchor: [75, 12],
+      // 网格
+      levelQywg({ level: 1 }).then((res) => {
+        this.wanggeData = res.data;
+        res.data.forEach(element=>{
+          let shapeStr = JSON.parse(element.shapeStr);
+          let geojson = L.geoJSON(shapeStr.features[0], {
+            pane: "mapLayer2",
+            style: function (feature) {
+              return {
+                color: "#ffa500",
+                weight: 3,
+                fillColor: "#ffa500",
+                fillOpacity: 0.3,
+              };
+            },
+            onEachFeature: (feature, layer) => {
+              // let text = feature.properties.name;
+              // let bounds = layer._bounds;
+              // let center = bounds.getCenter();
+              let myIcon = L.divIcon({
+                className: "land-name2",
+                html: element.name,
+                iconSize: [150, 24],
+                iconAnchor: [75, 12],
+              });
+              // 多边形上的标记点;
+              L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
+                pane: "mapLayer3",
+                icon: myIcon,
+              }).addTo(this.mapLayers.mapLayer8);
+            },
           });
-          // 多边形上的标记点;
-          L.marker(center, {
-            pane: "mapLayer3",
-            icon: myIcon,
-          }).addTo(this.mapLayers.mapLayer8);
-        },
-      });
+        })
+        console.log(res,'网格');
+      })
       // .addTo(this.mapLayers.mapLayer8);
 
       // 加载围栏
@@ -493,7 +501,33 @@ export default {
       // 居中加载json文件
       this.globalMap.fitBounds(this.mapLayer1);
     },
-    addMark(name) {
+    // 执法人员点位
+    getTem(){
+      getDeviceList({imei:'861316060217211'}).then(res=>{
+        console.log('res0',res);
+        let obj = [];
+        if(res.data.obj) {
+          res.data.obj.forEach(element => {
+            if(element.status == 0) {
+              // 离线
+              obj.push(element)
+              this.personLine.push(element);
+            } else if(element.status == 1) {
+              // 在线
+              obj.push(element)
+              this.personLine.push(element);
+              console.log(this.personLine,'请求回来的在线情况');
+            } else if(element.status == 9) {
+              // 掉线
+            }
+          });
+        } else {
+          this.$modal.msgError('执法人员' + res.data.msg);
+        }
+        this.addMark(obj);
+      })
+    },
+    addMark(obj) {
       this.mapEvent.mapEvent1.clearLayers();
       let ico1 = L.icon({
         iconUrl: require("../../../assets/images/icon/icon1.png"),
@@ -515,47 +549,96 @@ export default {
         iconUrl: require("../../../assets/images/icon/icon5.png"),
         iconSize: [52, 81],
       });
-      point.features.map((item, index) => {
-        if (this.actionMap == 1) {
-          if (item.properties.name == "执法人员") {
-            let marker = L.marker(
-              {
-                lng: item.geometry.coordinates[0],
-                lat: item.geometry.coordinates[1],
-              },
-              { icon: ico1 }
-            )
-              .bindPopup(
-                `
-              <div class="person-popup">
-                <div class="person-title">
-                  <div class="title">人员信息</div>
-                  <div class="mask" id='monitoring${index}'></div>
+      if (this.actionMap == 1) {
+        obj.forEach((item,index)=>{
+          let marker = L.marker(
+            {
+              lng: item.longitude,
+              lat: item.latitude,
+            },
+            { icon: ico1 }
+          )
+            .bindPopup(
+              `
+            <div class="person-popup">
+              <div class="person-title">
+                <div class="title">人员信息</div>
+                <div class="mask" id='monitoring${index}'></div>
+              </div>
+              <div class="person-main">
+                <div class="person-info">
+                  <div class="dot"></div>
+                  <div class="name">李飞</div>
+                  <div class="position">执法1队队员</div>
                 </div>
-                <div class="person-main">
-                  <div class="person-info">
-                    <div class="dot"></div>
-                    <div class="name">李飞</div>
-                    <div class="position">执法1队队员</div>
-                  </div>
-                  <div class="btns">
-                    <div id='personClick${index}'>行程轨迹</div>
-                    <div>附近队员</div>
-                    <div>位置分享</div>
-                    <div>任务派发</div>
-                  </div>
+                <div class="btns">
+                  <div id='personClick${index}'>行程轨迹</div>
+                  <div>附近队员</div>
+                  <div>位置分享</div>
+                  <div>任务派发</div>
                 </div>
               </div>
-              `,
-                {
-                  className: "popup-pc-person",
-                }
-              )
-              .openPopup();
-            marker.addTo(this.mapEvent.mapEvent1);
-            this.markerClick(marker, index);
-          }
-        } else if (this.actionMap == 2) {
+            </div>
+            `,
+              {
+                className: "popup-pc-person",
+              }
+            )
+            .openPopup();
+          marker.addTo(this.mapEvent.mapEvent1);
+          this.markerClick(marker, index, item);
+        })
+      } else if (this.actionMap == 2) {
+
+      } else if (this.actionMap == 3) {
+
+      } else if (this.actionMap == 4) {
+
+      } else if (this.actionMap == 5) {
+
+      }
+      point.features.map((item, index) => {
+        // if (this.actionMap == 1) {
+        //   if (item.properties.name == "执法人员") {
+        //     let marker = L.marker(
+        //       {
+        //         lng: item.geometry.coordinates[0],
+        //         lat: item.geometry.coordinates[1],
+        //       },
+        //       { icon: ico1 }
+        //     )
+        //       .bindPopup(
+        //         `
+        //       <div class="person-popup">
+        //         <div class="person-title">
+        //           <div class="title">人员信息</div>
+        //           <div class="mask" id='monitoring${index}'></div>
+        //         </div>
+        //         <div class="person-main">
+        //           <div class="person-info">
+        //             <div class="dot"></div>
+        //             <div class="name">李飞</div>
+        //             <div class="position">执法1队队员</div>
+        //           </div>
+        //           <div class="btns">
+        //             <div id='personClick${index}'>行程轨迹</div>
+        //             <div>附近队员</div>
+        //             <div>位置分享</div>
+        //             <div>任务派发</div>
+        //           </div>
+        //         </div>
+        //       </div>
+        //       `,
+        //         {
+        //           className: "popup-pc-person",
+        //         }
+        //       )
+        //       .openPopup();
+        //     marker.addTo(this.mapEvent.mapEvent1);
+        //     this.markerClick(marker, index);
+        //   }
+        // } else 
+        if (this.actionMap == 2) {
           let marker;
           if (item.properties.name == "普通事件") {
             marker = L.marker(
@@ -780,7 +863,7 @@ export default {
         }
       });
     },
-    markerClick(marker, index) {
+    markerClick(marker, index, item) {
       marker.on("click", (e) => {
         this.$nextTick(() => {
           document
@@ -793,7 +876,7 @@ export default {
             document
               .querySelector("#personClick" + index)
               .addEventListener("click", () => {
-                this.$refs.personageTrack.open("person");
+                this.$refs.personageTrack.open("person",item);
               });
           } else if (this.actionMap == 2) {
             document
diff --git a/src/views/components/mapLeftNumber/index.vue b/src/views/components/mapLeftNumber/index.vue
index 03375c3..50ccb56 100644
--- a/src/views/components/mapLeftNumber/index.vue
+++ b/src/views/components/mapLeftNumber/index.vue
@@ -11,14 +11,14 @@
     <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + '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.title }}
+          {{ item.userName }}
         </div>
         <div class="list-right">
-          <div class="real-time-location">
+          <div class="real-time-location" @click="realTimeLocation">
             <img src="@/assets/images/location1.png" alt="">
             <span>实时定位</span>
           </div>
-          <div class="route-track">
+          <div class="route-track" @click="historicalRoute">
             <img src="@/assets/images/track.png" alt="">
             <span>行程轨迹</span>
           </div>
@@ -63,6 +63,14 @@ export default {
     }
   },
   methods:{
+    // TODO:实时定位
+    realTimeLocation(){
+
+    },
+    // 历史轨迹
+    historicalRoute(){
+      
+    }
   },
   mounted(){
     
diff --git a/src/views/components/mapRight/index.vue b/src/views/components/mapRight/index.vue
index 3593784..e107a2b 100644
--- a/src/views/components/mapRight/index.vue
+++ b/src/views/components/mapRight/index.vue
@@ -8,10 +8,12 @@
     </div>
     <div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
       <div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
-        <div class="main-name">
-          <img src="@/assets/images/location1.png" alt="">
-          <span>{{ item.name }}</span>
-        </div>
+        <el-tooltip :content="item.name" placement="top" effect="light" :disabled="tooltipDisabled">
+          <div class="main-name" @mouseenter="spanMouseenter($event)">
+            <img src="@/assets/images/location1.png" alt="">
+            <span>{{ item.name }}</span>
+          </div>
+        </el-tooltip>
         <div>{{ item.event }}</div>
         <div>{{ item.resolved }}</div>
         <div class="unsolved">{{ item.unsolved }}</div>
@@ -26,7 +28,8 @@ export default {
     return {
       lists:{
         height:0,
-      }
+      },
+      tooltipDisabled:false,
     }
   },
   props:{
@@ -40,6 +43,21 @@ export default {
     }
   },
   methods:{
+    spanMouseenter(e){
+      var span = e.target.querySelector("span");
+      var img = e.target.querySelector("img");
+      // console.log(e.target,'target');
+      // console.log(e.target.clientWidth,'clientWidth');
+      // console.log(span,'span');
+      // console.log(span.scrollWidth,'spanscrollWidth');
+      // console.log(img,'img');
+      // console.log(img.scrollWidth,'imgscrollWidth');
+      if(e.target.clientWidth < img.scrollWidth + span.scrollWidth) {
+        this.tooltipDisabled = false;
+      } else {
+        this.tooltipDisabled  = true;
+      }
+    }
   },
   mounted(){
     
@@ -116,6 +134,7 @@ export default {
       // min-width: 60px;
     }
     .main-name {
+      cursor: pointer;
       display: flex;
       align-items: center;
       span {
diff --git a/src/views/components/personagetrack/index.vue b/src/views/components/personagetrack/index.vue
index 2c425ed..8e2030c 100644
--- a/src/views/components/personagetrack/index.vue
+++ b/src/views/components/personagetrack/index.vue
@@ -3,7 +3,7 @@
     <div class="personage-track">
       <div class="track-title">
         <div class="titlebg"></div>
-        <span class="name">{{ person ? "李飞" : "执法一队1号车" }}</span>
+        <span class="name">{{ person ? personItem.userName : "执法一队1号车" }}</span>
         <span>{{ person ? "执法1队队员" : "苏A568974" }}</span>
       </div>
       <div class="track-content">
@@ -13,7 +13,7 @@
             <div class="content">
               {{ person ? "人员编号：" : "车辆编号："
               }}<span>{{
-                person ? "201128881111100" : "201128881111100"
+                person ? personItem.userId : "201128881111100"
               }}</span>
             </div>
           </div>
@@ -37,7 +37,7 @@
                 <div class="interval-select">
                   <div class="star-time">
                     <el-date-picker
-                      v-model="queryTime.startTime"
+                      v-model="queryTime.fromTime"
                       type="datetime"
                       align="right"
                       :clearable="false"
@@ -50,7 +50,7 @@
                   <div class="symbol"></div>
                   <div class="end-time">
                     <el-date-picker
-                      v-model="queryTime.endTime"
+                      v-model="queryTime.toTime"
                       type="datetime"
                       align="right"
                       :clearable="false"
@@ -102,15 +102,17 @@ import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
 import L from "leaflet";
 import "@/utils/lib/leaflet.ChineseTmsProviders.js";
 import "@/utils/lib/leaflet-tilelayer-colorizr.js";
+import { getLocInfoByImei } from "@/api/bigScreenApi"
 export default {
   components: { diaLog },
   data() {
     return {
       title: "人员行程轨迹",
       person: false,
+      personItem: null,
       queryTime: {
-        startTime: "",
-        endTime: "",
+        fromTime: "",
+        toTime: "",
       },
       heightStyle: {
         height: "500px",
@@ -121,10 +123,12 @@ export default {
     };
   },
   methods: {
-    open(person) {
+    open(person, item) {
       // console.log(person)
+      console.log(item);
       if (person == "person") {
         this.title = "人员行程轨迹";
+        this.personItem = item;
         this.person = true;
       } else {
         this.title = "车辆行程轨迹";
@@ -159,9 +163,9 @@ export default {
         })
         .addTo(this.globalMap);
 
-      // this.globalMap.createPane("mapLayer1");
-      // this.globalMap.getPane("mapLayer1").style.zIndex = 501;
-      // this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
+      this.globalMap.createPane("mapLayer1");
+      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
+      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
       this.addLayer1();
     },
     addLayer1() {
@@ -195,15 +199,35 @@ export default {
     },
     // 查询
     query(){
-      if(!this.queryTime.startTime) {
-        this.$modal.msgError( "请选择查询的起始时间");
-      } else if(!this.queryTime.endTime) {
-        this.$modal.msgError( "请选择查询的截止时间");
+      if(!this.queryTime.fromTime) {
+        this.$modal.msgError("请选择查询的起始时间");
+      } else if(!this.queryTime.toTime) {
+        this.$modal.msgError("请选择查询的截止时间");
       } else {
-        if(this.track) {
-          this.globalMap.removeLayer(this.track);
-        }
-        this.track
+        getLocInfoByImei({...this.queryTime,imei:this.personItem.imei}).then(res=>{
+          console.log(res,'行动轨迹');
+          if(res.code == 200 && res.data.result == '000') {
+            let arr = []
+            res.data.data.forEach(element => {
+              let arrTwo = [];
+              arrTwo[0] = element.latitude;
+              arrTwo[1] = element.longitude;
+              arr.push(arrTwo);
+            });
+            if(this.track) {
+              this.globalMap.removeLayer(this.track);
+            }
+            this.track = L.polyline(arr,{
+              pane:'mapLayer1',
+              // color: '#F894AF'
+              color: 'red'
+            }).addTo(this.globalMap)
+
+            this.globalMap.fitBounds(this.track.getBounds());
+          } else if(res.code == 200 && res.data.msg) {
+            this.$modal.msgError(res.data.msg);
+          }
+        })
       }
     },
   },