轨迹分析-事件-首视频可播放时播放轨迹&部分样式修改

wj-manage-web/src/App.vue

 <template>
-  <!-- <stms-framework
-    id="app"
-    title="GIS云中台"
-    wrapperClassName="default"
-    :menu="menu"
-    :path="path"
-    :params="params"
-    v-if="isInit"
-  /> -->
-
   <div id="app" class="stms-framework default">
     <!-- 头部 -->
     <Navigator v-if="!hideHeader" />
@@ -67,37 +57,18 @@ export default {
       await this.$store.dispatch("QUERY_MENU");
       this.isInit = true;
       document.title = map_config.SYS_TITLE;
-      // if (window.location.hash === "#/") {
-      //   this.$route.path === "/" && this.$router.push(this.menu.find(v => !v.parentId).url);
-      // }
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-* {
-  font-family: "Source Han Sans CN", sans-serif;
-}
 #app {
-  // font-family: "Avenir", Helvetica, Arial, sans-serif;
-  //font-family: 'SiYuanHT';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: "Source Han Sans CN", sans-serif;
   color: #2c3e50;
   height: 100%;
   width: 100%;
 }
 </style>
-<style>
-/* .el-tooltip__popper{
-  background: #042a52 !important;
-  color: #bedeff;
-}
-.el-tooltip__popper[x-placement^=right] .popper__arrow:after{
-  border-right-color:  #042a52 !important;
-}
-.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{
-  border-bottom-color:  #042a52 !important;
-} */
-</style>

wj-manage-web/src/router/index.js

 import Router from "vue-router";
 import routes from "../config/routes";
-import store from "../store";
 import AuthDao from "@/dao/auth";
-// import { socketArray } from '../config/holo/websocket'
 
 // 注册路由
 Vue.use(Router);
@@ -33,18 +31,6 @@ const router = new Router({
   ],
 });
 
-function acquirePathData(datas, url) {
-  for (var i = 0; i < datas.length; i++) {
-    let item = datas[i];
-    if (item.url == url) {
-      return item;
-    }
-    if (item.children && item.children.length > 0) {
-      let res = acquirePathData(item.children, url);
-      if (res) return res;
-    }
-  }
-}
 // 路由白名单
 const whiteList = ["/situation/cameraView", "/analysis/reportPreview"];
 

wj-manage-web/src/views/situation/mapPopup/vehicleDetail.vue

@@ -5,15 +5,8 @@
       <div class="head">
         <span class="titleBefore"></span
         ><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
-        <!-- <span class="titleBefore"></span><span>xxxxx</span> -->
-        <!-- <span @click="closeDetail()">关闭</span> -->
       </div>
       <div class="content">
-        <!-- <div class="detailItem" v-for="item of model" :key="item">
-                  <span class="left">{{ item.label }}</span
-                  ><span class="right">{{ item.value }}</span>
-                </div> -->
-
         <div class="detailItem">
           <span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }}
         </div>
