From b29b5cfefe97f8b22ae6ef88a71a6de3707581ca Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Thu, 12 Sep 2024 16:03:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BD=BD=E7=9B=91=E6=8E=A7=E5=8F=8A?=
 =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E3=80=81=E4=BA=8B=E4=BB=B6=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bigScreenApi/eventApi.js              |  34 +++
 src/assets/styles/leaflet.scss                |  50 +++-
 src/views/bigScreen/map/index.vue             | 262 ++++++------------
 src/views/components/carVideo/index.vue       |  77 +++++
 src/views/components/personagetrack/index.vue | 123 +++++---
 src/views/components/video/index.vue          |   9 -
 6 files changed, 310 insertions(+), 245 deletions(-)
 create mode 100644 src/views/components/carVideo/index.vue

diff --git a/src/api/bigScreenApi/eventApi.js b/src/api/bigScreenApi/eventApi.js
index 536096e..31566b8 100644
--- a/src/api/bigScreenApi/eventApi.js
+++ b/src/api/bigScreenApi/eventApi.js
@@ -92,4 +92,38 @@ export function statregion(params){
     },
     params
   })
+}
+
+// 车载监控视频地址获取
+export function previewURLs(params){
+  return request({
+    url: "/videoSpnl/previewURLs",
+    method:'get',
+    headers:{
+      isToken:false,
+    },
+    params
+  })
+}
+
+// 车辆行程轨迹获取
+export function carTrack(params) {
+  return request({
+    url: "/event/workboatlog/loginfo",
+    method:'get',
+    headers:{
+      isToken:false,
+    },
+    params
+  })
+}
+
+
+// 今日巡查事件
+export function listpatrol(params) {
+  return request({
+    url: "/event/summary/listpatrol",
+    method:'get',
+    params
+  })
 }
\ No newline at end of file
diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss
index b702025..808977c 100644
--- a/src/assets/styles/leaflet.scss
+++ b/src/assets/styles/leaflet.scss
@@ -125,6 +125,7 @@
   background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
+  overflow: hidden;
 
   .person-title {
     padding: 9px 10px 0 16px;
@@ -231,6 +232,7 @@
 .car-popup {
   width: 262px;
   height: 138px;
+  overflow: hidden;
   background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
@@ -296,21 +298,43 @@
       }
     }
 
-    .btn {
-      margin-top: 19px;
-      background-image: url('../images/popup/icon1btn.png');
-      background-size: 100% 100%;
-      width: 100%;
-      height: 30px;
+    // .btn {
+    //   margin-top: 19px;
+    //   background-image: url('../images/popup/icon1btn.png');
+    //   background-size: 100% 100%;
+    //   width: 100%;
+    //   height: 30px;
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   font-size: 14px;
+    //   font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    //   font-weight: 400;
+    //   color: #D3EEF2;
+    //   line-height: 20px;
+    //   cursor: pointer;
+    // }
+    .btns {
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #D3EEF2;
-      line-height: 20px;
-      cursor: pointer;
+      justify-content: space-between;
+      margin-top: 19px;
+
+      .btn {
+        background-image: url("../images/popup/icon2btn.png");
+        background-size: 100% 100%;
+        width: 91px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
     }
   }
 }
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 5f246f8..2482fe5 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-09-02 19:12:35
+ * @LastEditTime: 2024-09-12 15:45:34
 -->
 <template>
   <div class="map-main">
@@ -186,7 +186,11 @@
               <div class="name">{{carInfo.info.carName}}</div>
               <div class="position">{{carInfo.info.carCode}}</div>
             </div>
-            <div class="btn" @click="travelPath()">行程轨迹</div>
+            <!-- <div class="btn" @click="travelPath()">行程轨迹</div> -->
+            <div class="btns">
+              <div class="btn" @click="travelPath()">行程轨迹</div>
+              <div class="btn" @click="watchCarVideo">车载视频</div>
+            </div>
           </div>
         </div>
       </el-amap-info-window>
@@ -433,7 +437,10 @@
     <!-- 事件指派人员 -->
     <crew-assign ref="crewAssign"></crew-assign>
     <!-- <video-wall ref="videoWall"></video-wall> -->
+    <!-- 监控视频上墙 -->
     <alone-video ref="aloneVideo"></alone-video>
