zc

src/views/integratedManagement/laboratoryManagement/subject/index.vue

@@ -122,10 +122,15 @@
         <index-right-page ref="indexRightPage"></index-right-page>
       </div>
     </div>
+    <!--新增/编辑-->
     <add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
+    <!--物联设备-->
     <device-list v-if="pageType == 3" :subjectData="subjectData"></device-list>
+    <!--准入配置-->
     <admission-configuration v-if="pageType == 4" :subjectData="subjectData"></admission-configuration>
+    <!--关联配置-->
     <association-configuration v-if="pageType == 5" :subjectData="subjectData"></association-configuration>
+    <!--详情-->
     <info-page v-if="pageType == 6" :subjectData="subjectData"></info-page>
   </div>
 </template>
@@ -337,7 +342,7 @@
       },
       //选中实验室
       handleCurrentChange(val) {
-        this.$refs.indexRightPage.tableButtonClick(val);
+        this.$refs.indexRightPage.initialize(val);
       },
       /** 查询实验室列表 */
       getList() {
@@ -387,13 +392,6 @@
         padding: 0;
       }
     }
-    ::v-deep .el-input--medium .el-input__inner {
-      height: 26px;
-      line-height: 26px;
-      width: 55px;
-      text-align: center;
-      padding: 0 10px;
-    }
     ::v-deep .el-table__row{
       cursor: pointer;
     }
@@ -433,6 +431,13 @@
           padding: 20px;
           box-sizing: border-box;
           overflow: hidden;
+          ::v-deep .el-input--medium .el-input__inner {
+            height: 26px;
+            line-height: 26px;
+            width: 55px;
+            text-align: center;
+            padding: 0 10px;
+          }
         }
       }
     }

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/hardwarePage.vue

@@ -47,6 +47,22 @@
           {data1:'通风橱',data2:true,data3:'手动排风',data4:true},
           {data1:'智能通风扇',data2:true,data3:'手动排风',data4:false},
           {data1:'智能通风扇ABCDEFG',data2:false,data3:'定时排风',data4:true},
+          {data1:'设备名称',data2:true,data3:'定时排风',data4:true},
+          {data1:'通风橱',data2:false,data3:'手动排风',data4:false},
+          {data1:'智能通风扇',data2:false,data3:'手动排风',data4:true},
+          {data1:'智能通风扇ABCDEFG',data2:true,data3:'定时排风',data4:false},
+          {data1:'设备名称',data2:false,data3:'定时排风',data4:false},
+          {data1:'通风橱',data2:true,data3:'手动排风',data4:true},
+          {data1:'智能通风扇',data2:true,data3:'手动排风',data4:false},
+          {data1:'智能通风扇ABCDEFG',data2:false,data3:'定时排风',data4:true},
+          {data1:'设备名称',data2:true,data3:'定时排风',data4:true},
+          {data1:'通风橱',data2:false,data3:'手动排风',data4:false},
+          {data1:'智能通风扇',data2:false,data3:'手动排风',data4:true},
+          {data1:'智能通风扇ABCDEFG',data2:true,data3:'定时排风',data4:false},
+          {data1:'设备名称',data2:false,data3:'定时排风',data4:false},
+          {data1:'通风橱',data2:true,data3:'手动排风',data4:true},
+          {data1:'智能通风扇',data2:true,data3:'手动排风',data4:false},
+          {data1:'智能通风扇ABCDEFG',data2:false,data3:'定时排风',data4:true},
         ],
       }
     },

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/indexRightPage.vue

@@ -21,10 +21,15 @@
         </el-tooltip>
       </div>
       <div class="bottom-content-big-box">
+        <!--传感器-->
         <sensor-page v-if="rightButtonType == 1"></sensor-page>
+        <!--硬件开关-->
         <hardware-page v-if="rightButtonType == 2"></hardware-page>
+        <!--视频监控-->
         <video-page v-if="rightButtonType == 3"></video-page>
+        <!--声光报警-->
         <alarm-page v-if="rightButtonType == 4"></alarm-page>
+        <!--智能门禁-->
         <entrance-page v-if="rightButtonType == 5"></entrance-page>
       </div>
     </div>
