<template lang='pug'> div.infopage() div.content() div.left() div.spBox(ref="spbox") div(id="divPlugin" class="plugin") div.right() div.wanginfo() h3 预览 div.mllx() span() 码流类型: el-select(size="small" id="streamtype" v-model="mllx" placeholder="请选择" style="width:69%") el-option(label="主码流" :value="1") el-option(label="子码流" :value="2") div.stopbtn() div.comBtn(@click='clickStartRealPlay') <i class="el-icon-video-play" style="margin-right:5px"></i>开始播放 div.comBtn(@click="clickStopRealPlay") <i class="el-icon-video-pause" style="margin-right:5px"></i>停止播放 div.operate() div.liand() 云台控制 div.btns() img(src="@/assets/images/btns.png") div(class="fx") 方向 div(class="zs") img(src="@/assets/images/zs.png" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl") div(class="s") img(src="@/assets/images/s.png" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl") div(class="ys") img(src="@/assets/images/ys.png" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl") div(class="y") img(src="@/assets/images/y.png" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl") div(class="yx") img(src="@/assets/images/yx.png" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl") div(class="x") img(src="@/assets/images/x.png" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl") div(class="zx") img(src="@/assets/images/zx.png" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl") div(class="z") img(src="@/assets/images/z.png" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl") div.ytBox() div.mllx() span() 云台速度: el-select(size="small" id="ptzspeed" v-model="ytsd" placeholder="请选择" style="width:70%;height: 40px;background-color: transparent;") el-option(:label="1" :value="1") el-option(:label="2" :value="2") el-option(:label="3" :value="3") el-option(:label="4" :value="4") div.mllx() span() 预制点号: el-input(size="small" v-model="yzdh" style="width:70%;height: 40px;background-color: transparent;") div.setBtn() div.comBtn(style="border-right: 2px solid rgb(3, 38, 125)" @click='clickSetPreset') 设置 div.comBtn(@click='clickGoPreset') 调用 div.bbBtn() div.add(@mousedown="mouseDownPTZControl(10)" @mouseup="mouseUpPTZControl") + div.bb() 变倍 div.jian(@mousedown="mouseDownPTZControl(11)" @mouseup="mouseUpPTZControl") - </template> <script> // import './jquery-1.7.1.min.js' // import { WebVideoCtrl } from './webVideoCtrl.js' export default { components: {}, data() { return { mllx: 2, yzdh: 1, ytsd: 1, value: 1, g_iWndIndex: 0, //当前选中的窗口 g_bPTZAuto: false, pumpRoomName: '', cameraArray: [], webVideo: {}, iWidth: 600, iHeight: 400, iProtocol: 1, szIP: '10.20.72.43', szPort: '80', szUsername: 'admin', szPassword: 'hik12345', iStreamType: 1, bZeroChannel: false, maskData: { maskShow: false, title: '提示', content: '失败', cancel: false } } }, created: function () { }, mounted: function () { this.videoInitPlugin() }, destroyed: function () { for (var i = 0; i < this.cameraArray.length; i++) { WebVideoCtrl.I_Stop({ iWndIndex: i }) } var iRet = WebVideoCtrl.I_Logout(this.szIP) if (iRet !== 0) { console.log('WebVideoCtrl I_Logout failed') } else { console.log('WebVideoCtrl I_Logout success') } }, methods: { init(){ // 请求预制点号 this.$http({ url: this.$http.adornUrl('/eWarning/getConfig'), method: 'GET' }).then((data) => { this.yzdh = data.entity }) }, clickSetPreset() { // 设置预制点号 this.$http({ url: this.$http.adornUrl('/eWarning/setConfig/'+this.yzdh), method: 'GET' }).then((data) => { this.$message.success('设置预制点号成功') }) WebVideoCtrl.I_SetPreset(this.yzdh, { success: function (xmlDoc) { console.log(' 设置预置点成功!') }, error: function (status, xmlDoc) { console.log(' 设置预置点失败!', status) } }) }, //全屏 clickFullScreen: function () { WebVideoCtrl.I_FullScreen(true) }, //切换 changeWndNum: function (iType) { console.log(iType) var iType = parseInt(iType, 10) WebVideoCtrl.I_ChangeWndNum(iType) }, downLoadPlugin: function () { if (confirm(`是否下载该插件?`)) { window.location.href = process.env.BASE_API + `/dashboard/downloadPlug` } }, videoInitPlugin: function () { // var _this = this; var iRet = WebVideoCtrl.I_CheckPluginInstall() if (iRet === -1) { alert('您还未安装过插件!') this.downLoadPlugin() return } this.initPlugin() }, initPlugin: function () { var that = this let eWidth = this.$refs.spbox.offsetWidth let eHeight = this.$refs.spbox.offsetHeight this.iWidth = eWidth this.iHeight = eHeight WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, { bWndFull: true, //是否支持单窗口双击全屏,默I_CheckPluginInstall iWndowType: 1, // cbSelWnd: function (xmlDoc) { // var giWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10); // var szInfo = "当前选择的窗口编号:" + giWndIndex; // // console.log(szInfo); // }, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin') var szIP = that.szIP WebVideoCtrl.I_Login(szIP, that.iProtocol, that.szPort, that.szUsername, that.szPassword, { async: false, success: function (xmlDoc) { that.clickStopRealPlay() // console.log(xmlDoc)//不能删除 // 开始预览 var szDeviceIdentify = szIP + '_' + that.szPort that.startRealPlay(szDeviceIdentify, 0, 1) //1为通道号, i 为窗口 }, error: function () { console.log('login error') } }) } }) }, startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) { var that = this console.log('startRealPlay-ml: ' + that.mllx, szDeviceIdentify, iWndIndex, iChannelID) WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iWndIndex: 0, iStreamType: that.mllx, success: function () { console.log('开始预览成功 ') }, error: function (status, xmlDoc2) { console.log(xmlDoc2)//不能删除 if (status === 403) { console.log('szInfo 设备不支持Websocket取流!') } else { console.log('开始预览失败 ') } } }) }, clickStartRealPlay() { var szDeviceIdentify = this.szIP + '_' + this.szPort this.startRealPlay(szDeviceIdentify, 0, 1) //1为通道号, i 为窗口 }, clickStopRealPlay() { WebVideoCtrl.I_Stop({ iWndIndex: 0 }) }, clickGoPreset() { WebVideoCtrl.I_GoPreset(this.yzdh, { success: function (xmlDoc) { console.log(' 调用预置点成功!') }, error: function (status, xmlDoc) { console.log(' 调用预置点失败!', status) } }) }, mouseDownPTZControl: function (iPTZIndex) { var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0) if (oWndInfo !== null) { if (iPTZIndex === 9 && this.g_bPTZAuto) { iPTZSpeed = 0 } else { this.g_bPTZAuto = false } WebVideoCtrl.I_PTZControl(iPTZIndex, false, { iPTZSpeed: 2, success: function (xmlDoc) { console.log(xmlDoc) if (iPTZIndex === 9 && this.g_bPTZAuto) { console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功!') } else { console.log(oWndInfo.szDeviceIdentify + ' 开启云台成功!') } if (iPTZIndex === 9) { this.g_bPTZAuto = !this.g_bPTZAuto } }, error: function (status, xmlDoc) { console.log(oWndInfo.szDeviceIdentify + ' 开启云台失败!', status, xmlDoc) } }) } }, mouseUpPTZControl: function () { var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0) if (oWndInfo !== null) { WebVideoCtrl.I_PTZControl(1, true, { success: function (xmlDoc) { console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功!', xmlDoc) }, error: function (status, xmlDoc) { console.log(oWndInfo.szDeviceIdentify + ' 停止云台失败!', status, xmlDoc) } }) } } } } </script> <style lang="scss" scoped> .plugin { width: 500px; height: 300px; } .my-tag { margin-left: 3px; } .my-group-btn { margin-top: 5px; } .infopage{ margin:0 20px 0 24px; overflow: auto; .backBtn{ margin-left: 24px; width: 120px; height: 40px; background-color: #021B45; color: #fff; border: none; } .content { margin-top:24px; display:flex; justify-content: space-between; overflow: auto; .left{ width: 70%; height: 774px; background-color:#041B41; display: flex; justify-content: space-around; align-items: center; opacity:0.5; border:2px solid; 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; .spBox{ width: 95%; height: 93%; opacity:0.5; border:2px solid; 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; } } .right{ width: 30%; margin-left:24px; color: #fff; .wanginfo{ padding: 1px 20px 20px 20px; // height:200px; background-color:#041B41; font-size:16px; font-family:Microsoft YaHei; font-weight:400; border:2px solid; 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; opacity:0.5; border-radius:10px; overflow: hidden; display: flex; flex-direction: column; justify-content:start; align-items: center; h3 { text-align:center; font-size:18px; } .mllx{ // margin-left: 50px; width: 100%; margin-bottom: 24px; span{ width: 35%; } } .stopbtn{ margin-left: 7%; width: 70%; display: flex; justify-content: space-between; font-size: 14px; .comBtn{ cursor: pointer; width: 45%; height: 40px; text-align: center; line-height: 40px; background-color: rgba(3, 42, 113, 0.521); } } } .operate{ margin-top:24px; padding-bottom: 24px; background-color:#041B41; // height:590px; border:2px solid; 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; opacity:0.5; border-radius:10px; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: center; .liand { height: 30px; text-align: center; font-size: 18px; padding: 20px; } .btns{ width:221px; height:221px; position:relative; img{ width:100%; height:100%; cursor: pointer; } .s{ position: absolute; top:20px; left: 100px; width: 24px; height: 24px; } .x{ position: absolute; bottom:20px; left: 100px; width: 24px; height: 24px; } .z{ position: absolute; top:100px; left: 20px; width: 24px; height: 24px; } .y{ position: absolute; top:100px; right:20px; width: 24px; height: 24px; } .zs{ position: absolute; top:42px; left: 42px; width: 24px; height: 24px; } .zx{ position: absolute; bottom:42px; left: 42px; width: 24px; height: 24px; } .ys{ position: absolute; top:42px; right:42px; width: 24px; height: 24px; } .yx{ position: absolute; bottom:42px; right:42px; width: 24px; height: 24px; } .fx{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } } .ytBox{ width: 90%; height: 230px; margin-top:24px; background-color: rgba(0, 0, 0, 0.493); 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%; } } .setBtn{ margin-left:30%; width: 60%; display: flex; justify-content: space-between; .comBtn{ cursor: pointer; width: 50%; height: 40px; text-align: center; line-height: 40px; background-color: rgba(3, 42, 113, 0.521); } } .bbBtn{ margin-left:30%; width: 60%; height: 40px; background-color: rgba(3, 42, 113, 0.521); display: flex; justify-content: start; div{ text-align: center; line-height: 40px; } .add{ width: 25%; height: 40px; cursor: pointer; } .bb{ width: 50%; height: 40px; cursor: pointer; background-color: #0326639c; } .jian{ width: 25%; height: 40px; cursor: pointer; } } } } } } } </style>