+    <!-- 车载视频上墙 -->
+    <car-video ref="carVideo"></car-video>
     <!-- 商铺详情 -->
     <shop ref="shop" width="50%" title="商铺详情查看" />
     <!-- 新增事件 -->
@@ -471,14 +478,14 @@ import point from "@/utils/mapJson/point.json";
 
 import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
 // 一级网格
-import OneGJ02 from "@/utils/mapJson/1GJ02.json";
-import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
-import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
-import FourGJ02 from "@/utils/mapJson/4GJ02.json";
-import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
-import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
+// import OneGJ02 from "@/utils/mapJson/1GJ02.json";
+// import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
+// import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
+// import FourGJ02 from "@/utils/mapJson/4GJ02.json";
+// import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
+// import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
 // 二级网格
-import gridding from "@/utils/mapJson/中队小网格.json"
+// import gridding from "@/utils/mapJson/中队小网格.json"
 
 // import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
 // import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
@@ -491,12 +498,13 @@ import personageTrack from "../../components/personagetrack/index.vue";
 import personageTask from "../../components/personageTask/index.vue";
 import crewAssign from "../../components/crewAssign/index.vue";
 import videoWall from "../../components/videoWall/index.vue";
+import carVideo from "../../components/carVideo/index.vue";
 import shop from "../../components/shop/index.vue";
 import aloneVideo from "../../components/video/index.vue"
 import newEvent from "../../components/newEvent/index.vue"
 // import jiangningwangge from "@/utils/data/江宁开发区网格.json";
 
