济南bug修改统一提交 灯态socket数据结构及展示逻辑修改

wj-manage-web/public/stopLines.json

+{
+    "code": 200,
+    "content": [
+        {
+            "lkid": "13NF80B5QN0",
+            "ldid": "13NED0B5Q9013NF80B5QN00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.08578147,36.641840211,140.25],[117.085795887,36.641811561,140.25],[117.085809801,36.641786004,140.25],[117.085825559,36.641756681,140.25]]}",
+            "angle": 152.17,
+            "dirtype": "6"
+        },
+        {
+            "lkid": "13NGH0B5RC0",
+            "ldid": "13NF80B5QN013NGH0B5RC00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089696322,36.643939476,130.339797974],[117.089708559,36.643916476,130.339797974],[117.089720462,36.643893072,130.289093018],[117.089732699,36.643869668,130.289093018],[117.089743428,36.643846667,130.199203491]]}",
+            "angle": 153.09,
+            "dirtype": "6"
+        },
+        {
+            "lkid": "13NF80B5QN0",
+            "ldid": "13NDG0B5RI013NF80B5QN00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.085816674,36.642064573,139.281295776],[117.085780799,36.642044935,139.421905518]]}",
+            "angle": 241.3,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NF80B5QN0",
+            "ldid": "13NDT0B5Q9013NF80B5QN00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.085989174,36.641797975,139.468795776],[117.08601784,36.641816538,139.328094482],[117.086045332,36.641834562,139.230499268],[117.086060923,36.641844785,139.179702759]]}",
+            "angle": 56.88,
+            "dirtype": "4"
+        },
+        {
+            "lkid": "13NDG0B5RI0",
+            "ldid": "13NF80B5QN013NDG0B5RI00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.086327299,36.644873481,132.488296509],[117.086359989,36.644863931,132.539093018],[117.086387146,36.644855054,132.531295776]]}",
+            "angle": 107.11,
+            "dirtype": "5"
+        },
+        {
+            "lkid": "13NF80B5QN0",
+            "ldid": "13NGH0B5RC013NF80B5QN00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.086044997,36.642015881,139.078094482],[117.086024713,36.6420409,138.980499268],[117.086005937,36.642063632,138.94140625],[117.085984144,36.642089727,138.890594482]]}",
+            "angle": 320.51,
+            "dirtype": "2"
+        },
+        {
+            "lkid": "13NED0B5Q90",
+            "ldid": "13NF80B5QN013NED0B5Q900",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.083336134,36.64049981,149.730499268],[117.08331937,36.640526444,149.679702759],[117.083303779,36.640550656,149.62890625],[117.083286177,36.6405785,149.62890625]]}",
+            "angle": 327.59,
+            "dirtype": "2"
+        },
+        {
+            "lkid": "13NI00B5RM0",
+            "ldid": "13NGH0B5RC013NI00B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094602879,36.644970828,135.570297241],[117.094611721,36.644862003,135.519500732]]}",
+            "angle": 175.35,
+            "dirtype": "7"
+        },
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NI00B5RM013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.095711008,36.644986195,137.230499268],[117.095711343,36.644955798,137.230499268],[117.095711846,36.644928762,137.179702759],[117.095711175,36.644897692,137.179702759]]}",
+            "angle": 179.89,
+            "dirtype": "7"
+        },
+        {
+            "lkid": "13NI00B5RM0",
+            "ldid": "13NG40B5SK013NI00B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094632592,36.645122448,135.37109375],[117.094598226,36.645121103,135.351593018],[117.094506976,36.645115703,0],[117.094567046,36.645119355,135.289093018]]}",
+            "angle": 267.3,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NI00B5RM0",
+            "ldid": "13NID0B5RM013NI00B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094906177,36.64496602,136.011703491],[117.094906848,36.644995342,135.960906982],[117.094908357,36.645022781,135.960906982],[117.09490886,36.645053717,135.910202026]]}",
+            "angle": 1.75,
+            "dirtype": "3"
+        },
+        {
+            "lkid": "13NGH0B5RC0",
+            "ldid": "13NI00B5RM013NGH0B5RC00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090221867,36.64409779,130.339797974],[117.09021315,36.644122135,130.339797974],[117.090204768,36.644146077,130.289093018],[117.090196386,36.644170423,130.238296509],[117.090186998,36.644195441,130.148406982]]}",
+            "angle": 340.35,
+            "dirtype": "3"
+        },
+        {
+            "lkid": "13NG40B5SK0",
+            "ldid": "13NI00B5RM013NG40B5SK00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.09480945,36.647421087,121.988296509],[117.094844822,36.647420011,121.988296509],[117.09487617,36.647419339,121.941398621]]}",
+            "angle": 91.5,
+            "dirtype": "5"
+        },
+        {
+            "lkid": "13NGH0B5RC0",
+            "ldid": "13NEH0B5RJ013NGH0B5RC00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089840658,36.644200687,129.761703491],[117.089808304,36.644191809,129.761703491],[117.08977377,36.644182528,129.730499268]]}",
+            "angle": 254.81,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NEP0B5QJ0",
+            "ldid": "13NGH0B5RC013NEP0B5QJ00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.09044164,36.642228809,137.179702759],[117.090419177,36.642226791,137.230499268]]}",
+            "angle": 264.87,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NEP0B5QJ0",
+            "ldid": "13NGH0B5RC013NEP0B5QJ00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090504169,36.642235265,137.078094482],[117.090467624,36.642231096,137.031295776]]}",
+            "angle": 263.49,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NEP0B5QJ0",
+            "ldid": "13NGH0B5RC013NEP0B5QJ00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090538703,36.642239301,137.539093018],[117.090504169,36.642235265,137.078094482]]}",
+            "angle": 263.34,
+            "dirtype": "1"
+        },
+        {
+            "lkid": "13NGH0B5RC0",
+            "ldid": "13NEP0B5QJ013NGH0B5RC00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090014331,36.64384438,130.339797974],[117.090044841,36.643854872,130.339797974],[117.090075854,36.643865094,130.339797974],[117.090105861,36.643875586,130.320297241]]}",
+            "angle": 71.17,
+            "dirtype": "5"
+        },
+        {
+            "lkid": "13NEH0B5RJ0",
+            "ldid": "13NGH0B5RC013NEH0B5RJ00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089664568,36.64506163,125.460899353],[117.089723982,36.645074834,125.359397888],[117.089756168,36.645080886,125.308601379]]}",
+            "angle": 78.13,
+            "dirtype": "5"
+        },      
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NGQ0B5R0013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.097029085,36.642846211,160.87890625],[117.097066864,36.642847817,160.910202026],[117.097102404,36.642849162,160.859405518]]}",
+            "angle": 87.69,
+            "dirtype": "4"
+        },
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NGQ0B5R0013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.095834892,36.644817527,137.281295776],[117.095866241,36.644837972,137.37109375],[117.095896583,36.644858282,137.421905518]]}",
+            "angle": 56.55,
+            "dirtype": "4"
+        },
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NH20B5RH013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.096297238,36.644966423,138.199203491],[117.096298411,36.64499171,138.179702759],[117.096298244,36.64501619,138.109405518],[117.096298914,36.645040939,138.05859375],[117.096300088,36.645065418,138.05859375]]}",
+            "angle": 1.65,
+            "dirtype": "3"
+        },
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NHC0B5R4013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098410148,36.643917283,141.078094482],[117.098435462,36.643950909,140.94140625],[117.098445352,36.643965436,140.94140625]]}",
+            "angle": 36.17,
+            "dirtype": "4"
+        },
+        {
+            "lkid": "13NID0B5RM0",
+            "ldid": "13NHC0B5R4013NID0B5RM00",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.096125241,36.64482896,137.761703491],[117.096164869,36.644863363,137.80859375]]}",
+            "angle": 49.04,
+            "dirtype": "4"
+        },
+        {
+            "lkid": "13NHC0B5R40",
+            "ldid": "13NID0B5RM013NHC0B5R400",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098188866,36.644014262,140.69140625],[117.098166402,36.64397808,140.718795776],[117.098156344,36.643962073,140.738296509]]}",
+            "angle": 211.93,
+            "dirtype": "8"
+        },
+        {
+            "lkid": "13NHC0B5R40",
+            "ldid": "13NID0B5RM013NHC0B5R400",
+            "geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098936364,36.643452159,142.160202026],[117.098890767,36.643432656,142.210906982],[117.098873667,36.643425796,142.210906982]]}",
+            "angle": 247.19,
+            "dirtype": "8"
+        }
+    ],
+    "message": "SQL执行成功",
+    "status": "success",
+    "timestamp": 0
+}
\ No newline at end of file

wj-manage-web/src/components/Standard/cameraVideo.vue

