zc

.env.development

@@ -24,7 +24,7 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 # ####################外网接口配置####################
 
 # 苏州城市学院
-VUE_APP_BASE_API = 'lab.zjznai.com/szcsxylabSystem'
+# VUE_APP_BASE_API = 'lab.zjznai.com/szcsxylabSystem'
 
 # 贵州大学
 # VUE_APP_BASE_API = 'lab.zjznai.com/gzdxlabSystem'
@@ -36,7 +36,7 @@ VUE_APP_BASE_API = 'lab.zjznai.com/szcsxylabSystem'
 # VUE_APP_BASE_API = 'lab.zjznai.com/zhlabSystem'
 
 # 西农
-# VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
+VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
 
 # 山西农大
 # VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
@@ -58,7 +58,7 @@ VUE_APP_BASE_API = 'lab.zjznai.com/szcsxylabSystem'
 
 # 苏州城市学院
 # VUE_APP_BASE_LOCAL_API = '192.168.8.2/api'
-VUE_APP_BASE_LOCAL_API = 'lab.zjznai.com/szcsxylabSystem'
+# VUE_APP_BASE_LOCAL_API = 'lab.zjznai.com/szcsxylabSystem'
 
 # 贵州大学
 # VUE_APP_BASE_LOCAL_API = '192.168.8.2/api'
@@ -70,7 +70,7 @@ VUE_APP_BASE_LOCAL_API = 'lab.zjznai.com/szcsxylabSystem'
 # VUE_APP_BASE_LOCAL_API = '192.168.1.12/api'
 
 # 西农
-# VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
+VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
 
 # 山西农大
 # VUE_APP_BASE_LOCAL_API = 'lasfl.sxau.edu.cn/api'

src/views/miniProgramVideo/index.vue

@@ -1,11 +1,19 @@
 <!-- 小程序视频监控 -->
 <template>
   <div class="miniProgramVideo">
+    <div class="top-button-box">
+      <p :class="checkType == 1?'checkP':''" @click="checkButton(1)">实验室监控</p>
+      <p :class="checkType == 2?'checkP':''" @click="checkButton(2)" v-if="toButtonType == 5">楼道监控</p>
+    </div>
     <p class="null-text" v-if="nullType">{{nullType}}</p>
     <div class="video-max-box" v-if="buttonType&&!fullVideoType">
       <H5PlayerVideo class="video-box" v-for="(item,index) in videoList" :key="index"
                      :videoProps="item" :style="'width:'+item.width+'px;height:'+item.height+'px;'"></H5PlayerVideo>
     </div>
+    <div class="bottom-broadcast-box">
+      <voiceBroadcast :trumpetList="trumpetList" v-show="voiceType"></voiceBroadcast>
+      <p class="right-button-p" @click="voiceButton()">语音广播</p>
+    </div>
     <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
@@ -13,14 +21,17 @@
   import H5PlayerVideo from '@/components/H5PlayerVideo.vue';
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo.vue';
   import { iotCameraFindByCondition,iotCameraGetPlaybackURLs } from "@/api/index";
