You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
10 KiB
370 lines
10 KiB
<template> |
|
<div class="box-content"> |
|
<el-col |
|
:span="12" |
|
v-for="item in videoList" |
|
:key="item.id" |
|
class="monitoringBox" |
|
> |
|
<!-- 1#-1F电梯厅 --> |
|
<p class="title">监控视频点位：{{item.name}}</p> |
|
<div class="select flex-center-center"> |
|
<div class="left"> |
|
<span>监控播放方式：</span> |
|
<el-radio @change="radioChange(item)" v-model="item.radio" label="1">实时</el-radio> |
|
<el-radio v-show="item.jurisdiction == 1" @change="radioChange(item)" v-model="item.radio" label="2">回放</el-radio> |
|
</div> |
|
<div v-show="radio=='2'" class="right"> |
|
<span>回放时间：</span> |
|
<el-date-picker @focus='focusFun(item)' @blur="blurFun(item)" v-model="item.value1" type="daterange" align="right" |
|
unlink-panels value-format="timestamp" range-separator="至" start-placeholder="开始日期" |
|
end-placeholder="结束日期" :picker-options="pickerOptions"> |
|
</el-date-picker> |
|
</div> |
|
<el-button v-show="radio=='2'" class="btn" @click="playFun" type="primary">回放</el-button> |
|
</div> |
|
<div :id="item.id" class="monitoring"></div> |
|
</el-col> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
radio: "1", |
|
jurisdiction:true, |
|
monitoringName:'', |
|
pickerOptions: { |
|
shortcuts: [{ |
|
text: '最近一周', |
|
onClick(picker) { |
|
const end = new Date(); |
|
const start = new Date(); |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
picker.$emit('pick', [start, end]); |
|
} |
|
}, { |
|
text: '最近一个月', |
|
onClick(picker) { |
|
const end = new Date(); |
|
const start = new Date(); |
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
picker.$emit('pick', [start, end]); |
|
} |
|
}] |
|
}, |
|
cameraIndexCode:null, |
|
value1: [], |
|
oWebControl: null, |
|
pattern: 0, //实时0/历史1 |
|
initCount:0, |
|
videoList: [] |
|
} |
|
}, |
|
created() { |
|
console.log(this.$route.query) |
|
// this.cameraIndexCode = this.$route.query.id; |
|
// this.monitoringName = this.$route.query.name; |
|
// this.jurisdiction = this.$route.query.jurisdiction; |
|
this.videoList = JSON.parse(this.$route.query.list) |
|
this.videoList.forEach(item => { |
|
item.radio = '1' |
|
item.value1 = [] |
|
item.pattern = 0 |
|
item.oWebControl = null |
|
item.initCount = 0 |
|
}) |
|
console.log(this.jurisdiction) |
|
}, |
|
mounted() { |
|
$(window).resize(() => { |
|
this.videoList.forEach(item => { |
|
if (item.oWebControl != null) { |
|
item.oWebControl.JS_Resize(540, 303); |
|
this.setWndCover(); |
|
} |
|
}) |
|
// if (this.oWebControl != null) { |
|
// this.oWebControl.JS_Resize(1200, 675); |
|
// this.setWndCover(); |
|
// } |
|
}); |
|
$(window).scroll(() => { |
|
this.videoList.forEach(item => { |
|
if (item.oWebControl != null) { |
|
item.oWebControl.JS_Resize(540, 303); |
|
this.setWndCover(); |
|
} |
|
}) |
|
// if (this.oWebControl != null) { |
|
// this.oWebControl.JS_Resize(1200, 675); |
|
// this.setWndCover(); |
|
// } |
|
}); |
|
this.videoList.forEach(item => { |
|
this.videoSwiper(item) |
|
}) |
|
}, |
|
beforeDestroy() { |
|
this.closeWindow(); //关闭插件 |
|
}, |
|
methods: { |
|
// 选择时间获取焦点 |
|
focusFun(item) { |
|
item.oWebControl.JS_CuttingPartWindow(160, 0, 760, 263); |
|
}, |
|
// 选择时间失去焦点 |
|
blurFun(item) { |
|
item.oWebControl.JS_RepairPartWindow(160, 0, 760, 263); |
|
}, |
|
// 单选事件 |
|
radioChange(item) { |
|
let that = this; |
|
console.log(item) |
|
item.oWebControl.JS_HideWnd(); |
|
item.oWebControl.JS_DestroyWnd().then(function() { // oWebControl 为 WebControl 的对象 |
|
if (item.radio == "1") { |
|
item.pattern = 0; |
|
item.value1 = []; |
|
} else { |
|
let startTime = new Date(new Date().toLocaleDateString()).getTime(); |
|
let endTime = Date.parse(new Date()); |
|
item.value1.push(startTime, endTime) |
|
item.pattern = 1; |
|
} |
|
that.videoSwiper(item) |
|
}, function() { |
|
// 销毁插件窗口失败 |
|
}); |
|
}, |
|
// 回放 |
|
playFun() { |
|
// this.closeWindow(); |
|
this.preview() |
|
}, |
|
//关闭视频窗口 |
|
closeWindow() { |
|
this.videoList.forEach(item => { |
|
if (item.oWebControl != null) { |
|
item.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 |
|
item.oWebControl.JS_Disconnect().then( |
|
() => { |
|
// 断开与插件服务连接成功 |
|
}, |
|
() => { |
|
// 断开与插件服务连接失败 |
|
} |
|
); |
|
} |
|
}) |
|
}, |
|
// 自适应 |
|
setWndCover() { |
|
let iWidth = $(window).width(); |
|
let iHeight = $(window).height(); |
|
let oDivRect = $("#playWnd") |
|
.get(0) |
|
.getBoundingClientRect(); |
|
let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0; |
|
let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0; |
|
let iCoverRight = |
|
oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0; |
|
let iCoverBottom = |
|
oDivRect.bottom - iHeight > 0 ? |
|
Math.round(oDivRect.bottom - iHeight) : |
|
0; |
|
|
|
iCoverLeft = iCoverLeft > 1200 ? 1200 : iCoverLeft; |
|
iCoverTop = iCoverTop > 675 ? 675 : iCoverTop; |
|
iCoverRight = iCoverRight > 1200 ? 1200 : iCoverRight; |
|
iCoverBottom = |
|
iCoverBottom > 675 ? 675 : iCoverBottom; |
|
this.oWebControl.JS_RepairPartWindow(0, 0, 1200 + 1, 675); // 多1个像素点防止还原后边界缺失一个像素条 |
|
if (iCoverLeft != 0) { |
|
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 675); |
|
} |
|
if (iCoverTop != 0) { |
|
this.oWebControl.JS_CuttingPartWindow(0, 0, 1200 + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 |
|
} |
|
if (iCoverRight != 0) { |
|
this.oWebControl.JS_CuttingPartWindow( |
|
1200 - iCoverRight, |
|
0, |
|
iCoverRight, |
|
675 |
|
); |
|
} |
|
if (iCoverBottom != 0) { |
|
this.oWebControl.JS_CuttingPartWindow( |
|
0, |
|
675 - iCoverBottom, |
|
1200, |
|
iCoverBottom |
|
); |
|
} |
|
}, |
|
// 初始化 |
|
videoSwiper(item) { |
|
console.log(111, item); |
|
let that = this; |
|
item.oWebControl = new WebControl({ // 创建 WebControl 实例 |
|
szPluginContainer: item.id, // 指定 DIV 窗口标识 |
|
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|
iServicePortEnd: 15909, |
|
// 用于 IE10 使用 ActiveX 的 clsid |
|
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", |
|
cbConnectSuccess: function() { |
|
console.log(222); |
|
item.initCount = 0; |
|
// 创建 WebControl 实例成功 |
|
item.oWebControl.JS_SetWindowControlCallback({ |
|
cbIntegrationCallBack: function(oData) { // oData 是封装的视频 web 插件回调消息的消息体 |
|
console.log(oData,'成功'); // 打印消息体至控制台 |
|
console.log(333); |
|
} |
|
}); |
|
// 实例创建成功后启动服务 |
|
item.oWebControl.JS_StartService("window", { |
|
dllPath: "./VideoPluginConnect.dll" // |
|
}).then(function() { // 启动插件服务成功 |
|
console.log(444); |
|
//JS_CreateWnd 创建视频播放窗口，宽高可设定 |
|
item.oWebControl.JS_CreateWnd(item.id, 540, 303).then(function() { |
|
console.log(555); |
|
item.oWebControl.JS_RequestInterface({ |
|
funcName: "init", |
|
argument: JSON.stringify({ |
|
"appkey": "29642784", |
|
"ip": "192.168.10.206", |
|
"port": 443, |
|
"secret": "KsHYZUgpeWRSDM7E6Xhj", |
|
"enableHTTPS": 1, |
|
"language": "zh_CN", |
|
"layout": "1x1", |
|
"playMode": item.pattern, |
|
"reconnectDuration": 5, |
|
"reconnectTimes": 5, |
|
"showSmart": 0, |
|
"showToolbar": 1, |
|
"toolBarButtonIDs": "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100", |
|
"snapDir": "D:/snap", |
|
"videoDir": "D:/video" |
|
}) |
|
}).then((oData) => { |
|
console.log(666); |
|
item.oWebControl.JS_Resize(540, 303); |
|
}) |
|
that.preview(item) |
|
}); |
|
}, function() { |
|
// 启动插件服务失败 |
|
}); |
|
}, |
|
cbConnectError: function() { |
|
// 创建 WebControl 实例失败 |
|
item.oWebControl = null; |
|
$('#' + item.id).html("插件未启动，正在尝试启动，请稍候..."); |
|
// 程序未启动时执行 error 函数，采用 wakeup 来启动程序 |
|
WebControl.JS_WakeUp("VideoWebPlugin://"); |
|
item.initCount++; |
|
if (item.initCount < 3) { |
|
setTimeout(() => { |
|
that.videoSwiper(item); |
|
}, 3000) |
|
} else { |
|
$('#' + item.id).html( |
|
"插件启动失败，请检查插件是否安装！ <a style='text-decoration:underline;color: #409EFF;' href='http://10.90.100.203:8080/VideoWebPlugin.exe'>点击下载</a>" |
|
); |
|
} |
|
}, |
|
cbConnectClose: function(bNormalClose) { |
|
// 异常断开：bNormalClose = false |
|
// JS_Disconnect 正常断开：bNormalClose = true |
|
item.oWebControl = null; |
|
} |
|
}) |
|
}, |
|
// 预览 |
|
preview(item) { |
|
let that = this; |
|
if (item.radio == "1") { |
|
item.oWebControl.JS_RequestInterface({ |
|
"argument": { |
|
"authUuid": "", |
|
"cameraIndexCode": item.id, |
|
"ezvizDirect": 0, |
|
"gpuMode": 0, |
|
"streamMode": 1, |
|
"transMode": 1, |
|
"wndId": 0 |
|
}, |
|
"funcName": "startPreview" |
|
}) |
|
} else { |
|
let startTime = (item.value1[0] / 1000).toString(); |
|
let endTime = (item.value1[1] / 1000).toString(); |
|
item.oWebControl.JS_RequestInterface({ |
|
"argument": { |
|
"authUuid": "", |
|
"cameraIndexCode": item.id, |
|
"endTimeStamp": endTime, |
|
"ezvizDirect": 0, |
|
"gpuMode": 0, |
|
"playTimeStamp": startTime, |
|
"recordLocation": 0, |
|
"startTimeStamp": startTime, |
|
"transMode": 1, |
|
"wndId": 0, |
|
"cascade": 1 |
|
}, |
|
"funcName": "startPlayback" |
|
}) |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
/deep/ .el-radio { |
|
color: #fff; |
|
} |
|
.box-content{ |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
background-color: black; |
|
} |
|
.monitoringBox { |
|
// width: 48%; |
|
height: 50%; |
|
// background-color: black; |
|
color: white; |
|
|
|
.title { |
|
padding: 30px 0; |
|
margin: 0; |
|
text-align: center; |
|
font-size: 36px; |
|
font-weight: bold; |
|
} |
|
|
|
.right { |
|
margin-left: 80px; |
|
} |
|
|
|
.btn { |
|
margin-left: 50px; |
|
} |
|
|
|
.monitoring { |
|
width: 540px; |
|
height: 303px; |
|
margin: auto; |
|
margin-top: 10px; |
|
// margin: 50px auto 0; |
|
} |
|
} |
|
</style>
|
|
|