监控管理绑定摄像头，摄像头固定554

src/views/storeManage/listenManage/module/bindCamera.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="bindVisible" title="绑定摄像头">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="bindVisible" title="绑定摄像头" @open="open">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
         <div class="head-container">
           <p>
             <span class="bule">选择设备</span>
-            <el-select v-model="devType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px">
+            <el-select v-model="devType" class="filter-item" style="width: 225px; height: 30px;margin:0 0 0 10px" no-data-text="暂无可绑定设备">
               <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </p>
@@ -18,18 +18,12 @@
             </el-select>
           </p>
         </div>
-        <el-table
-          ref="table"
-          :data="tableData"
-          style="width: 100%;"
-          height="calc(100vh - 556px)"
-          @row-click="clickRowHandler"
-        >
+        <el-table ref="table" :data="tableData" style="width: 100%;" height="calc(100vh - 556px)" @row-click="clickRowHandler">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column type="index" label="序号" width="80" align="center" />
-          <el-table-column prop="area" label="所属区域" min-width="150" align="center" />
-          <el-table-column prop="" label="设备类型" align="center" min-width="150" />
-          <el-table-column prop="" label="设备名称" align="center" min-width="150" />
+          <el-table-column prop="storeroomId.name" label="所属区域" min-width="150" align="center" />
+          <el-table-column prop="deviceTypeId.name" label="设备类型" align="center" min-width="150" />
+          <el-table-column prop="deviceName" label="设备名称" align="center" min-width="150" />
         </el-table>
         <!-- 分页器 -->
         <pagination />
@@ -43,7 +37,10 @@
 </template>
 
 <script>
-import data1 from './data1'
+// import data1 from './data1'
+// import { getAllDevice } from '@/api/storeManage/listenManage'
+import { getDeviceList } from '@/api/storeManage/deviceManage/device'
+
 import pagination from '@crud/Pagination'
 import CRUD, { presenter } from '@crud/crud'
 
@@ -62,10 +59,7 @@ export default {
       tableData: [],
       bindVisible: false,
       devType: 1,
-      devOptions: [
-        { value: 1, label: '库房名称-密集架1' },
-        { value: 2, label: '库房名称-密集架2' }
-      ],
+      devOptions: [],
       timeType: 1,
       timeOptions: [
         { value: 1, label: '事件触发前后10秒' },
@@ -74,42 +68,61 @@ export default {
       ]
     }
   },
-  created() {
-    this.tableData = data1.rows
-  },
+  // created() {
+  //   this.tableData = data1.rows
+  // },
   methods: {
     handleSave() {
       this.bindVisible = false
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row) // 单击选中
+    },
+    open() {
+      this.getDevOptions()
+      this.getAllCamera()
+    },
+    getDevOptions() {
+      Promise.all([getDeviceList({ deviceTypeId: 'DD656054BE3D1DF1E2F1FC' }), getDeviceList({ deviceTypeId: '65D1886B0F864291766421' })]).then((values) => {
+        const devices = values.reduce((previousValue, currentValue) => { return { content: previousValue.content.concat(currentValue.content) } }, { content: [] }).content
+        console.log(devices)
+        this.devOptions = devices.map(data => { return { value: data.id, label: data.storeroomId.name + '-' + data.deviceName } })
+        if (this.devOptions?.length > 0) {
+          this.devType = this.devOptions[0].value
+        }
+      })
+    },
+    getAllCamera() {
+      getDeviceList({ deviceTypeId: '7305DE3D273B0CAC079538' }).then((values) => {
+        this.tableData.splice(0, this.tableData.length, ...values.content)
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/lend-manage.scss";
 @import "~@/assets/styles/archives-manage.scss";
-.head-container{
+.head-container {
   display: flex;
   justify-content: space-between;
   padding-top: 0;
-  p{
+  p {
     flex: 1;
   }
 }
-.bule{
-  color: #339CFF;
+.bule {
+  color: #339cff;
 }
-::v-deep .el-dialog__body{
+::v-deep .el-dialog__body {
   padding: 30px 0;
 }
-::v-deep .el-dialog{
+::v-deep .el-dialog {
   width: 720px;
   // height: 520px;
 }
-::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
+::v-deep .el-dialog .el-dialog__header .el-dialog__close::before {
   position: absolute;
   right: -40px;
   bottom: -12px;

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

@@ -34,7 +34,7 @@ export default {
   },
   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'
+      return 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':554/' + this.camConfig.deviceInfo.videoRoute + '/1'
     },
     openVideoVisible: {
       get() {