-import weilan from "@/utils/data/围栏1.json";
+// import weilan from "@/utils/data/围栏1.json";
 import { getCenter } from "@/utils/amap"
 import {
   regionalsettings,
@@ -514,11 +522,15 @@ import {
   getUserByImei,
   dwgjList
 } from "@/api/bigScreenApi";
+import {
+  previewURLs,
+  listpatrol
+} from "@/api/bigScreenApi/eventApi.js"
 import {
   robotLogin,
   ViewListPage
 } from "@/api/bigScreenApi/robot.js"
-import { setRobotToken } from '@/utils/auth'
+// import { setRobotToken } from '@/utils/auth'
 import flvjs from "flv.js";
 import axios from "axios";
 
@@ -533,7 +545,8 @@ export default {
     shop,
     aloneVideo,
     newEvent,
-    personageTask
+    personageTask,
+    carVideo
   },
   data() {
     return {
@@ -654,149 +667,7 @@ export default {
       this.layers.text = new AMap.OverlayGroup();             // 一级网格文本
       this.layers.text1 = new AMap.OverlayGroup();            // 二级网格文本
       this.layers.markers = new AMap.OverlayGroup();            // 监控视频markers
-      // this.layers.layer2.setzIndex(10);
-      // this.layers.layer3.setzIndex(9);
       this.$nextTick(() => {
-        // var geojson1 = new AMap.Polygon({
-        //   path:OneGJ02.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-        // var text1 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: OneGJ02.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
-        // var geojson2 = new AMap.Polygon({
-        //   path:TwoGJ02.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-        // var text2 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: TwoGJ02.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
-        // var geojson3 = new AMap.Polygon({
-        //   path:ThreeGJ02.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-        // var text3 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: ThreeGJ02.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
-        // var geojson4 = new AMap.Polygon({
-        //   path:FourGJ02.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-
-        // var text4 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: FourGJ02.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
-        // var geojson5 = new AMap.Polygon({
-        //   path:kaifaqu.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-        // var text5 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: kaifaqu.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
-
-        // var geojson6 = new AMap.Polygon({
-        //   path:ruanjianyuan.features[0].geometry.coordinates[0][0],
-        //   strokeColor: '#00C5EC',
-        //   fillColor: '#00AEFF',
-        //   fillOpacity: 0.4,
-        //   // fillOpacity: 0.3,
-        //   editable:false,
-        //   visible:true,
-        // })
-        // var text6 = new AMap.Text({
-        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
-        //   position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
-        //   anchor: 'bottom-center',
-        //   text: ruanjianyuan.features[0].properties.NAME,
-        //   style:{
-        //     'font-size': '16px',
-        //     'font-weight': 'bold',
-        //     'text-align': 'center',
-        //     'color': '#00AEFF',
-        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
-        //     'white-space': 'nowrap',
-        //   },
-        // });
 
         levelQywg({level:1}).then(res=>{
           let W = [];
@@ -838,21 +709,6 @@ export default {
           this.wanggeData = res.data;
         })
 
-
-
-
-        // this.layers.layer.addOverlay(geojson1);
-        // this.layers.text.addOverlay(text1);
-        // this.layers.layer.addOverlay(geojson2);
-        // this.layers.text.addOverlay(text2);
-        // this.layers.layer.addOverlay(geojson3);
-        // this.layers.text.addOverlay(text3);
-        // this.layers.layer.addOverlay(geojson4);
-        // this.layers.text.addOverlay(text4);
-        // this.layers.layer.addOverlay(geojson5);
-        // this.layers.text.addOverlay(text5);
-        // this.layers.layer.addOverlay(geojson6);
-        // this.layers.text.addOverlay(text6);
         this.map.add(this.layers.layer);
         this.map.add(this.layers.text);
         map.setFitView();
@@ -1131,18 +987,16 @@ export default {
         //     this.mapLoading = false;
         //   }
         // })
-        let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
-        ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
+        listpatrol({current:1,size:1000}).then(res=>{
           this.mapLoading = false;
           if(res.code == 200) {
             this.videoPoint = [];
-            res.result.records.forEach((element)=>{
+            res.data.records.forEach((element)=>{
               let obj = {position:[]};
               let location = element.location?.split(',');
 
               // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
-              
-              if(location) {
+              if(location.length > 1) {
                 obj.position[0] = location[0];
                 obj.position[1] = location[1];
                 // let lonLat = this.wgs84togcj02(location[0],location[1]);
@@ -1173,6 +1027,48 @@ export default {
             })
           }
         })
+        // let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
+        // ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
+        //   this.mapLoading = false;
+        //   if(res.code == 200) {
+        //     this.videoPoint = [];
+        //     res.result.records.forEach((element)=>{
+        //       let obj = {position:[]};
+        //       let location = element.location?.split(',');
+
+        //       // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              
+        //       if(location) {
+        //         obj.position[0] = location[0];
+        //         obj.position[1] = location[1];
+        //         // let lonLat = this.wgs84togcj02(location[0],location[1]);
+        //         // obj.position[0] = lonLat ? lonLat[0] : 0;
+        //         // obj.position[1] = lonLat ? lonLat[1] : 0;
+                
+        //         obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
+        //         // obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0)
+        //       } else {
+        //         obj.position[0] = 0;
+        //         obj.position[1] = 0;
+        //       }
+
+        //       obj.imgSrc = ico2;
+        //       obj.info = element
+        //       // this.markers.push(obj)
+        //       this.videoPoint.push(obj)
+        //     })
+        //     this.count = this.videoPoint.length;
+        //     AMap.plugin(['AMap.MarkerCluster'],()=>{
+        //       this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+        //         gridSize: 60, // 设置网格像素大小
+        //         maxZoom: 17,
+        //         styles: sts,
+        //         // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+        //         renderMarker: this._eventMarker, // 自定义非聚合点样式
+        //       })
+        //     })
+        //   }
+        // })
       } else if(id == 3){
         // point.features.forEach((element)=>{
         //   if (element.properties.name == "执法车辆") {
@@ -1300,15 +1196,6 @@ export default {
               renderMarker: this._DrenderMarker, // 自定义非聚合点样式
             })
           })
-          // res.rows.forEach(element => {
-          //   let obj = {position:[]};
-          //   obj.position[0] = element.longitude;
-          //   obj.position[1] = element.latitude;
-          //   obj.imgSrc = ico6;
-          //   obj.info = element;
-          //   this.markers.push(obj)
-          //   this.mapLoading = false;
-          // })
         }).catch(err=>{
           this.mapLoading = false;
         })
@@ -1873,9 +1760,16 @@ export default {
       if(this.actionMap == 1) {
         this.$refs.personageTrack.open("person", this.personInfo.info);
       } else if(this.actionMap == 3) {
-        this.$refs.personageTrack.open("car", this.car.info);
+        this.$refs.personageTrack.open("car", this.carInfo.info);
       }
     },
+    // 车载监控视频
+    watchCarVideo(){
+      previewURLs({cameraIndexCode:'5ab6cc3745e147918b2a96c2604ecdbb',transmode:1,protocol:'hls',streamType:1}).then(res=>{
+        let carUrl = JSON.parse(res.data);
+        this.$refs.carVideo.open(carUrl.data.url);
+      })
+    },
     // 子组件的名称点击事件
     divClick(lightedPolygonId){
       if(this.action == 1) {
diff --git a/src/views/components/carVideo/index.vue b/src/views/components/carVideo/index.vue
new file mode 100644
index 0000000..27d8a4f
--- /dev/null
+++ b/src/views/components/carVideo/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <dia-log ref="dialog4" width="45%" title="实时监控" @close="Close">
+    <div class="video-main">
+      <!-- muted：是否静音 -->
+      <video
+        id="video"
+        preload="auto"
+        controls
+        autoplay
+        class="video-js vjs-default-skin vjs-big-play-centered"
+        style="width: 100%; height: 100%; object-fit: fill"
+      >
+        <source :src="videoUrl" type="application/x-mpegURL" />
+      </video>
+    </div>
+  </dia-log>
+</template>
+<script>
+import diaLog from "../../components/dialog/index.vue"
+import Videojs from "video.js"
+import "videojs-contrib-hls";
+// 引入中文json文件
+import video_zhCN from 'video.js/dist/lang/zh-CN.json'
+// 设置中文
+Videojs.addLanguage('zh-CN', video_zhCN)
+export default {
+  components:{diaLog},
+  data() {
+    return {
+      videoUrl: "",
+      videoPlayer: null,
+    }
+  },
+  props:{},
+  methods:{
+    open(url) {
+      this.$refs.dialog4.open('3');
+      this.initVideo();
+      this.videoUrl = url;
+    },
+    Close() {
+      // this.videoPlayer.dispose();
+      if(this.videoPlayer){
+        this.videoPlayer.dispose();
+      }
+    },
+    initVideo(){
+      this.$nextTick(() => {
+        this.videoPlayer = Videojs(`video`,{
+          bigPlayButton: true,                    // 显示大按钮
+          textTrackDisplay: false,
+          posterImage: false,
+          errorDisplay: false,
+          language: 'zh-CN',
+          controls: true,
+          height: '100%',
+          hls: {
+            withCredentials: true,
+          },
+        })
+      });
+    },
+  },
+  destroyed() {
+    if(this.videoPlayer){
+      this.videoPlayer.dispose();
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.video-main {
+  width: 100%;
+  height: 500px;
+  padding: 0 40px 0 0;
+}
+</style>
diff --git a/src/views/components/personagetrack/index.vue b/src/views/components/personagetrack/index.vue
index 3f8cd00..64df658 100644
--- a/src/views/components/personagetrack/index.vue
+++ b/src/views/components/personagetrack/index.vue
@@ -3,8 +3,8 @@
     <div class="personage-track">
       <div class="track-title">
         <div class="titlebg"></div>
-        <span class="name">{{ person ? personItem.userName : "执法一队1号车" }}</span>
-        <span>{{ person ? "执法1队队员" : "苏A568974" }}</span>
+        <span class="name">{{ person ? personItem.userName : carItem.carName }}</span>
+        <span>{{ person ? "执法1队队员" : carItem.carCode }}</span>
       </div>
       <div class="track-content">
         <div class="oneList">
@@ -127,6 +127,9 @@ import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
 // import "@/utils/lib/leaflet-tilelayer-colorizr.js";
 import { getLocInfoByImei } from "@/api/bigScreenApi"
 import { getCenter } from "@/utils/amap"
+import {
+  carTrack,
+} from "@/api/bigScreenApi/eventApi.js"
 export default {
   components: { diaLog },
   data() {
@@ -134,6 +137,10 @@ export default {
       title: "人员行程轨迹",
       person: false,
       personItem: null,
+      carItem: {
+        carName:"",
+        carCode:""
+      },
       queryTime: {
         fromTime: "",
         toTime: "",
@@ -150,7 +157,6 @@ export default {
         fillColor: 'rgba(64,175,255,0.4)'  // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
       },
       jiangninggeo:jiangninggeo,
-
       globalMap: null,
       track: null,
       mapLayer1: null,
@@ -336,6 +342,10 @@ export default {
         this.queryTime.toTime = this.getCurrentTime(1);
         this.query();
       } else {
+        this.carItem = item;
+        console.log(this.carItem);
+        this.queryTime.fromTime = this.getCurrentTime();
+        this.queryTime.toTime = this.getCurrentTime(1);
         this.title = "车辆行程轨迹";
         this.person = false;
       }
@@ -412,43 +422,78 @@ export default {
         this.$modal.msgError("请选择查询的截止时间");
       } else {
         this.loading = true;
-        getLocInfoByImei({...this.queryTime,imei:this.personItem.imei}).then(res=>{
-          console.log(res,'行动轨迹');
-          this.loading = false;
-          if(res.code == 200 && res.data.result == '000') {
-            let arr = []
-            res.data.data.forEach(element => {
-              let arrTwo = [];
-              arrTwo[1] = element.latitude;
-              arrTwo[0] = element.longitude;
-              arr.push(arrTwo);
-            });
-            // if(this.track) {
-            //   this.globalMap.removeLayer(this.track);
-            // }
-            if(this.map.getAllOverlays('polyline')) {
-              this.map.remove(this.map.getAllOverlays('polyline'));
+        if(this.person){
+          getLocInfoByImei({...this.queryTime,imei:this.personItem.imei}).then(res=>{
+            this.loading = false;
+            if(res.code == 200 && res.data.result == '000') {
+              let arr = []
+              res.data.data.forEach(element => {
+                let arrTwo = [];
+                arrTwo[1] = element.latitude;
+                arrTwo[0] = element.longitude;
+                arr.push(arrTwo);
+              });
+              // if(this.track) {
+              //   this.globalMap.removeLayer(this.track);
+              // }
+              if(this.map.getAllOverlays('polyline')) {
+                this.map.remove(this.map.getAllOverlays('polyline'));
+              }
+              this.track = new AMap.Polyline({
+                path: arr,
+                strokeWeight: 6,
+                strokeColor: '#F44444',
+                strokeOpacity: 1,
+                showDir: true,
+              })
+              this.map.add(this.track);
+              const mapInstance = this.$refs.personMap.$$getInstance();
+              // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
+              mapInstance.setFitView(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);
             }
-            this.track = new AMap.Polyline({
-              path: arr,
-              strokeColor: '#F44444',
-              strokeOpacity: 1,
-            })
-            this.map.add(this.track);
-            const mapInstance = this.$refs.personMap.$$getInstance();
-            // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
-            mapInstance.setFitView(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);
-          }
-        })
+          })
+        } else {
+          carTrack({startTime:this.queryTime.fromTime,endTime:this.queryTime.toTime,deviceIndexCode:"b91155244ea245708ed8258dfcc4509a"}).then(res=>{
+            // console.log(res,"经纬度");
+            this.loading = false;
+            if(res.code == 200) {
+              let arr = []
+              res.data.records.forEach(element => {
+                let arrTwo = [];
+                arrTwo[1] = element.latitude;
+                arrTwo[0] = element.longitude;
+                arr.push(arrTwo);
+              });
+              // if(this.track) {
+              //   this.globalMap.removeLayer(this.track);
+              // }
+              if(this.map.getAllOverlays('polyline')) {
+                this.map.remove(this.map.getAllOverlays('polyline'));
+              }
+              this.track = new AMap.Polyline({
+                path: arr,
+                strokeColor: '#F44444',
+                strokeOpacity: 1,
+                showDir: true,
+              })
+              this.map.add(this.track);
+              const mapInstance = this.$refs.personMap.$$getInstance();
+              // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
+              mapInstance.setFitView(this.track);
+            }
+          }).catch(err => {
+            this.loading = false;
+          })
+        }
       }
     },
     // 获取当前时间
diff --git a/src/views/components/video/index.vue b/src/views/components/video/index.vue
index 53e0240..27d8a4f 100644
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -1,11 +1,3 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: JC9527
- * @Date: 2023-12-26 13:59:07
- * @LastEditors: JC9527
- * @LastEditTime: 2023-12-28 14:46:59
--->
 <template>
   <dia-log ref="dialog4" width="45%" title="实时监控" @close="Close">
     <div class="video-main">
@@ -71,7 +63,6 @@ export default {
   },
   destroyed() {
     if(this.videoPlayer){
-      console.log("1111111111111111111111");
       this.videoPlayer.dispose();
     }
   }