迁移了 同屏展示监控与喇叭

.env.production

@@ -23,26 +23,8 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 
 # ####################外网接口配置####################
 
-# 安科院
-VUE_APP_BASE_API = '192.168.166.11/api'
-
-# 苏州城市学院
-# VUE_APP_BASE_API = 'lab.zjznai.com/szcsxylabSystem'
-
-# 贵州大学
-# VUE_APP_BASE_API = 'lab.zjznai.com/gzdxlabSystem'
-
-# 矿大三期
-# VUE_APP_BASE_API = 'sysaqjc.cumt.edu.cn/api'
-
-# 展会
-# VUE_APP_BASE_API = 'lab.zjznai.com/zhlabSystem'
-
-# 西农
-# VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
-
-# 山西农大
-# VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
+#  贵州大学外网地址
+VUE_APP_BASE_API = 'lab.zjznai.com/gzdxlabSystem'
 
 # 1.8外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
@@ -50,34 +32,10 @@ VUE_APP_BASE_API = '192.168.166.11/api'
 # 1.88外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/appTest'
 
-# 43外网地址
-# VUE_APP_BASE_API = 'lab.zjznai.com/labapp'
-
-# 开发人员地址
-# VUE_APP_BASE_API = '192.168.1.24:8080'
-
 # ####################内网接口配置####################
 
-# 安科院
-VUE_APP_BASE_LOCAL_API = '192.168.166.11/api'
-
-# 苏州城市学院
-# VUE_APP_BASE_LOCAL_API = '192.168.8.2/api'
-
-# 贵州大学
-# VUE_APP_BASE_LOCAL_API = '192.168.8.2/api'
-
-# 矿大三期
-# VUE_APP_BASE_LOCAL_API = '10.103.75.81/api'
-
-# 展会
-# 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 = 'lasfl.sxau.edu.cn/api'
+# 贵州大学内网地址
+VUE_APP_BASE_LOCAL_API = '192.168.8.2/api'
 
 # 1.8内网地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
@@ -85,13 +43,6 @@ VUE_APP_BASE_LOCAL_API = '192.168.166.11/api'
 # 1.88内网地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
 
-# 43内网地址
-# VUE_APP_BASE_LOCAL_API = '192.168.1.43/api'
-
-# 开发人员地址
-# VUE_APP_BASE_LOCAL_API = '192.168.1.24:8080'
-
-
 # ####################认证平台版本退出接口####################
 
 VUE_APP_OUT_URL = 'https://labcontrol.nwafu.edu.cn/api/auth/cas/logout/applet'

src/views/home.vue

@@ -5,7 +5,8 @@
       <videoBroadcastHls v-if="pageType == 'videoBroadcastHls'"></videoBroadcastHls>
       <miniProgramPlayback v-if="pageType == 'miniProgramPlayback'"></miniProgramPlayback>
       <miniProgramVideo v-if="pageType == 'miniProgramVideo'"></miniProgramVideo>
-      <miniProgramVideoMpegts v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegts>
+      <!--<miniProgramVideoMpegts v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegts>-->
+      <miniProgramVideoMpegtsHorn v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegtsHorn>
       <miniProgramVideoHls v-if="pageType == 'miniProgramVideoHls'"></miniProgramVideoHls>
       <chemicalsInstructionsVideo v-if="pageType == 'chemicalsInstructionsVideo'"></chemicalsInstructionsVideo>
       <alarmPage v-if="pageType == 'alarm'"></alarmPage>
@@ -17,6 +18,7 @@
     import miniProgramPlayback from '@/views/miniProgramPlayback/index.vue';
     import miniProgramVideo from '@/views/miniProgramVideo/index.vue';
     import miniProgramVideoMpegts from '@/views/miniProgramVideoMpegts/index.vue';
+    import miniProgramVideoMpegtsHorn from '@/views/miniProgramVideoMpegts/mpegtsHorn.vue';
     import miniProgramVideoHls from '@/views/miniProgramVideoHls/index.vue';
     import chemicalsInstructionsVideo from '@/views/chemicalsInstructionsVideo/index.vue';
     import alarmPage from '@/views/alarmPage/index.vue';
@@ -32,6 +34,7 @@
           miniProgramPlayback,
           miniProgramVideo,
           miniProgramVideoMpegts,
+          miniProgramVideoMpegtsHorn,
           miniProgramVideoHls,
           chemicalsInstructionsVideo,
           alarmPage,
