监控视频回放

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -3,7 +3,7 @@
     <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
                    @treeCommand="handleSliderOption" @select="handleSelectMonitor"
                    :render-item="renderTreeItem" ref="DeviceSlider"/>
-    <div class="monitorPane">
+    <div class="monitorPane" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
       <div class="headerBar">
         <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
           <!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
@@ -21,10 +21,27 @@
           v-for="(m, i) in monitors"
           :key="m.id"
           :style="currentSplitStyle">
-          <AiMonitor :instance="instance" :deviceId="m.deviceId" :isShowBar="isShowBar" :id="m.id" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
+          <AiMonitor
+            :instance="instance"
+            :deviceId="m.deviceId"
+            :isShowBar="isShowBar"
+            :id="m.id"
+            :playbackUrls="playbackUrls"
+            :name="m.name"
+            @close="removeMonitor(i)"
+            ref="AiMonitor">
+          </AiMonitor>
         </div>
       </div>
-      <Synergy ref="Synergy" v-if="!isShowBar && monitors.length" style="width: 100%; height: 68px;"></Synergy>
+      <Synergy
+        ref="Synergy"
+        :ids="ids"
+        :instance="instance"
+        @replay="onReplay"
+        @backLiveing="playbackUrls = []"
+        v-if="!isShowBar && monitors.length"
+        style="width: 100%; height: 68px;">
+      </Synergy>
     </div>
     <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
                @closed="selected={}">
@@ -69,7 +86,13 @@
         let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
         return {width: per, height: per}
       },
-      ...mapState(['user'])
+      ...mapState(['user']),
+
+      ids () {
+        if (!this.monitors.length) return ''
+
+        return this.monitors.map(v => v.id).join(',')
+      }
     },
 
     data() {
@@ -80,11 +103,13 @@
         monitors: [],
         dialog: false,
         locate: false,
+        isLoading: false,
         isShowBar: true,
         selected: {
           areaId: ''
         },
         videoUrl: '',
+        playbackUrls: [],
         latlng: null,
         disabledLevel: 0,
         rules: {
@@ -137,6 +162,27 @@
         })
       },
 
+      onReplay (e) {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
+          params: {
+            ids: this.ids,
+            startTime: e.startTime,
+            endTime: e.endTime,
+            nvrCodes: this.ids
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.playbackUrls = res.data
+              this.isLoading = false
+            }
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
       removeMonitor(i) {
         this.monitors.splice(i, 1)
       },