视频回放

2022-04-15 14:41:07 +08:00
parent 3d27008b40
commit f42f6a165d
2 changed files with 216 additions and 161 deletions
--- a/packages/IntelligentSecurity/AppISManage/AppISManage.vue
+++ b/packages/IntelligentSecurity/AppISManage/AppISManage.vue
@@ -6,10 +6,14 @@
    <div class="monitorPane">
      <div class="headerBar">
        <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
-          <i slot="prefix" class="iconfont iconjdq_led_Led1"/>
+          <!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
+          <img slot="prefix" src="https://cdn.cunwuyun.cn/slw2.0/images/fp.png">
          <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
        </el-select>
-        <!--        <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
+        <div class="headerBar-item" @click="isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
+          <img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
+          <span>{{ isShowBar ? '视频协同' : '取消协同' }}</span>
+        </div>
      </div>
      <div class="videoList">
        <div
@@ -17,7 +21,7 @@
          v-for="(m, i) in monitors"
          :key="m.id"
          :style="currentSplitStyle">
-          <AiMonitor :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
+          <AiMonitor :isShowBar="isShowBar" :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
        </div>
      </div>
    </div>
@@ -37,181 +41,179 @@
 </template>

 <script>
-import {mapState} from 'vuex'
-import DeviceSlider from "../components/deviceSlider";
-import LocateDialog from "../components/locateDialog";
-import AiMonitor from "../components/AiSlwVideo";
+  import {mapState} from 'vuex'
+  import DeviceSlider from "../components/deviceSlider"
+  import LocateDialog from "../components/locateDialog"
+  import AiMonitor from "../components/AiSlwVideo"

