按需求改动超限 & 处理bug

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

@@ -61,7 +61,8 @@ export default {
             starttime: this.replaceTimeGap(this.timeModel.startTime),
             endtime: this.replaceTimeGap(this.timeModel.endTime),
           });
-          console.log("video response", response);
+          console.log("video response 请求完成", response);
+          this.$emit('loadEnd')
           this.videoUrl = response.content;
           setTimeout(() => {
             this.$refs.loopVideoPlayer.load();

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

@@ -24,17 +24,17 @@
       </div> -->
     </div>
     <div class="left_box aside" :class="[{ hide_left: !show }]">
-      <regional-index class="item" />
-      <traffic-flow class="item" />
-      <ped-and-no-vehicles class="item" />
+      <regional-index class="item"/>
+      <traffic-flow class="item"/>
+      <ped-and-no-vehicles class="item"/>
     </div>
     <div class="right_box aside" :class="[{ hide_right: !show }]">
-      <in-transit class="item" />
-      <traffic-event class="item" />
+      <in-transit class="item"/>
+      <traffic-event class="item"/>
       <msg-card class="item item-warningData" title="告警信息">
         <div class="full-w full-h" v-loading="alarmLoading" element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)">
-          <el-tabs @tab-click='tabClick' v-model='activeName' style="height: 100%;">
+          <el-tabs v-model='activeName' style="height: 100%;">
             <el-tab-pane name='11' key="1" style="height: 100%;">
               <template slot="label">
                 <div style="display: flex">
@@ -85,7 +85,7 @@
                   </li>
                 </vue-seamless-scroll>
                 <div class="emptyText" v-show="!warningData.length">
-                  <img :src="require('../../../assets/images/holo/svg/noWarning.svg')" />
+                  <img :src="require('../../../assets/images/holo/svg/noWarning.svg')"/>
                   <div>暂无告警信息</div>
                 </div>
               </div>
@@ -104,21 +104,21 @@
                   </div>
                 </div>
               </template>
-              <div class="traffics">
-                <vue-seamless-scroll ref='22' class="warningMsg" :data="overData" :class-option="optionSetting1"
-                  v-show="overData.length">
-                  <li @click="playOverHistoryTrace(item)" v-for="(item, index) of overData" class="overItem"
+              <div class="trafficss">
+<!--                <vue-seamless-scroll ref='22' class="warningMsg" :data="overData" :class-option="optionSetting1"-->
+<!--                                     v-show="overData.length">-->
+                  <div @click="playOverHistoryTrace(item)" v-for="(item, index) of overData" class="overItem"
                       :key="index">
-                    <div class='topLicense'> <span>预警时间：</span>{{ item.timeStamp }}</div>
+                    <div class='topLicense'><span>预警时间：</span>{{ item.timeStamp }}</div>
                     <div class='detailMsg'>
                       <div><span>车牌：</span>{{ item.plateNo }}</div>
                       <div :title='item.inDirName'><span>行驶方向：</span>{{ item.inDirName }}</div>
-                      <div><span>超限类型：</span>{{ item.type }}</div>
+                      <div><span>超限类型：</span>{{ dict.overCarType[item.type] }}</div>
                     </div>
-                  </li>
-                </vue-seamless-scroll>
+                  </div>
+<!--                </vue-seamless-scroll>-->
                 <div class="emptyText" v-show="!overData.length">
-                  <img :src="require('../../../assets/images/holo/svg/noWarning.svg')" />
+                  <img :src="require('../../../assets/images/holo/svg/noWarning.svg')"/>
                   <div>暂无超限信息</div>
                 </div>
               </div>
@@ -134,8 +134,8 @@
 import dict from "@/config/holo/dictionary";
 import msgCard from "../../../components/Standard/msg-card.vue";
 import vueSeamlessScroll from 'vue-seamless-scroll'
-import { eventAlarm, getAlarmOverDatas, getOverDatas } from "../../../dao/situation";
-import { initWs } from "../../../config/holo/websocket";
+import {eventAlarm, getAlarmOverDatas, getOverDatas} from "../../../dao/situation";
+import {initWs} from "../../../config/holo/websocket";
 import RegionalIndex from "./msgLeft/regionalIndex.vue";
 import TrafficFlow from "./msgLeft/trafficFlow.vue";
 import pedAndNoVehicles from "./msgLeft/pedAndNoVehicles.vue";
@@ -158,16 +158,29 @@ export default {
       dict,
       activeName: '11',
       overData: [
-        { "plateNo": "京A895413", "inDirName": "东向西", "type": "201", "timeStamp": "2024-08-27 15:39:18" },
-        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
-        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
-        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "504", "timeStamp": "2024-08-27 15:39:18" },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
+        // { "plateNo": "京A895413", "inDirName": "东向西", "type": "105", "timeStamp": "2024-08-27 15:39:18",length:10 },
       ],
       alarmLoading: true,
       overLoading: true,
       init: true,
       // 告警信息
-      warningData: [],
+      warningData: [
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+        // {id:1},
+      ],
       lastWarningData: [],
       topDataSecond: {},
       topDataMin: {},
@@ -190,7 +203,7 @@ export default {
     },
     optionSetting1() {
       return {
-        step: 0.5, // 数值越大速度滚动越快
+        step: 0, // 数值越大速度滚动越快
         limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
@@ -250,12 +263,18 @@ export default {
     playOverHistoryTrace(row) {
       let wsSend = {
         "dataType": "OVER_RUN",  //数据类型【固定值】
-        "timeStamp": row.timeStamp, //时间
-        'endTime': this.timeFormat(new Date(new Date(row.timeStamp).getTime() + 1000 * 10)),
+        "timeStamp": this.timeFormat(new Date(new Date(row.timeStamp).getTime() - 1000 * 10)),
+        'endTime': this.timeFormat(new Date(new Date(row.timeStamp).getTime() + 1000 *10)),
         "globalId": row.globalId, //车辆ID
-        "overType": row.type //超限类型
+        "overType": row.type, //超限类型
+        'urls': row.videoUrls,
+        // 'urls': ['video/1.mp4','video/1.mp4'],
+      }
+      if (row.type == '105') {
+        wsSend.vehicleHeight = row.length
+      } else {
+        wsSend.vehicleWidth = row.length
       }
-      console.log('close real time', row, wsSend);
       this.$emit("playOverHistoryTrace", wsSend)
     },
     // 获取超限列表
@@ -272,9 +291,6 @@ export default {
         }
       })
     },
-    tabClick(e) {
-      this.$refs[e.name].reset()
-    },
     initHelMetSocket() {
       this.helMetSocket = initWs({
         name: "callHelmet",
@@ -306,7 +322,7 @@ export default {
       return match?.name || "未定义";
     },
     addWarningPopup(item) {
-      this.$emit("addWarningPopup", item, { type: "hover" });
+      this.$emit("addWarningPopup", item, {type: "hover"});
     },
     delWarningPopup(item) {
       this.$emit("delWarningPopup", item.eventSerialNumber);
@@ -321,14 +337,14 @@ export default {
       // this.alarmLoading = true
       eventAlarm().then((res) => {
         this.alarmLoading = false
-        // console.log("事件告警", res.content);
+        console.log("事件告警", res.content);
         this.warningData = res.content;
         if (!this.init) {
           if (this.lastWarningData.length !== res.content.length) {
             // 最新发生的告警信息
             let newMegs = this.diff(this.lastWarningData, this.warningData);
             for (let item of newMegs) {
-              this.$emit("addWarningPopup", item, { type: "auto" });
+              this.$emit("addWarningPopup", item, {type: "auto"});
             }
           }
         }
@@ -337,14 +353,14 @@ export default {
       });
     },
     getOverDataTopSecond() {
-      getOverDatas({ type: 1 }).then((res) => {
+      getOverDatas({type: 1}).then((res) => {
         if (res.content) {
           this.topDataSecond = res.content;
         }
       });
     },
     getOverDataTopMin() {
-      getOverDatas({ type: 2 }).then((res) => {
+      getOverDatas({type: 2}).then((res) => {
         if (res.content) {
           this.topDataMin = res.content;
         }
@@ -473,8 +489,27 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: auto;
     width: 100%;
     height: 100%;
+
+    .warningMsg {
+      overflow: hidden;
+    }
+  }
+
+  .trafficss {
+    color: rgba(155, 177, 212, 1);
+    //display: flex;
+    //align-items: center;
+    //justify-content: center;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+
+    .warningMsg {
+      overflow: auto;
+    }
   }
 
   ::v-deep .el-tabs__item {
@@ -535,6 +570,8 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      background-color: rgba(24, 144, 255, 0.4);
+      color: rgba(24, 144, 255, 1);
 
       span {
         display: inline-block;
@@ -595,6 +632,7 @@ export default {
     }
 
     .message {
+      border: 1px solid rgba(24, 144, 255, 0.4);
       padding: 0 0 0 10px;
       // border: 1px solid rgba(60, 27, 37, 1);
       display: flex;
@@ -691,6 +729,9 @@ export default {
       }
     }
   }
+  .overItem:last-child{
+    margin-bottom: 0;
+  }
 }
 
 .map-mask {

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

@@ -4,6 +4,7 @@
     <div class="vehicleDetailInner">
       <div class="head">
         <span class="titleBefore"></span><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
+        <div @click="emitPopupClose" class="el-icon-close"></div>
       </div>
       <div class="content">
         <div class="detailItem">
@@ -71,6 +72,9 @@ export default {
     // console.log("model", this.model);
   },
   methods: {
+    emitPopupClose(){
+      this.$EventBus.$emit("emitPopupClose",{id:this.model.id,overRun: !this.notExceed});
+    },
     convertDict(type, value) {
       for (let item of store.state.dicts[type]) {
         if (item.code == value) {
@@ -146,6 +150,15 @@ export default {
       color: white;
       display: flex;
       align-items: center;
+      position: relative;
+      div{
+        position: absolute;
+        cursor: pointer;
+        right: 3px;
+        top: 18px;
+        font-weight: bold;
+        font-size: 20px;
+      }
 
       span {
         display: inline-block;

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

 <template>
   <div id="holo_historyCameraContainer" class="eventCameraContainer" v-show="true">
     <div id="historyCameraContainer" class="historyCameraContainer">
-            <div class="cameraVideoShow" :key="index" v-for="(item, index) of channels" v-show="true"
+      <div class="cameraVideoShow" :key="index" v-for="(item, index) of urls" v-show="true"
            :id="`videoVisibles${item}`">
-                <loop-video class="holo_his" ref="hisVideo" :autoplay="true" :timeModel="timeDuration" :channel="item"></loop-video>
+        <!--                <loop-video @loadEnd="loadEnd" class="holo_his" ref="hisVideo" :autoplay="true" :timeModel="timeDuration" :channel="item"></loop-video>-->
+        <video :src="item" style="object-fit: fill;width: 100%;height: 100%;" @canplay="videoCanPlay" autoplay
+               muted
+               loop
+               class="videoControl" ref="loopVideoPlayer">
+          <!--                          <source :src="item" type="video/mp4" />-->
+          <!--                您的浏览器不支持 video 属性。-->
+        </video>
       </div>
     </div>
   </div>
@@ -11,30 +18,41 @@
 
 <script>
 import LoopVideo from "../../../components/Standard/loopVideo.vue";
+
 export default {
   name: "historyVideos",
   components: {
     LoopVideo,
   },
   props: {
-        channels: {
+    // channels: {
+    //   type: Array,
+    //   default() {
+    //     return ['2', '9']
+    //   }
+    // },
+    urls: {
       type: Array,
       default() {
-                return ['2', '9']
+        return []
       }
     },
-        timeDuration: {
-            type: Object,
-            default() {
-                return {
-                    startTime: '',
-                    endTime: ''
-                }
-            }
+    // timeDuration: {
+    //   type: Object,
+    //   default() {
+    //     return {
+    //       startTime: '',
+    //       endTime: ''
+    //     }
+    //   }
+    // },
   },
+  mounted() {
+    console.log('urls', this.urls)
   },
   data() {
     return {
+      ready: false
     }
   },
   computed: {},
@@ -46,6 +64,12 @@ export default {
     //         }
     //     }
     // }
+    videoCanPlay() {
+      if (!this.ready) {
+        this.ready = true
+        this.$emit('isReady')
+      }
+    },
   },
 };
 </script>
@@ -64,8 +88,9 @@ export default {
   border: 1px solid rgba(83, 146, 189, 1);
   background: rgba(10, 26, 41, 0.9);
   border-radius: 6px;
-    .holo_his{
-        border: 1px solid rgba(255,255,255,0.3);
+
+  .holo_his {
+    border: 1px solid rgba(255, 255, 255, 0.3);
 
   }