haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

吊装视频

This commit is contained in:
cwchen 2024-08-27 08:55:35 +08:00
parent a4547edefc
commit 1a6b4885b8
2 changed files with 222 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
public/dz_video.html
View File

@ -1,210 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css" >
html, body {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
}
button {
font-size: 12px;
color: #232323;
}
</style>
<link href="css/chunk-common.css" rel="stylesheet">
<script type="text/javascript">
var video;
window.onVideoRealPlayLoad = function(suport, v) {
if (suport == false) return alert("不支持该浏览器！");
video = v;
//this.init();
}
//初始化================================================================================================
function init() {
var videoIp = document.getElementById("videoIp").value;
var videoPort = parseInt(document.getElementById("videoPort").value);
var timeout = document.getElementById("timeout").value;
var user = document.getElementById("user").value;
var pwd = document.getElementById("pwd").value;
var row = parseInt(document.getElementById("row").value);
var col = parseInt(document.getElementById("col").value);
video.init({ip:videoIp, port:videoPort, user:user, pwd:pwd, timeout:timeout, row:row, col:col, toolbar:'top'/*top|bottom|false*/, onServerOpen:onServerOpen, onServerClose:onServerClose, onVideoClose:onVideoClose});
}
function onServerOpen(time) {
alert("第"+time+"次连接上视频服务器");
}
function onServerClose(time) {
alert("第"+time+"次断开视频服务器");
}
//视频================================================================================================
function onVideoClose(sim, chn) {
alert("视频关闭 SIM卡号:"+sim+" 通道号:"+chn);
}
function playVideo() {
var playTitle = document.getElementById("playTitle").value;
var playSim = document.getElementById("playSim").value;
var playChn = document.getElementById("playChn").value;
var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流) 可不传该参数
var cloud = document.getElementById("cloud").checked;
var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
if (ret === 1) {
alert("成功播放");
} else if (ret === -1) {
alert("窗口播放满了,不播放");
} else if (ret === 0) {
alert("该设备通道已经有窗口在播放");
<style type="text/css">
html,
body {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
}
}
function closeVideo() {
var playSim = document.getElementById("playSim").value;
var playChn = document.getElementById("playChn").value;
video.closeVideo(playSim, playChn);
}
//对讲================================================================================================
function playTalk() {
var sim = document.getElementById("sim").value;
var chn = document.getElementById("chn").value;
video.playTalk(sim, chn, onTalkResult, onTalkClose);
}
function onTalkResult(state, sim, chn, tip) {
if (state === 0) return alert("设备请求失败　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
if (state === 1) return alert("对讲成功　SIM卡号:"+sim+" 通道号:"+chn);
if (state === 2) return alert("设备请求成功，但获取不到麦克风！　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
}
function onTalkClose(sim, chn) {
alert("对讲关闭　SIM卡号:"+sim+" 通道号:"+chn);
}
function closeTalk() {
video.closeTalk();
}
//监听================================================================================================
function playListen() {
var sim = document.getElementById("sim").value;
var chn = document.getElementById("chn").value;
video.playListen(sim, chn, onListenResult, onListenClose);
}
function onListenResult(state, sim, chn, tip) {
if (state === 0) return alert("设备监听失败　SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
if (state === 1) return alert("监听成功　SIM卡号:"+sim+" 通道号:"+chn);
}
function onListenClose(sim, chn) {
alert("监听关闭　SIM卡号:"+sim+" 通道号:"+chn);
}
function closeListen() {
video.closeListen();
}
//布局================================================================================================
function regrid() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
video.regrid(parseInt(row), parseInt(col));
}
//关闭全部================================================================================================
function closeAll() {
video.closeAll();
}
button {
font-size: 12px;
color: #232323;
}
</style>
//销毁全部================================================================================================
function destroy() {
video.destroy();
video = null;
}
function toolbar(v) {
video && (video.toolbar = v);
}
</script>
<link href="css/chunk-common.css" rel="stylesheet">
<script type="text/javascript">
let devCode = null;
// 接受父页面传递的参数
window.addEventListener('message', function (event) {
const params = event.data;
console.error(params);
// 获取到设备编码并进行处理
devCode = params.devCode;
this.init();
}, false);
// 视频参数
const videoParam = {
'videoIp': '8.142.156.35',
'videoPort': 9988,
'timeout': 0,
'user': 'TSH',
'pwd': '77804d2ba1922c33',
'row': 2,
'col': 2,
};
var video;
window.onVideoRealPlayLoad = function (suport, v) {
if (suport == false) return alert("不支持该浏览器！");
video = v;
// 设置播放窗口为 2 * 2
video.regrid(2, 2);
}
//初始化================================================================================================
async function init() {
var videoIp = videoParam.videoIp;
var videoPort = videoParam.videoPort;
var timeout = videoParam.timeout;
var user = videoParam.user;
var pwd = videoParam.pwd;
var row = videoParam.row;
var col = videoParam.col;
video.init({ ip: videoIp, port: videoPort, user: user, pwd: pwd, timeout: timeout, row: row, col: col, toolbar: 'top'/*top|bottom|false*/, onServerOpen: onServerOpen, onServerClose: onServerClose, onVideoClose: onVideoClose });
setTimeout(() => {
loopPlayVideo();
}, 1500);
}
/* 循环播放视频 */
async function loopPlayVideo() {
for (let index = 1; index <= 4; index++) {
let obj = {
playTitle: "通道" + index,
playSim: devCode,
playChn: index,
}
await playVideo(obj);
}
}
function onServerOpen(time) {
alert("第" + time + "次连接上视频服务器");
}
function onServerClose(time) {
alert("第" + time + "次断开视频服务器");
}
//视频================================================================================================
function onVideoClose(sim, chn) {
console.log("视频关闭 SIM卡号:" + sim + " 通道号:" + chn);
}
async function playVideo(obj) {
return new Promise((resolve, reject) => {
setTimeout(() => {
var playTitle = obj.playTitle;
var playSim = obj.playSim;
var playChn = obj.playChn;
var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流) 可不传该参数
var cloud = true;
var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
if (ret === 1) {
console.error(playSim + '-' + playChn + '成功播放');
resolve(true);
} else if (ret === -1) {
alert("窗口播放满了,不播放");
reject(false);
} else if (ret === 0) {
alert("该设备通道已经有窗口在播放");
reject(false);
}
}, 1000);
});
}
function closeVideo() {
var playSim = document.getElementById("playSim").value;
var playChn = document.getElementById("playChn").value;
video.closeVideo(playSim, playChn);
}
//对讲================================================================================================
function playTalk() {
var sim = document.getElementById("sim").value;
var chn = document.getElementById("chn").value;
video.playTalk(sim, chn, onTalkResult, onTalkClose);
}
function onTalkResult(state, sim, chn, tip) {
if (state === 0) return alert("设备请求失败　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
if (state === 1) return alert("对讲成功　SIM卡号:" + sim + " 通道号:" + chn);
if (state === 2) return alert("设备请求成功，但获取不到麦克风！　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
}
function onTalkClose(sim, chn) {
alert("对讲关闭　SIM卡号:" + sim + " 通道号:" + chn);
}
function closeTalk() {
video.closeTalk();
}
//监听================================================================================================
function playListen() {
var sim = document.getElementById("sim").value;
var chn = document.getElementById("chn").value;
video.playListen(sim, chn, onListenResult, onListenClose);
}
function onListenResult(state, sim, chn, tip) {
if (state === 0) return alert("设备监听失败　SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
if (state === 1) return alert("监听成功　SIM卡号:" + sim + " 通道号:" + chn);
}
function onListenClose(sim, chn) {
alert("监听关闭　SIM卡号:" + sim + " 通道号:" + chn);
}
function closeListen() {
video.closeListen();
}
//布局================================================================================================
function regrid() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
video.regrid(parseInt(row), parseInt(col));
}
//关闭全部================================================================================================
function closeAll() {
video.closeAll();
}
//销毁全部================================================================================================
function destroy() {
video.destroy();
video = null;
}
function toolbar(v) {
video && (video.toolbar = v);
}
</script>
</head>
<body>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:5px;">
<span>视频服务器IP</span>
<input type="text" id="videoIp" value="8.142.156.35" style="width:100px;">
<span style="margin-left:5px;">端口</span>
<input type="text" id="videoPort" value="9988" style="width:30px;">
<span style="margin-left:5px;">未操作关闭(0不关闭)</span>
<input type="text" id="timeout" value="300" style="width:30px;">
<span>秒</span>
<span style="margin-left:5px;">登录用户</span>
<input type="text" id="user" value="TSH" style="width:47px;">&nbsp;&nbsp;
<span style="margin-left:5px;">登录密码</span>
<input type="text" id="pwd" value="77804d2ba1922c33" style="width:120px;">&nbsp;&nbsp;
<button onclick="init()">初始化</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>设备SIM卡号</span>
<input type="text" id="playSim" value="19500000002" style="width:100px;">
<span style="margin-left:5px;">通道号</span>
<input type="text" id="playChn" value="1" style="width:30px;">
<span style="margin-left:5px;">标题</span>
<input type="text" id="playTitle" value="车辆A-通道B" style="margin-left:5px;width:95px;">
<span style="margin-left:5px;">云台</span>
<input type="checkbox" id="cloud" checked/>&nbsp;&nbsp;
<button type="button" onclick="playVideo()">播放视频</button>
<button type="button" onclick="closeVideo()">停止视频</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>设备SIM卡号</span>
<input type="text" id="sim" value="19500000002" style="width:100px;">
<span style="margin-left:5px;">通道号</span>
<input type="text" id="chn" value="2" style="width:30px;">&nbsp;
<button type="button" onclick="playTalk()">开始对讲</button>
<button type="button" onclick="closeTalk()">停止对讲</button>&nbsp;&nbsp;
<button type="button" onclick="playListen()">开始监听</button>
<button type="button" onclick="closeListen()">停止监听</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>工具栏</span>
<button type="button" onclick="toolbar('top')">顶</button>
<button type="button" onclick="toolbar('bottom')" style="margin-left:-5px;">底</button>
<button type="button" onclick="toolbar(false)" style="margin-left:-5px;">无</button>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="row" value="3" style="width:15px;">行
<input type="text" id="col" value="3" style="width:15px;">列
<button type="button" onclick="regrid()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="closeAll()" >关闭所有视频/对讲/监听</button>&nbsp;&nbsp;
<button onclick="destroy()">离开页面销毁</button>
</div>
<div style="width:calc(100% - 10px);height:calc(100% - 147px);position:absolute;left:5px;top:142px;">
<body>
<div style="width:calc(100% - 10px);height:calc(100% - 50px);position:absolute;left:5px;top:40px;">
<div id="VideoRealPlay"></div>
</div>
<script src="js/chunk-vendors.js"></script>
<script src="js/chunk-common.js"></script>
<script src="js/VideoRealPlay.js"></script>
</body>
</html>
</html>

44
src/views/construction/manage/hoistManage/hoistManage.vue
View File

@ -7,7 +7,8 @@
<el-button type="primary" plain @click="searchData">查询</el-button>
</div>
<div class="dev-box" v-if="isShow">
<div class="dev-info-box layout" @click="clickDev(item.id)" v-for="item in devArr" :key="item.id">
<div :class="getStyle(item)" @click="sendParams(item.devCode, index)" v-for="(item, index) in devArr"
:key="item.id">
<img :src="dz_dev_img">
<div class="layout dev-info">
<div>{{ item.proName }}</div>
@ -29,7 +30,6 @@
<div class="center-2 layout">
<!-- 吊装视频播放 -->
<iframe ref="iframePage" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>
<!-- <button @click="openDzVideo">吊装视频</button> -->
</div>
</div>
<div class="right">
@ -156,7 +156,10 @@ export default {
},
// 表单校验
rules: {},
htmlContent: '/dz_video.html'
htmlContent: '/dz_video.html',
nocheckStyle: ['dev-info-box', 'layout', 'nocheck'],
checkStyle: ['dev-info-box', 'layout', 'check'],
warnStyle: ['dev-info-box', 'layout', 'warn'],
};
},
created() {
@ -166,14 +169,24 @@ export default {
},
mounted() {
this.$nextTick(() => {
// this.$refs.iframePage.src = this.htmlContent + '?timestamp=' + new Date().getTime();
this.$refs.iframePage.src = this.htmlContent;
// alert( this.$refs.iframePage.src);
})
},
methods: {
openDzVideo(){
window.open(this.htmlContent);
/* 吊装设备点击赋值 */
getStyle(item) {
if (!item.status) {
return this.nocheckStyle;
} else if (item.status === 'check') {
return this.checkStyle
} else if (item.status === 'warn') {
return this.warnStyle
}
},
/* 向吊装视频传递参数 */
sendParams(devCode, index) {
this.devArr[index].status = 'check'
this.$refs.iframePage.contentWindow.postMessage({ devCode: devCode }, '*');
},
/* 加载吊装预警设备列表 */
laodDzWarnList() {
@ -272,10 +285,6 @@ export default {
},
searchData() {
this.laodDzWarnList();
},
/* 吊装设备点击事件 */
clickDev(id) {
},
/* 近电感应设备点击事件 */
clickJdDev(id) {
@ -432,7 +441,6 @@ export default {
width: 100%;
margin: 0 0 4% 0;
height: 160px;
border: 1px solid #cccccc;
border-radius: 6px;
font-size: 15px;
justify-content: space-evenly;
@ -443,6 +451,18 @@ export default {
cursor: pointer;
}
.nocheck {
border: 1px solid #cccccc;
}
.check {
border: 1px solid green;
}
.warn {
border: 1px solid red;
}
.dev-info {
width: calc(100% - 104px);
height: 100%;