展示版本基本完成

wj-data-vision/public/config.js

@@ -2,33 +2,12 @@ const map_config = {
   SYS_ID: 'CAFC20296895433784C193457A870DFD',
   MAP_CENTER: [112.96284186666799, 28.187102143508625],
   MAP_ZOOM: 17.048587811931856,
-
-
   MAX_ZOOM: 20,
   MAP_PITCH: 0,
   MAP_ROTATE: 90,
   MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json',  // 高精
 }
 const ws_config = {
-
-  // BASE_URL: 'ws://192.168.2.156:17021/holows/subscribe',
   BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',
   CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/',
-}
-const api_config = {
-  CROSS_STOP_LINE: '/develop/sgw/dbInterface/zh_changsha_18q3_0303/hd_506_rxhdzxx/multiTable/A443EF992884', // 获取停止线接口
-}
-const video_config = {
-  intersectionGroupsVideoUrl: 'http://192.168.2.80/live?app=demo&stream=cloudpoint-1',
-  //2023-04-11 10:29:36_2023-04-11 10:34:36
-  groupViewStartTime: '2023-04-11 10:29:36',
-  //2023-04-10 00:47:20_2023-04-10 00:49:46
-  accidentViewStartTime: '2023-04-10 00:47:20',
-  //2023-04-09 01:28:10_2023-04-09 01:28:40
-  dangerViewStartTime: '2023-04-09 01:28:10',
-  dronesViewStartTime: '2023-04-09 01:28:10',
-  mobileViewStartTime: '2023-04-11 20:58:45',
-  phaseViewStartTime: '2023-04-10 17:21:04',
-  slowViewStartTime: '2023-04-10 01:22:12',
-  SLConflictViewStartTime: '2023-04-08 17:28:31',
 }
\ No newline at end of file

wj-data-vision/src/config/holo/mapAssets.js

@@ -8,6 +8,7 @@ export default {
     camera: require('../../assets/images/holo/spxj.png'),
     sign: require('../../assets/images/holo/xhj.png'),
     homeCamera: require('../../assets/images/sc/crossCamera.png'),
+    mobileEquip: require('../../assets/images/sc/mobileEquip.png'),
 
     // light11: require('../../assets/images/sc/leftRed.png'),
     // light12: require('../../assets/images/sc/leftYellow.png'),

wj-data-vision/src/dao/api.js

 import fetch from '@/utils/fetch'
 
 // 路口停止线获取
-export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
+// export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
 
 // 根据不同场景请求左侧cameraList
 export const getCameraListByType = (data) => fetch('/holo/event-camera/list', data, 'GET')

wj-data-vision/src/utils/l7Tools.js

@@ -321,7 +321,7 @@ export function addVehicleLayer(scene, msg) {
   return pointLayer
 }
 
-// 车辆圆点图层
+// 设备
 export function addMobilePoint(scene, msg) {
   const pointLayer = new PointLayer({zIndex: 2})
     .source(msg, {
@@ -329,12 +329,12 @@ export function addMobilePoint(scene, msg) {
         type: 'json', x: 'longitude', y: 'latitude',
       },
     })
-    .shape('circle')
-    .style({
-      blur: 1,
-    })
-    .size(24)
-    .color('#e21918')
+    .shape('mobileEquip')
+    // .style({
+    //   blur: 1,
+    // })
+    .size(28)
+    // .color('#e21918')
   scene.addLayer(pointLayer)
   return pointLayer
 }

wj-data-vision/src/views/accidentScene/index.vue

@@ -110,7 +110,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -159,7 +159,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1
@@ -355,7 +355,7 @@ export default {
       // console.log('count...', window.tb.world.children.length)
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
       // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
         this.$refs.right.startVideo()
@@ -364,11 +364,8 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.accidentViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
-          this.$refs.right.startVideo(videoTime)
+          this.$refs.refVideo.startVideo()
+          this.$refs.right.startVideo()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/dangerousDriving/index.vue

@@ -102,7 +102,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -148,7 +148,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -301,7 +301,7 @@ export default {
       // }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
       // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
         this.$refs.rightDangerVideo.startVideo()
@@ -310,11 +310,8 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.dangerViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
-          this.$refs.rightDangerVideo.startVideo(videoTime)
+          this.$refs.refVideo.startVideo()
+          this.$refs.rightDangerVideo.startVideo()
           this.msgStart = false
         }
 

wj-data-vision/src/views/drones/index.vue

@@ -91,7 +91,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -135,7 +135,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -271,7 +271,7 @@ export default {
       }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
       // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
       }
@@ -279,10 +279,7 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.dronesViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
+          this.$refs.refVideo.startVideo()
           // this.$refs.refVideo1.startVideo(videoTime)
           this.msgStart = false
         }

wj-data-vision/src/views/intersectionGroups/index.vue