+  import voiceBroadcast from '@/components/voiceBroadcast/voiceBroadcast.vue';
   export default {
     name: 'index',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      voiceBroadcast
     },
     data () {
       return {
+        checkType:1,
         buttonType: false,
         width: null,
         height: null,
@@ -31,6 +42,11 @@
         //全屏视频参数
         fullVideoProps:{},
         fullVideoType:false,
+        //喇叭数据
+        trumpetList:[],
+        voiceType:false,
+        //顶部按钮状态
+        toButtonType:0,
       }
     },
     created () {
@@ -45,6 +61,18 @@
       this.getUrl();
     },
     methods: {
+      voiceButton(){
+        this.$set(this,'voiceType',!this.voiceType);
+      },
+      checkButton(type){
+        if(this.checkType != type){
+          this.$set(this,'checkType',type);
+          this.$set(this, 'nullType', false);
+          this.$set(this,'videoList',[]);
+          this.$set(this, 'buttonType', false);
+          this.getUrl();
+        }
+      },
       //全屏开启-关闭轮播
       stopTime(cameraIndexCode){
         this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
@@ -97,8 +125,10 @@
         }else  if(urlData.type == 3){
           obj.passageway = urlData.floorId;
         }else  if(urlData.type == 4){
+          this.$set(this,'toButtonType','4');
           obj.subIds = [urlData.subId];
         }else if(urlData.type == 5){
+          this.$set(this,'toButtonType','5');
           obj.passageway = urlData.floorId;
           obj.subIds = [urlData.subId];
         }
@@ -157,17 +187,46 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    .top-button-box{
+      display: flex;
+      border-bottom:1px solid #999;
+      p{
+        flex:1;
+        text-align: center;
+        font-size:36px;
+        line-height:80px;
+        height:80px;
+        color:#999;
+      }
+      .checkP{
+        background-color: #0183FA;
+        color:#fff;
+      }
+    }
     .null-text{
       text-align: center;
       font-size:16px;
       line-height:80px;
     }
     .video-max-box {
+      flex:1;
       padding-top:10px;
       overflow-y: scroll;
       overflow-x: hidden;
     }
-
+    .bottom-broadcast-box{
+      height:100px;
+      .right-button-p{
+        color:#fff;
+        background-color: #0183fa;
+        flex:1;
+        height:80px;
+        line-height:82px;
+        border-radius:6px;
+        font-size:30px;
+        margin:10px 10px 10px 10px;
+      }
+    }
     .video-box {
       margin: 0 auto 10px;
     }

src/views/miniProgramVideoHls/index.vue

@@ -2,23 +2,31 @@
   <div class="miniProgramVideoHls">
     <div class="top-button-box">
       <p :class="checkType == 1?'checkP':''" @click="checkButton(1)">实验室监控</p>
-      <p :class="checkType == 2?'checkP':''" @click="checkButton(2)">楼道监控</p>
+      <p :class="checkType == 2?'checkP':''" @click="checkButton(2)" v-if="toButtonType == 5">楼道监控</p>
     </div>
     <p class="null-text" v-if="nullType">{{nullType}}</p>
     <div class="video-max-box" v-if="buttonType&&!fullVideoType">
-      <video class="video-box" id="video" controls autoplay muted
+      <video class="video-box" id="video" controls autoplay muted playsinline
              v-for="(item,index) in videoList" :key="index"
              :width="item.width" :height="item.height"
              :id="item.cameraIndexCode" :ref="item.cameraIndexCode"
       ></video>
     </div>
+    <div class="bottom-broadcast-box">
+      <voiceBroadcast :trumpetList="trumpetList" v-show="voiceType"></voiceBroadcast>
+      <p class="right-button-p" @click="voiceButton()">语音广播</p>
+    </div>
   </div>
 </template>
 <script>
   import Hls from 'hls.js'
-  import { iotCameraFindByCondition } from "@/api/index";
+  import { iotCameraFindByCondition,iotAppSpeakerFindHorn } from "@/api/index";
+  import voiceBroadcast from '@/components/voiceBroadcast/voiceBroadcast.vue';
   export default {
     name: 'index',
+    components: {
+      voiceBroadcast
+    },
     data () {
       return {
         checkType:1,
@@ -33,7 +41,12 @@
         fullVideoProps:{},
         fullVideoType:false,
         hlsPlayers: {}, // 存储每个视频的Hls实例
-        errors: {}      // 存储每个视频的错误状态
+        errors: {},      // 存储每个视频的错误状态
+        //喇叭数据
+        trumpetList:[],
+        voiceType:false,
+        //顶部按钮状态
+        toButtonType:0,
       }
     },
     created(){
@@ -52,6 +65,9 @@
       this.destroyAllHlsPlayers();
     },
     methods:{
+      voiceButton(){
+        this.$set(this,'voiceType',!this.voiceType);
+      },
       checkButton(type){
         if(this.checkType != type){
           // 切换类型前先清理之前的HLS流
@@ -107,6 +123,11 @@
         }else  if(urlData.type == 3){
           obj.passageway = urlData.floorId;
         }else  if(urlData.type == 4 || urlData.type == 5){
+          if(urlData.type == 4){
+            this.$set(this,'toButtonType','4');
+          }else if(urlData.type == 5){
+            this.$set(this,'toButtonType','5');
+          }
           if(this.checkType == 1){
             obj.subIds = [urlData.subId];
           }else if(this.checkType == 2){
@@ -119,6 +140,12 @@
           obj.source = 5;
         }
         if(urlData.type){
+          iotAppSpeakerFindHorn({subId:urlData.subId,floorId:urlData.floorId}).then(response => {
+            for (let i = 0; i < response.data.length; i++) {
+              response.data[i].type = false;
+            }
+            this.$set(this, 'trumpetList', response.data)
+          })
           iotCameraFindByCondition(obj).then(response => {
             if (!response.data.records[0]){
               this.$set(this,'nullType','该实验室未配置摄像头');
@@ -286,52 +313,65 @@
       line-height:80px;
     }
     .video-max-box {
+      flex:1;
       padding-top:10px;
       overflow-y: scroll;
       overflow-x: hidden;
     }
-
+    .bottom-broadcast-box{
+      height:100px;
+      .right-button-p{
+        color:#fff;
+        background-color: #0183fa;
+        flex:1;
+        height:80px;
+        line-height:82px;
+        border-radius:6px;
+        font-size:30px;
+        margin:10px 10px 10px 10px;
+      }
+    }
     .video-box {
       margin: 0 auto 10px;
       display: inline-block
     }
     /*video::-webkit-media-controls-play-button {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*video::-webkit-media-controls-current-time-display {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*video::-webkit-media-controls-time-remaining-display {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*video::-webkit-media-controls-timeline {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*video::-webkit-media-controls-mute-button {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*video::-webkit-media-controls-volume-slider {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*!*video::-webkit-media-controls-fullscreen-button {*!*/
-      /*!*display: none !important;*!*/
+    /*!*display: none !important;*!*/
     /*!*}*!*/
     /*video::-webkit-media-controls-toggle-closed-captions-button {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
     /*!* 隐藏画中画按钮（非标准） *!*/
     /*video::-webkit-media-controls-picture-in-picture-button {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
 
     /*!* 隐藏下载按钮（部分浏览器） *!*/
     /*video::-internal-media-controls-download-button {*/
-      /*display: none !important;*/
+    /*display: none !important;*/
     /*}*/
 
     /*!* 移动端额外控制 *!*/
     /*video {*/
-      /*-webkit-tap-highlight-color: transparent;*/
+    /*-webkit-tap-highlight-color: transparent;*/
     /*}*/
   }
 </style>