@@ -48,6 +51,7 @@
         mounted() {
           let text = decodeURIComponent(window.location.href);
           text = text.split("?")[1]
+          console.log('text',text)
           if(text.indexOf('touken') != -1){
             Promise.all([
               //获取开发配置
@@ -59,7 +63,7 @@
               }else if(text.indexOf('videoBroadcastHls') != -1){
                 this.$set(this,'pageType','videoBroadcastHls');
               }else if(text.indexOf('mpegts') != -1){
-                this.$set(this,'pageType','miniProgramVideoHls');
+                this.$set(this,'pageType','miniProgramVideoMpegts');
               }else{
                 this.$set(this,'pageType','miniProgramVideo');
               }

src/views/miniProgramVideoMpegts/mpegtsHorn.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="mpegtsHorn">
+    <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>
+    <div class="top-video-box">
+      <p class="null-text" v-if="nullType">{{nullType}}</p>
+      <div class="video-max-box" v-if="buttonType&&!fullVideoType">
+        <mpegts-video class="video-box" :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      </div>
+    </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 { iotCameraFindByCondition,iotAppSpeakerFindHorn } from "@/api/index";
+  import voiceBroadcast from '@/components/voiceBroadcast/voiceBroadcast.vue';
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+  export default {
+    name: 'mpegtsHorn',
+    components: {
+      mpegtsVideo,
+      voiceBroadcast
+    },
+    data () {
+      return {
+        checkType:1,
+        buttonType: false,
+        width: null,
+        height: null,
+        videoList: [],
+        nullType:false,
+        //报警视频数据
+        videoProps:null,
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+        //喇叭数据
+        trumpetList:[],
+        voiceType:false,
+        //顶部按钮状态
+        toButtonType:0,
+      }
+    },
+    created(){
+      const ratio = 0.5625;
+      const winWidth = window.innerWidth;
+      let width = parseInt(winWidth - 20);
+      let height = parseInt(this.accMul(width, ratio));
+      this.$set(this, 'width', width);
+      this.$set(this, 'height', height)
+    },
+    mounted(){
+      this.getUrl();
+    },
+    methods:{
+      voiceButton(){
+        this.$set(this,'voiceType',!this.voiceType);
+      },
+      checkButton(type){
+        if(this.checkType != type){
+          // 切换类型前先清理之前的HLS流
+          this.$set(this,'checkType',type);
+          this.$set(this, 'nullType', false);
+          this.$set(this,'videoList',[]);
+          this.$set(this, 'buttonType', false);
+          this.getUrl();
+        }
+      },
+      fullScreenWindowSwitch(data){
+        let self = this;
+        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
+          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
+            if(data.type){
+              self.$refs.mpegtsRef[i].stopVideo();
+            }else{
+              self.$refs.mpegtsRef[i].playVideo();
+            }
+          }
+        }
+      },
+      getUrl() {
+        let text = decodeURIComponent(window.location.href);
+        if(text.indexOf('touken') != -1){
+          this.subVideo(text);
+        }else{
+          this.$set(this,'nullType','参数异常,请联系管理员');
+        }
+      },
+      subVideo(text){
+        let self = this;
+        if(text.indexOf('touken') == -1){
+          this.$set(this,'nullType','touken参数异常,请联系管理员');
+          return
+        }
+        if(text.indexOf('source') == -1){
+          this.$set(this,'nullType','source参数异常,请联系管理员');
+          return
+        }
+        if(text.indexOf('type') == -1){
+          this.$set(this,'nullType','type参数异常,请联系管理员');
+          return
+        }
+        let urlList = text.split("?")[1].split("&");
+        let urlData = {};
+        urlList.forEach((item) => {
+          urlData[item.split("=")[0]] = item.split("=")[1];
+        });
+        localStorage.setItem('touken',urlData.touken)
+        // type 1.楼栋 2.楼层 3.楼道 4.实验室 5.楼道+实验室
+        let obj = {
+          page:'1',
+          pageSize:'10',
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          videoStreamType:'flv',
+        };
+        if(urlData.type == 1){
+          obj.buildId = urlData.buildId;
+        }else  if(urlData.type == 2){
+          obj.floorId = urlData.floorId;
+        }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){
+            obj.passageway = urlData.floorId;
+          }
+        }
+        if(urlData.source == '2'){
+          obj.source = 2;
+        }else if (urlData.source == '5'){
+          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','视频异常,请联系管理员');
+            }else{
+              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,
+                    cameraIndexCode: response.data.records[i].deviceNo,
+                  }
+                )
+              }
+              this.$set(this,'videoList',list)
+              this.$nextTick(()=>{
+                setTimeout(function(){
+                  self.$set(self, 'buttonType', true);
+                },1000);
+              })
+            }
+          });
+        }else{
+          this.$set(this,'nullType','参数异常,请联系管理员');
+        }
+      },
+      //乘法
+      accMul(arg1, arg2) {
+        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
+        try {
+          m += s1.split(".")[1].length
+        } catch (e) {
+        }
+        try {
+          m += s2.split(".")[1].length
+        } catch (e) {
+        }
+        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .mpegtsHorn{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .top-button-box{
+      display: flex;
+      border-bottom:1px solid #999;
+      height:80px;
+      p{
+        flex:1;
+        text-align: center;
+        font-size:36px;
+        line-height:80px;
+        height:80px;
+        color:#999;
+      }
+      .checkP{
+        background-color: #0183FA;
+        color:#fff;
+      }
+    }
+    .top-video-box{
+      flex:1;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      .null-text{
+        text-align: center;
+        font-size:16px;
+        line-height:80px;
+      }
+      .video-max-box {
+        padding-top:10px;
+        overflow: hidden;
+      }
+      .video-box {
+        margin: 0 auto 10px;
+        display: inline-block
+      }
+    }
+    .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;
+      }
+    }
+  }
+</style>