diff --git a/src/assets/audio/alarm.mp3 b/src/assets/audio/alarm.mp3 index a25d1c3..01026e7 100644 Binary files a/src/assets/audio/alarm.mp3 and b/src/assets/audio/alarm.mp3 differ diff --git a/src/assets/audio/alarm1.mp3 b/src/assets/audio/alarm1.mp3 new file mode 100644 index 0000000..a25d1c3 Binary files /dev/null and b/src/assets/audio/alarm1.mp3 differ diff --git a/src/assets/audio/ifame.mp3 b/src/assets/audio/ifame.mp3 new file mode 100644 index 0000000..dc2a9cd Binary files /dev/null and b/src/assets/audio/ifame.mp3 differ diff --git a/src/assets/image/alarm.png b/src/assets/image/alarm.png new file mode 100644 index 0000000..2c3d027 Binary files /dev/null and b/src/assets/image/alarm.png differ diff --git a/src/assets/image/alarm_muted.png b/src/assets/image/alarm_muted.png new file mode 100644 index 0000000..2cb1273 Binary files /dev/null and b/src/assets/image/alarm_muted.png differ diff --git a/src/assets/image/alarm_muted1.png b/src/assets/image/alarm_muted1.png new file mode 100644 index 0000000..24d9216 Binary files /dev/null and b/src/assets/image/alarm_muted1.png differ diff --git a/src/page/index/index.vue b/src/page/index/index.vue index 5bb99fd..61da73c 100644 --- a/src/page/index/index.vue +++ b/src/page/index/index.vue @@ -1,6 +1,20 @@ @@ -43,6 +71,7 @@ import {calcDate} from "@/util/date.js"; import {getStore} from "@/util/store.js"; import {getAlarm} from "@/api/alarm/alarm" + import player from "@/views/components/h5Player/player.vue" export default { @@ -50,7 +79,8 @@ top, tags, search, - sidebar + sidebar, + player }, name: "index", provide() { @@ -60,6 +90,8 @@ }, data() { return { + videoData:[], + dialogVisible:false, //搜索控制 isSearch: false, //刷新token锁 @@ -67,15 +99,31 @@ //刷新token的时间 refreshTime: "", times:0, - start:0 + start:0, + isAlarm:false, + alarmInfo:'', + isShowAlarm:false, + timer:null, + isLoop:false }; }, + beforeCreate(){ + }, created() { //实时检测刷新token this.refreshToken(); + // const iframeDom = document.getElementById('iframeDom'); + // iframeDom.onload = () =>{ + // console.log('音频播放') + // } }, mounted() { this.init(); + let dom = document.querySelector('#contain') + dom.addEventListener('mousemove',()=>{ + // console.log('123123') + }) + // if(!window.sessionStorage.getItem("click")){ // this.$alert('请允许系统提示报警声音', '提示', { // confirmButtonText: '确定', @@ -84,11 +132,12 @@ // // 添加socket通知监听 window.addEventListener('onmessageWS', this.getSocketData); // this.timer = setInterval(() =>{ - // this.getSocketData('222') - // },3000) + // console.log('5秒一次循环') + // this.getSocketData('22222') + // },5000) // setTimeout(() =>{ // clearInterval(this.timer) - // },6200) + // },11200) // } // }); // }else{ @@ -122,11 +171,27 @@ console.log(res) }) }, + closeAlarm(){ + this.isAlarm = !this.isAlarm + if(this.isAlarm){ + document.querySelector('#play_audio').pause() + }else{ + document.querySelector('#play_audio').play() + } + }, + cancelAlarm(){ + this.isShowAlarm = false; + // this.isAlarm = true + document.querySelector('#play_audio').pause() + }, getSocketData(res) { + console.log(res) + this.cameraCode = [] // this.times++; - // let dom = document.querySelector('#play_audio') + let dom = document.querySelector('#play_audio') // console.log('dom ===>',dom) - // dom.pause() + dom.pause() + // clearInterval(this.timer) // if(this.times > 0){ // if(dom.readyState == 4){ // for(let i = 0;i<=this.times;i++){ @@ -153,43 +218,102 @@ // 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){ - console.log(this.times) - if(dom.readyState == 4){ - for(let i = 0;i<=this.times;i++){ - setTimeout(() =>{ - this.start++; - this.times--; - this.isMuted = false, - this.isPlay = true - dom.play() - },2500 * i) - } + + console.log('obj ===>',obj.cameraCode.indexOf('-') > -1) + + if(obj.cameraCode.indexOf('-') > -1){ + let arr = obj.cameraCode.split('-') + arr.map(item =>{ + this.videoData.push({code:item}) + }) + if(this.isShowAlarm){ + if(this.isAlarm){ + return + }else{ + console.log('已经存在报警信息') + this.alarmInfo = obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content + this.isLoop = true; + dom.play() + } + }else{ + this.isShowAlarm = true; + if(this.isAlarm){ + return + }else{ + console.log('已经存在报警信息') + this.alarmInfo = obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content + this.isLoop = true; + dom.play() + } } + this.dialogVisible = true + }else{ - if(dom.readyState == 4){ - this.isMuted = false, - this.isPlay = true - this.start = 0 + this.videoData.push({code:obj.cameraCode}) + if(this.isShowAlarm){ + if(this.isAlarm){ + return + }else{ + console.log('已经存在报警信息') + this.alarmInfo = obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content + this.isLoop = true; dom.play() - } - } - if (obj) { - this.$notify({ - title: '警告', - message: obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content, - type: 'warning' - }); + + }else{ + this.isShowAlarm = true; + if(this.isAlarm){ + return + }else{ + console.log('已经存在报警信息') + this.alarmInfo = obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content + this.isLoop = true; + dom.play() + } + } + this.dialogVisible = true + } + console.log('cameraCode ====>',this.videoData) + // this.times++; + // let dom = document.querySelector('#play_audio') + // console.log('dom ===>',dom) + // dom.pause() + // if(this.times > 0){ + // console.log(this.times) + // if(dom.readyState == 4){ + // for(let i = 0;i<=this.times;i++){ + // setTimeout(() =>{ + // this.start++; + // this.times--; + // this.isMuted = false, + // this.isPlay = true + // dom.play() + // },2500 * i) + // } + + // } + // }else{ + // if(dom.readyState == 4){ + // this.isMuted = false, + // this.isPlay = true + // this.start = 0 + // dom.play() + // } + + // } + // if (obj) { + // this.$notify({ + // title: '警告', + // message: obj.buildId + '号楼' + obj.floorNo + '层发生报警：' + obj.content, + // type: 'warning' + // }); + // } }, showCollapse() { this.$store.commit("SET_COLLAPSE"); @@ -261,3 +385,50 @@ } }; + + diff --git a/src/router/views/index.js b/src/router/views/index.js index caaa73f..323cd41 100644 --- a/src/router/views/index.js +++ b/src/router/views/index.js @@ -145,4 +145,14 @@ export default [ isAuth: false, }, }, + { + path: "/videoPlayer", + name: "语音调度", + component: () => + import(/* webpackChunkName: "views" */ "@/views/h5Player/player"), + meta: { + isTab: false, + isAuth: false, + }, + }, ]; diff --git a/src/views/alarmcenter/index.vue b/src/views/alarmcenter/index.vue index dd65f79..07f2e53 100644 --- a/src/views/alarmcenter/index.vue +++ b/src/views/alarmcenter/index.vue @@ -25,7 +25,7 @@ :url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" :playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" /> --> - + @@ -91,19 +91,19 @@ export default { label: "设备类型", prop: "productName", }, - { - label: "报警类型", - type: "select", - dicUrl: "/api/blade-system/dict-biz/dictionary?code=alarm_message_condition", - props: { - label: "dictValue", - value: "dictKey" - }, - dataType: "number", - slot: true, - prop: "type", - // search: true, - }, + // { + // label: "报警类型", + // type: "select", + // dicUrl: "/api/blade-system/dict-biz/dictionary?code=alarm_message_condition", + // props: { + // label: "dictValue", + // value: "dictKey" + // }, + // dataType: "number", + // slot: true, + // prop: "type", + // // search: true, + // }, { label: "楼号", prop: "buildId", @@ -250,7 +250,16 @@ export default { this.$message.warning('未查询到该报警点摄像头'); } else{ - this.dialogVisible = true; + // this.dialogVisible = true; + const routeData = this.$router.resolve({ + path: '/videoPlayer', // 跳转的路径 + query: { + list: JSON.stringify(this.videoData), // 携带的的参数信息 + showLeft:true + } + }) + console.log('href ===>',routeData.href) + window.open(routeData.href, '_blank') } }); }) @@ -267,7 +276,16 @@ export default { this.$message.warning('未查询到该报警点摄像头'); } else{ - this.dialogVisible = true; + // this.dialogVisible = true; + const routeData = this.$router.resolve({ + path: '/videoPlayer', // 跳转的路径 + query: { + list: JSON.stringify(this.videoData), // 携带的的参数信息 + showLeft:true + } + }) + console.log('href ===>',routeData.href) + window.open(routeData.href, '_blank') } } }); diff --git a/src/views/alarmcenter/sosAlarm/list.vue b/src/views/alarmcenter/sosAlarm/list.vue index 0ebe247..ba1bd18 100644 --- a/src/views/alarmcenter/sosAlarm/list.vue +++ b/src/views/alarmcenter/sosAlarm/list.vue @@ -279,7 +279,16 @@ export default { if(this.carmeraCode.length === 0){ this.$message.warning('未查询到该报警点摄像头'); }else{ - this.dialogVisible = true; + // this.dialogVisible = true; + const routeData = this.$router.resolve({ + path: '/videoPlayer', // 跳转的路径 + query: { + list: JSON.stringify(this.carmeraCode), // 携带的的参数信息 + showLeft:true + } + }) + console.log('href ===>',routeData.href) + window.open(routeData.href, '_blank') } }) // this.dialogVisible = true; @@ -288,100 +297,65 @@ export default { }) } else { // console.log('ceshi2') - this.videoData = [ - { - "id":5, - "sort":null, - "version":null, - "createTime":"2023-10-1410:59:40", - "updateTime":"2023-10-1410:59:40", - "delFlag":"0", - "createUser":"client", - "updateUser":"client", - "buildId":206885, - "departmentId":null, - "name":"WLJK-13F-1-3", - "sn":"", - "ip":null, - "brand":"", - "httpPost":null, - "serverPost":null, - "userName":null, - "password":null, - "rtspRealTimeUrl":"rtsp://admin:qlyy123456@171.16.234.5/Streaming/Channels/101?transportmode=unicast", - "rtspHistoryUrl":"", - "rtspDateFormat":"", - "rtspTimeFormat":"", - "floorNo":"Floor13", - "x":213832, - "y":197192, - "videoCode":"H265" - }, - { - "id":25, - "sort":null, - "version":null, - "createTime":"2023-10-1516:07:07", - "updateTime":"2023-10-1516:07:07", - "delFlag":"0", - "createUser":"client", - "updateUser":"client", - "buildId":206885, - "departmentId":null, - "name":"JK-13F-1-3", - "sn":"", - "ip":null, - "brand":"", - "httpPost":null, - "serverPost":null, - "userName":null, - "password":null, - "rtspRealTimeUrl":"rtsp://admin:qlyy123456@171.16.234.98/Streaming/Channels/101?transportmode=unicast", - "rtspHistoryUrl":"", - "rtspDateFormat":"", - "rtspTimeFormat":"", - "floorNo":"Floor13", - "x":220432, - "y":200450, - "videoCode":"H265" - }, - ] - let arr = [] - this.videoData.map(item =>{ - arr.push(item.name) - }) - let tmp = arr.join(',') - console.log('tmp ===>',tmp) - getCameraCode({keys:tmp}).then(res =>{ - console.log(res) - // this.carmeraCode = res.data.data - this.carmeraCode = [ - {code: "3904f09529de44ffadccaecce4397dcb",name: "JK-13F-1-3"}, - {code: "b9697af4dc0544cd85cc76811e08d371",name: "WLJK-13F-1-3"}, - ] - if(this.carmeraCode.length === 0){ - this.$message.warning('未查询到该报警点摄像头'); - }else{ - this.dialogVisible = true; - } - }) - - // getDeviceCamera(token, { sn: row.hostSerialNumber }).then(res2 => { - // if (res2.data.code == 401) { - // window.sessionStorage.removeItem('bizToken'); - // this.linkVideo(row); - // } - // else if (res2.data.code == 0) { - // const data = res2.data; - // this.videoData = data.data; - // console.log('videoData11 ===>',this.videoData) - - // if(this.videoData.length === 0){ - // this.$message.warning('未查询到该报警点摄像头'); - // } - // else{ - // // this.dialogVisible = true; - // let arr = [] + // this.videoData = [ + // { + // "id":5, + // "sort":null, + // "version":null, + // "createTime":"2023-10-1410:59:40", + // "updateTime":"2023-10-1410:59:40", + // "delFlag":"0", + // "createUser":"client", + // "updateUser":"client", + // "buildId":206885, + // "departmentId":null, + // "name":"WLJK-13F-1-3", + // "sn":"", + // "ip":null, + // "brand":"", + // "httpPost":null, + // "serverPost":null, + // "userName":null, + // "password":null, + // "rtspRealTimeUrl":"rtsp://admin:qlyy123456@171.16.234.5/Streaming/Channels/101?transportmode=unicast", + // "rtspHistoryUrl":"", + // "rtspDateFormat":"", + // "rtspTimeFormat":"", + // "floorNo":"Floor13", + // "x":213832, + // "y":197192, + // "videoCode":"H265" + // }, + // { + // "id":25, + // "sort":null, + // "version":null, + // "createTime":"2023-10-1516:07:07", + // "updateTime":"2023-10-1516:07:07", + // "delFlag":"0", + // "createUser":"client", + // "updateUser":"client", + // "buildId":206885, + // "departmentId":null, + // "name":"JK-13F-1-3", + // "sn":"", + // "ip":null, + // "brand":"", + // "httpPost":null, + // "serverPost":null, + // "userName":null, + // "password":null, + // "rtspRealTimeUrl":"rtsp://admin:qlyy123456@171.16.234.98/Streaming/Channels/101?transportmode=unicast", + // "rtspHistoryUrl":"", + // "rtspDateFormat":"", + // "rtspTimeFormat":"", + // "floorNo":"Floor13", + // "x":220432, + // "y":200450, + // "videoCode":"H265" + // }, + // ] + // let arr = [] // this.videoData.map(item =>{ // arr.push(item.name) // }) @@ -389,16 +363,69 @@ export default { // console.log('tmp ===>',tmp) // getCameraCode({keys:tmp}).then(res =>{ // console.log(res) - // this.carmeraCode = res.data.data + // // this.carmeraCode = res.data.data + // this.carmeraCode = [ + // {code: "3904f09529de44ffadccaecce4397dcb",name: "JK-13F-1-3"}, + // {code: "b9697af4dc0544cd85cc76811e08d371",name: "WLJK-13F-1-3"}, + // ] // if(this.carmeraCode.length === 0){ // this.$message.warning('未查询到该报警点摄像头'); // }else{ - // this.dialogVisible = true; + // // this.dialogVisible = true; + // const routeData = this.$router.resolve({ + // path: '/videoPlayer', // 跳转的路径 + // query: { + // list: JSON.stringify(this.carmeraCode), // 携带的的参数信息 + // showLeft:true + // } + // }) + // console.log('href ===>',routeData.href) + // window.open(routeData.href, '_blank') // } // }) - // } - // } - // }); + + getDeviceCamera(token, { sn: row.hostSerialNumber }).then(res2 => { + if (res2.data.code == 401) { + window.sessionStorage.removeItem('bizToken'); + this.linkVideo(row); + } + else if (res2.data.code == 0) { + const data = res2.data; + this.videoData = data.data; + console.log('videoData11 ===>',this.videoData) + + if(this.videoData.length === 0){ + this.$message.warning('未查询到该报警点摄像头'); + } + else{ + // this.dialogVisible = true; + let arr = [] + this.videoData.map(item =>{ + arr.push(item.name) + }) + let tmp = arr.join(',') + console.log('tmp ===>',tmp) + getCameraCode({keys:tmp}).then(res =>{ + console.log(res) + this.carmeraCode = res.data.data + if(this.carmeraCode.length === 0){ + this.$message.warning('未查询到该报警点摄像头'); + }else{ + // this.dialogVisible = true; + const routeData = this.$router.resolve({ + path: '/videoPlayer', // 跳转的路径 + query: { + list: JSON.stringify(this.carmeraCode), // 携带的的参数信息 + showLeft:true + } + }) + console.log('href ===>',routeData.href) + window.open(routeData.href, '_blank') + } + }) + } + } + }); } }, // 导出 diff --git a/src/views/components/h5Player/player.vue b/src/views/components/h5Player/player.vue index 2770cf3..a0a7263 100644 --- a/src/views/components/h5Player/player.vue +++ b/src/views/components/h5Player/player.vue @@ -1,7 +1,7 @@