@@ -76,12 +76,6 @@ export default {
       //视频出错后销毁重新创建
       this.player.on(flvjs.Events.ERROR, this.handleErr);
       this.player.on(flvjs.Events.LOADING_COMPLETE, this.handleErr);
-      // this.player.on("media_info", (e) => {
-      //   console.log('media_info', e)
-      // });
-      // this.player.on("metadata_arrived", (e) => {
-      //   console.log('metadata_arrived', e)
-      // });
     },
     handleErr() {
       if (this.player) {
@@ -112,30 +106,15 @@ export default {
         //清除定时器
         clearInterval(this.cleanBuff);
       }
-      if (this.timeoutInterval) {
-        clearInterval(this.timeoutInterval);
-      }
-    },
-    initPlayer() {
-      this.$nextTick(() => {
-        this.loadVideo();
-      });
-      this.timeoutInterval = setInterval(() => {
-        if (this.cameraLoading) {
-          this.handleErr();
-        } else {
-          clearInterval(this.timeoutInterval);
-        }
-      }, 15000);
     },
   },
   data() {
     return {
-      timeoutInterval: null,
       cleanBuff: null,
       cameraLoading: true,
       supported: false,
       player: null,
+      interval: null
     };
   },
   mounted() {
@@ -146,17 +125,16 @@ export default {
       this.$nextTick(() => {
         this.loadVideo();
       });
-      let interval = setInterval(() => {
+      this.interval = setInterval(() => {
         if (this.cameraLoading) {
           this.handleErr();
         } else {
-          clearInterval(interval);
+          clearInterval(this.interval);
         }
       }, 3000);
     }
   },
   beforeDestroy() {
-    // console.log("beforeDestroy");
     this.destroy();
   },
 };

wj-manage-web/src/components/Standard/loopVideo.vue

 <template>
   <div
     class="loopVideo"
-    v-loading="isLoading"
+    v-loading="videoLoading"
     element-loading-text="加载中..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
   >
     <video
-    controls
+      controls
       class="videoControl"
       ref="player"
       @loadstart="handleLoadStart"
@@ -15,12 +15,6 @@
       @ended="handleEnded"
       @canplay="videoCanPlay"
     ></video>
-    <!-- <div class="loading-mask" v-show="isLoading">
-      <div style="position: relative">
-        <div class="el-icon-loading"></div>
-        <div>加载中...</div>
-      </div>
-    </div> -->
   </div>
 </template>
 
@@ -38,29 +32,35 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
+      requestLoading: true,
+      videoLoading: true,
       videoUrl: null,
       flvPlayer: null,
+      interval: null,
     };
   },
   mounted() {
     if (this.channel) {
       this.getVideoStreamUrl();
-      timer = setInterval(() => {
-        if (this.isLoading) {
-          this.destroy();
-          this.$nextTick(() => {
-            this.getVideoStreamUrl();
-          });
+      this.interval = setInterval(() => {
+        if (this.videoLoading) {
+          this.handleErr();
         } else {
-          clearInterval(timer);
+          clearInterval(this.interval);
         }
-      }, 5000);
+      }, 3000);
     }
   },
 
   methods: {
+    handleErr() {
+      this.destroyPlayer();
+      this.$nextTick(() => {
+        this.getVideoStreamUrl();
+      });
+    },
     videoCanPlay() {
+      this.videoLoading = false;
       this.$emit("videoReady", this.channel);
     },
     replaceTimeGap(time) {
@@ -72,8 +72,8 @@ export default {
     },
     async getVideoStreamUrl() {
       try {
-        console.log("channel reconnect....", this.channel);
-        this.isLoading = true;
+        // console.log("channel reconnect....", this.channel);
+        this.requestLoading = true;
         const response = await getEventVideo({
           channel: this.channel,
           subtype: 0,
@@ -91,7 +91,7 @@ export default {
         console.error("FLV is not supported by this browser!");
         return;
       }
-      console.log("loop start...", this.videoUrl);
+    //   console.log("loop start...", this.videoUrl);
       this.flvPlayer = flvjs.createPlayer({
         type: "flv",
         url: this.videoUrl,
@@ -108,41 +108,39 @@ export default {
       this.flvPlayer.on(flvjs.Events.MEDIA_DETACHED, this.handleMediaDetached);
     },
     handleMediaDetached() {
-      //   setTimeout(() => {
-      //     this.getVideoStreamUrl();
-      //   }, 1000);
     },
     handleLoadStart() {
-      this.isLoading = true;
+      this.requestLoading = true;
     },
     handleLoadedMetadata() {
-      this.isLoading = false;
-      console.log("loaded...");
+      this.requestLoading = false;
+    //   console.log("loaded...");
     },
     handleEnded() {
       if (this.flvPlayer) {
         this.flvPlayer.play();
       }
     },
-    destroy() {
-      timer && clearInterval(timer);
+    destroyPlayer() {
       if (this.flvPlayer) {
-        this.flvPlayer.pause();
-        this.flvPlayer.unload();
-        this.flvPlayer.detachMediaElement();
-        this.flvPlayer.destroy();
+        this.flvPlayer?.pause();
+        this.flvPlayer?.unload();
+        this.flvPlayer?.detachMediaElement();
+        this.flvPlayer?.destroy();
         this.flvPlayer = null;
       }
     },
   },
   watch: {
     timeModel(val) {
-      this.destroy();
-      this.getVideoStreamUrl();
+      this.handleErr();
     },
   },
   beforeDestroy() {
-    this.destroy();
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    this.destroyPlayer();
   },
 };
 </script>

wj-manage-web/src/components/Standard/map/pathMap/index.vue

@@ -7,16 +7,22 @@
   >
     <div style="position: relative; width: 100%; height: 100%">
       <path-map
+        @mapLoad="mapLoad"
         mapId="pathMapCtrl"
         ref="pathMap"
+        :eventTargetVehicleGlobalId="eventTargetVehicleGlobalId"
         @timeChange="timeChange"
         :speed="speedValue"
         :filterType="filterType"
       ></path-map>
+      <div v-show="showTimeStamp" class="pathMapTimestamp">
+        {{ currentTimestamp }}
+      </div>
       <div v-show="showCtrl" class="slider-box">
         <i
           class="slider-icon"
           @click="playClick"
+          :style="`cursor:${duration == 0 ? 'not-allowed' : 'pointer'}`"
           :class="{ active: playFlag }"
         ></i>
         <el-slider
@@ -82,8 +88,8 @@ protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", (event, root) => {
 const typeOptions = ["不流畅车", "减速车", "直行汇车", "右转汇车"];
 import pathMap from "./pathMap.vue";
 import * as trackApi from "../../../../dao/historyTrack";
-import { eventInfo } from "../../../../../../wj-data-vision/src/dao/situation";
-import { addOrUpdateEventHeat } from "../../../../utils/mapboxTools";
+import * as mapTools from "../../../../utils/mapboxTools";
+import { orgConflict } from "../../../../dao/organization";
 export default {
   name: "pathMapCtrl",
   components: { pathMap },
@@ -109,9 +115,34 @@ export default {
       loading: false,
       timeShouldChange: true,
       heatShow: false,
+      currentLocalTime: 0,
+      currentRequestTime: {
+        startTime: 0,
+        endTime: 0,
+      },
+      renderFirst: true,
+      lastRequestParams: {},
     };
   },
+  computed: {
+    currentTimestamp() {
+      return new Date(this.currentLocalTime).toLocaleString();
+    },
+    showTimeStamp() {
+      if (this.showTime) {
+        if (this.currentLocalTime != 0) {
+          return true;
+        }
+      }
+    },
+  },
   props: {
+    showTime: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
     showFilter: {
       type: Boolean,
       default: () => {
@@ -142,13 +173,19 @@ export default {
         return "vehicleTrack";
       },
     },
+    eventTargetVehicleGlobalId: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
   },
   mounted() {
     const sliderElement = this.$refs.sliderRef.$el;
     sliderElement.addEventListener("mouseup", this.handleMouseUp);
     sliderElement.addEventListener("mousedown", this.handleMouseDown);
     this.$EventBus.$on("refreshHeatMap", (data) => this.refreshHeatMap(data));
-    this.$EventBus.$on("removeHeatMap", () => this.removeMapHeat());
+    this.$EventBus.$on("removeHeatMap", () => this.refreshHeatMap([]));
   },
   beforeDestroy() {
     this.$EventBus.$off("refreshHeatMap");
@@ -160,51 +197,60 @@ export default {
         this.filterType = null;
       }
     },
-    duration() {
-      this.currentTime = 0;
-    },
+    // duration() {
+    //   this.currentTime = 0;
+    // },
   },
   methods: {
+    mapLoad(map) {
+      pMap = map;
+    },
     removeLayers(name) {
       if (pMap && pMap.getLayer(name)) {
         pMap.removeLayer(name);
       }
     },
     //=====================================================================交织点相关逻辑
-    // 移除交织点热力图
-    removeMapHeat() {
-      this.removeLayers("eventHeat");
-    },
     // 更新交织点热力图
     refreshHeatMap(tableData) {
-      if (!pMap) {
-        pMap = this.$refs.pathMap.getMap();
-      } else {
-        this.removeMapHeat();
-      }
       let features = [];
       for (let item of tableData) {
         features.push(turf.point([item.lng, item.lat], item));
       }
-      addOrUpdateEventHeat(pMap, turf.featureCollection(features));
+      mapTools.addOrUpdateEventHeat(pMap, turf.featureCollection(features));
     },
     // 交织点分析
     heatMapAnalysis() {
-      let type = 2;
+      // 如果请求展示热力图
       if (!this.heatShow) {
         this.loading = true;
-        eventInfo({ dayType: type }).then((res) => {
-          // 如果还未创建 先创建图层 || 赋值
-          console.log("交织点分析", res);
-          this.refreshHeatMap(res.content);
-          this.heatShow = true;
+        orgConflict({
+          crossId: this.params.crossId,
+          startDate: this.params.startTime,
+          endDate: this.params.endTime,
+        }).then((res) => {
           this.loading = false;
+          console.log("交织点分析", res);
+          if (res.content && res.content.length) {
+            this.heatShow = true;
+            let geo = this.convertPointJsonToGeo(res.content);
+            mapTools.addOrUpdateEventHeat(pMap, geo);
+          } else {
+            ELEMENT.Message("当前时段暂无交织点信息");
+          }
         });
       } else {
         this.removeLayers("eventHeat");
         this.heatShow = false;
       }
     },
+    convertPointJsonToGeo(array) {
+      let features = [];
+      for (let item of array) {
+        features.push(turf.point([item.lng, item.lat], item));
+      }
+      return turf.featureCollection(features);
+    },
     //====================================================================================
     //=====================================================================车辆筛选相关逻辑
     checkAllChange(val) {
@@ -233,8 +279,6 @@ export default {
         types.push(typeMap[item]);
       }
       this.filterType = types;
-      // let sortTypes = types.sort().join(",");
-      console.log(types);
     },
     //====================================================================================
     handleMouseDown() {
@@ -245,6 +289,7 @@ export default {
       this.timeShouldChange = true;
     },
     timeChange(getTime) {
+      this.currentLocalTime = getTime;
       let spend = getTime - new Date(this.params.startTime).getTime();
       // timeShouldChange 防止拖动 slider 时 时间改变导致覆盖了拖动赋值
       this.timeShouldChange && (this.currentTime = spend);
@@ -256,13 +301,88 @@ export default {
         this.currentTime = 0;
       });
     },
+    lateToOneMin(dateTime) {
+      let time = new Date(dateTime).getTime();
+      let late1Min = time + 60 * 1000;
+      let res = new Date(late1Min).toLocaleString();
+      return res.replaceAll("/", "-");
+    },
+    getTracksAndPlay1() {
+        // 重置分页参数
+      this.renderFirst = true;
+      this.lastRequestParams = this.params;
+      this.requestNewAndPlay();
+    },
+    requestNewAndPlay() {
+      if (this.currentRequestTime.endTime != this.params.endTime) {
+        // 如果轨迹类型或者时间区间改变 则重置请求时间
+        if (
+          JSON.stringify(this.lastRequestParams) !== JSON.stringify(this.params)
+        ) {
+          this.currentRequestTime.startTime = 0;
+        }
+        // 上一次请求的结束时间作为当前请求的开始时间，当前请求的结束时间为 上次请求的结束时间加1分钟
+        if (this.currentRequestTime.startTime == 0) {
+          this.clearMap();
+          this.loading = true;
+          this.currentRequestTime.startTime = this.params.startTime;
+        } else {
+          this.renderFirst = false;
+          this.currentRequestTime.startTime = this.currentRequestTime.endTime;
+        }
+        this.currentRequestTime.endTime = this.lateToOneMin(
+          this.currentRequestTime.startTime
+        );
+        if (
+          new Date(this.currentRequestTime.endTime).getTime() >
+          new Date(this.params.endTime).getTime()
+        ) {
+          this.currentRequestTime.endTime = this.params.endTime;
+        }
+        console.log("trackApi", trackApi);
+        trackApi[this.apiName](
+          Object.assign({}, this.params, this.currentRequestTime)
+        ).then((res) => {
+          this.loading = false;
+          if (res && res.data) {
+            // todo 如果响应数据与当前需要展示的数据一致 则接收并处理数据
+            if (res.params === JSON.stringify(this.params)) {
+              let inflate = pako.inflate(res.data); // pako解压为protobuf
+              if (inflate) {
+                let realData = FrameList.decode(inflate); // protobuf根据定义类型转json
+                fullTrack = realData.frameInfo;
+                this.$EventBus.$emit("fullTrack", fullTrack);
+                console.log("fulltrackData...", fullTrack);
+                // 计算返回数据的总时长
+                let fullTime =
+                  new Date(
+                    fullTrack[fullTrack.length - 1].frameTime
+                  ).getTime() - new Date(fullTrack[0].frameTime).getTime();
+                this.duration = fullTime + this.duration;
+                console.log("this.duration", this.duration);
+                this.$nextTick(() => {
+                  if (this.renderFirst) {
+                    this.$refs.pathMap.render();
+                    this.playFlag = true;
+                  }
+                });
+                setTimeout(() => {
+                  this.requestNewAndPlay();
+                }, 2000);
+              } else {
+                this.$message("暂无轨迹数据");
+              }
+            }
+          } else {
+            this.$message("暂无轨迹数据");
+          }
+        });
+      }
+    },
     // ref调用此方法请求并播放轨迹
     getTracksAndPlay() {
       console.log("请求轨迹数据：", this.apiName, this.params);
-      if (this.loading) {
-        return;
-      }
-      this.clearMap()
+      this.clearMap();
       this.loading = true;
       trackApi[this.apiName](this.params).then((res) => {
         this.loading = false;
@@ -280,7 +400,7 @@ export default {
               new Date(fullTrack[fullTrack.length - 1].frameTime).getTime() -
               new Date(fullTrack[0].frameTime).getTime();
             this.duration = fullTime;
-            console.log('this.duration',this.duration);
+            console.log("this.duration", this.duration);
             this.$nextTick(() => {
               this.$refs.pathMap.render();
             });
@@ -293,6 +413,7 @@ export default {
       });
     },
     playClick() {
+      if (this.duration == 0) return;
       this.playFlag = !this.playFlag;
       this.playFlag
         ? this.$refs.pathMap.continuePlay()
@@ -378,7 +499,13 @@ export default {
     font-weight: 700;
   }
 }
-
+.pathMapTimestamp {
+  position: absolute;
+  left: 12px;
+  top: 8px;
+  color: white;
+  z-index: 9;
+}
 .slider-box {
   position: absolute;
   display: flex;

wj-manage-web/src/components/Standard/map/pathMap/pathMap.vue

@@ -11,7 +11,7 @@ let vehicleModelTypes = {},
 // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
 export default {
   name: "wMap",
-  props: ["mapId", "speed", "filterType"],
+  props: ["mapId", "speed", "filterType", "eventTargetVehicleGlobalId"],
   components: {},
   data() {
     return {
@@ -21,10 +21,9 @@ export default {
   },
   mounted() {
     this.initMap();
-    console.log('eventbus', this.$EventBus);
-
     this.$EventBus.$on("fullTrack", (data) => {
-      fullTrack = data;
+      fullTrack = [...fullTrack,...data];
+      dillPath = [...dillPath, ...data]
     });
   },
   methods: {
@@ -96,6 +95,7 @@ export default {
         pitch: map_config.MAP_PITCH,
       });
       map.on("style.load", () => {
+        this.$emit('mapLoad',map)
         map.addLayer({
           id: "vehicle3D",
           type: "custom",
@@ -142,12 +142,11 @@ export default {
       return map;
     },
     clearAll() {
-        this.playStatus = false;
-      window.tb?.clear(null,true);
+      this.playStatus = false;
+      window.tb?.clear(null, true);
       dillPath = [];
       fullTrack = [];
-      window.tb.update();
-      
+      window.tb?.update();
     },
 
     hasDuplicate(arr1, arr2) {
@@ -160,7 +159,7 @@ export default {
       if (this.playStatus) {
         if (dillPath.length) {
           // 筛选符合条件的车
-          // console.log("this.filterType", this.filterType);
+        //   console.log("this.filterType", this.filterType);
           let currentFrame = dillPath[0].carInfo;
           if (this.filterType) {
             currentFrame = [];
@@ -194,7 +193,7 @@ export default {
           dillPath.shift();
           if (!dillPath.length) {
             window.tb.clear(null, true);
-            lastFrame = { carInfo: [] }
+            lastFrame = { carInfo: [] };
             dillPath = JSON.parse(JSON.stringify(fullTrack));
           }
           setTimeout(() => {
@@ -205,6 +204,18 @@ export default {
     },
 
     setModel(model, options, timeDiff) {
+      // 如果有目标车辆 则把目标车辆设置为红色
+      if (
+        this.eventTargetVehicleGlobalId &&
+        options.id == this.eventTargetVehicleGlobalId
+      ) {
+        model.traverse((child) => {
+          if (child.isMesh && child.name.includes("_19")) {
+            child.material = child.material.clone();
+            child.material.color.set("#e43f32");
+          }
+        });
+      }
       if (timeDiff === 0) {
         model.setCoords([options.longitude, options.latitude]);
       } else {
@@ -257,6 +268,19 @@ export default {
           if (item.dill === "add") {
             let model =
               vehicleModelTypes[`car${item.originalType}`].duplicate();
+            // 如果有目标车辆 则把目标车辆设置为红色
+            if (
+              this.eventTargetVehicleGlobalId &&
+              item.id == this.eventTargetVehicleGlobalId
+            ) {
+              map?.setCenter([item.longitude, item.latitude]);
+              model.traverse((child) => {
+                if (child.isMesh && child.name.includes("_19")) {
+                  child.material = child.material.clone();
+                  child.material.color.set("#e43f32");
+                }
+              });
+            }
             model.setCoords([item.longitude, item.latitude]);
             model.userData.data = item;
             model.setRotation({ x: 90, y: 360 - item.courseAngle - 90, z: 0 });

wj-manage-web/src/config/holo/mapAssets.js

@@ -48,17 +48,17 @@ export default {
 
   },
   lightIcons: {
-    11: require('../../assets/images/sc/leftRed.png'),
-    12: require('../../assets/images/sc/leftYellow.png'),
-    13: require('../../assets/images/sc/leftGreen.png'),
-    21: require('../../assets/images/sc/sRed.png'),
-    22: require('../../assets/images/sc/sYellow.png'),
-    23: require('../../assets/images/sc/sGreen.png'),
-    31: require('../../assets/images/sc/rightRed.png'),
-    32: require('../../assets/images/sc/rightYellow.png'),
-    33: require('../../assets/images/sc/rightGreen.png'),
-    41: require('../../assets/images/sc/backRed.png'),
-    42: require('../../assets/images/sc/backYellow.png'),
-    43: require('../../assets/images/sc/backGreen.png'), // light
+    '1red': require('../../assets/images/sc/leftRed.png'),
+    '1yellow': require('../../assets/images/sc/leftYellow.png'),
+    '1green': require('../../assets/images/sc/leftGreen.png'),
+    '2red': require('../../assets/images/sc/sRed.png'),
+    '2yellow': require('../../assets/images/sc/sYellow.png'),
+    '2green': require('../../assets/images/sc/sGreen.png'),
+    '3red': require('../../assets/images/sc/rightRed.png'),
+    '3yellow': require('../../assets/images/sc/rightYellow.png'),
+    '3green': require('../../assets/images/sc/rightGreen.png'),
+    '4red': require('../../assets/images/sc/backRed.png'),
+    '4yellow': require('../../assets/images/sc/backYellow.png'),
+    '4green': require('../../assets/images/sc/backGreen.png'), // light
   }
 }

wj-manage-web/src/dao/historyTrack.js

 import fetch from '@/utils/fetch'
+import request from '../utils/request'
 
 // 行人轨迹查询
-export const passerbyTrack = (data) => fetch('/holo/histrory-track/pedestrian-efficiency', data, 'POST')
+export const passerbyTrack = (data) =>
+    request({
+        url: '/holo/histrory-track/pedestrian-efficiency',
+        method: 'post',
+        data: data,
+        responseType:'arraybuffer'
+    })
+
 // 非机动车历史轨迹
-export const noVehicleTrack = (data) => fetch('/holo/histrory-track/non-motor-efficiency', data, 'POST')
+export const noVehicleTrack = (data) =>
+    request({
+        url: '/holo/histrory-track/non-motor-efficiency',
+        method: 'post',
+        data: data,
+        responseType:'arraybuffer'
+    })
+
 // 机动车历史轨迹
-export const vehicleTrack = (data) => fetch('/holo/histrory-track/motor-efficiency', data, 'POST')
+export const vehicleTrack = (data) =>
+    request({
+        url: '/holo/histrory-track/motor-efficiency',
+        method: 'post',
+        data: data,
+        responseType:'arraybuffer'
+    })
+
 // 所有轨迹
-export const allTrack = (data) => fetch('/holo/histrory-track/info', data, 'POST')
+export const allTrack = (data) =>
\ No newline at end of file
+    request({
+        url: '/holo/histrory-track/info',
+        method: 'post',
+        data: data,
+        responseType:'arraybuffer'
+    })
\ No newline at end of file

wj-manage-web/src/utils/mapboxTools.js

@@ -87,7 +87,8 @@ export function addOrUpdateLightLayers(map, geo) {
                     "icon-size": 0.7,
                     "icon-image": ["get", "ts"],
                     "icon-pitch-alignment": "map",
-                    "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 140],
+                    // "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
+                    'icon-rotate': ['get', 'lightAngle'],
                     "icon-rotation-alignment": "map",
                 },
             },
@@ -105,7 +106,8 @@ export function addOrUpdateLightLayers(map, geo) {
                     "text-size": 14,
                     "text-pitch-alignment": "map",
                     "text-rotation-alignment": "map",
-                    "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 140],
+                    'text-rotate': ['get', 'lightAngle'],
+                    // "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
                 },
                 paint: {
                     "text-color": "white",
@@ -114,11 +116,11 @@ export function addOrUpdateLightLayers(map, geo) {
                     "text-halo-color": [
                         "match",
                         ["get", "state"], // 属性字段名称
-                        "1",
+                        "red",
                         "rgba(255, 130, 130, 0.5)",
-                        "2",
+                        "yellow",
                         "rgba(255, 179, 0, 0.5)",
-                        "3",
+                        "green",
                         "rgba(48, 255, 141, 0.5)",
                         "rgba(255,255,255,1)", // 默认值，如果没有匹配到上述枚举值
                     ],
@@ -453,6 +455,7 @@ export function addOrUpdateCrossName(map, geo) {
 
 // 交通事件热力图
 export function addOrUpdateEventHeat(map, geo, callback) {
+    console.log(geo, 7777777777777777777);
     if (!map.getSource("eventHeat")) {
         map.addSource("eventHeat", {
             type: "geojson",
@@ -802,7 +805,7 @@ export function addOrUpdateRoadPolygon(map, geo, callback) {
             }
             // "vehicle3D"
         );
-        map.on("click", "roadPolygon", (aaa) => callback(aaa));
+        // map.on("click", "roadPolygon", (aaa) => callback(aaa));
     }
 }
 

wj-manage-web/src/utils/request.js

@@ -57,11 +57,13 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // console.log('axios response...', res);
+    console.log('axios response...', res);
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 二进制数据则直接返回
     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+        // 给二进制数据添加对应的请求参数信息，避免接收到不需要的数据
+        // return { data: res.data, params: JSON.parse(res.config.data) }
         return res.data
     }
     if (code === 401) {

wj-manage-web/src/views/efficiency/crossCompare.vue

@@ -183,7 +183,7 @@ export default {
         return (
           Math.abs(
             Number(scope.row.current) - Number(scope.row.compare)
-          ).toFixed(2) + "pcu/h"
+          ).toFixed(0)
         );
       }
       if (scope.row.indexName.includes("时间")) {
@@ -208,7 +208,7 @@ export default {
         if (typeof scope.row[which] === "boolean") {
           return "暂无数据";
         }
-        return scope.row[which].toFixed(2)
+        return scope.row[which].toFixed(0)
       }
       if (scope.row.indexName.includes("时间")) {
         if (typeof scope.row[which] === "boolean") {

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

@@ -78,6 +78,7 @@
             <path-map-ctrl
               :params="pathParam"
               :apiName="pathApiName"
+              :showTime="true"
               class="common_map"
               ref="tab_map"
               :showFilter="showFilter"
@@ -107,8 +108,6 @@
                             v-if="item.valueList && item.valueList.length"
                           >
                             {{ getCheckItemValue(item) }}
-                            <span v-show="item.label.includes('率')">%</span>
-                            <span v-show="item.label.includes('时长')">s</span>
                           </span>
                         </el-checkbox>
                       </el-checkbox-group>
@@ -245,8 +244,6 @@
                             v-if="item.valueList && item.valueList.length"
                           >
                             {{ getCheckItemValue(item) }}
-                            <span v-show="item.label.includes('率')">%</span
-                            ><span v-show="item.label.includes('时长')">s</span>
                           </span>
                         </el-checkbox>
                       </el-checkbox-group>
@@ -356,17 +353,24 @@ export default {
   methods: {
     beforeLeave() {
       // 轨迹组件接口还在请求中，暂不可切换tab
-      if (this.$refs.tab_map.loading) {
-        return false;
-      }
+    //   if (this.$refs.tab_map.loading) {
+    //     return false;
+    //   }
+    return true
     },
     getCheckItemValue(item) {
-      return item.valueList
-        ? item.label.includes("率")
-          ? (item.valueList[item.valueList.length - 1] * 100).toFixed(2)
-          : item.valueList[item.valueList.length - 1]
-        : "";
-      // return item.valueList[item.valueList.length - 1];
+      if (item.valueList && item.valueList.length) {
+        if (item.label.includes("率") || item.label.includes("占比")) {
+          return `${(
+            Number(item.valueList[item.valueList.length - 1]) * 100
+          ).toFixed(0)}%`;
+        } else if (item.label.includes("时长")) {
+          return `${item.valueList[item.valueList.length - 1]}s`;
+        } else {
+          return `${item.valueList[item.valueList.length - 1]}`;
+        }
+      }
+      return "";
     },
     upOrDown(inverse) {
       if (this.fullData && this.fullData.current) {
@@ -771,11 +775,6 @@ export default {
           startTime: this.tableCurrentData.windowStartTime,
           endTime: this.tableCurrentData.windowEndTime,
           crossId: this.currentCrossId,
-          // startTime: "2023-05-21 18:22:25",
-          // endTime: "2023-05-21 18:28:30",
-          // startTime: "2023-05-21 18:28:25",
-          // endTime: "2023-05-21 18:28:30",
-          // crossId: "12F6S08J8T0",
         };
         this.pathApiName = "passerbyTrack";
         this.$nextTick(() => {
@@ -788,6 +787,8 @@ export default {
         passerbyEfficiency({
           crossId: this.currentCrossId,
           granularity: this.timeInterval,
+          startDate:this.tableCurrentData.windowStartTime,
+          endDate:this.tableCurrentData.windowEndTime
         }).then((res) => {
           this.tab1Loading = false;
           console.log("行人效率", res.content);
@@ -831,13 +832,15 @@ export default {
         noVehicleTable({
           crossId: this.currentCrossId,
           granularity: this.timeInterval,
+          startDate:this.tableCurrentData.windowStartTime,
+          endDate:this.tableCurrentData.windowEndTime
         }).then((res) => {
           this.tab2Loading1 = false;
           console.log("非机动车效率", res.content);
           this.tableData = [];
           for (let item of res.content) {
             if ([1, 2, 3].includes(item.type)) {
-              let obj = { total: item.total, label: item.label };
+              let obj = { total: item.total||0, label: item.label };
               for (let option of item.list) {
                 obj[this.turnMap[option.turnNo]] = option.number;
               }
@@ -849,6 +852,8 @@ export default {
         noVehicleEfficiency({
           crossId: this.currentCrossId,
           granularity: this.timeInterval,
+          startDate:this.tableCurrentData.windowStartTime,
+          endDate:this.tableCurrentData.windowEndTime
         }).then((res) => {
           this.tab2Loading2 = false;
           if (res.content.length) {
@@ -880,6 +885,8 @@ export default {
         vehicleEfficiency({
           crossId: this.currentCrossId,
           granularity: this.timeInterval,
+          startDate:this.tableCurrentData.windowStartTime,
+          endDate:this.tableCurrentData.windowEndTime
         }).then((res) => {
           this.tab3Loading = false;
           console.log("机动车效率", res.content);
@@ -939,6 +946,7 @@ export default {
   .track-result-table {
     overflow: auto;
     //height: 400px;
+    background-color: #0a1526;
     .el-icon-video-play:before {
       color: #5b90ee;
       font-size: 16px;
@@ -1118,7 +1126,7 @@ export default {
               display: flex;
               justify-content: space-between;
               flex-flow: wrap;
-              height: 42%;
+              height: 45%;
               align-items: stretch;
               ::v-deep .el-checkbox {
                 width: 33.3%;
@@ -1151,7 +1159,7 @@ export default {
             }
 
             .form_chart {
-              height: 58%;
+              height: 55%;
 
               .ef_chart {
                 width: 100%;

wj-manage-web/src/views/organization/cameraImage.vue

@@ -2,7 +2,7 @@
   <div class="custom-dialog">
     <div class="dialog-main">
       <div class="holo-dialog-header">
-        <div>非机动车佩戴头盔率：{{ helmetRate }}</div>
+        <div>非机动车佩戴头盔率：{{ currentBarRate }}</div>
         <div>
           <i class="el-icon-close holo-dialog-close" @click="closeDia"></i>
         </div>
@@ -38,18 +38,20 @@ export default {
   data() {
     return {
       currentHelmetImg: "#",
-      currentPage: 0,
+      currentPage: 1,
       totalPage: 0,
       loading: false,
     };
   },
-  props: ["timeRange", 'cameraId'],
+  props: ["getImageProps", "currentBarRate",'compInitImg'],
   mounted() {
-    this.getImage();
+    this.currentHelmetImg = this.compInitImg.url
+    this.totalPage = this.compInitImg.total
+    // this.getImage();
   },
   methods: {
     getLastImage() {
-      if (this.currentPage - 1 < 0) {
+      if (this.currentPage - 1 < 1) {
         ELEMENT.Message("已经是第一张图片！");
         return;
       }
@@ -67,15 +69,17 @@ export default {
     getImage() {
       this.loading = true;
       helmetRateImages({
-        cameraId: this.cameraId,
-        startDate: "2023-10-27 15:00:00",
-        endDate: "2023-10-27 15:00:00",
+        ...this.getImageProps,
         page: this.currentPage,
         size: 1,
       }).then((res) => {
         this.loading = false;
-        this.currentHelmetImg = `data:image/png;base64,${res.content.rows[0].shootImage}`;
-        this.totalPage = res.content.total;
+        if (res.content.rows && res.content.rows.length) {
+          this.currentHelmetImg = `data:image/png;base64,${res.content.rows[0].shootImage}`;
+          this.totalPage = res.content.total;
+        } else {
+          ELEMENT.Message("此相机当前时段无图片信息！");
+        }
       });
     },
     closeDia() {

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

 <template>
-  <div class="org_container">
+  <div
+    class="org_container"
+    element-loading-text="加载图片中，请稍候..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    v-loading.fullscreen.lock="fullscreenLoading"
+  >
     <div class="left_topThree">
       <left-map ref="leftMap" @crossChange="crossChange" />
     </div>
@@ -98,13 +104,6 @@
                         v-if="item.valueList && item.valueList.length"
                       >
                         {{ getCheckItemValue(item) }}
-                        <span
-                          v-show="
-                            item.label.includes('率') ||
-                            item.label.includes('占比')
-                          "
-                          >%</span
-                        ><span v-show="item.label.includes('时长')">s</span>
                       </span>
                     </el-checkbox>
                   </el-checkbox-group>
@@ -138,20 +137,7 @@
                         "
                         v-if="item.valueList && item.valueList.length"
                       >
-                        {{
-                          item.label.includes("率") ||
-                          item.label.includes("占比")
-                            ? (
-                                item.valueList[item.valueList.length - 1] * 100
-                              ).toFixed(2)
-                            : item.valueList[item.valueList.length - 1]
-                        }}<span
-                          v-show="
-                            item.label.includes('率') ||
-                            item.label.includes('占比')
-                          "
-                          >%</span
-                        ><span v-show="item.label.includes('时长')">s</span>
+                        {{ getCheckItemValue(item) }}
                       </span>
                     </el-checkbox>
                   </el-checkbox-group>
@@ -185,7 +171,9 @@
       </div>
     </div>
     <cameraImage
-      :cameraId="cameraImageProps.cameraId"
+      :compInitImg="compInitImg"
+      :getImageProps="cameraImageProps"
+      :currentBarRate="currentBarRate"
       @actionFinished="imageDialogShow = false"
       v-if="imageDialogShow"
     />
@@ -201,19 +189,19 @@ import {
   orgPasserby,
   orgNoVehicle,
   orgCrossPolygon,
+  helmetRateImages,
 } from "../../dao/organization";
 import wMap from "../../components/Standard/map/index.vue";
-import {
-  inletWayTimeBetw,
-  inletWayTurnTimeBetw,
-} from "../../../../wj-data-vision/src/dao/situation";
 import MapFlow from "./mapFlow.vue";
 import MapConflict from "./mapConflict.vue";
 import MapTrack from "./mapTrack.vue";
-// import { addOrUpdateRoadPolygon } from "../../utils/mapboxTools";
 import * as mapTools from "../../utils/mapboxTools";
 import mapAssets from "../../config/holo/mapAssets";
-import { equip_camera } from "../../dao/situation";
+import {
+  equip_camera,
+  inletWayTimeBetw,
+  inletWayTurnTimeBetw,
+} from "../../dao/situation";
 let bottomMap;
 export default {
   components: {
@@ -227,11 +215,13 @@ export default {
   },
   data() {
     return {
-      cameraImageProps: { cameraId: "" },
+      fullscreenLoading: false,
+      compInitImg: {},
+      currentBarRate: "",
+      cameraImageProps: { cameraId: "", startTime: "", endTime: "" },
       imageDialogShow: false,
       jinchukouMap: { 2: "进口", 3: "出口" },
       dirMap: { 1: "左", 2: "直", 3: "右", 4: "掉头" },
-      // datePickerData: "2023-06-05",
       traStateColorMap: {
         1: "#42b200",
         2: "#eec900",
@@ -240,19 +230,12 @@ export default {
       },
       datePickerData: "",
       lastDatePicker: "",
-      cmOption: {
-        center: [118.089978, 36.644106], //旅游路洪山路
-        zoom: 18.33459428014952,
-        pitch: 0,
-        bearing: 0,
-      },
       initTab1: true,
       initTab2: true,
       currentCrossData: {},
       rightLoading: false,
       polygonLoading: false,
       tabsActiveName: "Passerby",
-      // sliderValue: 16,
       sliderValue: 16,
       lastSliderValue: "",
       sliderLabel: {
@@ -285,6 +268,8 @@ export default {
       passerbyFormCheck: [],
       noVehicleCheckList: [],
       noVehicleFormCheck: [],
+      init: true,
+      events: [],
     };
   },
   mounted() {
@@ -299,11 +284,18 @@ export default {
   },
   methods: {
     getCheckItemValue(item) {
-      return item.valueList
-        ? item.label.includes("率") || item.label.includes("占比")
-          ? (item.valueList[item.valueList.length - 1] * 100).toFixed(2)
-          : item.valueList[item.valueList.length - 1]
-        : "";
+      if (item.valueList && item.valueList.length) {
+        if (item.label.includes("率") || item.label.includes("占比")) {
+          return `${(
+            Number(item.valueList[item.valueList.length - 1]) * 100
+          ).toFixed(0)}%`;
+        } else if (item.label.includes("时长")) {
+          return `${item.valueList[item.valueList.length - 1]}s`;
+        } else {
+          return `${item.valueList[item.valueList.length - 1]}`;
+        }
+      }
+      return "";
     },
     getStartAndEndDate() {
       let end = `${this.datePickerData} ${
@@ -350,6 +342,7 @@ export default {
       this.passerbyFormCheck = [];
       this.noVehicleCheckList = [];
       this.noVehicleFormCheck = [];
+
       if (
         this.currentCrossData.id !== row.id ||
         this.lastDatePicker !== this.datePickerData ||
@@ -401,11 +394,11 @@ export default {
             this.roadPolygonArray.push(feature);
           }
           let geo = turf.featureCollection(this.roadPolygonArray);
-          mapTools.addOrUpdateRoadPolygon(
-            bottomMap,
-            geo,
-            this.crossPolygonClick
-          );
+          mapTools.addOrUpdateRoadPolygon(bottomMap, geo);
+          if (!this.events.includes("roadPolygon")) {
+            this.events.push("roadPolygon");
+            bottomMap.on("click", "roadPolygon", this.crossPolygonClick);
+          }
           // 地图展示第一条数据对应的车道面和流量
           setTimeout(() => {
             this.crossPolygonClick({
@@ -456,11 +449,12 @@ export default {
           let result = await Promise.all(queue);
           console.log("关联路段all direction....flow...", result);
           this.loadFlowChart2(result, jinchukouList);
-          let chukouRid =
-            prop.ridList.find((item) => {
-              return item.type === "2";
-            })?.rid || "";
-
+          // 筛选出口
+          let chukou = prop.ridList.find((item) => {
+            return item.type == "2";
+          });
+          let chukouRid = chukou?.rid || "";
+          // 如果有对应出口 加载流量趋势图 否则销毁已存在的流量趋势图
           if (chukouRid) {
             inletWayTurnTimeBetw({
               crossId: prop.crossId,
@@ -471,13 +465,15 @@ export default {
               console.log("转向流量趋势图", res);
               this.loadFlowChart1(res.content);
             });
+          } else {
+            this.loadFlowChart1(false);
           }
         } else {
           item.properties.select = 0;
         }
       }
       let geo = turf.featureCollection(this.roadPolygonArray);
-      mapTools.addOrUpdateRoadPolygon(bottomMap, geo, this.crossPolygonClick);
+      mapTools.addOrUpdateRoadPolygon(bottomMap, geo);
     },
     timeChange() {
       if (this.datePickerData) {
@@ -537,6 +533,16 @@ export default {
           },
         };
       }
+      let maxLength = 0;
+      let maxTimeList = [];
+      for (let item of datas) {
+        if (item.timeList) {
+          if (item.timeList?.length > maxLength) {
+            maxLength = item.timeList?.length;
+            maxTimeList = item.timeList;
+          }
+        }
+      }
       let option = {
         title: chartTitle,
         tooltip: {
@@ -578,7 +584,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: datas[0].timeList,
+          data: maxTimeList,
           axisLabel: {
             fontSize: getFontSize(12),
             color: "rgba(126, 139, 166, 1)",
@@ -604,6 +610,7 @@ export default {
             color: "rgba(126, 139, 166, 1)",
           },
         },
+        event: "click",
         series: (() => {
           let series = [];
           datas.forEach((data, index) => {
@@ -611,7 +618,9 @@ export default {
               itemStyle: {
                 normal: {
                   color:
-                    data.label.includes("率") || data.label.includes("占比")
+                    (data.label.includes("率") ||
+                      data.label.includes("占比")) &&
+                    !data.label.includes("头盔率")
                       ? "#e7cca3"
                       : new echarts.graphic.LinearGradient(
                           0,
@@ -638,7 +647,8 @@ export default {
               },
               name: data.label,
               type:
-                data.label.includes("率") || data.label.includes("占比")
+                (data.label.includes("率") || data.label.includes("占比")) &&
+                !data.label.includes("头盔率")
                   ? "line"
                   : "bar",
               label: {
@@ -657,11 +667,63 @@ export default {
       this.$nextTick(() => {
         this[containerId] = echarts.init(document.getElementById(containerId));
         this[containerId].setOption(option, true);
+        if (this.init && containerId === "chartNoVehicle") {
+          // 防止点击事件多次绑定
+          this.init = false;
+          this[containerId].on("click", this.chartNoVehicleClick);
+        }
         window.addEventListener("resize", () => {
           this[containerId].resize();
         });
+        this[containerId].resize();
       });
     },
+    getTimeStr(dateTime) {
+      let date = new Date(dateTime);
+      let Y = date.getFullYear() + "-";
+      let M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      let D =
+        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
+      let h =
+        date.getHours() < 10
+          ? "0" + date.getHours() + ":"
+          : date.getHours() + ":";
+      let m =
+        date.getMinutes() < 10
+          ? "0" + date.getMinutes() + ":"
+          : date.getMinutes() + ":";
+      let s =
+        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      return Y + M + D + h + m + s;
+    },
+    // todo
+    chartNoVehicleClick(param) {
+      console.log("click ", param);
+      //   let currentBarTime = param.name // '17:00'
+      //   let thisTimeData = param.data
+      if (param.seriesName === "非机动车佩戴头盔率") {
+        let endDateAndTime = `${this.datePickerData} ${param.name}:00`;
+        let startTime = new Date(endDateAndTime).getTime() - 1000 * 60 * 15;
+        let startDateAndTime = this.getTimeStr(startTime);
+        this.cameraImageProps.startTime = startDateAndTime;
+        this.cameraImageProps.endTime = endDateAndTime;
+        this.currentBarRate = (Number(param.data) * 100).toFixed(2) + "%";
+
+        // todo 获取相机点位并添加图层 相机点击事件触发获取图片并弹出图片窗口
+        equip_camera().then((camera) => {
+          let cameraGeo = this.convertToGeoWithWkt(camera.content);
+          mapTools.addOrUpdateEquipCamera(bottomMap, cameraGeo);
+          if(!this.events.includes('camera')){
+            this.events.push('camera')
+          bottomMap.on("click", "camera", this.cameraClick);
+
+          }
+        });
+      }
+    },
     passerbyCheckChange(e) {
       let datas = [];
       for (let item of this.passerbyFormCheck) {
@@ -716,6 +778,27 @@ export default {
             // return [3, 4, 5, 6, 7, 8].includes(item.type);
             return [3, 4, 9].includes(item.type); // 混行及占比暂时删除 禅道bug294 添加戴盔率 type 9
           });
+          for (let j = 0; j < this.noVehicleFormCheck.length; j++) {
+            if (this.noVehicleFormCheck[j].type == 9 && this.noVehicleFormCheck[j].valueList?.length) {
+              for (
+                let i = 0;
+                i < this.noVehicleFormCheck[j].valueList.length;
+                i++
+              ) {
+                this.noVehicleFormCheck[j].valueList[i] =
+                  (Number(
+                    this.noVehicleFormCheck[j].valueList[i].replace("%", "")
+                  ) * 0.01).toFixed(0);
+              }
+            }
+          }
+          // 模拟数据---todo
+          //   this.noVehicleFormCheck[0].timeList = ["08:45"];
+          //   this.noVehicleFormCheck[2].timeList = ["08:45"];
+          //   this.noVehicleFormCheck[2].valueList = [0.98];
+
+          // ----------
+          console.log("this.noVehicleFormCheck", this.noVehicleFormCheck);
           if (this.noVehicleFormCheck.length) {
             this.noVehicleCheckList.push(this.noVehicleFormCheck[0].label);
             this.refreshChart([this.noVehicleFormCheck[0]], "chartNoVehicle");
@@ -723,12 +806,6 @@ export default {
           this.initTab2 = false;
         });
       }
-      // todo 获取相机点位并添加图层 相机点击事件触发获取图片并弹出图片窗口
-      equip_camera().then((camera) => {
-        let cameraGeo = this.convertToGeoWithWkt(camera.content);
-        mapTools.addOrUpdateEquipCamera(bottomMap, cameraGeo);
-        bottomMap.on("click", "camera", this.cameraClick);
-      });
     },
     convertToGeoWithWkt(json) {
       let features = [];
@@ -748,14 +825,36 @@ export default {
       console.log(e.features);
       if (e.features.length) {
         let prop = e.features[0].properties;
-        this.cameraImageProps.cameraId = prop.equipIp;
-        this.imageDialogShow = true;
+        if (prop.status == 1) {
+          this.cameraImageProps.cameraId = prop.equipIp;
+          this.fullscreenLoading = true;
+          helmetRateImages({
+            ...this.cameraImageProps,
+            page: 1,
+            size: 1,
+          }).then((res) => {
+            this.fullscreenLoading = false;
+            if (res.content.rows && res.content.rows.length) {
+              this.compInitImg.url= `data:image/png;base64,${res.content.rows[0].shootImage}`;
+              this.compInitImg.total= res.content.total
+              this.imageDialogShow = true;
+            } else {
+              ELEMENT.Message("此相机当前时段无图片信息！");
+            }
+          });
+        }
       }
     },
     switchTabVehicle() {
       this.getCrossPolygon();
     },
     loadFlowChart1(result) {
+      if (!result) {
+        result = {
+          timeList: [],
+          dataList: [],
+        };
+      }
       let chartTitle = {
         show: false,
       };
@@ -840,7 +939,6 @@ export default {
               type: "bar",
               barWidth: 6,
               barGap: 1.5,
-
               label: {
                 show: true,
                 position: "top",
@@ -848,12 +946,6 @@ export default {
                 formatter: () => {
                   return this.dirMap[item.turnDirNo];
                 },
-                // formatter: () => {
-                //   if (item.turnDirNo === "1") return "左";
-                //   if (item.turnDirNo === "2") return "直";
-                //   if (item.turnDirNo === "3") return "右";
-                //   if (item.turnDirNo === "4") return "掉头";
-                // },
               },
               itemStyle: {
                 normal: {
@@ -991,20 +1083,14 @@ export default {
       });
       // }
     },
-    removeLayer(map, layer) {
-      if (map && map.getLayer(layer)) {
-        map.removeLayer(layer);
-      }
-    },
     // 刷新下侧地图 中 geo形状信息
     refreshBottomScene(tabName) {
       // 车道功能tab页 显示路段 polygon 否则 hide
       if (tabName !== "Vehicle") {
-        this.removeLayer(bottomMap, "roadPolygon");
-      }
-      if (tabName !== "NoVehicle") {
-        this.removeLayer(bottomMap, "camera");
+        bottomMap?.getLayer("roadPolygon") &&
+          bottomMap?.removeLayer("roadPolygon");
       }
+      bottomMap?.getLayer("camera") && bottomMap?.removeLayer("camera");
     },
     tabsHandleClick(e) {
       this[`switchTab${e.name}`]();

wj-manage-web/src/views/organization/mapFlow.vue

@@ -100,7 +100,8 @@ export default {
             this.mapPolygons.push(feature);
           }
           let geo = turf.featureCollection(this.mapPolygons);
-          addOrUpdateRoadPolygon(map, geo, this.crossPolygonClick);
+          addOrUpdateRoadPolygon(map, geo);
+          map.on("click", "roadPolygon", this.crossPolygonClick);
           console.log("转向弧线", line);
           console.log("车道流量", flow);
           this.flowJson = [];

wj-manage-web/src/views/safety/analysisTypes.vue

@@ -46,7 +46,7 @@
           header-row-class-name="custom-table-header"
           header-cell-class-name="custom-table-header-cell"
         >
-          <el-table-column align='center' min-width="40" label="事件ID" prop="id">
+          <el-table-column align='center' min-width="40" label="事件ID" prop="eventId">
           </el-table-column>
           <el-table-column align='center'
             min-width="50"
@@ -154,6 +154,15 @@ export default {
       return "未定义";
     },
     setBarOption() {
+        console.log('this.series1',this.series1);
+        let maxData = 0
+        for(let item of this.series1){
+            if(item.value){
+                maxData = Math.max(maxData, item.value)
+            }else{
+                maxData = Math.max(maxData, item)
+            }
+        }
       let colors = [
         "rgba(65, 130, 242,1)",
         "rgba(255, 166, 0,1)",
@@ -254,7 +263,7 @@ export default {
             axisLine: {
               show: false,
             },
-            // max: ,
+            max: maxData+12,
             splitLine: {
               show: true,
               lineStyle: {
@@ -272,10 +281,9 @@ export default {
             markLine: {
               silent: true,
               data: [
-                {
-                  symbol: "none",
+                {                  symbol: "none",
                   name: "警戒线",
-                  yAxis: 60,
+                  yAxis: maxData+10,
                   lineStyle: {
                     color: "rgba(173, 158, 21, 1)",
                     type: "solid",
@@ -291,25 +299,25 @@ export default {
                     },
                   },
                 },
-                {
-                  symbol: "none",
-                  name: "事故线",
-                  yAxis: 90,
-                  label: {
-                    color: "rgba(217, 231, 255, 1)",
-                    fontSize: 12,
-                    show: true,
-                    position: "insideEnd",
-                    formatter: () => {
-                      return "事故线";
-                    },
-                  },
-                  lineStyle: {
-                    color: "rgba(212, 48, 48, 1)",
-                    type: "solid",
-                    cap: "butt",
-                  },
-                },
+                // {
+                //   symbol: "none",
+                //   name: "事故线",
+                //   yAxis: 90,
+                //   label: {
+                //     color: "rgba(217, 231, 255, 1)",
+                //     fontSize: 12,
+                //     show: true,
+                //     position: "insideEnd",
+                //     formatter: () => {
+                //       return "事故线";
+                //     },
+                //   },
+                //   lineStyle: {
+                //     color: "rgba(212, 48, 48, 1)",
+                //     type: "solid",
+                //     cap: "butt",
+                //   },
+                // },
               ],
             },
             itemStyle: {

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

@@ -58,6 +58,7 @@
         <path-map-ctrl
           :params="pathParam"
           :apiName="pathApiName"
+          :eventTargetVehicleGlobalId="eventTargetVehicleGlobalId"
           ref="pathMap"
           :showCtrl="true"
           class="commonPathMap"
@@ -166,9 +167,6 @@ export default {
   },
   mounted() {},
   methods: {
-    refreshHeatMap(tableData) {
-      this.$refs.pathMap?.refreshHeatMap(tableData);
-    },
     dayTypeChange() {
       this.$nextTick(() => {
         this.$refs[`comp${this.tabsActiveName}`].refreshBarChart();
@@ -200,7 +198,10 @@ export default {
     },
     eventPlay(row) {
       console.log("event play...", row);
+      // 历史轨迹视频 && 接口api名称
       this.cameraType = "history";
+      this.pathApiName = "allTrack";
+      this.eventTargetVehicleGlobalId = row.globalId;
       if (row.cameraChannels) {
         this.cameraChannels = row.cameraChannels.split(","); // todo
       } else {
@@ -213,12 +214,10 @@ export default {
         startTime: this.getTimeToDate(startT),
         endTime: this.getTimeToDate(endT),
       };
-
       this.pathParam = {
         ...this.cameraTimeBetween,
         crossId: row.crossId,
       };
-      this.pathApiName = "allTrack";
       this.$nextTick(() => {
         this.$refs.pathMap.getTracksAndPlay();
       });
@@ -229,17 +228,17 @@ export default {
         Object.keys(this.currentCrossData).length &&
         Object.keys(this.compareCrossData).length
       ) {
-        if (type === "level") {
-          return Number(this.currentCrossData[param]) >
-            Number(this.compareCrossData[param])
-            ? this.down
-            : this.up;
+        if (
+          Number(this.currentCrossData[param]) >
+          Number(this.compareCrossData[param])
+        ) {
+          return type === "level" ? this.down : this.up;
         }
-        if (type === "number") {
-          return Number(this.currentCrossData[param]) <
-            Number(this.compareCrossData[param])
-            ? this.down
-            : this.up;
+        if (
+          Number(this.currentCrossData[param]) <
+          Number(this.compareCrossData[param])
+        ) {
+          return type === "level" ? this.up : this.down;
         }
       }
       return "";
@@ -251,7 +250,7 @@ export default {
     },
     // 选择不同路口 => 更新右侧所有数据
     crossChange(row) {
-      this.$refs.pathMap.clearMap();
+      this.clearPath();
       this.currentCrossData = row;
       this.$refs[`comp${this.tabsActiveName}`].initData();
       if (Array.isArray(row.cameraList)) {

wj-manage-web/src/views/situation/MapPopup/eventPopup.vue

@@ -3,8 +3,8 @@
     <div class="header">事件详情</div>
     <div class="main">
       <div class="detail_item" v-for="item of eventDetails" :key="item._id">
-        <div class="label">{{ item.label }}</div>
-        <div class="value">{{ item.value }}</div>
+        <div class="detail_item_label">{{ item.label }}</div>
+        <div class="detail_item_value">{{ item.value }}</div>
       </div>
     </div>
   </div>
@@ -77,13 +77,13 @@ export default {
     background-position-y: center;
     background-repeat: no-repeat;
 
-    .label {
+    .detail_item_label {
       padding-left: 30PX;
       //line-height: 24PX;
       color: #bcdaec;
     }
 
-    .value {
+    .detail_item_value {
       //line-height: 24PX;
       color: white;
       overflow: hidden;

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

@@ -147,6 +147,7 @@ let map,
   vehicleModelTypes = {},
   lastFrameTime = null,
   noTrackMsg = null,
+  stopLineData = [],
   radarModels = {},
   radarModelTypes = {},
   radarTimers = [],
@@ -173,7 +174,6 @@ export default {
       detetorsArray: [],
       detetorsStatus: false,
       trackSwitcherVis: false,
-      lightColorMap: { red: "1", green: "3", yellow: "2" }, //与灯态图片命名关联
       crossPoints: null, //所有路口lnglat geojson集合
       currentNearestCrossId: "", // 当前离视图中心点最近的路口id
       bounds: [],
@@ -191,7 +191,6 @@ export default {
       videoListData: [],
       timeState: false,
       licenseState: true,
-      stopLineData: {},
       layers: {
         first: [
           "milliScope",
@@ -239,6 +238,12 @@ export default {
   },
   created() {},
   mounted() {
+    fetch("stopLines.json").then((res) => {
+      res.json().then((result) => {
+        console.log("rrr", result);
+        stopLineData = result.content;
+      });
+    });
     this.getMapParamsTimer = setInterval(() => {
       if (map && map.getCenter()) {
         console.log("地图当前视角信息：");
@@ -277,11 +282,15 @@ export default {
         重度拥堵: 3,
         疑似事故: 4,
       };
+      let targetLngLat = [item.lng, item.lat];
       let geo = turf.featureCollection([
-        turf.point([item.lng, item.lat], { type: iconNameMap[item.eventType] }),
+        turf.point(targetLngLat, { type: iconNameMap[item.eventType] }),
       ]);
       // console.log("geo", geo);
       mapTools.addOrUpdateWarningWave(map, geo);
+      //   map?.flyTo({
+      //     center: targetLngLat,
+      //   });
       // 如果是由于上报产生的告警 （而非鼠标悬浮交互展示的
       // 则定时清除 （5s
       if (option.type === "auto") {
@@ -297,13 +306,9 @@ export default {
       this.situationTimeVal = time;
     },
     removeLayers(names) {
-      // map.off("click", this[`${layerId}Click`]);
       if (map) {
         for (let layerId of names.split(",")) {
           if (map.getLayer(layerId)) {
-            // if (this[`${layerId}Click`]) {
-            //   map.off("click", layerId, this[`${layerId}Click`]);
-            // }
             map.removeLayer(layerId);
           }
           if (map.getSource(layerId)) {
@@ -380,6 +385,7 @@ export default {
       map = this.$refs.wMap.initMap();
       window.map = map;
       map.on("style.load", () => {
+        //   map.on("load", () => {
         // 添加map icons图片资源 ---start
         for (let key in mapAssets.lightIcons) {
           map.loadImage(mapAssets.lightIcons[key], (error, image) => {
@@ -532,14 +538,9 @@ export default {
     writeOffListener() {
       map.off("zoomend", this.mapZoomEnd);
       map.off("moveend", this.mapMoveEnd);
-      map.off("click", this.equipmentsClick);
-    },
-    mapMoveEnd() {
-      if (map.getZoom() > 18) {
-        this.refreshLightWs("move");
-        this.refreshBounds();
-      }
+      //   map.off("click", this.equipmentsClick);
     },
+
     // 转换描述文字为具体方向值
     translateToDirCode(dirDesc) {
       if (dirDesc.includes("西")) {
@@ -579,10 +580,16 @@ export default {
           let lnglat = this.radarDatas[i].wkt.split(",");
           let center = turf.point(lnglat);
           let radius = 0.17; // 100米半径
-          let thisRadarDir = this.radarDatas[i].equipAddr;
-          let dirCode = this.translateToDirCode(thisRadarDir);
+          //   let thisRadarDir = this.radarDatas[i].equipAddr;
+          //   let dirCode = this.translateToDirCode(thisRadarDir);
+          let dirCode = this.radarDatas[i].ridDir;
           let bearings =
             MilliRadarBearingMap[`${this.radarDatas[i].crossId}-${dirCode}`];
+          console.log(
+            "bearings",
+            MilliRadarBearingMap[`${this.radarDatas[i].crossId}-${dirCode}`],
+            `${this.radarDatas[i].crossId}-${dirCode}`
+          );
           if (bearings) {
             let arc = turf.lineArc(center, radius, bearings[0], bearings[1], {
               unit: "kilometers",
@@ -608,10 +615,11 @@ export default {
     addRadarTimers(radarData, index) {
       this.radarShow = true;
       const numRings = 4; // 水波的层数
-      const maxMeters = radarData.sourceEquipType == 1 ? 100 : 200; // 最大半径，例如100米
-      const maxPx = this.convertPxToMeter(maxMeters, map.getZoom());
+      const maxMeters = 200; // 最大半径，例如100米
       let lnglat = radarData.wkt.split(",");
-      for (let ii = 0; ii < numRings; ii++) {
+      const maxPx = this.convertPxToMeter(maxMeters, map.getZoom(), lnglat[1]);
+
+      for (let ii = 0; ii <= numRings; ii++) {
         const radius = (ii / numRings) * maxPx;
         const opacity = 1 - ii / numRings;
         if (!map.getSource(`circle-source-${ii}-${index}`)) {
@@ -652,7 +660,11 @@ export default {
       }
       let timer = setInterval(() => {
         if (map && map.getLayer("circle-layer-0-0")) {
-          let maxPxInterval = this.convertPxToMeter(maxMeters, map.getZoom());
+          let maxPxInterval = this.convertPxToMeter(
+            maxMeters,
+            map.getZoom(),
+            lnglat[1]
+          );
           for (let ii = 0; ii < numRings; ii++) {
             let radius = map.getPaintProperty(
               `circle-layer-${ii}-${index}`,
@@ -695,12 +707,16 @@ export default {
       }, 20);
       radarTimers.push(timer);
     },
-    convertPxToMeter(meter, zoom) {
-      // Mapbox的Mercator投影
-      var metersPerPixel = (40075016.686 * Math.cos(0)) / Math.pow(2, zoom + 8);
-      // 长度（米）转换为像素值
-      var pixelValue = meter / metersPerPixel;
-      return pixelValue;
+    convertPxToMeter(meter, zoom, latitude) {
+      //   // Mapbox的Mercator投影
+      //   var metersPerPixel = (40075016.686 * Math.cos(0)) / Math.pow(2, zoom + 8);
+      //   // 长度（米）转换为像素值
+      //   var pixelValue = meter / metersPerPixel;
+      //   return pixelValue;
+      let a = 40075017;
+      let b = latitude * (Math.PI / 180);
+      let c = (a * Math.cos(b)) / Math.pow(2, zoom + 8);
+      return meter / c;
     },
     clearRadarWave() {
       for (let tim of radarTimers) {
@@ -714,9 +730,21 @@ export default {
       }
       this.radarShow = false;
     },
+    mapMoveEnd() {
+      this.refreshBounds();
+      // 模块一：地图 moveend 刷新灯态
+      if (this.currentCheck == "first") {
+        if (map.getZoom() > 18) {
+          this.refreshLightWs("move");
+        }
+      }
+    },
     mapZoomEnd() {
+      this.refreshBounds();
+      // 模块一：地图 zoomend 刷新灯态 刷新雷达图层 刷新线圈
       if (this.currentCheck === "first") {
         if (map.getZoom() > 17) {
+          this.refreshLightWs("zoom");
           if (!this.radarShow) {
             this.radarShow = true;
             this.loadRadars();
@@ -730,77 +758,72 @@ export default {
               }
             });
           }
+          //----------------------------------------
+          if (!this.detetorsStatus) {
+            let ws1 = initWs({
+              name: "callDetetorA",
+              url: ws_config.BASE_URL,
+              callback: (e) => this.callDetetor(e, "A"),
+            });
+            let ws2 = initWs({
+              name: "callDetetorB",
+              url: ws_config.BASE_URL,
+              callback: (e) => this.callDetetor(e, "B"),
+            });
+            let ws3 = initWs({
+              name: "callDetetorC",
+              url: ws_config.BASE_URL,
+              callback: (e) => this.callDetetor(e, "C"),
+            });
+            this.$nextTick(() => {
+              for (let key in this.detetors) {
+                let geo = this.convertToLineWithWkt(this.detetors[key]);
+                let type = key.slice(key.length - 1, key.length);
+                mapTools[`addOrUpdateDetetor${type}`](map, geo);
+              }
+            });
+            ws1.ws.onopen = () => {
+              if (ws1.ws.readyState === 1) {
+                ws1.ws.send('{ dataType: "DETECTOR_A"}');
+                this.sockets.push(ws1);
+              }
+            };
+            ws2.ws.onopen = () => {
+              if (ws2.ws.readyState === 1) {
+                ws2.ws.send('{ dataType: "DETECTOR_B"}');
+                this.sockets.push(ws2);
+              }
+            };
+            ws3.ws.onopen = () => {
+              if (ws3.ws.readyState === 1) {
+                ws3.ws.send('{ dataType: "DETECTOR_C"}');
+                this.sockets.push(ws3);
+              }
+            };
+            this.detetorsStatus = true;
+          }
         } else {
           this.clearRadarWave();
           this.removeLayers("milliScope");
           for (let key in radarModels) {
             window.tb.clear(key, null);
           }
-        }
-      }
-
-      if (map.getZoom() > 18) {
-        this.refreshLightWs("zoom");
-        if (!this.detetorsStatus) {
-          let ws1 = initWs({
-            name: "callDetetorA",
-            url: ws_config.BASE_URL,
-            callback: (e) => this.callDetetor(e, "A"),
-          });
-          let ws2 = initWs({
-            name: "callDetetorB",
-            url: ws_config.BASE_URL,
-            callback: (e) => this.callDetetor(e, "B"),
-          });
-          let ws3 = initWs({
-            name: "callDetetorC",
-            url: ws_config.BASE_URL,
-            callback: (e) => this.callDetetor(e, "C"),
+          this.$refs.videoList?.destroyAll();
+          this.videoListData = [];
+          this.removeLightModels();
+          this.closeWs("callLight").then(() => {
+            this.currentNearestCrossId = null;
           });
-          this.$nextTick(() => {
-            for (let key in this.detetors) {
-              let geo = this.convertToLineWithWkt(this.detetors[key]);
-              let type = key.slice(key.length - 1, key.length);
-              mapTools[`addOrUpdateDetetor${type}`](map, geo);
-            }
+          Promise.all([
+            this.closeWs("callDetetorA"),
+            this.closeWs("callDetetorB"),
+            this.closeWs("callDetetorC"),
+          ]).then(() => {
+            this.removeLayers("detetorsA,detetorsB,detetorsC");
+            this.detetorsStatus = false;
           });
-          ws1.ws.onopen = () => {
-            if (ws1.ws.readyState === 1) {
-              ws1.ws.send('{ dataType: "DETECTOR_A"}');
-              this.sockets.push(ws1);
-            }
-          };
-          ws2.ws.onopen = () => {
-            if (ws2.ws.readyState === 1) {
-              ws2.ws.send('{ dataType: "DETECTOR_B"}');
-              this.sockets.push(ws2);
-            }
-          };
-          ws3.ws.onopen = () => {
-            if (ws3.ws.readyState === 1) {
-              ws3.ws.send('{ dataType: "DETECTOR_C"}');
-              this.sockets.push(ws3);
-            }
-          };
-          this.detetorsStatus = true;
         }
-      } else {
-        this.$refs.videoList?.destroyAll();
-        this.videoListData = [];
-        this.removeLightModels();
-        this.closeWs("callLight").then(() => {
-          this.currentNearestCrossId = null;
-        });
-        Promise.all([
-          this.closeWs("callDetetorA"),
-          this.closeWs("callDetetorB"),
-          this.closeWs("callDetetorC"),
-        ]).then(() => {
-          this.removeLayers("detetorsA,detetorsB,detetorsC");
-          this.detetorsStatus = false;
-        });
       }
-      this.refreshBounds();
     },
     refreshLightWs(source) {
       if (!this.crossPoints) {
@@ -910,18 +933,20 @@ export default {
       // 因为接收到检测器个数不完整
       // 需要与所有检测器信息聚合 后 再更新图层 避免缺失
       // id 只在 全量数据 中存在且不在 接收数据 中存在的即为 需要合并的数据
-      let del = this.detetors[`DETECTOR_${type}`].filter(
-        (e) => !msg.find((c) => c.laneId === e.laneId)
-      );
-      for (let item of msg) {
-        let match = this.detetors[`DETECTOR_${type}`].find((de) => {
-          return de.laneId === item.laneId;
-        });
-        item.wkt = match?.wkt;
+      if (this.detetors[`DETECTOR_${type}`]) {
+        let del = this.detetors[`DETECTOR_${type}`].filter(
+          (e) => !msg.find((c) => c.laneId === e.laneId)
+        );
+        for (let item of msg) {
+          let match = this.detetors[`DETECTOR_${type}`].find((de) => {
+            return de.laneId === item.laneId;
+          });
+          item.wkt = match?.wkt;
+        }
+        let currentAll = [...msg, ...del];
+        let geo = this.convertToLineWithWkt(currentAll);
+        mapTools[`addOrUpdateDetetor${type}`](map, geo);
       }
-      let currentAll = [...msg, ...del];
-      let geo = this.convertToLineWithWkt(currentAll);
-      mapTools[`addOrUpdateDetetor${type}`](map, geo);
     },
 
     switchsecond() {
@@ -1101,53 +1126,66 @@ export default {
     // },
     // 设备点击
     equipmentsClick(e) {
+      popupInstance?.$destroy();
+      popupInstance = null;
       const features = map.queryRenderedFeatures(e.point, {
         layers: ["camera", "milli", "radar", "signal", "weather"],
       });
-      console.log("fff", features);
-      let prop = Object.assign({}, features[0].properties, {
-        eType: features[0].layer.id,
-      });
-      let type = prop.eType;
-      // 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
-      // 使用 Turf.js 进行平移计算
-      let distance = 10; // 指定的平移距离（以米为单位）
-      if (type === "signal") {
-        //信号机popup窗口高度过高 加大偏移防止超出屏幕
-        distance = 80;
+      if (features.length) {
+        console.log("fff", features);
+        let prop = features[0].properties;
+        let type = features[0].layer.id;
+        if (prop.status == "1") {
+          setTimeout(() => {
+            // 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
+            // 使用 Turf.js 进行平移计算
+            let distance = 10; // 指定的平移距离（以米为单位）
+            if (type === "signal") {
+              //信号机popup窗口高度过高 加大偏移防止超出屏幕
+              distance = 80;
+            }
+            var bearing = map.getBearing(); // 平移方向，0 表示正北方向
+            var options = { units: "meters" };
+            var translatedPoint = turf.destination(
+              prop.wkt.split(","),
+              distance,
+              bearing,
+              options
+            );
+            // 将地图中心点设置为平移后的点
+            map.flyTo({
+              center: translatedPoint.geometry.coordinates,
+              zoom: 18,
+            });
+            equipPopup = new mapboxgl.Popup({
+              anchor: "bottom",
+              offset: [0, -20],
+            });
+            equipPopup
+              .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 },
+              },
+            });
+            popupInstance.$mount("#equipment_popup");
+            equipPopup?.on("close", () => {
+              popupInstance?.$destroy();
+              popupInstance = null;
+              equipPopup = null;
+            });
+          }, 100);
+        } else {
+          ELEMENT.Message("设备已离线，请联系厂商");
+        }
       }
-      var bearing = map.getBearing(); // 平移方向，0 表示正北方向
-      var options = { units: "meters" };
-      var translatedPoint = turf.destination(
-        prop.wkt.split(","),
-        distance,
-        bearing,
-        options
-      );
-      //   debugger
-      // 将地图中心点设置为平移后的点
-      map.flyTo({ center: translatedPoint.geometry.coordinates, zoom: 18 });
-      equipPopup = new mapboxgl.Popup({ anchor: "bottom", offset: [0, -20] });
-      equipPopup
-        .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 },
-        },
-      });
-      popupInstance.$mount("#equipment_popup");
-      equipPopup?.on("close", () => {
-        popupInstance.$destroy();
-        equipPopup = null;
-      });
     },
     removeVehiclePopup() {
       console.log("do delete all Popups...");
-
       for (let key in vehiclePopups) {
         vehiclePopups[key]?.remove();
       }
@@ -1157,6 +1195,7 @@ export default {
     },
     // 切换业务图层
     changeCheck(beforeLabel, checkItem) {
+      this.refreshBounds();
       this.currentCheck = checkItem.label;
       if (beforeLabel === "first") {
         this.clearTrackTimer();
@@ -1306,6 +1345,7 @@ export default {
     },
     // 选中模型改变
     onSelectedChangeVehicle(e) {
+      console.log("flalkdsflkajdflsjl");
       if (e.detail.selected) {
         this.removeVehiclePopup();
         this.clearSelectVehicle();
@@ -1518,7 +1558,6 @@ export default {
         );
         vehicleModels[option.id] = model;
         window.tb.add(model, option.id);
-        // console.log(vehicleModels[option.id].visible,vehicleModels[option.id].visibility,vehicleModels[option.id].hidden);
       }
     },
     addVehicleLicenses(option) {
@@ -1558,73 +1597,66 @@ export default {
     },
 
     // 获取单个路口的停止线
-    async getSingleCrossStopLine(crossId) {
-      let res = await getStopLineByLkid({ lkid: crossId });
-      this.stopLineData[crossId] = res.content;
-    },
+    // async getSingleCrossStopLine(crossId) {
+    //   let res = await getStopLineByLkid({ lkid: crossId });
+    //   this.stopLineData[crossId] = res.content;
+    // },
     callLight(msg) {
       this.$EventBus.$emit("callLight", msg);
       if (msg[0] && msg[0].dirLampGroupMap && msg[0].phaseMap) {
-        let queue = [];
-        for (let cross of msg) {
-          if (!this.stopLineData[cross.crossId]) {
-            queue.push(this.getSingleCrossStopLine(cross.crossId));
-          }
-        }
-        Promise.all(queue).then(() => {
-          let colorLight = msg[0].dirLampGroupMap;
-          let lights = [];
-          for (let dir in colorLight) {
-            // 此方向的停止线
-            let singleDirStop = this.stopLineData[msg[0].crossId].find(
-              (item) => {
-                return item.dirtype == dir;
-              }
+        let lights = [];
+        let colorLight = msg[0].dirLampGroupMap;
+        for (let dir in colorLight) {
+          // 此方向的停止线
+          let singleDirStop = stopLineData.find((item) => {
+            return item.dirtype == dir && item.lkid == msg[0].crossId;
+          });
+          let currentDirAngle = singleDirStop.angle;
+          if (singleDirStop) {
+            let resultStopLine = turf.lineString(
+              JSON.parse(singleDirStop.geom).coordinates
             );
-            if (singleDirStop) {
-              // 停止线往路口中心偏移1.5米
-              let singleDirLine = turf.lineOffset(
-                JSON.parse(singleDirStop.geom),
-                -0.0015,
-                {
-                  units: "kilometers",
-                }
-              ).geometry.coordinates;
-              let center = turf.midpoint(
-                turf.point(singleDirLine[0]),
-                turf.point(singleDirLine[singleDirLine.length - 1])
-              ).geometry.coordinates;
-
-              let leftLightLocation = singleDirLine[0]; // 左转灯位置
-              let centerLightLocation = center; // 直行灯位置
-              let rightLightLocation = singleDirLine[singleDirLine.length - 1]; // 右转灯位置
-              let lightLocations = {
-                1: leftLightLocation,
-                2: centerLightLocation,
-                3: rightLightLocation,
-              }; // 灯位置 与 灯态返回的type做对应策略
+            // 停止线往路口中心偏移1.5米
+            let singleDirLine = turf.lineOffset(resultStopLine, -0.0015, {
+              units: "kilometers",
+            }).geometry.coordinates;
+            let center = turf.midpoint(
+              turf.point(singleDirLine[0]),
+              turf.point(singleDirLine[singleDirLine.length - 1])
+            ).geometry.coordinates;
 
-              for (let turn in colorLight[dir]) {
+            let leftLightLocation = singleDirLine[0]; // 左转灯位置
+            let centerLightLocation = center; // 直行灯位置
+            let rightLightLocation = singleDirLine[singleDirLine.length - 1]; // 右转灯位置
+            let lightLocations = {
+              1: leftLightLocation,
+              2: centerLightLocation,
+              3: rightLightLocation,
+            }; // 灯位置 与 灯态返回的type做对应策略
+            for (let turn in colorLight[dir]) {
+              if (turn != "20" && turn != "3") {
+                let time = msg[0].phaseMap[dir][turn] || "-";
                 lights.push({
-                  roadDir: Number(dir),
-                  turn: turn,
+                  lightAngle: currentDirAngle ? currentDirAngle - 90 : 0,
+                  roadDir: Number(dir) - 1,
                   color: colorLight[dir][turn],
                   coordinates: lightLocations[turn],
-                  ts: `${turn}${this.lightColorMap[colorLight[dir][turn]]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
-                  state: this.lightColorMap[colorLight[dir][turn]], //状态(红绿黄)
-                  remainTime: msg[0].phaseMap[`${dir}-${turn}`], // 剩余时间
+                  ts: `${turn}${colorLight[dir][turn]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
+                  turn: turn,
+                  state: colorLight[dir][turn], //状态(红绿黄)
+                  remainTime: time, // 剩余时间
                 });
               }
             }
           }
-          let features = [];
-          for (let item of lights) {
-            features.push(turf.point(item.coordinates, item));
-          }
-          let geo = turf.featureCollection(features);
-          // // console.log("final geo", geo);
-          mapTools.addOrUpdateLightLayers(map, geo);
-        });
+        }
+        // console.log("lights.............", lights);
+        let features = [];
+        for (let item of lights) {
+          features.push(turf.point(item.coordinates, item));
+        }
+        let geo = turf.featureCollection(features);
+        mapTools.addOrUpdateLightLayers(map, geo);
       }
     },
     // 可关闭弹框关闭事件

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

@@ -374,7 +374,7 @@ export default {
         for (let helmet of helmetData) {
           total += Number(helmet.illegalNum);
         }
-        this.avgHelMet = ((total / helmetData.length) * 100).toFixed(2) + "%";
+        this.avgHelMet = ((total / helmetData.length) * 100).toFixed(0) + "%";
       } else {
         this.avgHelMet = "-";
       }
@@ -457,6 +457,9 @@ export default {
       crossFlow().then((res) => {
         console.log("路口流量", res);
         this.trafficFlowData.cross = res.content;
+        res.content.flowList = res.content.flowList.sort((a,b)=>{
+            return a.name.localeCompare(b.name)
+        })
         if (init) {
           this.$nextTick(() => {
             this.trafficFlow(this.trafficFlowData.cross, true);
@@ -466,6 +469,9 @@ export default {
       //路段
       ridFlow().then((res) => {
         console.log("路段流量", res);
+        res.content.flowList = res.content.flowList.sort((a,b)=>{
+            return a.name.localeCompare(b.name)
+        })
         this.trafficFlowData.road = res.content;
       });
     },
@@ -532,6 +538,10 @@ export default {
         "rgba(233, 66, 66,1)",
         "rgba(75, 75, 75,1)",
       ];
+      let unitMap = {
+        '最大行程时间':'min',
+        "行驶速度":'km/h'
+      }
       let option = {
         tooltip: {
           transitionDuration: 0,
@@ -543,6 +553,7 @@ export default {
           formatter: (params) => {
             let back = `${params.name}</br>`;
             for (let i = 0; i < params.data.key.length; i++) {
+                let unit = unitMap[params.data.key[i]]||''
               if (params.data.key[i] === "交通状态") {
                 let realValue = "";
                 for (let item of this.trafficMap) {
@@ -552,7 +563,7 @@ export default {
                 }
                 back += `${params.data.key[i]} : ${realValue} </br>`;
               } else {
-                back += `${params.data.key[i]} : ${params.data.value[i]} </br>`;
+                back += `${params.data.key[i]} : ${params.data.value[i]} ${unit}</br>`;
               }
             }
             return back;
@@ -703,7 +714,7 @@ export default {
                 str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
               }
               var tooltipHtml =
-                '<div style="max-height:150px;overflow-y:auto">' +
+                '<div style="max-height:120px;overflow-y:auto">' +
                 str +
                 "</div>";
               return tooltipHtml;
@@ -834,13 +845,17 @@ export default {
             confine: true,
             formatter: (params) => {
               let back = ``;
+              let unitMap = {
+                '机动车速度':'km/h'
+              }
               for (let item of params) {
+                let unit = unitMap[item.seriesName] || ''
                 if (
                   [pedNumLabel, notVehicleNumLabel, vehicleNumLabel].includes(
                     item.seriesName
                   )
                 ) {
-                  back += `${item.seriesName}&nbsp;&nbsp:&nbsp;&nbsp${item.data}</br>`;
+                  back += `${item.seriesName}&nbsp;&nbsp:&nbsp;&nbsp${item.data} ${unit}</br>`;
                 }
               }
               return back;

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

@@ -38,25 +38,27 @@
         此段轨迹数据暂无对应视频...
       </div>
       <div style="display: flex; margin: 0 auto">
+        <!-- :id="`videoVisibles${item.monitorChannel}`" -->
         <div
           class="cameraVideoShow"
           v-for="item of eventRowData.channels"
           :key="item"
-          :id="`videoVisibles${item.monitorChannel}`"
+          :id="`videoVisibles${item}`"
         >
           <loop-video
             @videoRestart="videoRestart"
             @videoReady="videoReady"
-            :channel="item.monitorChannel"
+            :channel="item"
             :timeModel="eventRowData"
           ></loop-video>
+          <!-- :channel="item.monitorChannel" -->
         </div>
       </div>
     </div>
     <!--鹰眼图-->
     <div class="small-map-container" v-show="showOverMap">
       <cesium-map
-        :loadTileset="false"
+        :loadTileset="true"
         cId="overMap"
         ref="cesiumOverMap"
         class="cesium-over-map"
@@ -82,11 +84,13 @@
       v-show="currentMenu === 'third'"
       :show="boxesShow"
       @playFullTrackWithVideo="playFullTrackWithVideo"
+      @getHisLights="getHisLights"
     />
     <menu-traffic-crowd
       v-show="currentMenu === 'fourth'"
       :show="boxesShow"
       @playFullTrack="playFullTrack"
+      @getHisLights="getHisLights"
     />
     <!--切换视角-->
     <per-switch
@@ -183,10 +187,13 @@ import vehicleDetail from "./MapPopup/vehicleDetail.vue";
 const VehiclePopup = Vue.extend(vehicleDetail);
 
 let viewer,
+  stopLineData = [],
   viewerS,
-  entityLines = {},
-  entityVehicles = {},
-  popup = null,
+  entityLines = {}, // 动态轨迹的目标车辆line
+  entityVehicles = {}, // 动态轨迹的所有车辆
+  lightEntities = {}, // 灯态entity
+  lightTexts = {}, // 灯态文字entity
+  popup = null, // 目标车辆弹窗
   tileFeatureMap1 = {
     // 路口-方向-转向
     // --------方向
@@ -212,7 +219,7 @@ let viewer,
     // 转山西路
     // "13NI00B5RM0-1-1": "HLD_LMX_008_M_R1",
   },
-  currentEntity = null,
+  currentEntity = null, // 需要展示弹窗的目标车辆
   timeRangeLights = [];
 export default {
   name: "track",
@@ -278,11 +285,143 @@ export default {
         speed: "",
         time: "",
       },
+      lightColorMap: { red: "1", green: "3", yellow: "2" }, //与灯态图片命名关联
+      lastTimeSecend: null,
     };
   },
   computed: {},
   methods: {
+    updateSceneLights() {
+      this.updateLights();
+      if (
+        this.currentMenu == "first" &&
+        this.currentView == "second" &&
+        currentEntity &&
+        currentEntity.position
+      ) {
+        let position = currentEntity.position.getValue(
+          viewer.clock.currentTime
+        );
+        if (position) {
+          // 插值实现红绿灯远小近大效果
+          var cameraPosition = viewer.camera.positionWC;
+          for (let key in lightEntities) {
+            let entity = lightEntities[key];
+            var entityPosition = entity.position.getValue(
+              viewer.clock.currentTime
+            );
+            if (Cesium.defined(entityPosition)) {
+              var distance = Cesium.Cartesian3.distance(
+                cameraPosition,
+                entityPosition
+              );
+              var scaleFactor = 35 / distance; // 调整这个系数以控制实体的缩放范围
+              if (scaleFactor > 1) {
+                scaleFactor = 1;
+              }
+              entity.billboard.scale = scaleFactor;
+            }
+          }
+          for (let key in lightTexts) {
+            let entity = lightTexts[key];
+            var entityPosition = entity.position.getValue(
+              viewer.clock.currentTime
+            );
+            if (Cesium.defined(entityPosition)) {
+              var distance = Cesium.Cartesian3.distance(
+                cameraPosition,
+                entityPosition
+              );
+              var scaleFactor = 35 / distance; // 调整这个系数以控制实体的缩放范围
+              if (scaleFactor > 1) {
+                scaleFactor = 1;
+              }
+              entity.label.scale = scaleFactor;
+            }
+          }
+        }
+      } else {
+        for (let key in lightEntities) {
+          let entity = lightEntities[key];
+          entity.billboard.scale = 1;
+        }
+        for (let key in lightTexts) {
+          let entity = lightTexts[key];
+          entity.label.scale = 1;
+        }
+      }
+    },
+    getHisLights(lights) {
+      timeRangeLights = lights;
+    },
     // 更新灯态
+    // updateLightsbackup() {
+    //   if (viewer.clock.shouldAnimate) {
+    //     // 获取cesium当前时间
+    //     let currentTime = Cesium.JulianDate.toDate(
+    //       viewer.clock.currentTime
+    //     ).toLocaleString();
+    //     let time = new Date(currentTime).getTime().toString();
+    //     let timeSecend = time.slice(0, time.length - 3);
+    //     // 根据 cesium 当前时间(timeSecend) 从 历史灯态数组中找到对应时间的灯态数据 => 渲染 3dtiles 灯态样式
+    //     let matchCrossLight = timeRangeLights.filter((item) => {
+    //       return item.timeStamp.slice(0, time.length - 3) == timeSecend;
+    //     });
+    //     // 根据 灯态数据 与 3dtiles feature name 匹配map 生成3dtile样式表达式 并赋值
+    //     // 当前灯态为红则把剩余的GreenYellow灯feature设置为black
+    //     // 当前灯态为黄则把剩余的GreenRed灯feature设置为black ...
+    //     // 下面replace逻辑需要此map 以避免代码重复编写
+    //     let otherLightMap = {
+    //       red: ["R", "G", "Y"],
+    //       yellow: ["Y", "G", "R"],
+    //       green: ["G", "R", "Y"],
+    //     };
+    //     if (matchCrossLight.length) {
+    //       console.log("timeChange.light", timeSecend);
+    //       let conditionResult = [];
+    //       for (let crosslight of matchCrossLight) {
+    //         let crossId = crosslight.crossId;
+    //         for (let dir in crosslight.dirLampGroupMap) {
+    //           for (let turn in crosslight.dirLampGroupMap[dir]) {
+    //             let arr = [];
+    //             let color = crosslight.dirLampGroupMap[dir][turn];
+    //             let mapKey = `${crossId}-${dir}-${turn}-${color}`;
+    //             if (tileFeatureMap1[mapKey]) {
+    //               arr.push([`\${name} === "${tileFeatureMap1[mapKey]}"`]);
+    //               arr.push([`color('${color}')`]);
+    //               conditionResult.push(arr);
+    //               if (otherLightMap[color]) {
+    //                 let otherLight1 = tileFeatureMap1[mapKey].replace(
+    //                   otherLightMap[color][0],
+    //                   otherLightMap[color][1]
+    //                 );
+    //                 let otherLight2 = tileFeatureMap1[mapKey].replace(
+    //                   otherLightMap[color][0],
+    //                   otherLightMap[color][2]
+    //                 );
+    //                 let otherCondition1 = [
+    //                   `\${name} === "${otherLight1}"`,
+    //                   `color('black')`,
+    //                 ];
+    //                 let otherCondition2 = [
+    //                   `\${name} === "${otherLight2}"`,
+    //                   `color('black')`,
+    //                 ];
+    //                 conditionResult.push(otherCondition1, otherCondition2);
+    //               }
+    //             }
+    //           }
+    //         }
+    //       }
+    //       console.log("new conditions", conditionResult);
+    //       window.tileset.style = new Cesium.Cesium3DTileStyle({
+    //         color: {
+    //           conditions: conditionResult,
+    //         },
+    //       });
+    //     }
+    //   }
+    // },
     updateLights() {
       if (viewer.clock.shouldAnimate) {
         // 获取cesium当前时间
@@ -291,62 +430,121 @@ export default {
         ).toLocaleString();
         let time = new Date(currentTime).getTime().toString();
         let timeSecend = time.slice(0, time.length - 3);
-        // 根据 cesium 当前时间(timeSecend) 从 历史灯态数组中找到对应时间的灯态数据 => 渲染 3dtiles 灯态样式
-        let matchCrossLight = timeRangeLights.filter((item) => {
-          return item.timestamp == timeSecend;
-        });
-        // 根据 灯态数据 与 3dtiles feature name 匹配map 生成3dtile样式表达式 并赋值
-        // 当前灯态为红则把剩余的GreenYellow灯feature设置为black
-        // 当前灯态为黄则把剩余的GreenRed灯feature设置为black ...
-        // 下面replace逻辑需要此map 以避免代码重复编写
-        let otherLightMap = {
-          red: ["R", "G", "Y"],
-          yellow: ["Y", "G", "R"],
-          green: ["G", "R", "Y"],
-        };
-        if (matchCrossLight.length) {
-          console.log("timeChange.light", timeSecend);
-          let conditionResult = [];
-          for (let crosslight of matchCrossLight) {
-            let crossId = crosslight.crossId;
-            for (let dir in crosslight.dirLampGroupMap) {
-              for (let turn in crosslight.dirLampGroupMap[dir]) {
-                let arr = [];
-                let color = crosslight.dirLampGroupMap[dir][turn];
-                let mapKey = `${crossId}-${dir}-${turn}-${color}`;
-                if (tileFeatureMap1[mapKey]) {
-                  arr.push([`\${name} === "${tileFeatureMap1[mapKey]}"`]);
-                  arr.push([`color('${color}')`]);
-                  conditionResult.push(arr);
-                  if (otherLightMap[color]) {
-                    let otherLight1 = tileFeatureMap1[mapKey].replace(
-                      otherLightMap[color][0],
-                      otherLightMap[color][1]
-                    );
-                    let otherLight2 = tileFeatureMap1[mapKey].replace(
-                      otherLightMap[color][0],
-                      otherLightMap[color][2]
+        if (this.lastTimeSecend != timeSecend) {
+          this.lastTimeSecend = timeSecend;
+          if (timeRangeLights.length) {
+            // 根据 cesium 当前时间(timeSecend) 从 历史灯态数组中找到对应时间的灯态数据 => 渲染 3dtiles 灯态样式
+            let matchCrossLight = timeRangeLights.filter((item) => {
+              return (
+                item.timeStamp.slice(0, item.timeStamp.length - 3) == timeSecend
+              );
+            });
+            if (matchCrossLight.length) {
+              // console.log("matchCrossLight", matchCrossLight);
+              for (let lightMap of matchCrossLight) {
+                // console.log("stopLineData", stopLineData);
+                let colorLight = lightMap.dirLampGroupMap;
+                let lights = [];
+                for (let dir in colorLight) {
+                  // 此方向的停止线
+                  let singleDirStop = stopLineData.find((stopLine) => {
+                    return (
+                      stopLine.dirtype == dir &&
+                      stopLine.lkid == lightMap.crossId
                     );
-                    let otherCondition1 = [
-                      `\${name} === "${otherLight1}"`,
-                      `color('black')`,
-                    ];
-                    let otherCondition2 = [
-                      `\${name} === "${otherLight2}"`,
-                      `color('black')`,
-                    ];
-                    conditionResult.push(otherCondition1, otherCondition2);
+                  });
+                  // console.log("current stopline", singleDirStop);
+                  if (singleDirStop) {
+                    let currentDirAngle = singleDirStop.angle;
+                    // 停止线往路口中心偏移1.5米
+                    let singleDirLine = turf.lineOffset(
+                      JSON.parse(singleDirStop.geom),
+                      -0.0015,
+                      {
+                        units: "kilometers",
+                      }
+                    ).geometry.coordinates;
+                    let center = turf.midpoint(
+                      turf.point(singleDirLine[0]),
+                      turf.point(singleDirLine[singleDirLine.length - 1])
+                    ).geometry.coordinates;
+                    let leftLightLocation = singleDirLine[0]; // 左转灯位置
+                    let centerLightLocation = center; // 直行灯位置
+                    let rightLightLocation =
+                      singleDirLine[singleDirLine.length - 1]; // 右转灯位置
+                    let lightLocations = {
+                      1: leftLightLocation,
+                      2: centerLightLocation,
+                      3: rightLightLocation,
+                    }; // 灯位置 与 灯态返回的type做对应策略
+                    for (let turn in colorLight[dir]) {
+                      if (turn != "20" && turn != "3") {
+                        lights.push({
+                          crossDirTurn: `${lightMap.crossId}-${dir}-${turn}`,
+                          color: colorLight[dir]?.[turn],
+                          coordinates: lightLocations[turn],
+                          ts: `${turn}${colorLight[dir]?.[turn]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
+                          remainTime:
+                            lightMap.phaseMap[dir]?.[turn]?.toString() || "-", // 剩余时间
+                        });
+                      }
+                    }
+                  }
+                }
+                  console.log("lights result...", lights);
+                for (let light of lights) {
+                  if (lightEntities[light.crossDirTurn]) {
+                    lightEntities[
+                      light.crossDirTurn
+                    ].billboard.image = `lightIcons/${light.ts}.png`;
+                  } else {
+                    // 创建Entity
+                    let entity = viewer.entities.add({
+                      position: Cesium.Cartesian3.fromDegrees(
+                        ...light.coordinates,
+                        3
+                      ),
+                      billboard: {
+                        image: `lightIcons/${light.ts}.png`,
+                        scale: 1.0,
+                      },
+                    });
+                    lightEntities[light.crossDirTurn] = entity;
+                  }
+                  if (lightTexts[light.crossDirTurn]) {
+                    // todo update text
+                    lightTexts[light.crossDirTurn].label.text =
+                      light.remainTime;
+                  } else {
+                    let entityText = viewer.entities.add({
+                      position: Cesium.Cartesian3.fromDegrees(
+                        ...light.coordinates,
+                        3
+                      ),
+                      label: {
+                        text: light.remainTime, // 设置文本内容
+                        font: "bold 14px Arial", // 设置字体和字体大小
+                        fillColor: Cesium.Color.WHITE, // 设置文本颜色
+                        outlineColor: Cesium.Color.BLACK, // 设置文本轮廓颜色
+                        outlineWidth: 3, // 设置文本轮廓宽度
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 设置文本样式
+                      },
+                    });
+                    lightTexts[light.crossDirTurn] = entityText;
                   }
                 }
               }
+            } else {
+              for (let key in lightEntities) {
+                viewer.entities.remove(lightEntities[key]);
+              }
+              for (let key in lightTexts) {
+                viewer.entities.remove(lightTexts[key]);
+              }
+              lightEntities = {};
+              lightTexts = {};
             }
           }
-          console.log("new conditions", conditionResult);
-          window.tileset.style = new Cesium.Cesium3DTileStyle({
-            color: {
-              conditions: conditionResult,
-            },
-          });
         }
       }
     },
@@ -422,7 +620,8 @@ export default {
     // 模块三 模块四 播放拥堵 & 事件轨迹
     playMultiTracksAndFlyCenter(data, center) {
       console.log("event & crowd center", center);
-      viewer.entities.removeAll();
+      this.switchTimeLine(true);
+      this.removeAllEntities();
       viewer.clock.shouldAnimate = false;
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(...center, 400),
@@ -537,7 +736,6 @@ export default {
             }
           }
         }
-
         // 如果当前为播放事件轨迹（第三模块） 则 找到当前事件的车辆及其轨迹
         if (this.currentMenu === "third" && this.eventRowData) {
           let currentVehicle = cars.find((item) => {
@@ -566,17 +764,30 @@ export default {
         viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
       });
     },
+    // 停止播放 删除所有实体 删除弹窗
+    removeAllEntities() {
+      this.playStatus = false;
+      viewer?.entities.removeAll();
+      viewerS?.entities.removeAll();
+      lightEntities = {};
+      lightTexts = {};
+      currentEntity = null;
+      entityVehicles = {};
+      entityLines = {};
+      popup?.remove();
+      popup = null;
+    },
     // 模块一 模块二 请求轨迹并播放
     queryPathByTime(rowData) {
+      this.removeAllEntities();
       if (!rowData.tracks || !rowData.tracks.length) {
         ELEMENT.Message.warning("当前数据无轨迹对应时间，无法获取轨迹！");
         return;
       }
       console.log("rowData request", rowData);
-      viewer.entities.removeAll();
-      viewerS.entities.removeAll();
       this.currentView = "first";
       this.$refs.perSwitch.resetPer();
+      this.showTrackSwitcher = false;
       this.fullscreenLoading = true;
       // 轨迹查询页面回放轨迹
       let startQ = rowData.tracks[0].startTime.slice(0, 19);
@@ -777,17 +988,14 @@ export default {
       });
     },
     // 交通事件轨迹回溯
-    playFullTrackWithVideo(data, rowData, center) {
-      this.switchTimeLine(true);
+    playFullTrackWithVideo(data, rowData) {
+      this.playMultiTracksAndFlyCenter(data, [rowData.lng, rowData.lat]);
       this.eventRowData = rowData;
-      console.log("eventRowData", rowData);
       this.cameraShow = true;
-      this.playMultiTracksAndFlyCenter(data, center);
     },
     // 交通拥堵轨迹回溯
-    playFullTrack(data, center) {
-      this.switchTimeLine(true);
-      this.playMultiTracksAndFlyCenter(data, center);
+    playFullTrack(data, rowData) {
+      this.playMultiTracksAndFlyCenter(data, [rowData.lng, rowData.lat]);
     },
     // 返回车辆轨迹查询
     toFirst() {
@@ -806,22 +1014,14 @@ export default {
       if (this.currentMenu !== "third") {
         this.$refs.cameraVideo?.destroy();
       }
-
-      viewer.entities.removeAll();
+      this.removeAllEntities();
       viewer.clock.shouldAnimate = false;
-
-      viewerS.entities.removeAll();
-      viewerS.clock.shouldAnimate = false;
-
       this.currentView = "first";
       this.showOverMap = false;
       this.showTrackSwitcher = false;
       this.switchTimeLine(false);
       this.showTimeSelector = false;
 
-      popup?.remove();
-      popup = null;
-
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(
           ...cesium_config.center,
@@ -943,7 +1143,7 @@ export default {
       this.setCameraView(3, 12, -10);
       viewer.scene.preRender.removeEventListener(this.syncViewer);
       currentEntity.show = true;
-      this.popupOffset = [0, 100];
+      this.popupOffset = [0, 120];
       viewer.trackedEntity = currentEntity;
       viewer.clock.onTick.removeEventListener(this.clockListenerInCar);
       viewer.clock.onTick.addEventListener(this.clockListenerWithCar);
@@ -952,7 +1152,7 @@ export default {
     switchthird() {
       this.setCameraView(1.5, 0, -5);
       viewer.scene.preRender.removeEventListener(this.syncViewer);
-      this.popupOffset = [0, 100];
+      this.popupOffset = [0, 120];
       viewer.trackedEntity = currentEntity;
       currentEntity.show = false;
       viewer.clock.onTick.removeEventListener(this.clockListenerWithCar);
@@ -960,21 +1160,10 @@ export default {
     },
     // 展示勾选的轨迹
     showTrack(tracks) {
-      // 清除动态entity
-      for (let key in entityVehicles) {
-        viewer.entities.remove(entityVehicles[key]);
-      }
-      for (let key in entityLines) {
-        viewer.entities.remove(entityLines[key]);
-      }
-      entityVehicles = {};
-      // 清除鹰眼图
-      viewerS.entities.removeAll();
+      this.removeAllEntities();
       this.showOverMap = false;
       // 移除popup
       viewer?.clock.onTick.removeEventListener(this.updatePopup);
-      popup?.remove();
-      popup = null;
       this.switchTimeLine(false);
       this.showTrackSwitcher = false;
       let allData = this.diff(this.lastChecks, tracks);
@@ -1041,7 +1230,6 @@ export default {
     },
     // 更新弹窗信息
     updatePopup() {
-      this.updateLights();
       if (
         viewer.clock.shouldAnimate &&
         currentEntity &&
@@ -1089,8 +1277,6 @@ export default {
           popup?.remove();
           popup = null;
         }
-      } else {
-        this.playStatus = false;
       }
     },
     // 获取时间区间内的历史灯态
@@ -1110,26 +1296,26 @@ export default {
         getLightByTimeAndCrossId(toSend[1]),
         getLightByTimeAndCrossId(toSend[2]),
       ]).then(([res1, res2, res3]) => {
-        let lastFiveStart = 0;
         console.log("历史灯态", res1, res2, res3);
-        for (let i = 0; i < res1.content.length; i++) {
-          if (i % 5 !== 0) {
-            let timestamp = lastFiveStart + (i % 5);
-            res1.content[i].timestamp = timestamp;
-            res2.content[i].timestamp = timestamp;
-            res3.content[i].timestamp = timestamp;
-          } else {
-            let timestamp = res1.content[i].schemeStartTime.slice(
-              0,
-              res1.content[i].schemeStartTime.length - 3
-            );
-            res1.content[i].timestamp = timestamp;
-            res2.content[i].timestamp = timestamp;
-            res3.content[i].timestamp = timestamp;
-            lastFiveStart = res1.content[i].timestamp;
-          }
-        }
         timeRangeLights = [...res1.content, ...res2.content, ...res3.content];
+        // let lastFiveStart = 0;
+        // for (let i = 0; i < res1.content.length; i++) {
+        //   if (i % 5 !== 0) {
+        //     let timestamp = lastFiveStart + (i % 5);
+        //     res1.content[i]?.timestamp = timestamp;
+        //     res2.content[i]?.timestamp = timestamp;
+        //     res3.content[i]?.timestamp = timestamp;
+        //   } else {
+        //     let timestamp = res1.content[i].timeStamp.slice(
+        //       0,
+        //       res1.content[i].timeStamp.length - 3
+        //     );
+        //     res1.content[i]?.timestamp = timestamp;
+        //     res2.content[i]?.timestamp = timestamp;
+        //     res3.content[i]?.timestamp = timestamp;
+        //     lastFiveStart = res1.content[i].timestamp;
+        //   }
+        // }
       });
     },
     // 添加property插值属性
@@ -1193,13 +1379,11 @@ export default {
     // 播放按钮
     play() {
       viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;
-      viewerS.clock.shouldAnimate = !viewerS.clock.shouldAnimate;
       this.playStatus = viewer.clock.shouldAnimate;
     },
     // 倍速切换
     changeSpeed(e) {
       viewer.clock.multiplier = e;
-      viewerS.clock.multiplier = e;
     },
     getModelMatrix(entity, time) {
       let position = Cesium.Property.getValueOrUndefined(
@@ -1266,6 +1450,12 @@ export default {
     },
   },
   mounted() {
+    fetch("stopLines.json").then((res) => {
+      res.json().then((result) => {
+        console.log("rrr", result);
+        stopLineData = result.content;
+      });
+    });
     let queue = [];
     let needDicts = [
       "CarType",
@@ -1290,6 +1480,7 @@ export default {
       this.fullscreenLoading = false;
     });
     viewer = this.$refs.cesiumMap.loadMap();
+    viewer.clock.onTick.addEventListener(this.updateSceneLights);
     // 鹰眼图 = 普通cesium场景 cartographic height * 1.5
     viewerS = this.$refs.cesiumOverMap.loadMap();
     let control = viewerS.scene.screenSpaceCameraController;
@@ -1299,20 +1490,17 @@ export default {
     control.enableTilt = false;
     control.enableLook = false;
     this.switchTimeLine(false);
-    // this.resetView()
   },
-  created() {},
   beforeDestroy() {
-    console.log("viewer distroy..1....");
+    console.log("cesium viewer distroy......");
+    this.removeAllEntities();
     viewer.scene.preRender.removeEventListener(this.syncViewer);
     viewer?.clock.onTick.removeEventListener(this.clockListenerInCar);
     viewer?.clock.onTick.removeEventListener(this.clockListenerWithCar);
     viewer?.clock.onTick.removeEventListener(this.updatePopup);
+    viewer?.clock.onTick.removeEventListener(this.updateSceneLights);
     viewer?.destroy();
     viewerS?.destroy();
-    popup?.remove();
-    popup = null;
-    currentEntity = null;
   },
 };
 </script>

wj-manage-web/src/views/track/menuKeyVehicle.vue

@@ -19,7 +19,7 @@
           <el-table-column min-width="50" type="index" label="序号">
           </el-table-column>
           <el-table-column
-            min-width="60"
+            min-width="80"
             :show-overflow-tooltip="true"
             prop="plateNum"
             label="号牌号码"
@@ -37,7 +37,7 @@
               {{ getNameByCode(scope.row && scope.row.type, "CarType") }}
             </template>
           </el-table-column>
-          <el-table-column
+          <!-- <el-table-column
             min-width="60"
             :show-overflow-tooltip="true"
             label="使用性质"
@@ -45,7 +45,7 @@
             <template slot-scope="scope">
               {{ getNameByCode(scope.row && scope.row.function, "Nature") }}
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column
             min-width="80"
             :show-overflow-tooltip="true"

wj-manage-web/src/views/track/menuTrafficCrowd.vue

@@ -188,8 +188,7 @@
 
 <script>
 import Pagination from "../../components/Standard/pigination.vue";
-
-import { crowdTracksList, multiVehicleTrackDetail } from "../../dao/track";
+import { crowdTracksList, multiVehicleTrackDetail,getLightByTimeAndCrossId } from "../../dao/track";
 import MsgCard from "../../components/Standard/msg-card.vue";
 
 export default {
@@ -326,6 +325,7 @@ export default {
     playTrack(rowData) {
       this.fullscreenLoading = true;
       console.log("row", rowData);
+      this.getLight({ startTime: rowData.startTime, endTime: rowData.endTime });
       multiVehicleTrackDetail({
         startTime: rowData.startTime,
         endTime: rowData.endTime,
@@ -334,12 +334,33 @@ export default {
         console.log("多车详情", res);
         this.fullscreenLoading = false;
         if (res.content.length) {
-          this.$emit("playFullTrack", res.content, [rowData.lng, rowData.lat]);
+          this.$emit("playFullTrack", res.content, rowData);
         } else {
           this.$message.warning("该段时间无轨迹数据...");
         }
       });
     },
+    // 获取时间区间内的历史灯态
+    getLight(timeRange) {
+        this.$emit('getHisLights',[])
+      let toSend = [];
+      for (let crossId of ["13NF80B5QN0", "13NGH0B5RC0", "13NI00B5RM0"]) {
+        toSend.push({
+          startBatchTime: new Date(timeRange.startTime).getTime() / 1000,
+          endBatchTime: new Date(timeRange.endTime).getTime() / 1000,
+          crossId: crossId,
+        });
+      }
+      console.log("timeRange", timeRange);
+      Promise.all([
+        getLightByTimeAndCrossId(toSend[0]),
+        getLightByTimeAndCrossId(toSend[1]),
+        getLightByTimeAndCrossId(toSend[2]),
+      ]).then(([res1, res2, res3]) => {
+        console.log("历史灯态", res1, res2, res3);
+        this.$emit('getHisLights',[...res1.content, ...res2.content, ...res3.content])
+      });
+    },
     // 搜索符合表单条件的轨迹
     searchVehicleTracks() {
       this.currentPage = 1;

wj-manage-web/src/views/track/menuTrafficEvent.vue

@@ -89,7 +89,7 @@
             </el-form-item>
             <el-form-item label="号牌号码:" prop="plateNum">
               <el-input
-              :maxlength='64'
+                :maxlength="64"
                 clearable
                 placeholder="请输入车辆号牌号码"
                 v-model="searchForm.plateNum"
@@ -165,7 +165,9 @@
               min-width="60"
               prop="plateNo"
               label="号牌号码"
-            ><template slot-scope="scope">{{scope.row.plateNo || '-'}}</template>
+              ><template slot-scope="scope">{{
+                scope.row.plateNo || "-"
+              }}</template>
             </el-table-column>
             <el-table-column fixed="right" min-width="60" label="事件轨迹">
               <template slot-scope="scope">
@@ -195,6 +197,7 @@ import {
   eventTracksList,
   getEventVideo,
   multiVehicleTrackDetail,
+  getLightByTimeAndCrossId
 } from "../../dao/track";
 import MsgCard from "../../components/Standard/msg-card.vue";
 
@@ -341,7 +344,7 @@ export default {
     },
     // 搜索符合条件的交通事件轨迹list
     getTableData() {
-        let toSend = {};
+      let toSend = {};
       for (let key in this.searchForm) {
         // 如果选择所有数据查询 => 取消查询字段
         if (this.searchForm[key] === "all") {
@@ -358,11 +361,16 @@ export default {
       };
       Promise.all([eventTracksList(sendData), equip_camera()]).then(
         ([table, camera]) => {
-          console.log("table && camera", table, camera);
+        //   console.log("table && camera", table, camera);
           for (let i = 0; i < table.content.rows.length; i++) {
-            table.content.rows[i].channels = camera.content.filter((item) => {
-              return item.crossId === table.content.rows[i].crossId;
+            // table.content.rows[i].channels = camera.content.filter((item) => {
+            //   return item.crossId === table.content.rows[i].crossId;
+            // });
+            let channels = table.content.rows[i].cameraChannels.split(",");
+            let fChannels = channels.filter((item) => {
+              return item !== "";
             });
+            table.content.rows[i].channels = fChannels;
           }
           this.tableData = table.content.rows;
           this.tableTotal = table.content.total;
@@ -384,21 +392,40 @@ export default {
     async playTrack(rowData) {
       console.log("rowData", rowData);
       this.fullscreenLoading = true;
+      this.getLight({ startTime: rowData.startTime, endTime: rowData.endTime });
       multiVehicleTrackDetail({
         startTime: rowData.startTime,
         endTime: rowData.endTime,
       }).then((res) => {
         this.fullscreenLoading = false;
         if (res.content.length) {
-          this.$emit("playFullTrackWithVideo", res.content, rowData, [
-            rowData.lng,
-            rowData.lat,
-          ]);
+          this.$emit("playFullTrackWithVideo", res.content, rowData);
         } else {
           this.$message.warning("该段时间无轨迹数据...");
         }
       });
     },
+    // 获取时间区间内的历史灯态
+    getLight(timeRange) {
+        this.$emit('getHisLights',[])
+      let toSend = [];
+      for (let crossId of ["13NF80B5QN0", "13NGH0B5RC0", "13NI00B5RM0"]) {
+        toSend.push({
+          startBatchTime: new Date(timeRange.startTime).getTime() / 1000,
+          endBatchTime: new Date(timeRange.endTime).getTime() / 1000,
+          crossId: crossId,
+        });
+      }
+      console.log("timeRange", timeRange);
+      Promise.all([
+        getLightByTimeAndCrossId(toSend[0]),
+        getLightByTimeAndCrossId(toSend[1]),
+        getLightByTimeAndCrossId(toSend[2]),
+      ]).then(([res1, res2, res3]) => {
+        console.log("历史灯态", res1, res2, res3);
+        this.$emit('getHisLights',[...res1.content, ...res2.content, ...res3.content])
+      });
+    },
     // 轨迹（仅展示）
     showTrack(tracks) {
       this.$emit("showTrack", tracks);
@@ -459,7 +486,7 @@ export default {
 
   /*滚动条的上下两端的按钮*/
   ::-webkit-scrollbar-button {
-  width: 0;
+    width: 0;
     height: 0;
   }