@@ -101,7 +101,7 @@ export default {
       lastMsg: [],
       timeout: null,
       msgStart: true,
-      dianyunUrl: video_config.intersectionGroupsVideoUrl,
+
       types: [],
       haveVideo: false,
       timers: [],
@@ -166,7 +166,7 @@ export default {
                 units: "meters",
                 scale: 0.8,
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               };
               window.tb.loadObj(options, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
@@ -454,7 +454,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
       this.changeVehicleDetail(this.selectVehicle)
     },
     // 根据处理后的数组新增-删除-更新模型
@@ -510,7 +510,7 @@ export default {
       // }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
         console.log('index 重置 ',)
         console.log('last 重置', this.lastMsg[0].dateTime)
         console.log('current 重置', msg[0].dateTime)
@@ -524,13 +524,10 @@ export default {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         // console.log('msg.length',msg.length)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.groupViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
           for (let item of popups) {
-            item.$children[0].setTime(videoTime)
+            item.$children[0].setTime()
           }
-          this.$refs.groupViewPointCamera.setTime(videoTime)
+          this.$refs.groupViewPointCamera.setTime()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/intersectionGroups/messageBoxes.vue

@@ -171,6 +171,7 @@ export default {
   components: {msgCard},
   data() {
     return {
+      flag: 0,
       eventTypeUnitMap: {
         11: '人',
         16: '辆',
@@ -291,7 +292,7 @@ export default {
     this.getFiveIndexes()
     let timer = setInterval(() => {
       this.getFiveIndexes()
-    }, 1000 * 60)
+    }, 1000)
     this.timers.push(timer)
     // 冲突点监测
     // pedNonAnalysis().then((res) => {
@@ -339,6 +340,20 @@ export default {
       getOverDatas().then(res => {
         console.log('5指标', res.content)
         this.overDatas = res.content
+
+        // if (this.flag === 360) {
+        //   this.flag = 0
+        // }
+        // if (this.flag % 60 !== 1) {
+        //   delete res.content.maxQueueLength
+        //   delete res.content.maxStopNumber
+        //   delete res.content.maxTravelTime
+        // }
+        // console.log('ressss', this.flag, res.content)
+        // for (let key in res.content) {
+        //   this.overDatas[key] = res.content[key]
+        // }
+        // this.flag += 1
       })
     },
     tabsHandleClick(tab) {

wj-data-vision/src/views/mobileBaseStation/index.vue

@@ -93,7 +93,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -161,7 +161,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -298,7 +298,7 @@ export default {
       }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
         // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideoL.startVideo()
         this.$refs.refVideoR.startVideo()
@@ -307,11 +307,8 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.mobileViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideoL.startVideo(videoTime)
-          this.$refs.refVideoR.startVideo(videoTime)
+          this.$refs.refVideoL.startVideo()
+          this.$refs.refVideoR.startVideo()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/phaseAirPlay/index.vue

@@ -35,7 +35,7 @@ import dict from "../../config/holo/dictionary";
 import wsSource from "../../config/holo/wsSource";
 import {initWs} from "../../config/holo/websocket";
 import * as l7Tools from "../../utils/l7Tools";
-import {getLinesByCross} from "../../dao/api";
+// import {getLinesByCross} from "../../dao/api";
 
 let map,
   scene,
@@ -78,7 +78,7 @@ export default {
       bounds: '',
       crossLineInfo: false,
       licenseState: false,
-      lastMsg:[],
+      lastMsg: [],
     };
   },
   watch: {},
@@ -100,7 +100,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -149,7 +149,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -453,18 +453,18 @@ export default {
       // }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
-      // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
+        // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
       }
       this.lastMsg = msg
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.phaseViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
+          // let realTimeStart = new Date(video_config.phaseViewStartTime).getTime()
+          // let getTimeStart = new Date(msg[0].dateTime).getTime()
+          // let videoTime = (getTimeStart - realTimeStart) / 1000
+          this.$refs.refVideo.startVideo()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/phaseAirPlay/left/index.vue

@@ -299,7 +299,7 @@ export default {
         .value-image {
           width: 491px;
           height: 373px;
-          background-image: url("../../../assets/images/sc/kfpic.png");
+          background-image: url("../../../assets/images/sc/kf.png");
           background-size: 100% 100%;
           border: 1px solid #0d7fd7;
         }

wj-data-vision/src/views/phaseAirPlay/right/index.vue

@@ -4,6 +4,7 @@
       <div class="cardInner">
         <div class="comp">
           <cross-control crossId="12F6L08J630"/>
+<!--          <cross-control crossId="12F6S08J7P0"/>-->
         </div>
         <!--        :span-method="objectSpanMethod"-->
         <el-table

wj-data-vision/src/views/slowTraffic/index.vue

@@ -102,7 +102,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     getCrossCamerasAndPolygons() {
       getPasserbyPolygon().then(res => {
@@ -150,10 +150,10 @@ export default {
         this.timeout = setTimeout(() => {
           this.initWebS()
         }, 5000)
-        this.getCrossCamerasAndPolygons()
-        setInterval(() => {
-          this.getCrossCamerasAndPolygons()
-        }, 1000)
+        // this.getCrossCamerasAndPolygons()
+        // setInterval(() => {
+        //   this.getCrossCamerasAndPolygons()
+        // }, 1000)
         map.addControl(new mapboxgl.NavigationControl({showZoom: false}), 'top-right');
       });
       scene.on("zoomend", (e) => {
@@ -184,7 +184,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -329,7 +329,7 @@ export default {
       // }
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 >  5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
       // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
       }
@@ -337,10 +337,10 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.slowViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
+          // let realTimeStart = new Date(video_config.slowViewStartTime).getTime()
+          // let getTimeStart = new Date(msg[0].dateTime).getTime()
+          // let videoTime = (getTimeStart - realTimeStart) / 1000
+          this.$refs.refVideo.startVideo()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/straightLeftConflict/index.vue

@@ -36,7 +36,7 @@ import wsSource from "../../config/holo/wsSource";
 import {initWs} from "../../config/holo/websocket";
 import * as l7Tools from "../../utils/l7Tools";
 import conflictDetail from "./mapPopup/conflictDetail.vue";
-import {getLinesByCross} from "../../dao/api";
+// import {getLinesByCross} from "../../dao/api";
 
 const ConflictDetail = Vue.extend(conflictDetail)
 
@@ -98,7 +98,7 @@ export default {
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
-      ELEMENT.Message(e.detail.userData.data.id)
+      // ELEMENT.Message(e.detail.userData.data.id)
     },
     init() {
       [map, scene] = this.$refs.wMap.initMap();
@@ -145,7 +145,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 adjustment: {x: 0.5, y: 1, z: -0.6},
-                bbox: true,
+                bbox: false,
               }, (model) => {
                 vehicleModelTypes[`car${key}`] = model;
                 this.vehicleModelsNum += 1;
@@ -437,7 +437,7 @@ export default {
       this.licenseState = !this.licenseState
     },
     callCar(msg) {
-      if (this.lastMsg.length && Math.abs(new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000 > 5) {
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
         // if (this.lastMsg.length && new Date(this.lastMsg[0].dateTime).getTime() > new Date(msg[0].dateTime).getTime()) {
         this.$refs.refVideo.startVideo()
       }
@@ -445,10 +445,10 @@ export default {
       if (scene && this.vehicleModelsNum === 8) {
         this.$store.commit('setCurrentTime', msg[0].dateTime)
         if (this.msgStart) {
-          let realTimeStart = new Date(video_config.SLConflictViewStartTime).getTime()
-          let getTimeStart = new Date(msg[0].dateTime).getTime()
-          let videoTime = (getTimeStart - realTimeStart) / 1000
-          this.$refs.refVideo.startVideo(videoTime)
+          // let realTimeStart = new Date(video_config.SLConflictViewStartTime).getTime()
+          // let getTimeStart = new Date(msg[0].dateTime).getTime()
+          // let videoTime = (getTimeStart - realTimeStart) / 1000
+          this.$refs.refVideo.startVideo()
           this.msgStart = false
         }
         let start = performance.now();

wj-data-vision/src/views/straightLeftConflict/left/index.vue

@@ -314,7 +314,7 @@ export default {
         .value-image {
           width: 491px;
           height: 373px;
-          background-image: url("../../../assets/images/sc/ctpic.png");
+          background-image: url("../../../assets/images/sc/zz.png");
           background-size: 100% 100%;
           border: 1px solid #0d7fd7;
         }

wj-data-vision/src/views/straightLeftConflict/right/index.vue

@@ -4,6 +4,8 @@
       <div class="cardInner">
         <div class="comp">
           <cross-control crossId="12F6S08J8T0"/>
+<!--          <cross-control crossId="12F6S08J7P0"/>-->
+
         </div>
         <el-table
           :header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"

wj-manage-web/public/config.js

@@ -9,9 +9,7 @@ const map_config = {
   MAP_STYLE_XL: 'http://192.168.2.78:9000/style-changsha.json',  // 高精带路口箭头
   RASTER_ROAD: 'http://192.168.2.78:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}'  // 路况
 }
-const api_config  = {
-  CROSS_STOP_LINE: '/develop/sgw/dbInterface/zh_suzhou_18q3/hd_506_rxhdzxx/multiTable/50FA40F152FF', // 获取停止线接口
-}
+
 const ws_config = {
   BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',  // 实时轨迹
   CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/'  // 路口详情 - 灯态相位推送
@@ -19,9 +17,11 @@ const ws_config = {
 const cesium_config = {
   center: [112.96364, 28.18825],  // cesium中心点
   zoomHeight: 1800,  // cesium相机默认高度
-  baseMap: 'http://192.168.2.78:9000/styles/OSM%20OpenMapTiles/{z}/{x}/{y}@2x.png',  // cesium标清底图
   tile3dURL: 'http://192.168.2.78:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
 }
+const video_config = {
+  homeTimeStart:'2023-04-16 23:10:27:267',
+}
 
 
 

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

@@ -44,6 +44,9 @@ export default {
         // }),
         terrainProvider: new Cesium.EllipsoidTerrainProvider({}), // 地形
       });
+      viewer.scene.light = new Cesium.DirectionalLight({
+        direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358)
+      })
       // tileset三维场景
       const tileset = new Cesium.Cesium3DTileset({
         url: cesium_config.tile3dURL,

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

+//
+// let socket
+// // readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
+// function onOpen(e, data) {
+//   console.log(e,data)
+//   console.log('open && send ...', data.name)
+//   socket.send(data.sendData)
+// }
+//
+// function onError(e, data) {
+//   console.log('ws error...', e, data)
+// }
+//
+// function onClose(e, data) {
+//   console.log('ws close...', e, data)
+//   // setTimeout(() => {
+//   //   initWs(data)
+//   // }, 5000)
+// }
+//
+// export function initWs(data) {
+//   if (typeof WebSocket === undefined) {
+//     console.error('您的浏览器不支持socket')
+//   } else {
+//     // socket = new WebSocket(data.url)
+//     socket = new ReconnectingWebSocket(data.url)
+//     // 监听socket连接open
+//     socket.onopen = (e) => onOpen(e, data)
+//     // 监听socket错误信息
+//     socket.onerror = (e) => onError(e, data)
+//     // 断开连接
+//     socket.onclose = (e) => onClose(e, data)
+//     return {
+//       name: data.name,
+//       url: data.url,
+//       status: data.status,
+//       ws: socket,
+//     }
+//   }
+// }
+
+let sockets = []
 
-let socket
 // readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
 function onOpen(e, data) {
-  console.log(e,data)
   console.log('open && send ...', data.name)
-  socket.send(data.sendData)
+  for (let it of sockets) {
+    if (it.name === data.name && it.ws.readyState === 1) {
+      it.ws.send(data.sendData)
+    }
+  }
+
 }
 
 function onError(e, data) {
@@ -13,28 +58,25 @@ function onError(e, data) {
 
 function onClose(e, data) {
   console.log('ws close...', e, data)
-  // setTimeout(() => {
-  //   initWs(data)
-  // }, 5000)
 }
 
 export function initWs(data) {
   if (typeof WebSocket === undefined) {
     console.error('您的浏览器不支持socket')
   } else {
-    // socket = new WebSocket(data.url)
-    socket = new ReconnectingWebSocket(data.url)
+    let currentSocket = new ReconnectingWebSocket(data.url)
     // 监听socket连接open
-    socket.onopen = (e) => onOpen(e, data)
+    currentSocket.onopen = (e) => onOpen(e, data)
     // 监听socket错误信息
-    socket.onerror = (e) => onError(e, data)
+    currentSocket.onerror = (e) => onError(e, data)
     // 断开连接
-    socket.onclose = (e) => onClose(e, data)
+    currentSocket.onclose = (e) => onClose(e, data)
+    sockets.push({
+      name: data.name, ws: currentSocket,
+    })
     return {
-      name: data.name,
-      url: data.url,
-      status: data.status,
-      ws: socket,
+      name: data.name, url: data.url, status: data.status, ws: currentSocket,
     }
   }
 }
+

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

@@ -2,6 +2,8 @@ import fetch from '@/utils/fetch'
 
 export const crossInfo = () => fetch('/holo/base-cross-info/list', {}, 'GET')
 
+// 顶部轮询5指标
+export const getOverDatas = () => fetch('/holo/area-index-analysis/realtime', {}, 'GET')
 
 export const eventInfo = (data) => fetch('/holo/event-info/list', data, 'GET')
 
@@ -59,4 +61,4 @@ export const equip_signal = () => fetch('/holo/device-signal/list', {}, 'GET')
 export const equip_weather = () => fetch('/holo/device-weather/list', {}, 'GET')
 
 // 路口停止线获取
-export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
+// export const getLinesByCross = (params) => fetch(api_config.CROSS_STOP_LINE, params, 'POST', {})
\ No newline at end of file

wj-manage-web/src/views/analysis/reportCross.vue

@@ -47,7 +47,7 @@
           </el-form-item>
         </el-form>
         <div class="analysis-detail">
-          <wMap :mapId="'crossReport-map'" ref="wMap" />
+          <wMap :mapId="'crossReport-map'" ref="wMap"/>
           <div class="detail-options">
             <div class="check-all">
               <div class="check-all-title-icon"></div>
@@ -60,10 +60,12 @@
               ></el-checkbox>
               <div class="buttons">
                 <el-button type="primary" @click="showPreview = true"
-                  >报告预览</el-button
+                >报告预览
+                </el-button
                 >
                 <el-button type="success" @click="downloadFile"
-                  >报告生成</el-button
+                >报告生成
+                </el-button
                 >
               </div>
             </div>
@@ -90,7 +92,8 @@
               交通运行分析
               <el-form-item>
                 <el-checkbox v-model="specialCheck.lk" style="margin-right: 5px"
-                  >路口状态</el-checkbox
+                >路口状态
+                </el-checkbox
                 >
                 <el-select
                   multiple
@@ -108,7 +111,8 @@
                   </el-option>
                 </el-select>
                 <el-checkbox v-model="specialCheck.jt" style="margin-right: 5px"
-                  >交通流量</el-checkbox
+                >交通流量
+                </el-checkbox
                 >
                 <el-select
                   multiple
@@ -215,7 +219,8 @@
                 style="width: 200px"
                 type="primary"
                 @click="downloadFile"
-                >批量下载</el-button
+              >批量下载
+              </el-button
               >
             </div>
             <!-- <pigination
@@ -234,13 +239,14 @@
       <div class="header">
         报告预览
         <el-button class="back" type="primary" @click="showPreview = false"
-          >返回</el-button
+        >返回
+        </el-button
         >
       </div>
       <div class="content">
         <img
           class="pdf-image"
-          v-for="item of 6"
+          v-for="item of [1,2,3,4,5,6]"
           :key="item"
           :src="require(`../../assets/images/holo/pdf/${item}.jpg`)"
         />
@@ -249,7 +255,8 @@
             style="margin-top: 15px"
             type="primary"
             @click="downloadFile"
-            >下载报告</el-button
+          >下载报告
+          </el-button
           >
         </div>
       </div>
@@ -262,25 +269,30 @@ import mapAssets from "../../config/holo/mapAssets";
 
 let crossLayer = null,
   crossDetailLayer = null;
+
 function hide(layer) {
   let arr = Array.isArray(layer) ? layer : [layer];
   for (let item of arr) {
     item && item.hide();
   }
 }
+
 function show(layer) {
   let arr = Array.isArray(layer) ? layer : [layer];
   for (let item of arr) {
     item && !item.isVisible() && item.show();
   }
 }
+
 import wMap from "../../components/Standard/map/index.vue";
+
 let map, scene, mapMethods;
 import * as l7Tools from "../situation/l7Tools";
-import { crossInfo, eventInfo } from "../../dao/situation";
-import { Scene, PointLayer, RasterLayer, Popup } from "@antv/l7";
-import { Mapbox } from "@antv/l7-maps";
+import {crossInfo, eventInfo} from "../../dao/situation";
+import {Scene, PointLayer, RasterLayer, Popup} from "@antv/l7";
+import {Mapbox} from "@antv/l7-maps";
 import Pigination from "../../components/Standard/pigination.vue";
+
 export default {
   name: "reportCross",
   components: {
@@ -338,7 +350,7 @@ export default {
           total: 1,
           pageNum: 1,
           pageSize: 10,
-          list: [{ name: "路口交通分析报告-0211.pdf", type: "pdf" }],
+          list: [{name: "路口交通分析报告-样例数据20230417.pdf", type: "pdf"}],
         },
         {
           type: "月报",
@@ -368,7 +380,7 @@ export default {
       analysisTime: "",
       compareTime: "",
       timeType: "",
-      formInline: { user: "", region: "" },
+      formInline: {user: "", region: ""},
       analysisForm: {
         road: [],
         run: [],
@@ -422,11 +434,11 @@ export default {
   },
   methods: {
     selectCrossChange(e) {
-      map.flyTo({ center: [e.split(",")[0], e.split(",")[1]] });
+      map.flyTo({center: [e.split(",")[0], e.split(",")[1]]});
       for (let item of this.allCrossData) {
         console.log(item, e);
         if (item.location == e) {
-          this.crossClick({ feature: item });
+          this.crossClick({feature: item});
         }
       }
       console.log(e, 1);
@@ -434,8 +446,10 @@ export default {
     downloadFile() {
       let a = document.createElement("a");
       a.style = "display: none"; // 创建一个隐藏的a标签
-      a.download = "路口交通分析报告-0211.pdf";
-      a.href = "pdf/路口交通分析报告-0211.pdf";
+      // a.download = "路口交通分析报告-0211.pdf";
+      // a.href = "pdf/路口交通分析报告-0211.pdf";
+      a.download = "路口交通分析报告-样例数据20230417.pdf";
+      a.href = "pdf/路口交通分析报告-样例数据20230417.pdf";
       document.body.appendChild(a);
       a.click(); // 触发a标签的click事件
       document.body.removeChild(a);
@@ -461,7 +475,8 @@ export default {
         }
       }
     },
-    getList() {},
+    getList() {
+    },
     initMap() {
       crossLayer = null;
       crossDetailLayer = null;
@@ -525,10 +540,11 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.pdf-image{
+.pdf-image {
   width: 100%;
 }
-.form-item-icon{
+
+.form-item-icon {
   display: inline-block;
   width: 10px;
   height: 10px;
@@ -536,62 +552,73 @@ export default {
   rotate: 45deg;
   margin-right: 5px;
 }
-.nodata{
+
+.nodata {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 50%;
 }
-::v-deep .sp1{
-  width:250px
+
+::v-deep .sp1 {
+  width: 250px
 }
-::v-deep .sp2{
-  width:250px
+
+::v-deep .sp2 {
+  width: 250px
 }
-::v-deep .jtSelect{
+
+::v-deep .jtSelect {
   // position: absolute;
   // top: 0;
   // left: 12%;
   margin-right: 25px;
   width: 180px;
 }
-::v-deep .lkSelect{
+
+::v-deep .lkSelect {
   margin-right: 25px;
   // position: absolute;
   // top: 0;
   // left: 38%;
   width: 180px;
 }
-.reports-cont{
+
+.reports-cont {
   width: 100%;
   height: 100%;
   background-color: #04122d;
   border: 1px solid #0f1a31;
   padding: 12px;
-  .files-inner{
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  overflow-y: auto;
+
+  .files-inner {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    overflow-y: auto;
   }
-  .files-cont{
+
+  .files-cont {
     width: 114px;
     height: 80px;
-    cursor:pointer;
+    cursor: pointer;
     // border: 1px solid red;
     margin: 4px 8px;
-    .icon{
+
+    .icon {
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
-      img{
+
+      img {
         // width: 100%;
         height: 70%;
       }
     }
-    .name{
+
+    .name {
       text-align: center;
       padding-top: 5px;
       white-space: nowrap;
@@ -599,16 +626,19 @@ export default {
       text-overflow: ellipsis;
     }
   }
-  .files-cont:hover{
+
+  .files-cont:hover {
     background: #042d5a;
   }
 }
-::v-deep .el-button{
+
+::v-deep .el-button {
   height: 30px;
   line-height: 5px;
 }
-.header{
-	height: 40px;
+
+.header {
+  height: 40px;
   line-height: 40px;
   background: url('../../assets/images/holo/title.png');
   background-size: 100% 100%;
@@ -616,27 +646,31 @@ export default {
   font-size: 20px;
   font-weight: bold;
   padding-left: 16px;
-	position: relative;
-  .back{
+  position: relative;
+
+  .back {
     position: absolute;
     right: 80px;
     top: 4px;
   }
 }
-.content{
-	height: calc(100% - 40px);
-	// height: calc(100% - 40px);
+
+.content {
+  height: calc(100% - 40px);
+  // height: calc(100% - 40px);
   padding: 16px 16px 0 16px;
 }
-.main{
+
+.main {
   z-index: 4;
   color: white;
-  background: linear-gradient(#041432, #04040e,#041028,#040817);
-	// padding: 16px;
-	height: 100%;
-	width:100%;
+  background: linear-gradient(#041432, #04040e, #041028, #040817);
+  // padding: 16px;
+  height: 100%;
+  width: 100%;
   position: relative;
-  .preview{
+
+  .preview {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -644,41 +678,49 @@ export default {
     top: 0;
     z-index: 8;
     background: #040d1c;
-    .content{
+
+    .content {
       overflow-y: scroll;
       padding: 50px 300px;
     }
   }
-	.report-config{
+
+  .report-config {
     padding: 8px 16px 0 16px;
-		height: 60%;
-		.content{
-			.analysis-detail{
+    height: 60%;
+
+    .content {
+      .analysis-detail {
         padding-top: 5px;
-				display: flex;
-				height: 86%;
+        display: flex;
+        height: 86%;
         overflow: hidden;
-				.map_main{
-					width: 35%;
-					height: 100%;
-				}
-				.detail-options{
+
+        .map_main {
+          width: 35%;
+          height: 100%;
+        }
+
+        .detail-options {
           width: 65%;
-					padding: 16px	;
+          padding: 16px;
           overflow-y: auto;
-					.check-all{
-						height: 30px;
+
+          .check-all {
+            height: 30px;
             padding-left: 15px;
-            background: linear-gradient(90deg, #021e3c,#02172f,transparent);
-						line-height: 30px;
-						display: flex;
+            background: linear-gradient(90deg, #021e3c, #02172f, transparent);
+            line-height: 30px;
+            display: flex;
             align-items: center;
             margin-bottom: 8px;
             position: relative;
-            .buttons{
+
+            .buttons {
               position: absolute;
               right: 0;
-              .download{
+
+              .download {
                 display: inline-block;
                 background: greenyellow;
                 height: 30px;
@@ -690,142 +732,173 @@ export default {
                 margin-left: 15px;
                 border-radius: 4px;
               }
-              .download:hover{
-                background: rgba(173, 255, 47,0.8);
+
+              .download:hover {
+                background: rgba(173, 255, 47, 0.8);
               }
             }
-            .check-all-title-icon{
+
+            .check-all-title-icon {
               width: 12px;
               height: 12px;
               background: #0752f9;
               rotate: 45deg;
               margin-right: -3px;
             }
-            .check-all-title-icon1{
+
+            .check-all-title-icon1 {
               width: 6px;
               height: 6px;
               background: #95b6ff;
               rotate: 45deg;
               margin-right: 10px;
             }
-					}
-				}
-			}
-		}
-	}
-	.his-report{
+          }
+        }
+      }
+    }
+  }
+
+  .his-report {
     padding: 8px 16px 0 16px;
-		height: 40%;
-		.content{
-			width: 100%;
-		}
-		.download{
+    height: 40%;
+
+    .content {
+      width: 100%;
+    }
+
+    .download {
       position: absolute;
       text-align: center;
       left: 50%;
       bottom: 16px;
       transform: translateX(-50%);
     }
-	}
+  }
 }
-.mypigination{
+
+.mypigination {
   position: absolute;
   bottom: 16px;
-  right:16px;
-  ::v-deep .btn-prev{
-    background:#113e72
+  right: 16px;
+
+  ::v-deep .btn-prev {
+    background: #113e72
 
   }
-  ::v-deep .btn-next{
-    background:#113e72
+
+  ::v-deep .btn-next {
+    background: #113e72
 
   }
-  ::v-deep .el-pager li.active{
-      background-color: #093f6d !important;
+
+  ::v-deep .el-pager li.active {
+    background-color: #093f6d !important;
   }
-  
+
 }
-::v-deep .el-form-item__label{
-color: white;
+
+::v-deep .el-form-item__label {
+  color: white;
 }
-::v-deep .el-checkbox{
+
+::v-deep .el-checkbox {
   color: white;
   margin-bottom: 0;
 }
-::v-deep .el-checkbox__inner{
+
+::v-deep .el-checkbox__inner {
   background-color: #000e27;
   border: 1px solid #BDCDE0;
 }
-.demo-form-inline{
+
+.demo-form-inline {
   height: 12%;
-::v-deep .el-form-item {
+
+  ::v-deep .el-form-item {
     margin-bottom: 6px;
-    
-}
-::v-deep .el-range-input{
-  background-color: transparent;
-}
 
-::v-deep .el-input__inner{
-  background-color:#010c22;
-  border: 1px solid #08325C
-}
-::v-deep .el-form-item__label{
-  padding: 0 0 0 0;
-  line-height: 30px;
-  margin-right: 15px;
-}
-::v-deep .el-radio__label{
-  color: white;
-}
+  }
+
+  ::v-deep .el-range-input {
+    background-color: transparent;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #010c22;
+    border: 1px solid #08325C
+  }
+
+  ::v-deep .el-form-item__label {
+    padding: 0 0 0 0;
+    line-height: 30px;
+    margin-right: 15px;
+  }
+
+  ::v-deep .el-radio__label {
+    color: white;
+  }
 }
-.detail-form{
-  ::v-deep .el-input__inner{
+
+.detail-form {
+  ::v-deep .el-input__inner {
     background-color: transparent;
   }
+
   padding-left: 20px;
-  ::v-deep .el-form-item{
+
+  ::v-deep .el-form-item {
     margin-bottom: 0;
   }
-  ::v-deep .el-form-item__label{
+
+  ::v-deep .el-form-item__label {
     line-height: 20px;
     padding: 0 0 0 0;
     margin-bottom: 0;
   }
-  ::v-deep .el-form-item__content{
+
+  ::v-deep .el-form-item__content {
     padding-left: 20px;
   }
 }
-.mypigination{
+
+.mypigination {
   background: transparent;
   color: white;
-  ::v-deep .el-pagination__total{
+
+  ::v-deep .el-pagination__total {
     color: white;
   }
 }
-.mytab{
-  ::v-deep .el-tabs__item{
+
+.mytab {
+  ::v-deep .el-tabs__item {
     height: 28px;
     line-height: 28px;
     padding: 0 40px !important;
     color: #c0c4cc;
   }
-  ::v-deep .el-tabs__active-bar{
+
+  ::v-deep .el-tabs__active-bar {
     background-color: transparent;
   }
-  ::v-deep .el-tabs__item.is-active{
+
+  ::v-deep .el-tabs__item.is-active {
     background-color: #044375;
     color: white;
     border-bottom: transparent;
-  } 
-  ::v-deep .el-tabs--card>.el-tabs__header{
+  }
+
+  ::v-deep .el-tabs--card > .el-tabs__header {
     border-bottom: 1px solid #033262;
   }
-  ::v-deep .el-tabs__nav{
+
+  ::v-deep .el-tabs__nav {
     border: 1px solid #033262;
   }
+
   ::v-deep .el-tabs__nav-wrap::after {
-      position: static !important;
+    position: static !important;
   }
 }
 </style>
\ No newline at end of file

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

@@ -799,7 +799,7 @@ export default {
   border: 1px solid #04396f;
   z-index: 2;
   height: calc(100% - 45px);
-  position: absolute;
+  position: absolute !important;
   left: 0;
   top: 42px;
   width: 40%;

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

@@ -3,7 +3,9 @@
     <div v-if="model.equip_type === 'camera'" class="equip_camera">
       <div class="header">{{ model.installLocation || '暂无安装地址信息' }}</div>
       <div class="main">
-        <camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>
+        <!--        <camera-video :auto-play="true" style="height: 100%" :video-data="model.videoUrl"/>-->
+        <local-camera1 style="height: 100%; width: 100%" :border="false" :showClose="false" v-if="videoURL" ref="videoItem"
+                       class="videoItem" :video-data="videoURL"/>
       </div>
     </div>
     <div v-else-if="model.equip_type === 'weather'" class="equip_weather">
@@ -40,18 +42,37 @@
 <script>
 import dict from '../../../config/holo/dictionary'
 import CameraVideo from "../../../components/Standard/cameraVideo.vue";
+import LocalCamera1 from "../localCamera1.vue";
 
 export default {
   name: "passerbyPopup",
   props: ["model"],
-  components: {CameraVideo},
+  components: {LocalCamera1, CameraVideo},
   data() {
     return {
-      dict
+      dict,
+      videoURL: null,
     };
   },
   mounted() {
     console.log('equp', this.model)
+    if (this.model.equip_type === 'camera') {
+      if (this.model.crossId === '12F6S08J7P0') {
+        this.videoURL = 'lkqz_2'
+      }
+      if (this.model.crossId === '12F6S08J8T0') {
+        this.videoURL = 'lkqz_1'
+      }
+      if (this.model.crossId === '12F6L08J630') {
+        this.videoURL = 'lkqz_3'
+      }
+      this.$nextTick(() => {
+        this.$refs.videoItem.setTime()
+      })
+
+    } else {
+      this.videoURL = null
+    }
   },
   methods: {},
   computed: {},
@@ -128,7 +149,7 @@ export default {
 
 .equip_camera {
   width: 448px;
-  height: 328px;
+  height: 300px;
   background-image: url("../../../assets/images/holo/videobackgorund.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;

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

@@ -15,11 +15,14 @@
       :class="[{ generalSwitch: boxesShow }, { rightSwitch: !boxesShow }]"
     />
     <!--视频播放组件-->
-    <video-list ref="videoList"
-                v-if="videoListData && videoListData.length"
-                @delVideo="deleteVideo"
-                :videoListData="videoListData"
-    />
+    <!--    <video-list ref="videoList"-->
+    <!--                v-if="videoListData && videoListData.length"-->
+    <!--                @delVideo="deleteVideo"-->
+    <!--                :videoListData="videoListData"-->
+    <!--    />-->
+    <local-camera1 :showClose="true" :border="true" @closeM="localVideoShow = false" v-if="localVideoShow"
+                   ref="videoItem"
+                   class="videoItem" :video-data="crossVideoData"/>
     <!--路口详情-->
     <cross-detail
       v-if="dialogVisible.crossDetail"
@@ -62,7 +65,6 @@ import {
   equip_weather,
   equip_camera,
   equip_radar,
-  getLinesByCross
 } from "../../dao/situation";
 
 import * as l7Tools from "./l7Tools";
@@ -71,6 +73,7 @@ import SituationTime from "./situationTime.vue";
 import equipmentPopup from "./MapPopup/equipmentPopup.vue";
 import eventPopup from './MapPopup/eventPopup.vue'
 import vehicleDetail from "./MapPopup/vehicleDetail.vue";
+import LocalCamera1 from "./localCamera1.vue";
 
 const VehiclePopup = Vue.extend(vehicleDetail)
 const EquipmentPopup = Vue.extend(equipmentPopup);
@@ -93,6 +96,7 @@ function show(layer) {
 
 let {keys, values, entries} = Object;
 let map,
+  scenePopup = null,
   popups = [],
   vehicleDetailPopup = null,
   scene,
@@ -124,6 +128,7 @@ let map,
   };
 export default {
   components: {
+    LocalCamera1,
     SituationTime,
     wMap,
     MessageBoxes,
@@ -137,6 +142,9 @@ export default {
   computed: {},
   data() {
     return {
+      currentWsTime: null,
+      localVideoShow: false,
+      crossVideoData: '',
       bounds: '',
       situationTimeVal: '',
       rr: require('../../assets/images/holo/rr.png'),
@@ -166,6 +174,7 @@ export default {
       waitingShow: false,
       lightShow: false,
       crossData: '',
+      lastMsg: []
     };
   },
   watch: {
@@ -205,21 +214,54 @@ export default {
 
     // 路口点击 - zoomin - 展示视频流
     firstCrossClick(e) {
-      this.$refs.videoList?.destroyAll()
-      this.videoListData = []
-      this.boxesShow = false;
-      map.flyTo({zoom: 19, center: e.lngLat});
+      this.localVideoShow = false
+      this.loading = true
       setTimeout(() => {
-        let timeout = 500;
-        if (e.feature.cameraList) {
-          for (let item of e.feature.cameraList) {
-            setTimeout(() => {
-              !this.videoListData.includes(item) && this.videoListData.push(item);
-            }, timeout);
-            timeout += 1500;
-          }
+        this.loading = false
+        console.log('e.feature.name', e.feature.name)
+        this.videoListData = []
+        this.boxesShow = false;
+        let flag = false
+        map.flyTo({
+          zoom: 19, center: e.feature.coordinates
+        });
+        console.log('cross click', e)
+        if (e.feature.name === '湘江中路与人民西路交叉口') {
+          this.crossVideoData = 'lkqz_1'
+          flag = true
+          this.localVideoShow = true
         }
-      })
+        if (e.feature.name === '湘江中路与西湖路交叉口') {
+          this.crossVideoData = 'lkqz_2'
+          this.localVideoShow = true
+          flag = true
+        }
+        if (e.feature.name === '湘江中路与劳动西路交叉口') {
+          this.crossVideoData = 'lkqz_3'
+          this.localVideoShow = true
+          flag = true
+        }
+        console.log(this.currentWsTime)
+        if (flag) {
+          let chazhi = new Date(this.currentWsTime).getTime() - new Date(video_config.homeTimeStart).getTime()
+          this.$nextTick(() => {
+            this.$refs.videoItem.setTime(chazhi / 1000)
+          })
+        }
+      }, 800)
+
+
+      // setTimeout(() => {
+      //   let timeout = 500;
+      //   if (e.feature.cameraList) {
+      //     for (let item of e.feature.cameraList) {
+      //       setTimeout(() => {
+      //         !this.videoListData.includes(item) && this.videoListData.push(item);
+      //       }, timeout);
+      //       timeout += 1500;
+      //     }
+      //   }
+      // })
     },
     refreshBounds() {
       let bounds = map.getBounds();
@@ -332,6 +374,9 @@ export default {
         // console.log(map.getZoom())
         this.refreshMap();
         this.refreshBounds()
+        if (scene.getZoom() < 17) {
+          this.localVideoShow = false
+        }
       });
       scene.on('moveend', () => {
         this.refreshBounds()
@@ -551,16 +596,16 @@ export default {
       popups = []
       this.$nextTick(() => {
         // console.log(type)
-        const popup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
+        scenePopup = new Popup({offsets: [0, 30], closeButtonOffsets: [5, 7]})
           .setLngLat(e.feature.coordinates)
           .setHTML('<div id="equipment_popup"></div>')
-        popup.on('close', () => {
+        scenePopup.on('close', () => {
           for (let item of popups) {
             item.$destroy()
           }
           popups = []
         })
-        scene.addPopup(popup);
+        scene.addPopup(scenePopup);
         let aa = new EquipmentPopup({
           propsData: {
             model: {equip_type: type, ...e.feature},
@@ -619,6 +664,9 @@ export default {
             map.setLayoutProperty('raster_road', 'visibility', 'none')
           }
         }
+        if (item.label !== 'fourth') {
+          if(scenePopup){scene.removePopup(scenePopup)}
+        }
         // hide other layer
         for (let key in layers) {
           if (key !== item.label) {
@@ -692,39 +740,26 @@ export default {
       this.selectVehicle = e.detail.userData.data;
       this.changeVehicleDetail(this.selectVehicle)
     },
-    // 根据处理后的数组新增-删除-更新模型
-    addDelUpdateVehicleModels(allData) {
-      if (this.vehicleModelsNum === 21) {
-        for (let item of allData) {
-          // 新增
-          if (item.dill === "add") {
-            let model =
-              vehicleModelTypes[`car${item.originalType}`].duplicate();
-            this.setModel(model, item, true);
-            model.addEventListener(
-              "SelectedChange",
-              this.onSelectedChangeVehicle,
-              false
-            );
-            window.tb.add(model, item.id);
-          } else {
-            for (let i = 0; i < window.tb.world.children.length; i++) {
-              if (window.tb.world.children[i].userData.data.id === item.id) {
-                if (item.dill === 'del') {
-                  window.tb.clear(item.id, true)
-                }
-                if (item.dill === 'com') {
-                  this.setModel(window.tb.world.children[i], item, false);
-                }
-              }
-            }
-          }
+
+
+    callCar(msg) {
+      this.currentWsTime = msg[0].dateTime
+      // if (this.begin === 0) {
+      //   this.$refs.videoItem.setTime()
+      //   this.begin += 1
+      //   if (this.begin > 1000) {
+      //     this.begin = 1
+      //   }
+      // }
+      if (this.lastMsg.length && ((new Date(this.lastMsg[0].dateTime).getTime() - new Date(msg[0].dateTime).getTime()) / 1000) > 5) {
+        console.log('index 重置 ',)
+        console.log('last 重置', this.lastMsg[0].dateTime)
+        console.log('current 重置', msg[0].dateTime)
+        if (this.$refs.videoItem) {
+          this.$refs.videoItem.setTime()
         }
-        console.log('count...', window.tb.world.children.length)
       }
-    },
-    callCar(msg) {
-      let start = performance.now();
+      this.lastMsg = msg
       // 筛选可见区域
       for (let i = 0; i < msg.length; i++) {
         if (!msg[i].picLicense) {
@@ -754,12 +789,7 @@ export default {
             if (this.selectVehicle) {
               this.selectVehicle = null;
             }
-            if (window.tb) {
-              window.tb.clear()
-              this.lightShow = false
-              this.waitingShow = false
-              window.tb.world.visible = false;
-            }
+            this.hideTb()
             let zoom = scene.getZoom()
             if (zoom > 17) {
               hide([layers.first.vehicle])
@@ -773,8 +803,14 @@ export default {
           }
         }
       }
-      let end = performance.now();
-      // console.log('cost is', `${end - start}ms`)
+    },
+    hideTb() {
+      if (window.tb) {
+        window.tb.clear()
+        this.lightShow = false
+        this.waitingShow = false
+        window.tb.world.visible = false;
+      }
     },
     addOrUpdateLicense(msg) {
       if (!layers.first.license) {
@@ -831,12 +867,57 @@ export default {
         show(layers.first.vehiclePic)
       }
     },
-    // 比较websocket车辆前后两次数据差异
+    addDelUpdateVehicleModels(allData) {
+      if (this.vehicleModelsNum === 21) {
+        for (let item of allData) {
+          // 新增
+          if (item.dill === "add") {
+            let model =
+              vehicleModelTypes[`car${item.originalType}`].duplicate();
+            this.setModel(model, item, true);
+            model.addEventListener(
+              "SelectedChange",
+              this.onSelectedChangeVehicle,
+              false
+            );
+            window.tb.add(model, item.id);
+          } else {
+            for (let i = 0; i < window.tb.world.children.length; i++) {
+              if (window.tb.world.children[i].userData.data.id === item.id) {
+                if (item.dill === 'del') {
+                  window.tb.clear(item.id, true)
+                }
+                if (item.dill === 'com') {
+                  //车型变化
+                  // if (window.tb.world.children[i].userData.data.originalType === item.originalType) {
+                  //   this.setModel(window.tb.world.children[i], item, true);
+                  // } else {
+                  //   window.tb.clear(item.id, true)
+                  //   let model =
+                  //     vehicleModelTypes[`car${item.originalType}`].duplicate();
+                  //   this.setModel(model, item, true);
+                  //   model.addEventListener(
+                  //     "SelectedChange",
+                  //     this.onSelectedChangeVehicle,
+                  //     false
+                  //   );
+                  //   window.tb.add(model, item.id);
+                  // }
+                  this.setModel(window.tb.world.children[i], item, true);
+                }
+              }
+            }
+          }
+        }
+        // console.log('count...', window.tb.world.children.length)
+      }
+    },
     diff(oldData, newData) {
       // id 只在 newData 中存在且不在 oldData 中存在的即为 add
       const add = newData.filter((e) => !oldData.find((c) => c.id === e.id));
       // id 只在 oldData 中存在且不在 newData 中存在的即为 dele
       const del = oldData.filter((e) => !newData.find((c) => c.id === e.id));
+      // common...
       const com = newData.filter((e) => oldData.find((c) => c.id === e.id));
       add.forEach((a) => (a.dill = "add"));
       del.forEach((d) => (d.dill = "del"));
@@ -1236,6 +1317,16 @@ export default {
 </script>
 
 <style lang='less' scoped>
+.videoItem {
+  width: 320px;
+  height: 184px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 8px;
+  z-index: 99;
+}
+
 #map {
   position: absolute;
   width: 100%;

wj-manage-web/src/views/situation/l7Tools.js

@@ -12,6 +12,7 @@ export function addVehiclePic(scene, msg) {
       return `carColor${val}`
     })
     // .shape('carPic')
+
     .size(3.5)
     .style({
       unit: 'meter', rotation: 0,

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

+<template>
+  <div :class="['cameraVideo',border?'cameraVideoBorder':'']">
+    <div class="vCloseButton" v-show="showClose" @click="closeM">
+      <div class="el-icon-close"></div>
+    </div>
+    <span v-show="border" class="top-left"></span>
+    <span v-show="border" class="top-right"></span>
+    <span v-show="border" class="bottom-left"></span>
+    <span v-show="border" class="bottom-right"></span>
+    <video v-if="videoData" muted width="100%" loop :class="[reverse?'reverse':'']"
+           class="videoControl" :id="videoData">
+      <source :src="url" type="video/mp4">
+      您的浏览器不支持 video 属性。
+    </video>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "localCamera1",
+  props: ["videoData", 'border', 'reverse','showClose'],
+  watch: {},
+  data() {
+    return {};
+  },
+  methods: {
+    setTime(time) {
+      this.$nextTick(() => {
+        let el = document.getElementById(this.videoData)
+        console.log('bofang...', time || 0)
+        if (time) {
+          el.currentTime = time
+          el.play()
+        } else {
+          console.log('视频重置。。。', new Date().getTime() / 1000)
+          el.currentTime = 0
+          el.play()
+        }
+      })
+    },
+    closeM() {
+      this.$emit('closeM')
+    }
+  },
+  computed: {
+    url() {
+      return `/cdn/video/${this.videoData}.mp4`
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  beforeDestroy() {
+    console.log("video beforeDestroy");
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.reverse {
+  rotate: 180deg;
+}
+
+.cameraVideo {
+  position: relative;
+
+
+  .videoControl {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    //width: calc(100% - 5px);
+    //height: calc(100% - 5px);
+    padding: 1px;
+  }
+}
+
+.cameraVideoBorder {
+  border: 1px solid #022950;
+}
+
+.top-left {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #1889f1;
+  border-width: 2px 0 0 2px;
+}
+
+.top-right {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #1889f1;
+  border-width: 2px 2px 0 0;
+}
+
+.bottom-left {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #1889f1;
+  border-width: 0 2px 2px 0;
+}
+
+.bottom-right {
+  position: absolute;
+  left: -2px;
+  bottom: -2px;
+  padding: 6px;
+  border-style: solid;
+  border-color: #1889f1;
+  border-width: 0 0 2px 2px;
+}
+
+.vCloseButton {
+  z-index: 9999;
+  background-color: rgba(13, 127, 215, 0.7);
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+}
+
+.vCloseButton:hover {
+  background-color: rgba(13, 127, 215, 0.9);
+}
+</style>

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

@@ -13,12 +13,12 @@
         <div class="title comm">实时车辆</div>
       </div>
       <div class="over_item">
-        <div class="number comm">{{ speed }} km/h</div>
+        <div class="number comm">{{ speed }}km/h</div>
         <div class="title comm">平均速度</div>
       </div>
       <div class="over_item">
-        <div class="number comm">{{ crowd / 1000 }} km</div>
-        <div class="title comm">拥堵里程</div>
+        <div class="number comm">{{ maxTravelTime }}min</div>
+        <div class="title comm">最大行程时间</div>
       </div>
     </div>
     <div class="left_box aside" :class="[{ hide_left: !show }]">
@@ -166,7 +166,7 @@ import {
   eventAnalysis,
   areaRecent,
   pedNonAnalysis,
-  eventAlarm,
+  eventAlarm, getOverDatas,
 } from "../../dao/situation";
 import {getFontSize} from "../../config/holo/fontSize.js";
 import {Chart} from "highcharts-vue";
@@ -216,7 +216,7 @@ export default {
       fontSize: 12,
       charts: {},
       speed: "",
-      crowd: "",
+      maxTravelTime: "",
       trafIndex: "",
       realTimeNum: "",
       timers: []
@@ -289,6 +289,11 @@ export default {
   },
   mounted() {
     // 区域指数 && 上侧指标
+    this.getOverDataTop()
+    let timer1 = setInterval(() => {
+      this.getOverDataTop()
+    }, 1000 * 60)
+
     this.getIndexes()
     let timer = setInterval(() => {
       this.getIndexes()
@@ -355,17 +360,26 @@ export default {
     });
   },
   methods: {
+    getOverDataTop(){
+      getOverDatas().then((res) => {
+        console.log('111111111',res)
+        this.speed = res.content.avgTravelSpeed
+        this.trafIndex = res.content.trafficIndex
+        this.realTimeNum = res.content.inWayVehicleNum
+        this.maxTravelTime = res.content.maxTravelTime
+      })
+    },
     getIndexes() {
       areaList().then((res) => {
         // console.log("区域指数", res);
-        this.speed =
-          res.content.timeList[res.content.timeList.length - 1].valList[2];
-        this.crowd =
-          res.content.timeList[res.content.timeList.length - 1].valList[4];
-        this.trafIndex =
-          res.content.timeList[res.content.timeList.length - 1].valList[0];
-        this.realTimeNum =
-          res.content.timeList[res.content.timeList.length - 1].valList[3];
+        // this.speed =
+        //   res.content.timeList[res.content.timeList.length - 1].valList[2];
+        // this.crowd =
+        //   res.content.timeList[res.content.timeList.length - 1].valList[4];
+        // this.trafIndex =
+        //   res.content.timeList[res.content.timeList.length - 1].valList[0];
+        // this.realTimeNum =
+        //   res.content.timeList[res.content.timeList.length - 1].valList[3];
         this.$nextTick(() => {
           this.regionalIndex(res.content);
           for (let key in this.regionalIndexData) {

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

@@ -319,6 +319,18 @@ export default {
       // this.videoURL = 'http://10.102.1.180:80/live?app=demo&stream=mp4-133';
       // this.$refs.cameraVideo.loadVideo()
       this.playMultiVehicle(cars)
+      // 劳动西路
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          112.962981,
+          28.182855
+          , 350),
+        orientation: {
+          heading: Cesium.Math.toRadians(0), // 旋转角度
+          pitch: Cesium.Math.toRadians(-90.0), // 相机方向
+        },
+        duration: 0.5
+      });
     },
     // 交通拥堵轨迹回溯
     playFullTrack(data) {
@@ -360,7 +372,7 @@ export default {
               tArray.push({start: thisCarStart, stop: thisCarStop}) // 最后一段
             }
           }
-          console.log('tarray', tArray)
+          // console.log('tarray', tArray)
           this.addEntityProperty({
             viewer: viewer,
             data: path,
@@ -405,7 +417,7 @@ export default {
       // 循环执行,即为2，到达终止时间，重新从起点时间开始
       viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
 
-      viewer.flyTo(viewer.entities, {duration: 0.5})
+      // viewer.flyTo(viewer.entities, {duration: 0.5})
       this.switchTimeLine(true)
       this.showProgress = true
     },
@@ -507,18 +519,20 @@ export default {
         if (viewer.trackedEntity) {
           let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
           let angle = this.currentEntity.angleProperty.getValue(viewer.clock.currentTime)
-          let ellipsoid = viewer.scene.globe.ellipsoid
-          let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
-          let lat = Cesium.Math.toDegrees(cartographic.latitude);
-          let lng = Cesium.Math.toDegrees(cartographic.longitude);
-          viewer.camera.setView({
-            destination: Cesium.Cartesian3.fromDegrees(lng, lat, 2),
-            orientation: {
-              heading: Cesium.Math.toRadians(angle), // east, default value is 0.0 (north)
-              pitch: Cesium.Math.toRadians(-5),    // default value (looking down)
-              roll: 0
-            }
-          });
+          if (position && angle) {
+            let ellipsoid = viewer.scene.globe.ellipsoid
+            let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
+            let lat = Cesium.Math.toDegrees(cartographic.latitude);
+            let lng = Cesium.Math.toDegrees(cartographic.longitude);
+            viewer.camera.setView({
+              destination: Cesium.Cartesian3.fromDegrees(lng, lat, 2),
+              orientation: {
+                heading: Cesium.Math.toRadians(angle), // east, default value is 0.0 (north)
+                pitch: Cesium.Math.toRadians(-5),    // default value (looking down)
+                roll: 0
+              }
+            });
+          }
         }
         // let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
         // let orientation = this.currentEntity.orientation.getValue(viewer.clock.currentTime)
@@ -753,29 +767,30 @@ export default {
         // 车辆详情弹窗及更新
         viewer.clock.onTick.addEventListener(() => {
           if (viewer.clock.shouldAnimate) {
-
             let position = this.currentEntity.position.getValue(viewer.clock.currentTime)
-            let ellipsoid = viewer.scene.globe.ellipsoid
-            let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
-            let lat = Cesium.Math.toDegrees(cartographic.latitude);
-            let lng = Cesium.Math.toDegrees(cartographic.longitude);
-            if (!popup) {
-              popup = new CesiumPopup({
-                title: '信息'
-              })
-                .setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
-                .setHTML(`<div id="cesium_vehicle_popup" ></div>`)
-                .addTo(viewer).setTitle('')
-                .setOffset([-100, -180])
-              new VehiclePopup({
-                propsData: {
-                  model: this.currentTimeRowData
-                },
-              }).$mount('#cesium_vehicle_popup')
-            } else {
-              this.refreshSpeed()
-              popup?.setOffset([-100, -180])
-              popup.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
+            if (position) {
+              let ellipsoid = viewer.scene.globe.ellipsoid
+              let cartographic = ellipsoid.cartesianToCartographic(position); // 笛卡尔坐标 => 经纬度 （弧度表示）
+              let lat = Cesium.Math.toDegrees(cartographic.latitude);
+              let lng = Cesium.Math.toDegrees(cartographic.longitude);
+              if (!popup) {
+                popup = new CesiumPopup({
+                  title: '信息'
+                })
+                  .setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
+                  .setHTML(`<div id="cesium_vehicle_popup" ></div>`)
+                  .addTo(viewer).setTitle('')
+                  .setOffset([-100, -180])
+                new VehiclePopup({
+                  propsData: {
+                    model: this.currentTimeRowData
+                  },
+                }).$mount('#cesium_vehicle_popup')
+              } else {
+                this.refreshSpeed()
+                popup?.setOffset([-100, -180])
+                popup.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
+              }
             }
           } else {
             this.playStatus = false

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

 <template>
   <div element-loading-text="获取数据中，请稍后..."
        element-loading-spinner="el-icon-loading"
-       element-loading-background="rgba(0, 0, 0, 0.8)"  v-loading.fullscreen.lock="fullscreenLoading" class="track_tree" :class="[show?'l_show':'l_hidden']">
+       element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading" class="track_tree"
+       :class="[show?'l_show':'l_hidden']">
     <msg-card class="msgCard" title="交通拥堵轨迹回溯">
       <div class="top">
         <div class="title-text">
@@ -10,32 +11,32 @@
         </div>
         <el-form :rules="rules" ref="searchForm" class="search-form" label-position="right" label-width="90px"
                  :model="searchForm">
-<!--          <el-form-item label="查询时段:" prop="name1">-->
-<!--            <el-date-picker-->
-<!--                value-format="yyyy-MM-dd hh:mm:ss"-->
-<!--                v-model="searchForm.name1"-->
-<!--                type="datetimerange"-->
-<!--                range-separator="→"-->
-<!--                start-placeholder="开始日期"-->
-<!--                end-placeholder="结束日期">-->
-<!--            </el-date-picker>-->
-<!--          </el-form-item>-->
+          <!--          <el-form-item label="查询时段:" prop="name1">-->
+          <!--            <el-date-picker-->
+          <!--                value-format="yyyy-MM-dd hh:mm:ss"-->
+          <!--                v-model="searchForm.name1"-->
+          <!--                type="datetimerange"-->
+          <!--                range-separator="→"-->
+          <!--                start-placeholder="开始日期"-->
+          <!--                end-placeholder="结束日期">-->
+          <!--            </el-date-picker>-->
+          <!--          </el-form-item>-->
           <el-form-item label="开始时间:" prop="startTime">
             <el-date-picker
-                v-model="searchForm.startTime"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                type="datetime"
-                :picker-options="pickOptionsStart"
-                placeholder="选择开始时间">
+              v-model="searchForm.startTime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="datetime"
+              :picker-options="pickOptionsStart"
+              placeholder="选择开始时间">
             </el-date-picker>
           </el-form-item>
           <el-form-item label="结束时间:" prop="endTime">
             <el-date-picker
-                value-format="yyyy-MM-dd HH:mm:ss"
-                :picker-options="pickOptionsEnd"
-                v-model="searchForm.endTime"
-                type="datetime"
-                placeholder="选择结束时间">
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :picker-options="pickOptionsEnd"
+              v-model="searchForm.endTime"
+              type="datetime"
+              placeholder="选择结束时间">
             </el-date-picker>
           </el-form-item>
           <el-form-item label="拥堵地点:" prop="crossId">
@@ -46,7 +47,9 @@
           </el-form-item>
           <el-form-item label="拥堵程度:" prop="xxx">
             <el-select placeholder="请选择拥堵程度" class="select-speed" clearable v-model="searchForm.type">
-              <el-option  v-for="item of dict.EventTypeOptions" v-if="item.name.includes('拥堵') || item.name.includes('全部')" :key="item.code" :label="item.name"
+              <el-option v-for="item of dict.EventTypeOptions"
+                         v-if="item.name.includes('拥堵') || item.name.includes('全部')" :key="item.code"
+                         :label="item.name"
                          :value="item.code"></el-option>
             </el-select>
           </el-form-item>
@@ -68,62 +71,62 @@
           检索结果
         </div>
         <el-table
-            v-loading="tableLoading"
-            element-loading-text="数据加载中.."
-            element-loading-spinner="el-icon-loading"
-            element-loading-background="rgba(0, 0, 0, 0.8)"
-            ref="multipleTable"
-            :row-class-name="getRowClassName"
-            :data="tableData"
-
-            class="track-result-table"
-            cell-class-name="custom-table-cell"
-            header-row-class-name="tab-table-header"
-            header-cell-class-name="tab-table-header-cell"
+          v-loading="tableLoading"
+          element-loading-text="数据加载中.."
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          ref="multipleTable"
+          :row-class-name="getRowClassName"
+          :data="tableData"
+
+          class="track-result-table"
+          cell-class-name="custom-table-cell"
+          header-row-class-name="tab-table-header"
+          header-cell-class-name="tab-table-header-cell"
         >
-<!--          <el-table-column-->
-<!--              type="selection"-->
-<!--              width="35">-->
-<!--            @selection-change="showTrack"-->
-<!--          </el-table-column>-->
+          <!--          <el-table-column-->
+          <!--              type="selection"-->
+          <!--              width="35">-->
+          <!--            @selection-change="showTrack"-->
+          <!--          </el-table-column>-->
           <el-table-column
-              min-width="50"
-              type="index"
-              label="序号">
+            min-width="50"
+            type="index"
+            label="序号">
           </el-table-column>
           <el-table-column
-              min-width="60" :show-overflow-tooltip="true"
-              label="拥堵程度">
+            min-width="60" :show-overflow-tooltip="true"
+            label="拥堵程度">
             <template slot-scope="scope">
               {{ getNameByCode(scope.row.eventType, dict.EventTypeOptions) }}
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true"
-              min-width="60" prop="placeDesc"
-              label="拥堵地点">
-<!--            <template slot-scope="scope">-->
-<!--              {{ getNameByCode(scope.row.crossId, dict.CrossInfoOptions) }}-->
-<!--            </template>-->
+                           min-width="60" prop="placeDesc"
+                           label="拥堵地点">
+            <!--            <template slot-scope="scope">-->
+            <!--              {{ getNameByCode(scope.row.crossId, dict.CrossInfoOptions) }}-->
+            <!--            </template>-->
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true"
-              min-width="60"
-              prop="startTime"
-              label="发生时间">
-<!--            <template slot-scope="scope">-->
-<!--              {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
-<!--            </template>-->
+                           min-width="60"
+                           prop="startTime"
+                           label="发生时间">
+            <!--            <template slot-scope="scope">-->
+            <!--              {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
+            <!--            </template>-->
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true"
-              min-width="60"
-              prop="duration"
-              label="拥堵时长">
-<!--            <template slot-scope="scope">-->
-<!--              {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
-<!--            </template>-->
+                           min-width="60"
+                           prop="duration"
+                           label="拥堵时长">
+            <!--            <template slot-scope="scope">-->
+            <!--              {{ getNameByCode(scope.row.color, dict.CarColorOptions) }}-->
+            <!--            </template>-->
           </el-table-column>
           <el-table-column
-              min-width="60"  fixed="right"
-              label="车辆轨迹">
+            min-width="60" fixed="right"
+            label="车辆轨迹">
             <template slot-scope="scope">
               <i @click="playTrack(scope.row)" class="el-icon-video-play"/>
             </template>
@@ -151,14 +154,13 @@ export default {
   watch: {},
   name: "menuTrafficCrowd",
   components: {MsgCard, Pagination},
-  computed: {
-  },
+  computed: {},
   props: ["show", 'dict'],
   data() {
-    let endTimeValidator = (rule, value, callback) =>{
+    let endTimeValidator = (rule, value, callback) => {
       if (!value) {
         callback(new Error('请选择结束时间'));
-      } else if(new Date(value).getTime() - new Date(this.searchForm.startTime).getTime() > 30*24*60 * 60 * 1000){
+      } else if (new Date(value).getTime() - new Date(this.searchForm.startTime).getTime() > 30 * 24 * 60 * 60 * 1000) {
         callback(new Error('查询时段必须小于30天'));
       } else {
         callback();
@@ -182,13 +184,13 @@ export default {
         },
       },
       tableLoading: false,
-      fullscreenLoading:false,
+      fullscreenLoading: false,
       options: [],
       rules: {
         startTime: [
-          {required: true, trigger:'blur', message:'请选择开始时间'}
+          {required: true, trigger: 'blur', message: '请选择开始时间'}
         ],
-        endTime:[
+        endTime: [
           {required: true, trigger: 'blur', message: '请选择结束时间'},
           {validator: endTimeValidator, trigger: 'change'}
         ],
@@ -198,9 +200,13 @@ export default {
       pageSize: 5,
       showMore: false,
       searchForm: {
-        startTime: '2023-04-07 14:00:00',
-        endTime: '2023-04-07 15:00:00',
-        type:'',
+
+        //
+        // startTime: '2023-04-07 14:00:00',
+        // endTime: '2023-04-07 15:00:00',
+        startTime: '2023-04-11 18:00:00',
+        endTime: '2023-04-11 19:30:00',
+        type: '',
         crossId: '',
       },
       tableTotal: 0,
@@ -261,7 +267,7 @@ export default {
       return '未定义'
     },
     getTableData() {
-      for(let key in this.searchForm){
+      for (let key in this.searchForm) {
         if (this.searchForm[key] === 'all') {
           this.searchForm[key] = ''
         }
@@ -293,15 +299,14 @@ export default {
     // 播放选中轨迹
     playTrack(rowData) {
       this.fullscreenLoading = true
-      console.log('row',rowData)
-      multiVehicleTrackDetail({startTime:rowData.startTime, endTime: rowData.endTime}).then(res=>{
-      // multiVehicleTrackDetail({startTime: '2023-03-06 13:30:00', endTime: '2023-03-06 13:31:00'}).then(res => {
-        console.log('多车详情',res)
+      console.log('row', rowData)
+      multiVehicleTrackDetail({startTime: rowData.startTime, endTime: rowData.endTime}).then(res => {
+        // multiVehicleTrackDetail({startTime: '2023-03-06 13:30:00', endTime: '2023-03-06 13:31:00'}).then(res => {
+        console.log('多车详情', res)
         this.fullscreenLoading = false
-        if(res.content.length){
+        if (res.content.length) {
           this.$emit('playFullTrack', res.content)
-        }
-        else {
+        } else {
           this.$message.warning('该段时间无轨迹数据...')
         }
       })
@@ -331,7 +336,7 @@ export default {
 };
 </script>
 <style>
-label{
+label {
   margin-bottom: 0 !important;
 }
 </style>
@@ -587,9 +592,11 @@ label{
 ::-webkit-scrollbar-track {
   background-color: #0f2645;
 }
+
 ::v-deep .el-table__fixed-right::before {
   height: 0;
 }
+
 /*滚动条的滑块按钮*/
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -600,6 +607,7 @@ label{
 ::-webkit-scrollbar-button {
   height: 0;
 }
+
 ::v-deep .row-deep.hover-row {
   td {
     background-color: #171f34;
@@ -613,6 +621,7 @@ label{
   }
 
 }
+
 .mypigination {
   background: transparent;
 
@@ -664,9 +673,11 @@ label{
 ::v-deep .el-date-editor {
   width: auto;
 }
-::v-deep .el-form-item__error{
+
+::v-deep .el-form-item__error {
   padding-top: 2px;
 }
+
 ::v-deep .el-date-editor {
   width: auto;
 }
@@ -678,33 +689,42 @@ label{
 ::v-deep .el-table__fixed-right::before {
   height: 0;
 }
-::v-deep .el-input__inner{
+
+::v-deep .el-input__inner {
   height: 30px;
   line-height: 32px;
 }
-::v-deep .el-form-item__label{
+
+::v-deep .el-form-item__label {
   height: 30px;
   line-height: 30px;
   font-size: 14px;
 }
-::v-deep .el-input__icon{
+
+::v-deep .el-input__icon {
   line-height: 24px;
 }
-::v-deep .el-range__icon{
+
+::v-deep .el-range__icon {
   line-height: 24px;
 }
-::v-deep .el-range-separator{
+
+::v-deep .el-range-separator {
   line-height: 24px;
 }
-::v-deep .el-icon-arrow-up{
+
+::v-deep .el-icon-arrow-up {
   line-height: 24px;
 }
+
 ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
   background-color: transparent;
 }
-::v-deep .el-date-editor{
+
+::v-deep .el-date-editor {
   width: 100%;
 }
+
 ::v-deep .el-range-input {
   background-color: transparent;
 }

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

@@ -201,8 +201,9 @@ export default {
       searchForm: {
         //startTime: '2023-04-07 14:00:00',
         //endTime: '2023-04-07 15:00:00',
-        startTime:'2023-04-10 00:46:20',
-        endTime:'2023-04-10 00:49:46',
+        //
+        startTime:'2023-04-09 01:28:01',
+        endTime:'2023-04-09 01:28:40',
         eventCategory: '',
         crossId: '',
         objectType: '',

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

@@ -255,6 +255,8 @@ export default {
         function: '',
         // startTime: '2023-03-14 08:00:00',
         // endTime: '2023-03-14 08:10:00',
+        // 2023-04-08 23:00:00
+        //2023-04-08 23:30:00
         startTime: '2023-04-08 23:11:51',
         endTime: '2023-04-08 23:12:14',
       },
@@ -270,13 +272,13 @@ export default {
     // this.getDict()
   },
   mounted() {
-    this.$nextTick(() => {
-      let date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
-      this.searchForm.endTime = this.convertToString(date)
-      let start = date.getTime() - 1000 * 60 * 10
-      let st = new Date(start)
-      this.searchForm.startTime = this.convertToString(st)
-    })
+    // this.$nextTick(() => {
+    //   let date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+    //   this.searchForm.endTime = this.convertToString(date)
+    //   let start = date.getTime() - 1000 * 60 * 10
+    //   let st = new Date(start)
+    //   this.searchForm.startTime = this.convertToString(st)
+    // })
   },
   methods: {
     convertToString(date) {