3D库房摄像头录像

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -194,7 +194,6 @@ export default {
     getIframeLoading(value) {
       // console.log(`我是iframe传过来的参数：${value}`)
       if (value === 'false') {
-        console.log(this.allDisplayConfigData)
         this.allDisplayConfigData.forEach(element => {
           if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
             this.handleHide(element.divPosition)
@@ -250,7 +249,6 @@ export default {
       if (this.allDeviceIds.length > 0) {
         thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
           this.oaoMessage.splice(0, this.oaoMessage.length)
-          console.log(this.displayConfigData)
           this.displayConfigData.forEach(element => {
             if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
               // 获取页面div显示的数据

src/views/storeManage/warehouse3D/collateRoom/index.vue

@@ -69,7 +69,6 @@ export default {
     getIframeLoading(value) {
       // console.log(`我是iframe传过来的参数：${value}`)
       if (value === 'false') {
-        console.log(this.allDisplayConfigData)
         this.allDisplayConfigData.forEach(element => {
           if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
             this.handleHide(element.divPosition)
@@ -99,7 +98,6 @@ export default {
       if (this.allDeviceIds.length > 0) {
         thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
           this.oaoMessage.splice(0, this.oaoMessage.length)
-          console.log(this.displayConfigData)
           this.displayConfigData.forEach(element => {
             if (element.divPosition.includes('OAO') && element.deviceSpecParams[0]) {
               // 获取3D弹窗显示的数据
@@ -140,7 +138,6 @@ export default {
     //         this.$refs.camera.videoTitle = _this.deviceId
     //       })
     //     }
-    //     console.log(_this.deviceId)
     //   }
     // },
   }

src/views/storeManage/warehouse3D/index.vue

@@ -91,19 +91,16 @@ export default {
         }
         // 摄像头
         if (data.includes('CAM')) {
-          _this.$nextTick(() => {
           const camConfig = this.camConfigData.find((x) => { return x.divPosition === data })
-            console.log(1, camConfig)
           if (camConfig && camConfig.isDisplay && camConfig.bindState) {
-              console.log(2, camConfig)
-              // ToDo....
+          //   console.log(2, camConfig)
+          //   // ToDo....
             this.$refs.camera.openVideoVisible = true
             // 后期看接口调试变化
             this.$refs.camera.camConfig = camConfig
             this.$refs.camera.videoTitle = data
             this.$refs.camera.play()
           }
-          })
         }
       }
     },

src/views/storeManage/warehouse3D/module/video.vue

@@ -1,16 +1,18 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :visible="openVideoVisible" :before-close="handleClose" :title="videoTitle">
+  <el-dialog :close-on-click-modal="false" :visible="openVideoVisible" :before-close="handleClose" :title="videoTitle" @opened="opened">
     <span class="dialog-right-top" />
     <span class="dialog-left-bottom" />
     <div class="setting-dialog">
       <!-- :src="videoSrc" controls-->
-      <canvas id="canvas" width="100%" />
+      <div ref="canvas-wrap" />
     </div>
   </el-dialog>
 </template>
 
 <script>
 import JSMpeg from '@/components/jsmpeg'
+import axios from 'axios'
+import qs from 'qs'
 export default {
   data() {
     return {
@@ -20,30 +22,60 @@ export default {
       player: null
     }
   },
+  computed: {
+    rtspUrl: function() {
+      return 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':' + this.camConfig.deviceInfo.devicePort + '/' + this.camConfig.deviceInfo.videoRoute + '/1'
+    }
+  },
   methods: {
     handleClose(done) {
       this.openVideoVisible = false
       // this.myVideo = document.getElementById('canvas')
       // this.myVideo.pause()
       // $.post('http://127.0.0.1:3000/cameras/close/', { rtspUrl: $('#rtsp').val() }, function(result) {
-      this.player.destroy()
+      const data = { rtspUrl: this.rtspUrl }
+      axios.post('http://127.0.0.1:3000/cameras/close/', qs.stringify(data),
+        {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          }
+        }
+      ).then(res => {
+        this.player?.stop()
+        this.player?.destroy()
+        this.player = null
         // })
         done()
+      })
+    },
+    opened() {
+      // this.play()
     },
     play() {
-      // const rtspUrl = 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':' + this.camConfig.deviceInfo.devicePort + '/' + this.camConfig.deviceInfo.videoRoute + '/1'
-      // const data = { rtspUrl: rtspUrl, size: '1024*768' }
-      const url = 'ws://127.0.0.1:3151'
-      var canvas = document.getElementById('canvas')
+      const data = { rtspUrl: this.rtspUrl, size: '1024*768' }
+      axios.post('http://127.0.0.1:3000/cameras/', qs.stringify(data),
+        {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          }
+        }
+      ).then(res => {
+        // res.data.port
+        const url = 'ws://127.0.0.1:' + res.data.port
+        // var canvas = document.getElementById('canvas')
         const opt = {
-        canvas: canvas,
+          contianer: this.$refs['canvas-wrap'],
           poster: '0.jpg'
         }
         this.player = new JSMpeg.Player(url, opt)
+      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-dialog {
+  width: auto;
+}
 </style>

src/views/storeManage/warehouse3D/readRoom/index.vue

@@ -60,13 +60,11 @@ export default {
   methods: {
     // 加载完成状态传值
     getIframeLoading(value) {
-      // console.log(`我是iframe传过来的参数：${value}`)
       // if (value === 'false') {
       //   this.handleHide(element.divPosition)
       // }
       // this.deviceState()
       if (value === 'false') {
-        console.log(this.allDisplayConfigData)
         this.allDisplayConfigData.forEach(element => {
           if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
             this.handleHide(element.divPosition)
@@ -95,7 +93,6 @@ export default {
       if (this.allDeviceIds.length > 0) {
         thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
           this.oaoMessage.splice(0, this.oaoMessage.length)
-          console.log(this.displayConfigData)
           this.displayConfigData.forEach(element => {
             if (element.divPosition.includes('OAO') && element.deviceSpecParams[0]) {
               // 获取3D弹窗显示的数据

src/views/storeManage/warehouse3DConfig/index.vue

@@ -132,7 +132,6 @@ export default {
       this.$nextTick(function() {
         // this.form.deviceSpecParams
         const selectedParams = this.paramsOptions.filter((item) => { return this.form.deviceSpecParams === item.value || (Array.isArray(this.form.deviceSpecParams) && this.form.deviceSpecParams.includes(item.value)) })
-        console.log(this.form.deviceSpecParams)
         if (selectedParams.length > 0) {
           this.$refs.paramsSelect.selectedLabel = selectedParams.map((item) => { return item.label }).join(',')
         } else {
@@ -261,7 +260,6 @@ export default {
       if (this.form.deviceInfo.id) {
         getParams({ deviceInfoId: this.form.deviceInfo.id }).then((data) => {
           this.paramsOptions = data.map(data => { return { value: data.id, label: data.paramName, info: data.paramId, self: data } })
-          console.log(3333, this.paramsOptions)
         })
       }
     },