地址栏token参数进入系统播放最近路口视频流

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)"
-  >
-    <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"/>
+  <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)">
+    <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" />
     <!--左右图表组件-->
-    <message-boxes
-        @delWarningPopup="delWarningPopup"
-        @addWarningPopup="addWarningPopup"
-        :show="boxesShow"
-    />
+    <message-boxes @delWarningPopup="delWarningPopup" @addWarningPopup="addWarningPopup" :show="boxesShow" />
     <!--图层切换按钮-->
-    <layers-switch
-        ref="switch"
-        :show="boxesShow"
-        @changeCheck="changeCheck"
-        @visibleChange="visibleChange"
-        :class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
-    />
+    <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
+      :class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
     <!--视频播放组件-->
-    <video-list
-        ref="videoList"
-        v-if="showCameras.length"
-        @updateCamera="updateCameraCPB"
-        @resetCamera="resetCamera"
-        @delVideo="deleteVideo"
-        :showCameras="showCameras"
-    />
+    <video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
+      @delVideo="deleteVideo" :showCameras="showCameras" />
     <!--路口详情-->
-    <cross-detail
-        v-if="dialogVisible.crossDetail"
-        @actionFinished="actionFinished"
-        dialogId="crossDetail"
-        :crossDetailData="crossDetailData"
-    />
+    <cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
+      :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'" />
   </div>
 </template>
 