@@ -65,23 +58,12 @@ export default {
   },
   props: ["model"],
   watch: {
-    model: {
-      handler(val) {
-        // console.log('dataObj deep change', val)
-      },
-      deep: true, // 深度监听
-      immediate: true, // 初次监听即执行
-    },
   },
   mounted() {
     console.log("model", this.model);
   },
   methods: {
-    // closeVehicleDetail() {
-    //   this.$EventBus.$emit("closeVehicleDetail", this.model.id);
-    // },
     convertDict(type, value) {
-      // console.log("this.$store", store);
       for (let item of store.state.dicts[type]) {
         if (item.code == value) {
           return item.name;
@@ -101,12 +83,8 @@ export default {
 <style lang="less" scoped>
 .vehicleDetail {
   font-size: 12PX;
-  // position: absolute;
   position: relative;
-  //bottom: 16PX;
-  //right: 16PX;
   width: 216PX;
-  //height: 207PX;
   .closeButton {
     position: absolute;
     right: 20PX;

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

@@ -47,6 +47,7 @@ export default {
     videoReady(channel) {
       document.getElementById(`videoVisibles${channel}`).style.display =
         "unset";
+      this.$emit("videoCanPlay");
     },
   },
 };

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

@@ -19,19 +19,20 @@
     <div
       class="visibleControl"
       :class="[{ 'expand-i': boxesShow }, { 'close-i': !boxesShow }]"
-      @click="changeVisibel"
+      @click="boxesShow = !boxesShow"
     ></div>
     <!--主地图-->
     <cesium-map
       cId="trackMain"
       :loadTileset="true"
-      @tilesetReady="tilesetReady"
       ref="cesiumMap"
       class="cesium-map-track"
     />
+    <!--事件历史视频-->
     <history-videos
       v-if="cameraShow && currentMenu === 'third'"
       :eventRowData="eventRowData"
+      @videoCanPlay="videoCanPlay"
     />
     <!--鹰眼图-->
     <div class="small-map-container" v-show="showOverMap">
@@ -81,7 +82,7 @@
     <div class="track-timeline" v-show="showProgress">
       <div class="track-progress">
         <div
-          @click="play"
+          @click="playStatus = !playStatus"
           :class="playStatus ? 'el-icon-video-pause' : 'el-icon-video-play'"
         ></div>
       </div>
@@ -138,7 +139,8 @@ let viewer,
   lightTexts = {}, // 灯态文字entity
   popup = null, // 目标车辆弹窗
   currentEntity = null, // 需要展示弹窗的目标车辆
-  timeRangeLights = [];
+  timeRangeLights = [],
+  checkVideoReadyTimer = null;
 export default {
   name: "track",
   props: {},
@@ -196,16 +198,17 @@ export default {
         time: "",
       },
       lastTimeSecend: null,
+      videoReady: false,
     };
   },
   computed: {},
   methods: {
+    videoCanPlay() {
+      this.videoReady = true;
+    },
     closeTimeSelector() {
       this.showTimeSelector = false;
     },
-    updateSceneLights() {
-      this.updateLights();
-    },
     getHisLights(lights) {
       timeRangeLights = lights;
     },
@@ -363,7 +366,6 @@ export default {
         }
       }
     },
-    tilesetReady() {},
     // viewer, data, id, type, color, timeInterval, start, stop, pos, ori, speed, angle
     addEntityProperty(options) {
       let colorString = "#fff";
@@ -562,22 +564,21 @@ export default {
         viewer.clock.multiplier = 1;
         // 循环执行,即为2，到达终止时间，重新从起点时间开始
         viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
-        this.playStatus = true;
+        if (this.currentMenu === "third" && this.eventRowData.channels.length) {
+          this.playStatus = false;
+          // 视频可以播放时再开始播放轨迹&播放视频
+          checkVideoReadyTimer = setInterval(() => {
+            if (this.videoReady) {
+              clearInterval(checkVideoReadyTimer);
+              checkVideoReadyTimer = null;
+              this.playStatus = true;
+            }
+          }, 100);
+        } else {
+          this.playStatus = true;
+        }
       });
     },
-    // 停止播放 删除所有实体 删除弹窗
-    removeAllEntities() {
-      this.playStatus = false;
-      viewer?.entities.removeAll();
-      viewerS?.entities.removeAll();
-      lightEntities = {};
-      lightTexts = {};
-      currentEntity = null;
-      entityVehicles = {};
-      entityLines = {};
-      popup?.remove();
-      popup = null;
-    },
     // 模块一 模块二 请求轨迹并播放
     queryPathByTime(rowData) {
       this.removeAllEntities();
@@ -774,7 +775,25 @@ export default {
         }
       });
     },
-    // 播放选中的轨迹
+    // 停止播放 删除所有实体 删除弹窗
+    removeAllEntities() {
+      this.playStatus = false;
+      this.videoReady = false;
+      if (checkVideoReadyTimer) {
+        clearInterval(checkVideoReadyTimer);
+        checkVideoReadyTimer = null;
+      }
+      viewer?.entities.removeAll();
+      viewerS?.entities.removeAll();
+      lightEntities = {};
+      lightTexts = {};
+      currentEntity = null;
+      entityVehicles = {};
+      entityLines = {};
+      popup?.remove();
+      popup = null;
+    },
+    // 根据timeArray选中时间请求轨迹
     confirmPlayTrack(tracksIndex) {
       this.playStatus = false;
       let toSend = this.currentRow.tracks[tracksIndex];
@@ -800,10 +819,6 @@ export default {
       this.currentMenu = "first";
       this.$refs.trackTypes.changeCheck("first");
     },
-    // 左侧菜单抽屉状态
-    changeVisibel() {
-      this.boxesShow = !this.boxesShow;
-    },
     // 重置视角 & 组件状态
     resetView() {
       this.$nextTick(() => {
@@ -815,7 +830,6 @@ export default {
       this.showTrackSwitcher = false;
       this.switchTimeLine(false);
       this.showTimeSelector = false;
-
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(
           ...cesium_config.center,
@@ -1142,10 +1156,6 @@ export default {
         this.showProgress = false;
       }
     },
-    // 播放按钮
-    play() {
-      this.playStatus = !this.playStatus;
-    },
     // 倍速切换
     changeSpeed(e) {
       viewer.clock.multiplier = e;
@@ -1259,7 +1269,7 @@ export default {
       this.fullscreenLoading = false;
     });
     viewer = this.$refs.cesiumMap.loadMap();
-    viewer.clock.onTick.addEventListener(this.updateSceneLights);
+    viewer.clock.onTick.addEventListener(this.updateLights);
     // 鹰眼图 = 普通cesium场景 cartographic height * 1.5
     viewerS = this.$refs.cesiumOverMap.loadMap();
     viewerS.clock.shouldAnimate = false;
@@ -1278,7 +1288,7 @@ export default {
     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?.clock.onTick.removeEventListener(this.updateLights);
     viewer?.destroy();
     viewerS?.destroy();
   },

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

@@ -273,6 +273,30 @@ export default {
   .mypigination {
     background: transparent;
 
+    ::v-deep .el-pager {
+      li {
+        width: unset;
+        height: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+        margin: 0 5px;
+      }
+    }
+
+    ::v-deep .el-pager .more::before {
+      line-height: unset;
+    }
+
+    ::v-deep .el-pagination {
+      button {
+        width: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+      }
+    }
+
     ::v-deep .el-pagination__total {
       color: rgba(255, 255, 255, 0.85);
     }

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

@@ -444,6 +444,30 @@ export default {
   .mypigination {
     background: transparent;
 
+    ::v-deep .el-pager {
+      li {
+        width: unset;
+        height: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+        margin: 0 5px;
+      }
+    }
+
+    ::v-deep .el-pager .more::before {
+      line-height: unset;
+    }
+
+    ::v-deep .el-pagination {
+      button {
+        width: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+      }
+    }
+
     ::v-deep .el-pagination__total {
       color: rgba(255, 255, 255, 0.85);
     }

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

@@ -196,7 +196,7 @@ import {
   eventTracksList,
   getEventVideo,
   multiVehicleTrackDetail,
-  getLightByTimeAndCrossId
+  getLightByTimeAndCrossId,
 } from "../../dao/track";
 import MsgCard from "../../components/Standard/msg-card.vue";
 
@@ -358,24 +358,18 @@ export default {
         pageNum: this.currentPage,
         pageSize: this.pageSize,
       };
-      Promise.all([eventTracksList(sendData), equip_camera()]).then(
-        ([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;
-            // });
-            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;
-          this.tableLoading = false;
+      eventTracksList(sendData).then((table) => {
+        for (let i = 0; i < table.content.rows.length; i++) {
+          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;
+        this.tableLoading = false;
+      });
     },
     pageChange(e) {
       this.currentPage = e.page;
@@ -392,7 +386,7 @@ export default {
       console.log("rowData", rowData);
       this.fullscreenLoading = true;
       this.getLight({ startTime: rowData.startTime, endTime: rowData.endTime });
-      console.log('event start and end', rowData.startTime, rowData.endTime);
+      console.log("event start and end", rowData.startTime, rowData.endTime);
       multiVehicleTrackDetail({
         startTime: rowData.startTime,
         endTime: rowData.endTime,
@@ -407,7 +401,7 @@ export default {
     },
     // 获取时间区间内的历史灯态
     getLight(timeRange) {
-        this.$emit('getHisLights',[])
+      this.$emit("getHisLights", []);
       let toSend = [];
       for (let crossId of ["13NF80B5QN0", "13NGH0B5RC0", "13NI00B5RM0"]) {
         toSend.push({
@@ -423,7 +417,11 @@ export default {
         getLightByTimeAndCrossId(toSend[2]),
       ]).then(([res1, res2, res3]) => {
         console.log("历史灯态", res1, res2, res3);
-        this.$emit('getHisLights',[...res1.content, ...res2.content, ...res3.content])
+        this.$emit("getHisLights", [
+          ...res1.content,
+          ...res2.content,
+          ...res3.content,
+        ]);
       });
     },
     // 轨迹（仅展示）
@@ -452,7 +450,7 @@ export default {
   beforeDestroy() {},
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .l_hidden {
   left: -100%;
   transition: 0.5s all ease;
@@ -509,6 +507,30 @@ export default {
   .mypigination {
     background: transparent;
 
+    ::v-deep .el-pager {
+      li {
+        width: unset;
+        height: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+        margin: 0 5px;
+      }
+    }
+
+    ::v-deep .el-pager .more::before {
+      line-height: unset;
+    }
+
+    ::v-deep .el-pagination {
+      button {
+        width: unset;
+        padding: 4px;
+        min-width: unset;
+        line-height: unset;
+      }
+    }
+
     ::v-deep .el-pagination__total {
       color: rgba(255, 255, 255, 0.85);
     }
@@ -552,7 +574,6 @@ export default {
       color: #676666;
     }
   }
-
   ::v-deep .el-form-item__error {
     padding-top: 2px;
   }
@@ -731,7 +752,7 @@ export default {
     }
 
     ::v-deep .el-input__inner {
-    //   font-size: 14px;
+      //   font-size: 14px;
       color: white;
     }
 
@@ -822,4 +843,4 @@ export default {
     background: #0f2645;
   }
 }
-</style>
+</style>
\ No newline at end of file