音频报警修改

public/js/xyDemoCommon.js

@@ -134,7 +134,6 @@ function onForceLoginClick() {
 function mylog(msg) {
   msg = getNowFormatDate() + " : " + msg + "\r\n";
   console.log("msg ====>", msg);
-  $("output").value = msg + $("output").value;
 }
 
 function getNowFormatDate() {

src/App.vue

@@ -47,6 +47,8 @@ export default {
     window.addEventListener('beforeunload', e => this.closeWebSocket(e));
   },
   mounted() { 
+    //  // 添加socket通知监听
+    // window.addEventListener('onmessageWS', this.getSocketData);
     // this.initWebSocket('pc');
   },
   beforeDestroy() {
@@ -54,8 +56,8 @@ export default {
   methods: {
     initWebSocket(supplierId) {
       // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-      // let wsUrl = `ws://192.168.3.32:81/websocket/${supplierId}`;
-      let wsUrl = `ws://171.16.8.51:81/websocket/${supplierId}`//
+      let wsUrl = `ws://192.168.3.32:81/websocket/${supplierId}`;
+      // let wsUrl = `ws://171.16.8.51:81/websocket/${supplierId}`//
       this.websocket = new WebSocket(wsUrl);
       this.websocket.onopen = this.websocketonopen;
       this.websocket.onerror = this.websocketonerror;
@@ -98,7 +100,7 @@ export default {
       }, 5000)
     },
     async setOnmessageMessage(event) {
-      // console.log(event.data, '获得消息');
+      console.log(event.data, '获得消息');
       this.reset();
       // 自定义全局监听事件
       window.dispatchEvent(new CustomEvent('onmessageWS', {

src/api/alarm/alarm.js

@@ -1,42 +1,50 @@
-import request from '@/router/axios';
+import request from "@/router/axios";
 
 export const getList = (current, size, params) => {
   return request({
-    url: '/api/alarmInformation/list',
-    method: 'get',
+    url: "/api/alarmInformation/list",
+    method: "get",
     params: {
       ...params,
       current,
       size,
-    }
-  })
-}
+    },
+  });
+};
 
 export const getDetail = (code) => {
   return request({
-    url: '/api/blade-system/region/detail',
-    method: 'get',
+    url: "/api/blade-system/region/detail",
+    method: "get",
     params: {
-      code
-    }
-  })
-}
+      code,
+    },
+  });
+};
 
 export const remove = (id) => {
   return request({
-    url: '/api/blade-system/region/remove',
-    method: 'post',
+    url: "/api/blade-system/region/remove",
+    method: "post",
     params: {
       id,
-    }
-  })
-}
+    },
+  });
+};
 
 export const submit = (row) => {
   return request({
-    url: '/api/blade-system/region/submit',
-    method: 'post',
-    data: row
-  })
-}
+    url: "/api/blade-system/region/submit",
+    method: "post",
+    data: row,
+  });
+};
 
+// 测试接口
+export const getAlarm = (query) => {
+  return request({
+    url: "/api/appData/test001",
+    method: "get",
+    params: query,
+  });
+};

src/page/index/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
+    <audio style="display:none"  controls id="play_audio" :muted="isMuted" :playsinline="isPlay">
+      <source src="~@/assets/audio/alarm.mp3" />
+    </audio>
     <div class="avue-header">
       <!-- 顶部导航栏 -->
       <top ref="top"/>
@@ -38,6 +41,8 @@
   import {validatenull} from "@/util/validate";
   import {calcDate} from "@/util/date.js";
   import {getStore} from "@/util/store.js";
+  import {getAlarm} from "@/api/alarm/alarm"
+
 
   export default {
     components: {
@@ -59,7 +64,9 @@
         //刷新token锁
         refreshLock: false,
         //刷新token的时间
-        refreshTime: ""
+        refreshTime: "",
+        times:0,
+        start:0
       };
     },
     created() {
@@ -68,10 +75,102 @@
     },
     mounted() {
       this.init();
+      this.getAlarmInfo()
+       if(!window.sessionStorage.getItem("click")){
+        this.$alert('请允许系统提示报警声音', '提示', {
+              confirmButtonText: '确定',
+              callback: action => {
+                window.sessionStorage.setItem("click", 1)
+                // 添加socket通知监听
+                // window.addEventListener('onmessageWS', this.getSocketData);
+                this.timer = setInterval(() =>{
+                  this.getSocketData('222')
+                },3000)
+                setTimeout(() =>{
+                  clearInterval(this.timer)
+                },6200)
+              }
+            });
+        }else{
+          window.sessionStorage.removeItem('click')
+          if(!window.sessionStorage.getItem("click")){
+            this.$alert('请允许系统提示报警声音', '提示', {
+              confirmButtonText: '确定',
+              callback: action => {
+                window.sessionStorage.setItem("click", 1)
+                // 添加socket通知监听
+                // window.addEventListener('onmessageWS', this.getSocketData);
+                this.timer = setInterval(() =>{
+                  this.getSocketData('222')
+                },3000)
+                setTimeout(() =>{
+                  clearInterval(this.timer)
+                },9200)
+              }
+            });
+          }
+        }
     },
     computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
     props: [],