@@ -71,7 +31,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";
@@ -92,7 +52,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);
@@ -101,11 +61,11 @@ const AlarmPopup = Vue.extend(alarmPopup)
 
 let pulsingDots = [];
 const canvasImages = [
-  {size: 250, color: "252, 1, 26"},
-  {size: 400, color: "255,235,59"},
-  {size: 400, color: "255, 141, 26"},
-  {size: 400, color: "227, 5, 5"},
-  {size: 400, color: "24, 144, 255"},
+  { size: 250, color: "252, 1, 26" },
+  { size: 400, color: "255,235,59" },
+  { size: 400, color: "255, 141, 26" },
+  { size: 400, color: "227, 5, 5" },
+  { size: 400, color: "24, 144, 255" },
 ];
 for (let i = 0; i < canvasImages.length; i++) {
   let size = canvasImages[i].size;
@@ -275,6 +235,9 @@ export default {
     }
     Promise.all(queue).then(() => {
       this.pageInit();
+      if (this.$store.state.mapInit.center) {
+        this.boxesShow = false
+      }
     });
   },
   methods: {
@@ -287,7 +250,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({
@@ -423,7 +386,7 @@ export default {
           this.cLocation,
           offsetLength, // 相机向前偏移距离
           this.cBearing,
-            {units: "meters"}
+          { units: "meters" }
         ).geometry.coordinates;
         map.flyTo({
           center: translatedPoint,
@@ -451,8 +414,8 @@ export default {
       map = this.$refs.wMap.initMap();
       window.map = map;
       map.on("style.load", () => {
-        map.on('dblclick',()=>{
-          console.log('center '+map.getCenter()+' pitch '+map.getPitch()+' bearing '+map.getBearing()+' zoom '+map.getZoom())
+        map.on('dblclick', () => {
+          console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
         })
         map.setFog({
           color: "#1d3244", // Lower atmosphere
@@ -476,13 +439,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();
@@ -593,7 +556,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) => {
@@ -607,7 +570,7 @@ export default {
                   type: "gltf",
                   units: "meters",
                   scale: 10,
-                    adjustment: {x: 0.5, y: 1, z: -0.5},
+                  adjustment: { x: 0.5, y: 1, z: -0.5 },
                   bbox: false,
                 },
                 (model) => {
@@ -637,14 +600,16 @@ export default {
     solveRadarDatas() {
       let milliFeatures = [];
       console.log("radars...", this.radarDatas);
+      let timer = setInterval(() => {
+        if (radarModelTypes[1] && radarModelTypes[2]) {
+          clearInterval(timer)
           for (let i = 0; i < this.radarDatas.length; i++) {
             //2 毫米波  other 激光雷达
             let model =
-            radarModelTypes[this.radarDatas[i].sourceEquipType]?.duplicate();
-        if (model) {
+              radarModelTypes[this.radarDatas[i].sourceEquipType].duplicate();
             model.setCoords(this.radarDatas[i].wkt.split(","));
             model.userData.data = this.radarDatas[i];
-          model.setRotation({x: 90, y: 360 - 90, z: 0});
+            model.setRotation({ x: 90, y: 360 - 90, z: 0 });
             window.tb.add(
               model,
               `radar${i}${this.radarDatas[i].sourceEquipType}`
@@ -664,9 +629,11 @@ export default {
               milliFeatures.push(turf.polygon(arcScope, this.radarDatas[i]));
             }
           }
-      }
           let milliGeo = turf.featureCollection(milliFeatures);
           mapTools.addOrUpdateMilliScope(map, milliGeo);
+        }
+      }, 1000)
+
     },
     loadRadars() {
       if (this.radarDatas.length) {
@@ -770,7 +737,7 @@ export default {
         } else {
           clearInterval(timer);
         }
-      }, 45-map.getZoom()*2);
+      }, 45 - map.getZoom() * 2);
       radarTimers.push(timer);
     },
     convertPxToMeter(meter, zoom, latitude) {
@@ -824,7 +791,7 @@ export default {
           //----------------------------------------
           if (!this.detetorsStatus) {
             // let wsUrl= ws_config.BASE_URL
-            let wsUrl= `ws://${window.wsHost}/holows/subscribe`
+            let wsUrl = `ws://${window.wsHost}/holows/subscribe`
             let ws1 = initWs({
               name: "callDetetorA",
               url: wsUrl,
@@ -943,11 +910,19 @@ export default {
       }, 100);
       this.layerShowRenders = true;
       let arr = this.$store.state.dicts.CrossInfo.map(item => {
-        [item.longitude,item.latitude] = item.location.split(",")
+        [item.longitude, item.latitude] = item.location.split(",")
         return item
       })
       this.crossGeo = convertPointsToGeo(arr)
       mapTools.addOrUpdateCross(map, this.crossGeo, this.firstCrossClick);
+      //--------如果从地址token参数进入系统 则加载中心点最近路口的视频流---------
+      if (this.$store.state.mapInit.center) {
+        let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
+        // 取最近点的crossId
+        let nearest = turf.nearestPoint(centerP, this.crossGeo);
+        this.firstCrossClick({ features: [nearest] })
+      }
+      //--------------------------------------------------------------------
       // 注册车辆实时ws
       let socket = initWs({
         name: "callCar",
@@ -972,7 +947,7 @@ export default {
           if (!this.detetors[item.detectorType]) {
             this.detetors[item.detectorType] = [];
           }
-          this.detetors[item.detectorType].push({...item, state: "0"});
+          this.detetors[item.detectorType].push({ ...item, state: "0" });
         }
         this.mapZoomEnd();
       });
@@ -1023,7 +998,7 @@ export default {
 
     // 交通事件热力图 & 点
     refreshEventLayer(type) {
-      eventInfo({dayType: type}).then((res) => {
+      eventInfo({ dayType: type }).then((res) => {
         // 热力图 - 如果还未创建 先创建图层 赋值
         if (this.currentCheck === "third") {
           mapTools.addOrUpdateEventHeat(map, res.content);
@@ -1085,12 +1060,6 @@ export default {
         layers: ["camera", "milli", "radar", "signal", "weather"],
       });
       if (features.length) {
-        console.log(
-            "fff",
-            features,
-            features[0].properties,
-            features[0].layer.id
-        );
         let prop = features[0].properties;
         let type = features[0].layer.id;
         if (prop.status == "1") {
@@ -1102,9 +1071,9 @@ export default {
               //信号机popup窗口高度过高 加大偏移防止超出屏幕
               distance = 80;
             }
-            var bearing = map.getBearing(); // 平移方向，0 表示正北方向
-            var options = {units: "meters"};
-            var translatedPoint = turf.destination(
+            let bearing = map.getBearing(); // 平移方向，0 表示正北方向
+            let options = { units: "meters" };
+            let translatedPoint = turf.destination(
               prop.wkt.split(","),
               distance,
               bearing,
@@ -1127,7 +1096,7 @@ export default {
               .addClassName("equipmentPopup");
             popupInstance = new EquipmentPopup({
               propsData: {
-                model: {equip_type: type, ...prop},
+                model: { equip_type: type, ...prop },
               },
             });
             popupInstance.$mount("#equipment_popup");
@@ -1196,7 +1165,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 });
     },
 
     // 转换轨迹数据为geo 并更新轨迹图层
@@ -1492,8 +1461,7 @@ export default {
         let ele = document.createElement("div");
         ele.style.color = "white";
         ele.innerText = option.picLicense;
-        ele.style.backgroundImage = `url('${
-            mapAssets.mapIcons[`license${option.licenseColor}`]
+        ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
           }')`;
         ele.style.backgroundSize = "100% 100%";
         ele.style.fontSize = "8px";
@@ -1505,7 +1473,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;
       }
@@ -1557,7 +1525,6 @@ export default {
             let stopLineAngle = stopLine.angle;
             // 停止线对应的转向数组 只有属于此数组的才视为合法转向灯
             let stopLineTurns = stopLine.turntype.replace(",3", "").split(",");
-            console.log("stopLineTurns", stopLineTurns);
             // 根据停止线 turntype 筛选合法灯组
             let newSingleDirTurnLightList = [];
             for (let i = 0; i < singleDirLight.turnList.length; i++) {
@@ -1577,7 +1544,6 @@ export default {
               });
             }
           }
-          console.log("w", lightResults);
           let targetWait = waitGeo.features.find((wait) => {
             return (
               wait.properties.lkid == crossLight.crossId &&
@@ -1590,7 +1556,7 @@ export default {
             });
             let color = currentWaiting?.color.replace("Flash", "") || "white";
             waitResultFeatures.push(
-                turf.polygon(targetWait.geometry.coordinates, {state: color})
+              turf.polygon(targetWait.geometry.coordinates, { state: color })
             );
           }
         }
@@ -1748,7 +1714,7 @@ export default {
     box-shadow: none !important;
   }
 
-  .mapboxgl-ctrl-group button + button {
+  .mapboxgl-ctrl-group button+button {
     border-top: unset !important;
   }