<template lang="pug"> <div class="animation"> <div class='info-title'>当前摄像头 <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button> </div> <div class='info-video'> <video class="video" ref="video" muted autoplay controls></video> //- <video class="video" :src="videoSrc" controls="controls"></video> </div> <div class="info-form"> <div class="operate" > <div class="btns"> <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt=""> <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt=""> <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt=""> <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt=""> <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt=""> <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt=""> <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt=""> <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt=""> <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt=""> <div class="fx">方向</div> <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上"> </div> <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰"> </div> <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上"> </div> <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转"> </div> <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下"> </div> <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转"> </div> <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下"> </div> <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转"> </div> </div> <div class="ytBox ytBox2"> <div class="bbBtn"> <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+"> <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt=""> <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt=""> </div> <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-"> <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt=""> <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt=""> </div> </div> <div class="bbBtn"> <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+"> <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt=""> <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt=""> </div> <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-"> <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt=""> <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt=""> </div> </div> <div class="bbBtn"> <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+"> <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt=""> <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt=""> </div> <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-"> <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt=""> <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt=""> </div> </div> </div> </div> </div> <div class='info-title'>监控点信息</div> <div class='info-form'> <div class="quDetailM"> <p class="leftP">线路站点 : <span>{{dataForm.lineStation}}</span></p> </div> <div class="quDetailM"> <p class="leftP">资源点名称 : {{dataForm.name}}</p> </div> <div class="quDetailM"> <p class="leftP">资源点类型 : {{dataForm.typeName}}</p> </div> <div class="quDetailM"> <p class="leftP">资源点编码 : {{dataForm.code}}</p> </div> <div class="quDetailM"> <p class="leftP">资源点状态 : {{dataForm.status==1?'正常':'异常'}}</p> </div> <div class="quDetailM"> <p class="leftP">部署位置 : {{dataForm.deployLocation}}</p> </div> </div> </div> </template> <script> import { mapState } from 'vuex' import { isAuth } from '../../../util' export default { computed: { ...mapState('d2admin/user', [ 'info' ]) }, data () { return { //11=焦距变大,12=焦距变小,13=焦点前调,14=焦点后调,15=光圈扩大,16=光圈扩小 //21=上仰,22=下俯,23=左转,24=右转,25=左上,26=右上,27=左下,28=右下,29=自动扫描 actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '', '上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'], imgUrl: '', imgRightUrl11: false, imgRightUrl12: false, imgRightUrl13: false, imgRightUrl14: false, imgRightUrl15: false, imgRightUrl16: false, videoSrc: '', clickFlag: false, visible: false, sysOrgList: [], dataListSelections: [], lineList: [], stationList: [], typeList: [], systemList: [], tierList: [], dataForm: { id: 0, name: '', type: 1, lineId: '', lineName: '', stationId: localStorage.getItem('stationId'), stationName: '', tierId: '', subSystem: '', code: '', subCode: '', addressCode: '', port: '', username: '', password: '', remark: '', status: 1 }, ontclick: 'pointer-events: none;', flvPlayer: null } }, created () { }, methods: { init (id, stationId) { this.visible = true this.clickFlag = false this.dataForm.id = id this.stationId = stationId this.initResource() this.dataForm.operatorName = this.info.name }, initResource () { this.$http({ url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`), method: 'get', params: this.$http.adornParams() }).then(data => { if (data && data.code === 0) { this.dataForm = data.bean //如果当前设备摄像头为离线状态,则不加载画面 if(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线,1=在线) this.flvPlayer.pause() this.flvPlayer.unload() this.flvPlayer.detachMediaElement() this.flvPlayer.destroy() this.flvPlayer = null return }else if(data.bean.byx2 == 0 && !this.flvPlayer){ return }else if(this.flvPlayer){ this.flvPlayer.pause() this.flvPlayer.unload() this.flvPlayer.detachMediaElement() this.flvPlayer.destroy() this.flvPlayer = null } this.$http({ url: this.$http.adornUrlEq('/camera/camerasPlay'), method: 'post', data: { id: data.bean.id, stationId: data.bean.stationId, userId: localStorage.getItem('userId'), levelType: 1, controlType: 3 } }).then(data => { if (data && data.code === 0) { this.videoSrc = data.url //视频连接 this.flvPlayer = null if (flvjs.isSupported()) { this.flvPlayer = flvjs.createPlayer({ type: 'flv', enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js isLive: true, //直播模式 hasAudio: false, //关闭音频 hasVideo: true, stashInitialSize: 128, enableStashBuffer: false, //播放flv时,设置是否启用播放缓存,只在直播起作用。 url: this.videoSrc }) this.$nextTick(function () { this.flvPlayer.attachMediaElement(this.$refs.video) this.flvPlayer.load() }) } } }) } }) }, closeQueryDetailVisible () { this.$emit('closeQ') }, clickPTZControl (ptz, dwStop, img) { if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) { return } if (!isAuth('ol:demo:corona')) { this.$message({ type: 'warning', message: '没有操作权限,请联系管理员', duration: 1000 }) return } if (img && img != 'right') { this.imgUrl = img } if (dwStop) { this.imgUrl = '' } if (img && img == 'right') { this['imgRightUrl' + ptz] = true } if (dwStop && img == 'right') { this['imgRightUrl' + ptz] = false } this.$http({ url: this.$http.adornUrlEq('/camera/ptzControl'), method: 'post', data: { resourceId: this.dataForm.id, stationId: this.dataForm.stationId, userId: localStorage.getItem('userId'), levelType: 1, controlType: 3, ip: this.dataForm.addressCode, //ip地址 port: this.dataForm.port, //端口 username: this.dataForm.username, //账号 password: this.dataForm.password, //密码 channel: this.dataForm.byx1, //通道 stream: 'main', //主码流 dwPtzCommand: ptz, //云台控制命令 dwStop: dwStop //云台控制0开始和1结束 } }).then(data => { // console.log(11) // console.log(data) if (data && data.code === 0) { if (dwStop == 0) { //云台控制0开始和1结束 this.saveLog(1, ptz)// 执行结果 成功 1 失败 2 this.$message.success(data.msg) } } else { if (dwStop == 0) { //云台控制0开始和1结束 this.saveLog(2, ptz)// 执行结果 成功 1 失败 2 this.$message.error(data.msg) } } }) }, //调用日志保存记录操作指令 saveLog (result, ptz) { this.$http({ url: this.$http.adornUrlEq('/orVideoMonitor/save'), method: 'post', data: { source: 1, actionName: this.actionList[ptz], resourceId: this.dataForm.id, stationId: this.stationId, type: this.dataForm.type, result: result } }).then(data => { }) } } } </script> <style lang="scss" scoped> .el-table__header { width: 100% !important; } .el-table__body { width: 100% !important; } .info-title { line-height: 40px; height: 40px; padding: 0 20px; background-color: #e1edf4; border-bottom: 1px solid #cccccc; font-size: 16px; font-family: Microsoft YaHei; font-weight: bold; } .info-video { padding: 10px; height: 175px; } .info-form { padding: 10px; } .info-block { border: 1px solid #cccccc; } .el-select { width: 100%; } .video { width: 310px; height: 175px; } .animation { animation: myfirst 1s; position: absolute; right: 0; top: 50px; width: 330px; background-color: #f4f4f4; z-index: 999; border: 1px solid rgba(195, 195, 195, 1); box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2); } @keyframes myfirst { from { right: -500px; } to { right: 0; } } .quDetailM { width: 100%; } .leftP { height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px; span { color: #46b6f9; } } .operate { padding: 5px 0; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: rgba(0, 0, 0, 1); border-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5) ) 2 2; border-radius: 10px; overflow: hidden; display: flex; justify-content: flex-start; .btns { width: 194px; height: 194px; position: relative; img { width: 100%; height: 100%; } div { cursor: pointer; padding: 10px; } .s { position: absolute; top: 10px; left: 75px; width: 24px; height: 24px; } .x { position: absolute; bottom: 10px; left: 75px; width: 24px; height: 24px; } .z { position: absolute; top: 75px; left: 10px; width: 24px; height: 24px; } .y { position: absolute; top: 75px; right: 10px; width: 24px; height: 24px; } .zs { position: absolute; top: 32px; left: 32px; width: 24px; height: 24px; } .zx { position: absolute; bottom: 32px; left: 32px; width: 24px; height: 24px; } .ys { position: absolute; top: 32px; right: 32px; width: 24px; height: 24px; } .yx { position: absolute; bottom: 32px; right: 32px; width: 24px; height: 24px; } .fx { position: absolute; padding: 0; cursor: default; top: 50%; left: 50%; width: 65px; height: 65px; background: #ececec; border-radius: 50%; line-height: 65px; text-align: center; color: #969696; transform: translate(-50%, -50%); } } .ytBox { width: 90px; font-size: 16px; padding: 10px 0 10px 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-around; align-items: center; .mllx { display: flex; justify-content: space-between; width: 90%; span { line-height: 40px; text-align: center; width: 35%; } } .bbBtn { height: 40px; display: flex; margin-left: 10px; justify-content: flex-start; div { width: 40px; height: 40px; cursor: pointer; img { width: 100%; height: 100%; } } } } } </style>