1

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

@@ -3,27 +3,27 @@
     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"/>
+    <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"},
@@ -228,7 +228,7 @@ export default {
   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}`];
@@ -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({
@@ -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
@@ -485,7 +487,7 @@ export default {
           this.cLocation,
           offsetLength, // 相机向前偏移距离
           this.cBearing,
-            {units: "meters"}
+          { units: "meters" }
         ).geometry.coordinates;
         map.flyTo({
           center: translatedPoint,
@@ -537,13 +539,13 @@ 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}),
+          new mapboxgl.NavigationControl({ showZoom: false }),
           "bottom-right"
         );
         this.refreshBounds();
@@ -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
@@ -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,7 +868,7 @@ 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,
@@ -890,7 +892,7 @@ export default {
               .addClassName("equipmentPopup");
             popupInstance = new EquipmentPopup({
               propsData: {
-                model: {equip_type: type, ...prop},
+                model: { equip_type: type, ...prop },
               },
             });
             popupInstance.$mount("#equipment_popup");
@@ -956,7 +958,7 @@ export default {
       }
       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]) {
@@ -1119,6 +1120,7 @@ export default {
               }
             } else {
               vehiclePopups[`popup${item.id}`]?.remove();
+              delete this.highLightCarTracks[item.id]
               delete this.selectVehicles[item.id]
             }
           }
@@ -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;
   }