zc

.env.development

@@ -24,12 +24,15 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 
 # ####################内网接口配置####################
 
+# 西农现场
+VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
+
 # 43内网
 # VUE_APP_BASE_LOCAL_API = '192.168.1.43/labSystem'
 # 43内网V3地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.43/api'
 # 1.8内网V3地址
-VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
+# VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
 # 88内网
 # VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
 # 柴
@@ -45,9 +48,12 @@ VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
 
 # ####################外网接口配置####################
 
+# 西农现场
+VUE_APP_BASE_API = '172.16.0.65/api'
+
 # 实验室安全管理系统/开发环境
 # 1.8内网V3地址
-VUE_APP_BASE_API = '192.168.1.8/api'
+# VUE_APP_BASE_API = '192.168.1.8/api'
 # 43内网V3地址
 # VUE_APP_BASE_API = '192.168.1.43/api'
 # 林总

src/views/safetyOverview/pageComponent/monitoringComponents.vue

@@ -2,32 +2,80 @@
 <template>
   <div class="monitoringComponents">
     <p class="monitoring-title-p">重点实验室实时监控</p>
-    <div class="monitoring-for-max-big-box"></div>
+    <div class="monitoring-for-max-big-box">
+      <H5PlayerVideo style="margin:10px 0 0 12px;"
+                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+      <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
+    </div>
     <div class="monitoring-bottom-button-box">
       <img class="left-button-img" src="@/assets/ZDimages/left_button.png">
       <div class="center-button-box">
-
       </div>
       <img class="right-button-img" src="@/assets/ZDimages/right_button.png">
     </div>
   </div>
 </template>
 <script>
+  import { iotCameraFindByCondition } from "@/api/index";
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   export default {
     name: 'monitoringComponents',
+    components: {
+      H5PlayerVideo
+    },
     data () {
       return {
-
+        width:450,
+        height:200,
+        videoType:false,
+        videoList:[],
+        videoTotal:0,
+        videoQueryParams:{
+          page:1,
+          pageSize:4,
+        },
       }
     },
     created () {
-
+      this.videoInitialize();
     },
     mounted () {
 
     },
     methods: {
-
+      videoInitialize() {
+        let self = this;
+        self.$set(self, 'videoType', false);
+        self.$set(self, 'videoList', []);
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室
+        let obj = {
+          page:this.videoQueryParams.page,
+          pageSize:this.videoQueryParams.pageSize,
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:['1816062550345723905','1815299331689222145'],
+        };
+        iotCameraFindByCondition(obj).then(response => {
+          let list = [];
+          for(let i=0;i<response.data.records.length;i++){
+            list.push(
+              {
+                width: this.width, //(宽度:非必传-默认600)
+                height: this.height, //(高度:非必传-默认338)
+                url: response.data.records[i].streamUrl,
+              }
+            )
+          }
+          this.$set(this,'videoList',list)
+          this.$set(this,'videoTotal',response.data.total);
+          this.$nextTick(()=>{
+            setTimeout(function(){
+              self.$set(self, 'videoType', true);
+            },1000);
+          })
+        });
+      },
     },
   }
 </script>
@@ -49,6 +97,12 @@
     .monitoring-for-max-big-box{
       margin:18px 0 15px;
       height:420px;
+      overflow: hidden;
+      .null-img{
+        display: block;
+        width:230px;
+        margin:100px auto 0;
+      }
     }
     .monitoring-bottom-button-box{
       height:26px;