1

wj-manage-web/src/views/situation/index.vue

 <template>
   <div class="main situation" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中..."
-       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
     <track-switcher :detetors="detetorsArray" :boxShow="boxesShow" @timeChange="timeChange" v-show="trackSwitcherVis"
-                    @closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
-    <situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal"/>
-    <wMap :mapId="'situation-map'" ref="wMap"/>
+      @closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
+    <situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" />
+    <wMap :mapId="'situation-map'" ref="wMap" />
     <!--左右图表组件-->
     <message-boxes @playOverHistoryTrace="playOverHistoryTrace" @delWarningPopup="delWarningPopup"
-                   @addWarningPopup="addWarningPopup" :show="boxesShow"/>
+      @addWarningPopup="addWarningPopup" :show="boxesShow" />
     <!--图层切换按钮-->
     <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
-                   :class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
+      :class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
     <!--视频播放组件-->
     <video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
-                @delVideo="deleteVideo" :showCameras="showCameras"/>
+      @delVideo="deleteVideo" :showCameras="showCameras" />
     <!--路口详情-->
     <cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
-                  :crossDetailData="crossDetailData"/>
+      :crossDetailData="crossDetailData" />
     <!--底部交通事件趋势分析-->
-    <traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'"/>
+    <traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'" />
     <!--设备图例控制-->
-    <equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
+    <equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
     <!--单车超限历史轨迹视频-->
-    <sigalTraceVideos @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey"
-                      v-if="showHisVid"></sigalTraceVideos>
+    <sigalTraceVideos @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey" v-if="showHisVid">
+    </sigalTraceVideos>
   </div>
 </template>
 
@@ -35,7 +35,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
 import CrossDetail from "./crossDetail.vue";
 import VideoList from "./floatData/videoList.vue";
 import TrafficEventsTend from "./floatData/trafficEventsTend.vue";
-import {initWs} from "../../config/holo/websocket";
+import { initWs } from "../../config/holo/websocket";
 import dict from "../../config/holo/dictionary";
 import mapAssets from "../../config/holo/mapAssets";
 import * as mapTools from "../../utils/mapboxTools";
@@ -60,7 +60,7 @@ import {
   equip_radar,
   getDetetors,
 } from "../../dao/situation";
-import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt} from "../../utils/mapboxTools";
+import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools";
 
 const VehiclePopup = Vue.extend(vehicleDetail);
 const EquipmentPopup = Vue.extend(equipmentPopup);
