视频监控

src/project/shandong10086/AppIntelligentSecurity/AppIntelligentSecurity.vue

@@ -51,7 +51,7 @@
     </div> -->
     <div class="list-content">
       <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
-        <img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1">
+        <img class="img" :src="item.indexUrl || coverImg" alt="" v-if="item.deviceStatus == 1">
         <img class="img" src="./img/offline.png" alt="" v-else>
         <p>{{ item.name }}</p>
         <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
@@ -74,7 +74,7 @@ export default {
         {nodeName: "首页"}
       ],
       monitors: [],
-
+      coverImg: require('./img/cover-img.png'),
       areaId: '',
       areaName: '',
       list: [],
@@ -108,7 +108,7 @@ export default {
       this.getMonitors(node.nodeId)
     },
     getList() {
-      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then(res => {
+      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId || this.user.areaId}`).then(res => {
         if (res?.data) {
           this.list = res.data.list
           this.count = res.data.count

src/project/shandong10086/AppIntelligentSecurity/SlwVideo.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="slw">
+    <iframe v-if="isShow" :id="id" style="width: 100%; height: 100%;" :src="`http://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['src'],
+
+    name: 'slwVideo',
+
+    data () {
+      return {
+        isShow: true,
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      window.addEventListener('message', e => {
+        if (e.data.type && e.data.name === 'fullscreen') {
+          this.requestFullScreen(document.getElementById(this.id))
+        }
+
+        if (!e.data.type && e.data.name === 'fullscreen') {
+          this.exitFullscreen()
+        }
+      }, false)
+    },
+
+    methods: {
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        }
+      },
+
+      requestFullScreen (element) {
+        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+        if (requestMethod) {
+          requestMethod.call(element);
+        } else if (typeof window.ActiveXObject !== 'undefined') {
+          var wscript = new ActiveXObject('WScript.Shell')
+          if (wscript !== null) {
+            wscript.SendKeys('{F11}')
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: none;
+    }
+  }
+</style>

src/project/shandong10086/AppIntelligentSecurity/monitorDetail.vue

@@ -1,23 +1,27 @@
 <template>
   <section class="monitorDetail">
     <div class="videoBox">
-      <iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
-              allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
+      <SlwVideo :src="videoUrl" :style="style"></SlwVideo>
     </div>
   </section>
 </template>
 
 <script>
-
+import SlwVideo from './SlwVideo'
 export default {
   name: "monitorDetail",
   data() {
     return {
       style: {},
+      videoUrl: '',
       monitor: {}
     }
   },
 
+  components: {
+    SlwVideo
+  },
+
   mounted() {
     this.$nextTick(() => {
       this.detectOrient()
@@ -31,7 +35,7 @@ export default {
         params: {deviceId}
       }).then(res => {
         if (res?.data) {
-          this.monitor = JSON.parse(res.data)
+          this.videoUrl = res.data
         }
       })
     },