@@ -65,7 +70,8 @@
 
     },
     methods:{
-      tableButtonClick(item){
+      //初始化
+      initialize(item){
         this.$set(this,'infoId',item.infoId);
         this.$set(this,'deptName',item.deptName);
         this.$set(this,'buildName',item.buildName);

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/sensorPage.vue

@@ -37,6 +37,30 @@
           {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
           {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
           {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOCVOCVOCVOCVOCVOCVOCVOCVOC',data4:'',data5:'mg/m³'},
+          {data1:false,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
+          {data1:true,data2:'',data3:'VOC',data4:'',data5:'mg/m³'},
         ],
       }
     },

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/videoPage.vue

@@ -17,6 +17,13 @@
     data(){
       return{
         videoList:[
+          {
+            id:1,        //(ID:非必传-默认随机生成)
+            width:378,    //(宽度:非必传-默认600)
+            height:213,   //(高度:非必传-默认338)
+            type:'flv',
+            url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
+          },
           {
             id:2,        //(ID:非必传-默认随机生成)
             width:378,    //(宽度:非必传-默认600)
@@ -31,6 +38,13 @@
             type:'flv',
             url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
           },
+          {
+            id:4,        //(ID:非必传-默认随机生成)
+            width:378,    //(宽度:非必传-默认600)
+            height:213,   //(高度:非必传-默认338)
+            type:'flv',
+            url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
+          },
         ],
       }
     },
@@ -51,6 +65,6 @@
 <style scoped lang="scss">
   .indexRightPage-videoPage{
     flex:1;
-    padding:0 15px 20px 15px;
+    padding:0 0 10px 15px;
   }
 </style>

src/views/integratedManagement/laboratoryManagement/subject/video.vue

@@ -1,184 +0,0 @@
-<!--实验室配置-视频-->
-<template>
-  <div class="subject-video">
-    <p class="max-title-p">视频查看</p>
-    <div class="max-video-for-box">
-      <div class="video-for-box" v-for="(item,index) in propsVideoList" :key="index">
-        <div class="video-for-title-box">
-          <img src="@/assets/ZDimages/integratedManagement/icon_24.png">
-          <p class="color_one">{{item.name}}</p>
-          <img src="@/assets/ZDimages/integratedManagement/icon_25.png" @click="videoFullScreen(index)">
-        </div>
-        <div class="video-min-box">
-          <video :id="item.divId" ref="videoRef" autoplay controls  muted width="498px" height="308px"></video>
-        </div>
-      </div>
-    </div>
-    <i class="right-top-button el-icon-close" @click="backPage"></i>
-  </div>
-</template>
-
-<script>
-  import flvjs from 'flv.js'
-  export default {
-    props:{
-      videoData:{},
-    },
-    name: 'subject-video',
-    data() {
-      return {
-        propsVideoList:[],
-        videoList:[],
-      }
-    },
-    created() {
-
-    },
-    mounted(){
-      this.propsVideoList = this.videoData;
-      let self = this;
-      setTimeout(function(){
-        self.videoFunction();
-      },500);
-    },
-    methods: {
-      //返回按钮
-      backPage(){
-        this.leftVideoFunctionOff();
-        this.$parent.pageSwitchOff();
-      },
-      //视频方法
-      videoFunction(){
-        let self = this;
-        self.videoList = [];
-        for(let i=0;i<self.propsVideoList.length;i++){
-          let obj = {
-            player :{},
-            flvPlayer:{}
-          };
-          obj.player = document.getElementById(self.propsVideoList[i].divId);
-          // if (flvjs.isSupported()) {
-          obj.flvPlayer = flvjs.createPlayer(
-            {
-              // isLive: true, //=> 是否为直播流
-              // hasAudio: false, //=> 是否开启声音
-              type: self.propsVideoList[i].videoType, //媒体类型 flv 或 mp4
-              url: self.propsVideoList[i].url //视频流地址
-            },
-            {
-              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
-              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
-              isLive: true,//是否是直播
-              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
-              autoCleanupSourceBuffer: true,//进行自动清理
-              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
-              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
-            }
-          );
-          self.videoList.push(obj);
-          // }
-        }
-
-        for(let i=0;i<self.videoList.length;i++){
-          self.videoList[i].flvPlayer.attachMediaElement(self.videoList[i].player);
-          self.videoList[i].flvPlayer.load(); //加载
-          self.videoList[i].flvPlayer.play(); //加载
-        }
-      },
-      //视屏全屏方法
-      videoFullScreen(index){
-        this.$refs.videoRef[index].webkitRequestFullScreen();
-      },
-      //数据中心视频关闭
-      leftVideoFunctionOff(){
-        let self = this;
-        for(let i=0;i<self.videoList.length;i++){
-          self.videoList[i].flvPlayer.pause();
-          self.videoList[i].flvPlayer.unload();
-          self.videoList[i].flvPlayer.detachMediaElement();
-          self.videoList[i].flvPlayer.destroy();
-          self.videoList[i].flvPlayer = null;
-        }
-        self.videoList = [];
-      },
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .subject-video{
-    flex:1;
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
-    margin:20px 20px;
-    position: relative;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    p{
-      margin:0;
-    }
-    .max-title-p{
-      margin: 0 20px;
-      padding:0 20px;
-      line-height: 80px;
-      font-size: 18px;
-      color: #0045AF;
-      border-bottom: 2px solid #E0E0E0;
-    }
-    .max-video-for-box{
-      flex:1;
-      padding:20px 0;
-      .video-for-box{
-        height:353px;
-        width:500px;
-        display: inline-block;
-        margin:0 0 20px 20px;
-        border:1px solid #0045af;
-        .video-for-title-box{
-          display: flex;
-          /*border-top:1px solid #0045af;*/
-          /*border-left:1px solid #0045af;*/
-          /*border-right:1px solid #0045af;*/
-          img:nth-child(1){
-            width:16px;
-            height:16px;
-            margin:13px;
-          }
-          p{
-            line-height:43px;
-            flex:1;
-            font-size:16px;
-          }
-          img:nth-child(3){
-            width:16px;
-            height:16px;
-            cursor:pointer;
-            margin:13px;
-          }
-        }
-        .video-min-box{
-          width:498px;
-          height:308px;
-          background: #0045af;
-        }
-      }
-    }
-    .right-top-button{
-      height:30px;
-      width:30px;
-      font-size:20px;
-      line-height:30px;
-      text-align: center;
-      color:#999;
-      border-radius:50%;
-      position: absolute;
-      top:10px;
-      right:10px;
-    }
-    .right-top-button:hover{
-      background: #999;
-      color:#fff;
-      cursor:pointer;
-    }
-  }
-</style>