@@ -69,7 +69,7 @@ const AlarmPopup = Vue.extend(alarmPopup)
 
 let pulsingDots = [];
 const canvasImages = [
-  {size: 250, color: "252, 1, 26"},
+  { size: 250, color: "252, 1, 26" },
   // {size: 400, color: "255,235,59"},
   // {size: 400, color: "255, 141, 26"},
   // {size: 400, color: "227, 5, 5"},
@@ -109,18 +109,18 @@ for (let i = 0; i < canvasImages.length; i++) {
   pulsingDots.push(pulsingDot);
 }
 let map,
-    equipPopup = null, // 设备弹窗
-    popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
-    vehiclePopups = {},
-    popupVises = {},
-    vehiclePopupInstances = {},
-    licenseLabel = {}, // 车牌号label
-    vehicleModels = {}, // 车辆model
-    vehicleModelTypes = {},
-    lastFrameTime = null,
-    noTrackMsg = null,
-    AlarmPopupIns = {},
-    trackTimer = null; // 轨迹心跳检测
+  equipPopup = null, // 设备弹窗
+  popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
+  vehiclePopups = {},
+  popupVises = {},
+  vehiclePopupInstances = {},
+  licenseLabel = {}, // 车牌号label
+  vehicleModels = {}, // 车辆model
+  vehicleModelTypes = {},
+  lastFrameTime = null,
+  noTrackMsg = null,
+  AlarmPopupIns = {},
+  trackTimer = null; // 轨迹心跳检测
 
 export default {
   mixins: [
@@ -216,19 +216,19 @@ export default {
     boxesShow(val) {
       if (val) {
         document
-            .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
-            .classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
+          .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
+          .classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
       } else {
         document
-            .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
-            .classList.add("mapboxgl-ctrl-bottom-right-hide-box");
+          .getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
+          .classList.add("mapboxgl-ctrl-bottom-right-hide-box");
       }
     },
   },
   created() {
   },
   mounted() {
-    this.$EventBus.$on("emitPopupClose", ({id, overRun}) => {
+    this.$EventBus.$on("emitPopupClose", ({ id, overRun }) => {
       console.log('eventbus event received...', id)
       vehiclePopups[`popup${id}`]?.remove();
       delete vehiclePopups[`popup${id}`];
@@ -261,9 +261,9 @@ export default {
     ];
     for (let item of needDicts) {
       queue.push(
-          this.$store.dispatch("QUERY_DICT", {
-            type: item,
-          })
+        this.$store.dispatch("QUERY_DICT", {
+          type: item,
+        })
       );
     }
     Promise.all(queue).then(() => {
@@ -296,7 +296,7 @@ export default {
       //   重度拥堵: 3,
       //   疑似事故: 4,
       // };
-      let resItem = Object.assign({}, item, {longitude: item.lng, latitude: item.lat, type: 3})
+      let resItem = Object.assign({}, item, { longitude: item.lng, latitude: item.lat, type: 3 })
       mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber);
       // 上报产生的告警 弹窗提醒 定时销毁
       let popup = new mapboxgl.Popup({
@@ -305,10 +305,10 @@ export default {
         offset: [0, 0],
       });
       popup
-          .setLngLat([item.lng, item.lat])
-          .setHTML('<div id="alarm_popup"></div>')
-          .addTo(map)
-          .addClassName("alarmPopup");
+        .setLngLat([item.lng, item.lat])
+        .setHTML('<div id="alarm_popup"></div>')
+        .addTo(map)
+        .addClassName("alarmPopup");
       new AlarmPopup({
         propsData: {
           model: item,
@@ -370,12 +370,12 @@ export default {
           this.closeWs('callCar1').then(() => {
             this.removeVehiclePopup()
             this.overCarsPoints = {}
+            this.highLightCarTracks = {}
             this.openRealTime()
           })
           this.backToRealTimer = null
         }, 1000 * 20)
         if (socket.ws.readyState === 1) {
-          this.showHisVid = true
           this.sockets.push(socket);
           delete this.historyWsToSend.urls
           let msg = JSON.stringify(this.historyWsToSend)
@@ -404,6 +404,8 @@ export default {
         // 开始请求视频
         this.sigalKey = sendMsg.globalId
         this.hisUrls = sendMsg.urls || []
+        // this.hisUrls = ['videos/1.mp4']
+        this.showHisVid = true
         this.$nextTick(() => {
           if (this.hisUrls.length) {
             this.loading = true
@@ -425,9 +427,9 @@ export default {
       for (let item of equips) {
         if (map.getLayer(item.label)) {
           map.setLayoutProperty(
-              item.label,
-              "visibility",
-              item.check ? "visible" : "none"
+            item.label,
+            "visibility",
+            item.check ? "visible" : "none"
           );
         }
       }
@@ -482,10 +484,10 @@ export default {
           offsetLength = offsetLength + Number(cameraItem.installHeight);
         }
         let translatedPoint = turf.destination(
-            this.cLocation,
-            offsetLength, // 相机向前偏移距离
-            this.cBearing,
-            {units: "meters"}
+          this.cLocation,
+          offsetLength, // 相机向前偏移距离
+          this.cBearing,
+          { units: "meters" }
         ).geometry.coordinates;
         map.flyTo({
           center: translatedPoint,
@@ -537,14 +539,14 @@ export default {
         }
         for (let i = 0; i < pulsingDots.length; i++) {
           if (map && !map.hasImage(`pulsingDot${i}`))
-            map.addImage(`pulsingDot${i}`, pulsingDots[i], {pixelRatio: 2});
+            map.addImage(`pulsingDot${i}`, pulsingDots[i], { pixelRatio: 2 });
         }
         // 添加map icons图片资源 ---end
         this.loading = false;
         this.mixDraw(map);
         map.addControl(
-            new mapboxgl.NavigationControl({showZoom: false}),
-            "bottom-right"
+          new mapboxgl.NavigationControl({ showZoom: false }),
+          "bottom-right"
         );
         this.refreshBounds();
         // 快捷键
@@ -554,24 +556,24 @@ export default {
           if (event.altKey && event.keyCode === 82) {
             this.rulerStatus = !this.rulerStatus;
             this.rulerStatus
-                ? mapTools.addCalibrationTail(map)
-                : this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
+              ? mapTools.addCalibrationTail(map)
+              : this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
           }
           // alt + x 显示隐藏绘制工具
           if (event.altKey && event.keyCode === 88) {
             this.boxesShow = false;
             if (
-                document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
-                    .style.display === "none" ||
-                document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
-                    .style.display === ""
+              document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
+                .style.display === "none" ||
+              document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
+                .style.display === ""
             ) {
               document.getElementsByClassName(
-                  "mapboxgl-ctrl-top-right"
+                "mapboxgl-ctrl-top-right"
               )[0].style.display = "unset";
             } else {
               document.getElementsByClassName(
-                  "mapboxgl-ctrl-top-right"
+                "mapboxgl-ctrl-top-right"
               )[0].style.display = "none";
             }
           }
@@ -654,7 +656,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 scale: 0.8,
-                adjustment: {x: 0.5, y: 1, z: -0.5},
+                adjustment: { x: 0.5, y: 1, z: -0.5 },
                 bbox: true,
               };
               window.tb.loadObj(options, (model) => {
@@ -751,7 +753,7 @@ export default {
         let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
         // 取最近点的crossId
         let nearest = turf.nearestPoint(centerP, this.crossGeo);
-        this.firstCrossClick({features: [nearest]})
+        this.firstCrossClick({ features: [nearest] })
       }
       //--------------------------------------------------------------------
       // 注册车辆实时ws
@@ -782,10 +784,10 @@ export default {
         offset: [0, -30],
       });
       eventPopup
-          .setLngLat([data.lng, data.lat])
-          .setHTML('<div id="event_popup"></div>')
-          .addTo(map)
-          .addClassName("eventPopup");
+        .setLngLat([data.lng, data.lat])
+        .setHTML('<div id="event_popup"></div>')
+        .addTo(map)
+        .addClassName("eventPopup");
       new EventPopup({
         propsData: {
           model: data,
@@ -794,7 +796,7 @@ export default {
     },
     // 交通事件热力图 & 点
     refreshEventLayer(type) {
-      eventInfo({dayType: type}).then((res) => {
+      eventInfo({ dayType: type }).then((res) => {
         // 热力图 - 如果还未创建 先创建图层 赋值
         if (this.currentCheck === "third") {
           mapTools.addOrUpdateEventHeat(map, res.content);
@@ -866,12 +868,12 @@ export default {
               distance = 80;
             }
             let bearing = map.getBearing(); // 平移方向，0 表示正北方向
-            let options = {units: "meters"};
+            let options = { units: "meters" };
             let translatedPoint = turf.destination(
-                prop.wkt.split(","),
-                distance,
-                bearing,
-                options
+              prop.wkt.split(","),
+              distance,
+              bearing,
+              options
             );
             // 将地图中心点设置为平移后的点
             map.flyTo({
@@ -883,14 +885,14 @@ export default {
               offset: [0, -20],
             });
             equipPopup
-                .setLngLat(prop.wkt.split(","))
-                .setHTML('<div id="equipment_popup"></div>')
-                .addTo(map)
-                .setMaxWidth("500")
-                .addClassName("equipmentPopup");
+              .setLngLat(prop.wkt.split(","))
+              .setHTML('<div id="equipment_popup"></div>')
+              .addTo(map)
+              .setMaxWidth("500")
+              .addClassName("equipmentPopup");
             popupInstance = new EquipmentPopup({
               propsData: {
-                model: {equip_type: type, ...prop},
+                model: { equip_type: type, ...prop },
               },
             });
             popupInstance.$mount("#equipment_popup");
@@ -917,12 +919,12 @@ export default {
         this.$refs.videoList?.destroyAll();
         this.hideTb();
         this.closeAllWs()
-            .then(() => {
-              this.hideTb();
-              this[`switch${checkItem.label}`]();
-            })
-            .catch(() => {
-            });
+          .then(() => {
+            this.hideTb();
+            this[`switch${checkItem.label}`]();
+          })
+          .catch(() => {
+          });
       } else {
         if (beforeLabel === "fourth") {
           equipPopup?.remove();
@@ -948,15 +950,15 @@ export default {
               return item.code == options.originalColor;
             });
             let realColor = colorDesc
-                ? dict.colorMatch[colorDesc.name]
-                : "#fff";
+              ? dict.colorMatch[colorDesc.name]
+              : "#fff";
             child.material.color.set(realColor);
           }
         });
       }
       model.setCoords([options.longitude, options.latitude]);
       model.userData.data = options;
-      model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
+      model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
     },
     // 更新超限车辆高亮波纹底盘
     updateOverCarLnglat() {
@@ -1000,14 +1002,13 @@ export default {
     // 车辆详情弹窗内容
     addCheckDetail(data) {
       console.log('添加弹窗...');
-
       if (vehiclePopups[`popup${data.id}`]) {
         if (popupVises[`popup${data.id}`]) {
           vehiclePopups[`popup${data.id}`].setLngLat([
             data.longitude,
             data.latitude,
           ]);
-          vehiclePopupInstances[`popup${data.id}`].$props.model = data;
+          vehiclePopupInstances[`popup${data.id}`] && (vehiclePopupInstances[`popup${data.id}`].$props.model = data)
         }
         // 更新选中车辆的轨迹数据
         if (this.highLightCarTracks[data.id]) {
@@ -1030,10 +1031,10 @@ export default {
           offset: [0, -20],
         });
         vehiclePopups[`popup${data.id}`]
-            .setLngLat([data.longitude, data.latitude])
-            .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
-            .addTo(map)
-            .addClassName("vehicleDetailPopup");
+          .setLngLat([data.longitude, data.latitude])
+          .setHTML(`<div id="vehicle_popup${data.id}"></div>`)
+          .addTo(map)
+          .addClassName("vehicleDetailPopup");
         popupVises[`popup${data.id}`] = true;
         vehiclePopupInstances[`popup${data.id}`] = new VehiclePopup({
           propsData: {
@@ -1041,7 +1042,7 @@ export default {
           },
         });
         vehiclePopupInstances[`popup${data.id}`].$mount(
-            `#vehicle_popup${data.id}`
+          `#vehicle_popup${data.id}`
         );
       }
     },
@@ -1103,7 +1104,7 @@ export default {
           } else {
             this.clearLicense();
             this.removeLayers(
-                "lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
+              "lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
             );
             mapTools.addOrUpdateVehicle(map, msg);
             map.on("click", "vehicle", this.vehicleCircleClick);
@@ -1119,6 +1120,7 @@ export default {
               }
             } else {
               vehiclePopups[`popup${item.id}`]?.remove();
+              delete this.highLightCarTracks[item.id]
               delete this.selectVehicles[item.id]
             }
           }
@@ -1168,8 +1170,8 @@ export default {
           if (zoom > 18) {
             // 新增
             if (
-                item.dill === "add" ||
-                (item.dill === "com" && !vehicleModels[item.id])
+              item.dill === "add" ||
+              (item.dill === "com" && !vehicleModels[item.id])
             ) {
               this.addVehicleModels(item);
               if (this.licenseState) this.addVehicleLicenses(item);
@@ -1190,8 +1192,8 @@ export default {
                   if (item.dill === "com") {
                     // 车型中途变化 清除并重新创建
                     if (
-                        vehicleModels[key].userData.data.originalType !==
-                        item.originalType
+                      vehicleModels[key].userData.data.originalType !==
+                      item.originalType
                     ) {
                       if (vehicleModels[key]) {
                         window.tb.clear(item.id, true);
@@ -1207,8 +1209,8 @@ export default {
                       if (licenseLabel[`license${item.id}`]) {
                         // 如果车牌model存在且未改变 则setCoords
                         if (
-                            licenseLabel[`license${item.id}`].userData.data
-                                .picLicense == item.picLicense
+                          licenseLabel[`license${item.id}`].userData.data
+                            .picLicense == item.picLicense
                         ) {
                           licenseLabel[`license${item.id}`].setCoords([
                             item.longitude,
@@ -1277,9 +1279,9 @@ export default {
         let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
         this.setModel(model, option, true);
         model.addEventListener(
-            "SelectedChange",
-            this.onSelectedChangeVehicle,
-            false
+          "SelectedChange",
+          this.onSelectedChangeVehicle,
+          false
         );
         vehicleModels[option.id] = model;
         window.tb.add(model, option.id);
@@ -1291,7 +1293,7 @@ export default {
         ele.style.color = "white";
         ele.innerText = option.picLicense;
         ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
-        }')`;
+          }')`;
         ele.style.backgroundSize = "100% 100%";
         ele.style.fontSize = "8px";
         ele.style.textAlign = "center";
@@ -1302,7 +1304,7 @@ export default {
           topMargin: 2,
         });
         license.setCoords([option.longitude, option.latitude, 4]);
-        license.userData.data = {picLicense: option.picLicense};
+        license.userData.data = { picLicense: option.picLicense };
         window.tb.add(license, `license${option.id}`);
         licenseLabel[`license${option.id}`] = license;
       }
@@ -1475,7 +1477,7 @@ export default {
     box-shadow: none !important;
   }
 
-  .mapboxgl-ctrl-group button + button {
+  .mapboxgl-ctrl-group button+button {
     border-top: unset !important;
   }