按需求改动超限 & 处理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/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"
-                :id="`videoVisibles${item}`">
-                <loop-video class="holo_his" ref="hisVideo" :autoplay="true" :timeModel="timeDuration" :channel="item"></loop-video>
-            </div>
-        </div>
+  <div id="holo_historyCameraContainer" class="eventCameraContainer" v-show="true">
+    <div id="historyCameraContainer" class="historyCameraContainer">
+      <div class="cameraVideoShow" :key="index" v-for="(item, index) of urls" v-show="true"
+           :id="`videoVisibles${item}`">
+        <!--                <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>
 </template>
 
 <script>
 import LoopVideo from "../../../components/Standard/loopVideo.vue";
+
 export default {
-    name: "historyVideos",
-    components: {
-        LoopVideo,
-    },
-    props: {
-        channels: {
-            type: Array,
-            default() {
-                return ['2', '9']
-            }
-        },
-        timeDuration: {
-            type: Object,
-            default() {
-                return {
-                    startTime: '',
-                    endTime: ''
-                }
-            }
-        },
-    },
-    data() {
-        return {
-        }
+  name: "historyVideos",
+  components: {
+    LoopVideo,
+  },
+  props: {
+    // channels: {
+    //   type: Array,
+    //   default() {
+    //     return ['2', '9']
+    //   }
+    // },
+    urls: {
+      type: Array,
+      default() {
+        return []
+      }
     },
-    computed: {},
-    methods: {
-        // playHisVideos() {
-        //     if (this.$refs.hisVideo) {
-        //         for (let container of this.$refs.hisVideo) {
-        //             container?.startPlay();
-        //         }
-        //     }
-        // }
+    // timeDuration: {
+    //   type: Object,
+    //   default() {
+    //     return {
+    //       startTime: '',
+    //       endTime: ''
+    //     }
+    //   }
+    // },
+  },
+  mounted() {
+    console.log('urls', this.urls)
+  },
+  data() {
+    return {
+      ready: false
+    }
+  },
+  computed: {},
+  methods: {
+    // playHisVideos() {
+    //     if (this.$refs.hisVideo) {
+    //         for (let container of this.$refs.hisVideo) {
+    //             container?.startPlay();
+    //         }
+    //     }
+    // }
+    videoCanPlay() {
+      if (!this.ready) {
+        this.ready = true
+        this.$emit('isReady')
+      }
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .eventCameraContainer {
-    position: absolute;
-    width: 600px;
-    height: 200px;
-    max-width: 600px;
-    bottom: 40px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    margin: 0 auto;
-    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);
-        
-    }
+  position: absolute;
+  width: 600px;
+  height: 200px;
+  max-width: 600px;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  margin: 0 auto;
+  border: 1px solid rgba(83, 146, 189, 1);
+  background: rgba(10, 26, 41, 0.9);
+  border-radius: 6px;
 
-    .historyCameraContainer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-        height: 100%;
+  .holo_his {
+    border: 1px solid rgba(255, 255, 255, 0.3);
 
-        .cameraVideoShow {
-            width: 50%;
-            height: 100%;
-            padding: 4px;
-        }
+  }
 
-        .lessWidthVideo {
-            width: calc(100% - 6px);
-        }
+  .historyCameraContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .cameraVideoShow {
+      width: 50%;
+      height: 100%;
+      padding: 4px;
+    }
 
-        .normalWidthVideo {
-            width: 100%;
-        }
+    .lessWidthVideo {
+      width: calc(100% - 6px);
     }
 
-    .noVideo {
-        pointer-events: none;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 32px;
-        color: #04396f;
+    .normalWidthVideo {
+      width: 100%;
     }
+  }
+
+  .noVideo {
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+    color: #04396f;
+  }
 }
 </style>
\ No newline at end of file