-export default {
-  name: "AppISManage",
-  components: {LocateDialog, DeviceSlider, AiMonitor},
-  label: "监控实况",
-  props: {
-    instance: Function,
-    dict: Object,
-    permissions: Function
-  },
-  computed: {
-    splitOps() {
-      return [
-        {label: "单分屏", value: 1, per: "100%"},
-        {label: "四分屏", value: 4, per: "49%"},
-        {label: "九分屏", value: 9, per: "32%"}
-      ]
+  export default {
+    name: "AppISManage",
+    components: {LocateDialog, DeviceSlider, AiMonitor},
+    label: "监控实况",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
    },
-    currentSplitStyle() {
-      let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
-      return {width: per, height: per}
-    },
-    ...mapState(['user'])
-  },
-
-  data() {
-    return {
-      slider: true,
-      fullscreen: false,
-      splitScreen: 1,
-      monitors: [],
-      dialog: false,
-      locate: false,
-      selected: {
-        areaId: ''
+    computed: {
+      splitOps() {
+        return [
+          {label: "单分屏", value: 1, per: "100%"},
+          {label: "四分屏", value: 4, per: "49%"},
+          {label: "九分屏", value: 9, per: "32%"}
+        ]
      },
-      videoUrl: '',
-      latlng: null,
-      disabledLevel: 0,
-      rules: {
-        name: [{required: true, message: "请填写 设备名称"}]
-      }
-    }
-  },
-
-  created() {
-    this.selected.areaId = this.user.info.areaId
-    this.disabledLevel = this.user.info.areaList.length - 1
-  },
-
-  methods: {
-    handleFullscreen() {
-      this.fullscreen = !this.fullscreen
-      this.$fullscreen(this.fullscreen)
+      currentSplitStyle() {
+        let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
+        return {width: per, height: per}
+      },
+      ...mapState(['user'])
    },
-    handleSelectMonitor(monitor) {
-      if (monitor.type !== '1') return

-      let {id} = monitor,
-          index = this.monitors.findIndex(e => e.id == id)
-      if (index > -1) {
-        this.$message.error('该监控视频已存在')
-      } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
-        this.$message.error("可分屏监控已满,请先取消其他的监控")
-      } else {
-        this.showMonitor(monitor)
+    data() {
+      return {
+        slider: true,
+        fullscreen: false,
+        splitScreen: 1,
+        monitors: [],
+        dialog: false,
+        locate: false,
+        isShowBar: true,
+        selected: {
+          areaId: ''
+        },
+        videoUrl: '',
+        latlng: null,
+        disabledLevel: 0,
+        rules: {
+          name: [{required: true, message: "请填写 设备名称"}]
+        }
      }
    },

-    onChange(e) {
-      if (e === 1 && this.monitors.length) {
-        this.monitors = [this.monitors[0]]
-      }
-
-      console.log(this.$refs.AiMonitor)
-
-      this.$refs.AiMonitor.forEach(e => {
-        e.reset()
-      })
+    created() {
+      this.selected.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length - 1
    },

-    removeMonitor(i) {
-      this.monitors.splice(i, 1)
-    },
+    methods: {
+      handleFullscreen() {
+        this.fullscreen = !this.fullscreen
+        this.$fullscreen(this.fullscreen)
+      },
+      handleSelectMonitor(monitor) {
+        if (monitor.type !== '1') return

-    showMonitor(monitor, refresh = false) {
-      let {id: deviceId} = monitor
-      deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
-        params: {deviceId}
-      }).then(res => {
-        if (res?.data) {
-          this.videoUrl = res.data
-          let data = {
-            url: res.data,
-            isShowPlayBtn: false
-          }
-          if (refresh) {
-            monitor.url = data.url
-          } else if (this.splitScreen == 1) {
-            this.monitors = [{...monitor, ...data}]
-          } else {
-            if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
-              this.monitors.push({...monitor, ...data})
+        let {id} = monitor,
+            index = this.monitors.findIndex(e => e.id == id)
+        if (index > -1) {
+          this.$message.error('该监控视频已存在')
+        } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
+          this.$message.error("可分屏监控已满,请先取消其他的监控")
+        } else {
+          this.showMonitor(monitor)
+        }
+      },
+
+      onChange(e) {
+        if (e === 1 && this.monitors.length) {
+          this.monitors = [this.monitors[0]]
+        }
+
+        this.$refs.AiMonitor.forEach(e => {
+          e.reset()
+        })
+      },
+
+      removeMonitor(i) {
+        this.monitors.splice(i, 1)
+      },
+
+      showMonitor(monitor, refresh = false) {
+        let {id: deviceId} = monitor
+        deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+          params: {deviceId}
+        }).then(res => {
+          if (res?.data) {
+            this.videoUrl = res.data
+            let data = {
+              url: res.data,
+              isShowPlayBtn: false
+            }
+            if (refresh) {
+              monitor.url = data.url
+            } else if (this.splitScreen == 1) {
+              this.monitors = [{...monitor, ...data}]
+            } else {
+              if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
+                this.monitors.push({...monitor, ...data})
+              }
            }
          }
-        }
-      })
-    },
-    renderTreeItem: function (h, {node, data}) {
-      let show = data.deviceStatus == 1 ? 'show' : ''
-      if (node.isLeaf) {
-        return (
+        })
+      },
+      renderTreeItem: function (h, {node, data}) {
+        let show = data.deviceStatus == 1 ? 'show' : ''
+        if (node.isLeaf) {
+          return (
+              <div class="flexRow">
+                <i class={['iconfont', 'iconshipinjiankong', show]}/>
+                <div>{node.label}</div>
+              </div>
+          )
+        } else return (
            <div class="flexRow">
-              <i class={['iconfont', 'iconshipinjiankong', show]}/>
              <div>{node.label}</div>
+              {data.id != 'no_area' ? <div class="sta">
+                    <p>{data.online || 0}</p>/{data.sum || 0}
+                  </div>
+                  : <div/>}
            </div>
        )
-      } else return (
-          <div class="flexRow">
-            <div>{node.label}</div>
-            {data.id != 'no_area' ? <div class="sta">
-                  <p>{data.online || 0}</p>/{data.sum || 0}
-                </div>
-                : <div/>}
-          </div>
-      )
-    },
-    handleSliderOption(e) {
-      console.log(e)
-      this.selected = {
-        command: e.type,
-        ...e.node
-      }
-      this.selected.areaId = e.node.areaId || this.user.info.areaId
-      if (e.type == "edit") {//修改名称
-        this.dialog = true
-      } else if (e.type == "area") {//绑定areaId
-        this.$refs.BindArea?.chooseArea()
-      } else if (e.type == "locate") {//地图标绘
-        this.latlng = e.node.lat && e.node.lng ? {
-          lat: e.node.lat,
-          lng: e.node.lng
-        } : ''
-        this.locate = true
-      }
-    },
-    handleSubmit(row) {
-      delete row.createTime
-      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
-        ...row
-      }).then(res => {
-        if (res?.code == 0) {
-          this.$message.success("提交成功!")
-          this.dialog = false
-          this.$refs.DeviceSlider?.getDevices()
+      },
+      handleSliderOption(e) {
+        this.selected = {
+          command: e.type,
+          ...e.node
        }
-      })
-    },
-    handleLocate(row, locate) {
-      if (locate) {
-        let {lat, lng} = locate.location
-        this.handleSubmit({...row, lat, lng}).then(() => {
-          this.locate = false
+        this.selected.areaId = e.node.areaId || this.user.info.areaId
+        if (e.type == "edit") {//修改名称
+          this.dialog = true
+        } else if (e.type == "area") {//绑定areaId
+          this.$refs.BindArea?.chooseArea()
+        } else if (e.type == "locate") {//地图标绘
+          this.latlng = e.node.lat && e.node.lng ? {
+            lat: e.node.lat,
+            lng: e.node.lng
+          } : ''
+          this.locate = true
+        }
+      },
+      handleSubmit(row) {
+        delete row.createTime
+        return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+          ...row
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("提交成功!")
+            this.dialog = false
+            this.$refs.DeviceSlider?.getDevices()
+          }
        })
+      },
+      handleLocate(row, locate) {
+        if (locate) {
+          let {lat, lng} = locate.location
+          this.handleSubmit({...row, lat, lng}).then(() => {
+            this.locate = false
+          })
+        }
      }
+    },
+    beforeDestroy() {
+      this.monitors = []
    }
-  },
-  beforeDestroy() {
-    this.monitors = []
  }
-}
 </script>

 <style lang="scss" scoped>
@@ -221,7 +223,6 @@ export default {
  height: 100%;

  .monitorPane {
-    // color: #fff;
    flex: 1;
    min-width: 0;
    padding: 20px 20px 20px 4px;
@@ -235,6 +236,31 @@ export default {
      gap: 8px;
      margin-bottom: 24px;

+      .headerBar-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 40px;
+        background: #2C2F3E;
+        border-radius: 4px;
+        color: #fff;
+        font-size: 12px;
+        cursor: pointer;
+
+        &.cancel-xt {
+          background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
+        }
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        span {
+          margin-left: 6px;
+        }
+      }
+
      .iconfont {
        color: #fff;
        height: 100%;
@@ -247,11 +273,40 @@ export default {
        color: #fff;
      }

+      .el-input--prefix .el-input__inner {
+        padding-left: 16px;
+      }
+
+      .el-input--suffix .el-input__inner {
+        padding-right: 16px;
+      }
+
+      .el-input__prefix {
+        top: 50%;
+        left: 10px;
+        height: auto;
+        transform: translateY(-50%);
+      }
+
+      .el-input {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        width: 100px;
+        height: 40px;
+        padding: 0 12px;
+        box-sizing: border-box;
+        background: #2C2F3E;
+      }
+
+      input {
+        text-align: center;
+      }
+
      .el-input__inner, .el-button {
        color: #fff;
-        max-width: 100px;
-        background: #2C2F3E;
        border: none;
+        background: transparent;

        &:hover {
          color: #26f;
--- a/packages/IntelligentSecurity/components/AiSlwVideo.vue
+++ b/packages/IntelligentSecurity/components/AiSlwVideo.vue
@@ -14,7 +14,7 @@
      style="width: 100%; height: 100%;"
      :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
    </iframe>
-    <div class="slw-bottom">
+    <div class="slw-bottom" v-if="isShowBar">
      <Timeline class="Timeline" @pause="isLiveing = false" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
      <div class="action-bar">
        <div class="left">
@@ -86,7 +86,7 @@
  import Timeline from './Timeline'

  export default {
-    props: ['src', 'name'],
+    props: ['src', 'name', 'isShowBar'],

    name: 'slwVideo',