zc

src/views/home.vue

@@ -6,7 +6,7 @@
       <miniProgramPlayback v-if="pageType == 'miniProgramPlayback'"></miniProgramPlayback>
       <miniProgramVideo v-if="pageType == 'miniProgramVideo'"></miniProgramVideo>
       <!--<miniProgramVideoMpegts v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegts>-->
-      <miniProgramVideoMpegtsHorn v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegtsHorn>
+      <!--<miniProgramVideoMpegtsHorn v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegtsHorn>-->
       <miniProgramVideoHls v-if="pageType == 'miniProgramVideoHls'"></miniProgramVideoHls>
       <chemicalsInstructionsVideo v-if="pageType == 'chemicalsInstructionsVideo'"></chemicalsInstructionsVideo>
       <alarmPage v-if="pageType == 'alarm'"></alarmPage>
@@ -63,7 +63,7 @@
               }else if(text.indexOf('videoBroadcastHls') != -1){
                 this.$set(this,'pageType','videoBroadcastHls');
               }else if(text.indexOf('mpegts') != -1){
-                this.$set(this,'pageType','miniProgramVideoMpegts');
+                this.$set(this,'pageType','miniProgramVideoHls');
               }else{
                 this.$set(this,'pageType','miniProgramVideo');
               }

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,11 +313,24 @@
       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