+    beforeDestroy() {
+      window.removeEventListener('onmessageWS', this.getSocketData);
+    },
     methods: {
+      getAlarmInfo(){
+        getAlarm().then(res =>{
+          console.log(res)
+        })
+      },
+      getSocketData(res) {
+         this.times++;
+        let dom = document.querySelector('#play_audio')
+        console.log('dom ===>',dom)
+        dom.pause()
+        if(this.times > 0){
+          if(dom.readyState == 4){
+            for(let i = 0;i<=this.times;i++){
+              setTimeout(() =>{
+              this.start++;
+              this.isMuted = false,
+              this.isPlay = true
+              dom.play()
+              },2500 * i)
+            }
+          }
+        }
+        this.$notify({
+           title: '警告',
+            message: res,
+            type: 'warning'
+        })
+        // if (res.detail.data === 'success' || res.detail.data === '连接成功' || res.detail.data === 'heartBath') return
+        // // ...业务处理
+        // let obj = res.detail.data.indexOf('{') > -1 ? JSON.parse(res.detail.data) : null;
+        // this.times++;
+        // let dom = document.querySelector('#play_audio')
+        // console.log('dom ===>',dom)
+        // dom.pause()
+        // if(this.times > 0){
+        //   if(dom.readyState == 4){
+        //     for(let i = 0;i<=this.times;i++){
+        //       setTimeout(() =>{
+        //       this.start++;
+        //       this.isMuted = false,
+        //       this.isPlay = true
+        //       dom.play()
+        //       },2500 * i)
+        //     }
+        //   }
+        // }
+        // if (obj) {
+        //   this.$notify({
+        //     title: '警告',
+        //     message: obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content,
+        //     type: 'warning'
+        //   });
+        // }
+      },
       showCollapse() {
         this.$store.commit("SET_COLLAPSE");
       },

src/views/dispatch/index.vue

@@ -113,8 +113,8 @@
             <el-col :span="8"><div class="bottom_item"></div></el-col> -->
           </el-row>
         </div>
-        <div class="group_cen">
-          <video  id="video1">
+        <div class="group_cen" v-show="inviteList.length == 1 || isGroup">
+          <video  id="video1" class="group_video">
              <p>Your browser doesn't support HTML5 video.</p>
             <!-- <div class="group_tit">{{inviteList.length == 1 ? inviteList[0].name : ''}}</div>
             <div class="group_voice">
@@ -652,6 +652,7 @@ export default {
     },
     // 邀请人员
     inviteUser(row){
+      console.log('inviteList ===>',this.inviteList)
       if(this.inviteList.length == 0){
         this.dialogCall = true; //打开邀请方式弹窗
         this.callItem = row; //当前邀请人员
@@ -706,65 +707,74 @@ export default {
     
      /** 呼叫 */
     makecall(isVideo,position) {
-      this.$nextTick(() =>{
-        var targetNumber = this.callItem.name;
-        console.log('targetNumber ===>',targetNumber,document.getElementById('video1'))
-        var mediaControl;
+      // this.$nextTick(() =>{
+      //   var targetNumber = this.callItem.name;
+      //   console.log('targetNumber ===>',targetNumber,document.getElementById('video1'))
+      //   var mediaControl;
+      //   if (position == 1) {
+      //     mediaControl = document.getElementById('video1');
+      //   } else if (position == 2) {
+      //     mediaControl = document.getElementById('video1');
+      //   }
+      //   console.log('targetNumber ===>',targetNumber,'mediaControl ===>',mediaControl,'isVideo ===>',isVideo)
+
+      //   client.makeCall(targetNumber, mediaControl, isVideo).then((call) => {
+      //     if (position == 1) {
+      //       this._call1 = call;
+      //     } else if (position == 2) {
+      //       this._call2 = call;
+      //     }
+
+      //     call.callStateChange.on(onCallStateChange);
+
+      //     var state = convertCallstate(call.state);
+      //     mylog("call success callState: " + state);
+      //   }
+      //   ).catch((reason) => {
+      //     mylog("call fail");
+      //     mylog(JSON.stringify(reason));
+      //   });
+      // })
+      
+      console.log('isRegisted ====>',isRegisted())
+      // let mediaControl = null;
+      var mediaControl;
         if (position == 1) {
           mediaControl = document.getElementById('video1');
         } else if (position == 2) {
           mediaControl = document.getElementById('video1');
         }
-        console.log('targetNumber ===>',targetNumber,'mediaControl ===>',mediaControl,'isVideo ===>',isVideo)
-
-        client.makeCall(targetNumber, mediaControl, isVideo).then((call) => {
-          if (position == 1) {
-            this._call1 = call;
-          } else if (position == 2) {
-            this._call2 = call;
-          }
+      console.log(this.callItem)
+      // this.$nextTick(() =>{
+        if(this.inviteList.length == 1){ //如果只邀请一人时，进行呼叫
+        console.log('进入循环')
+          this.isMetting = false;
+           mediaControl = video1; //获取媒体控件
+           client.makeCall(this.callItem.name, mediaControl, isVideo).then((call) => { //发起呼叫
+           console.log('call ===>',call)
+            this._call = call
+            this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
+            this.inviteList.push(this.callItem);
+           
+          }).catch((reason) => {
+            console.log("call fail");
+            console.log(JSON.stringify(reason));
+            this.$message.error('呼叫失败')
+          });
+        }else if(this.inviteList.length == 2){ //邀请一人后，在邀请别人时，更改状态为会议
+          this.isMetting = true;
+          // mediaControl = document.getElementById('video' + this.callItem.id);
           
-          call.callStateChange.on(onCallStateChange);
+          this._call.addMember(this.callItem.id); //呼叫邀请人员加入
+           this.setCallEventListener(call); //呼叫监听
+            var state = this.convertCallstate(call.state);
+            mylog("call success callState: " + state);
          
-          var state = convertCallstate(call.state);
-          mylog("call success callState: " + state);
+        }else{ //邀请成员超过两人时，状态已更改为会议，使用会议邀请成员
+          this._conf.add(this.callItem.id); //会议邀请人员
         }
-        ).catch((reason) => {
-          mylog("call fail");
-          mylog(JSON.stringify(reason));
-        });
-      })
         
-      // console.log('isRegisted ====>',isRegisted())
-      // let mediaControl = null;
-      // console.log(this.callItem)
-      // // this.$nextTick(() =>{
-      //   if(this.inviteList.length == 1){ //如果只邀请一人时，进行呼叫
-      //   console.log('进入循环')
-      //     this.isMetting = false;
-      //      mediaControl = video1; //获取媒体控件
-      //      client.makeCall(this.callItem.name, mediaControl, isVideo).then((call) => { //发起呼叫
-      //      console.log('call ===>',call)
-      //       this._call = call
-           
-      //     }).catch((reason) => {
-      //       console.log("call fail");
-      //       console.log(JSON.stringify(reason));
-      //     });
-      //   }else if(this.inviteList.length == 2){ //邀请一人后，在邀请别人时，更改状态为会议
-      //     this.isMetting = true;
-      //     // mediaControl = document.getElementById('video' + this.callItem.id);
-          
-      //     this._call.addMember(this.callItem.id); //呼叫邀请人员加入
-      //      this.setCallEventListener(call); //呼叫监听
-      //       var state = this.convertCallstate(call.state);
-      //       mylog("call success callState: " + state);
-         
-      //   }else{ //邀请成员超过两人时，状态已更改为会议，使用会议邀请成员
-      //     this._conf.add(this.callItem.id); //会议邀请人员
-      //   }
-        
-      // // })
+      // })
       
     },
      //呼叫监听
@@ -843,8 +853,6 @@ export default {
     audioCall(){
       this.isIntercom = false;
       this.callItem.isSelect = 1;
-      this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
-      this.inviteList.push(this.callItem);
       this.dialogCall = false;
       console.log('callItem ===>',this.callItem)
       this.makecall(false,1)

src/views/wirelessintrusion/warn/record.vue

@@ -1,5 +1,8 @@
 <template>
   <basic-container>
+    <!-- <audio style="display:none"  controls id="play_audio" :muted="isMuted" :playsinline="isPlay">
+      <source src="~@/assets/audio/alarm.mp3" />
+    </audio> -->
     <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
       v-model="form" :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
       @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
@@ -81,6 +84,8 @@ export default {
         total: 0
       },
       selectionList: [],
+      isMuted:true,
+      isPlay:false,
       option: {
         height: 'auto',
         calcHeight: 30,
@@ -179,7 +184,10 @@ export default {
       dealForm: {
         id: '',
         handleResult: ''
-      }
+      },
+      timer:null,
+      times:0,
+      start:0,
     };
   },
   computed: {
@@ -193,13 +201,81 @@ export default {
     }
   },
   mounted() {
+    console.log(window.sessionStorage.getItem("click"))
+    // this.timer = setInterval(() =>{
+    //     this.getSocketData('222')
+    //   },3000)
+    //   setTimeout(() =>{
+    //     clearInterval(this.timer)
+    //   },6200)
+  
+  //  if(!window.sessionStorage.getItem("click")){
+  //    this.$alert('请您打开电脑声音，方便接收报警信息', '提示', {
+  //         confirmButtonText: '确定',
+  //         callback: action => {
+  //           window.sessionStorage.setItem("click", 1)
+  //           this.timer = setInterval(() =>{
+  //             this.getSocketData('222')
+  //           },3000)
+  //           setTimeout(() =>{
+  //             clearInterval(this.timer)
+  //           },6200)
+  //         }
+  //       });
+  //   }else{
+  //     window.sessionStorage.removeItem('click')
+  //     if(!window.sessionStorage.getItem("click")){
+  //       this.$alert('请您打开电脑声音，方便接收报警信息', '提示', {
+  //         confirmButtonText: '确定',
+  //         callback: action => {
+  //           window.sessionStorage.setItem("click", 1)
+  //           this.timer = setInterval(() =>{
+  //             this.getSocketData('222')
+  //           },3000)
+  //           setTimeout(() =>{
+  //             clearInterval(this.timer)
+  //           },6200)
+  //         }
+  //       });
+  //     //   this.$confirm("请点击开启音效","确定").then(res => {
+  //     //     console.log('res ===>',res)
+  //     //   window.sessionStorage.setItem("click", 1)
+  //     //   this.timer = setInterval(() =>{
+  //     //     this.getSocketData('222')
+  //     //   },3000)
+  //     //   setTimeout(() =>{
+  //     //     clearInterval(this.timer)
+  //     //   },6200)
+  //     // })
+  //     }
+  //   }
+  // document.getElementById('container').onclick = () =>{
+  //   console.log('1231213')
+  // }
+  // console.log( this.$refs.refName.$el)
+  // this.$refs.refName.click();
+      
+    // else{
+      // this.timer = setInterval(() =>{
+      //   this.getSocketData('222')
+      // },3000)
+    // }
     // 添加socket通知监听
-    window.addEventListener('onmessageWS', this.getSocketData);
+    // window.addEventListener('onmessageWS', this.getSocketData);
+    
   }, 
   beforeDestroy() {
-    window.removeEventListener('onmessageWS', this.getSocketData);
+    window.sessionStorage.removeItem('click')
+    // window.removeEventListener('onmessageWS', this.getSocketData);
+    clearInterval(this.timer)
   },
   methods: {
+    searchData(){
+      console.log('qwqwq')
+      // this.timer = setInterval(() =>{
+      //     this.getSocketData('222')
+      //   },5000)
+    },
     //消警
     cancelWarn(row) {
       if (row.systemNum < 0) {
@@ -232,18 +308,38 @@ export default {
       })
     },
     // 收到消息处理
-    getSocketData(res) {
-      if (res.detail.data === 'success' || res.detail.data === '连接成功' || res.detail.data === 'heartBath') return
-      // ...业务处理
-      let obj = res.detail.data.indexOf('{') > -1 ? JSON.parse(res.detail.data) : null;
-      if (obj) {
-        this.$notify({
-          title: '警告',
-          message: obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content,
-          type: 'warning'
-        });
-      }
-    },
+    // getSocketData(res) {
+    //   this.times++;
+    //   let dom = document.querySelector('#play_audio')
+    //   dom.pause()
+    //   if(this.times > 0){
+    //     if(dom.readyState == 4){
+    //       for(let i = 0;i<=this.times;i++){
+    //         setTimeout(() =>{
+    //         this.start++;
+    //         this.isMuted = false,
+    //         this.isPlay = true
+    //         dom.play()
+    //         },2500 * i)
+    //       }
+    //     }
+    //   }
+    //   this.$notify({
+    //      title: '警告',
+    //       message: res,
+    //       type: 'warning'
+    //   })
+    //   // if (res.detail.data === 'success' || res.detail.data === '连接成功' || res.detail.data === 'heartBath') return
+    //   // ...业务处理
+    //   // let obj = res.detail.data.indexOf('{') > -1 ? JSON.parse(res.detail.data) : null;
+    //   // if (obj) {
+    //   //   this.$notify({
+    //   //     title: '警告',
+    //   //     message: obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content,
+    //   //     type: 'warning'
+    //   //   });
+    //   // }
+    // },
     searchReset() {
       this.query = {};
       this.onLoad(this.page);