413 lines
11 KiB
Vue
413 lines
11 KiB
Vue
|
<!--
|
||
|
|
* @Author: hisense.wuhongjian
|
||
|
|
* @Date: 2021-05-21 17:43:34
|
||
|
|
* @LastEditors: hisense.wuhongjian
|
||
|
|
* @LastEditTime: 2021-12-01 13:32:53
|
||
|
|
* @Description: 告诉大家这是什么
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="dh-view" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const DHWsInstance = DHWs.getInstance({
|
||
|
|
reConnectCount: 2,
|
||
|
|
connectionTimeout: 30 * 1000,
|
||
|
|
messageEvents: {
|
||
|
|
loginState() {
|
||
|
|
console.log('aaaa')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}) // 获取对象实例，使用单例模式，唯一
|
||
|
|
DHWsInstance.detectConnectQt().then((res) => {
|
||
|
|
if (res) {
|
||
|
|
console.info('登陆成功')
|
||
|
|
} else {
|
||
|
|
console.info('登陆失败,重新登录')
|
||
|
|
DHWsInstance.login({
|
||
|
|
loginIp: _global.config.loginInfo.loginIp,
|
||
|
|
loginPort: _global.config.loginInfo.loginPort,
|
||
|
|
userName: _global.config.loginInfo.userName,
|
||
|
|
userPwd: _global.config.loginInfo.userPwd,
|
||
|
|
})
|
||
|
|
// this.$Message.info('登录中...');
|
||
|
|
DHWsInstance.on('loginState', (res) => {
|
||
|
|
// this.isLogin = res;
|
||
|
|
if (res) {
|
||
|
|
// this.$Message.success('登录成功');
|
||
|
|
// this.activePanel = 'key2'
|
||
|
|
} else {
|
||
|
|
// this.$Message.info('登录失败');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
import mybus from '@/myplugins/mybus'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
isDestroyed: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
posX: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
posY: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
channelId: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
count: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
// ws: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {};
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
ws: DHWsInstance,
|
||
|
|
activePanel: 'key12580',
|
||
|
|
isLogin: false,
|
||
|
|
loginType: '1',
|
||
|
|
loginIp: _global.config.loginInfo.loginIp,
|
||
|
|
loginPort: _global.config.loginInfo.loginPort,
|
||
|
|
userName: _global.config.loginInfo.userName,
|
||
|
|
userPwd: _global.config.loginInfo.userPwd,
|
||
|
|
ctrlType: 'playerWin',
|
||
|
|
ctrlList: [
|
||
|
|
{
|
||
|
|
value: 'ctrl1',
|
||
|
|
label: '控件1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'ctrl2',
|
||
|
|
label: '控件2',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'ctrl3',
|
||
|
|
label: '控件3',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
splitList: [
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
label: '1 * 1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 4,
|
||
|
|
label: '2 * 2',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 9,
|
||
|
|
label: '3 * 3',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
displayModeList: [
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
label: '播放器预览模式',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 2,
|
||
|
|
label: '播放器回放模式',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
ctrl: 'ctrl133',
|
||
|
|
splitNum: 1,
|
||
|
|
displayMode: 1,
|
||
|
|
displayTimeRange: [],
|
||
|
|
recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
|
||
|
|
downloadName: '',
|
||
|
|
downTimeRange: [],
|
||
|
|
downloadFormat: 0,
|
||
|
|
downloadFormatList: [
|
||
|
|
{
|
||
|
|
value: 0,
|
||
|
|
label: 'dav',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
label: 'avi',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 2,
|
||
|
|
label: 'mp4',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
downloadSource: 3,
|
||
|
|
downloadSourceList: [
|
||
|
|
{
|
||
|
|
value: 3,
|
||
|
|
label: '中心录像',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 2,
|
||
|
|
label: '设备录像',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
showDownloadStreamType: false,
|
||
|
|
downloadStreamType: 1,
|
||
|
|
downloadStreamTypeList: [
|
||
|
|
{
|
||
|
|
value: 1,
|
||
|
|
label: '主码流',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 2,
|
||
|
|
label: '辅码流',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 3,
|
||
|
|
label: '三码流',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
downloadIsShow: true,
|
||
|
|
downloadIsShowList: [
|
||
|
|
{
|
||
|
|
value: true,
|
||
|
|
label: '是',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: false,
|
||
|
|
label: '否',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
// posX: 650,
|
||
|
|
// posY: 120,
|
||
|
|
// width: 1250,
|
||
|
|
height: 800,
|
||
|
|
ratio: 100,
|
||
|
|
scrollX: 0,
|
||
|
|
scrollXH: 0,
|
||
|
|
scrollY: 0,
|
||
|
|
scrollYW: 0,
|
||
|
|
cutPosX: 0,
|
||
|
|
cutPosY: 0,
|
||
|
|
cutWidth: 100,
|
||
|
|
cutHeight: 100,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
channelId() {
|
||
|
|
console.log('监测到了节点的变化', this.channelId)
|
||
|
|
// mybus.$emit('destroyVideoSur', true);
|
||
|
|
// this.login();
|
||
|
|
|
||
|
|
this.realTimeVideo()
|
||
|
|
},
|
||
|
|
count() {
|
||
|
|
// this.setVisible();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// this.destroy();
|
||
|
|
// this.login();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.realTimeVideo()
|
||
|
|
// mybus.$emit('destroyVideoSur', true);
|
||
|
|
// this.loginOut();
|
||
|
|
// this.login();
|
||
|
|
// mybus.$off('destroyDHView');
|
||
|
|
// mybus.$on('destroyDHView', val =>{
|
||
|
|
// console.log('销毁弹窗插件', val);
|
||
|
|
// if(!val) {
|
||
|
|
// this.destroy();
|
||
|
|
// this.loginOut();
|
||
|
|
// } else {
|
||
|
|
// this.login();
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loginOut() {
|
||
|
|
this.ws.logout({
|
||
|
|
loginIp: _global.config.loginInfo.loginIp,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
create() {
|
||
|
|
// 调用创建控件接口
|
||
|
|
if (!this.isLogin) {
|
||
|
|
// this.$Message.info('正在登陆客户端，请稍等......');
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
const params = [
|
||
|
|
{
|
||
|
|
ctrlType: this.ctrlType,
|
||
|
|
ctrlCode: this.ctrl,
|
||
|
|
ctrlProperty: {
|
||
|
|
displayMode: this.displayMode,
|
||
|
|
splitNum: this.splitNum,
|
||
|
|
channelList: [{ channelId: this.channelId }],
|
||
|
|
},
|
||
|
|
visible: true,
|
||
|
|
posX: this.posX,
|
||
|
|
posY: this.posY,
|
||
|
|
width: this.width,
|
||
|
|
height: this.height,
|
||
|
|
ratio: this.ratio,
|
||
|
|
scrollX: this.scrollX,
|
||
|
|
scrollY: this.scrollY,
|
||
|
|
scrollXH: this.scrollXH,
|
||
|
|
scrollYW: this.scrollYW,
|
||
|
|
cutList: [
|
||
|
|
{
|
||
|
|
posX: 0,
|
||
|
|
posY: 0,
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
this.ws.createCtrl(params)
|
||
|
|
this.ws.on('createCtrlResult', (res) => {
|
||
|
|
console.info('插件返回信息', res)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
login() {
|
||
|
|
// 调用登录接口
|
||
|
|
this.ws.detectConnectQt().then((res) => {
|
||
|
|
if (res) {
|
||
|
|
// 连接客户端成功
|
||
|
|
this.ws.login({
|
||
|
|
loginIp: _global.config.loginInfo.loginIp,
|
||
|
|
loginPort: _global.config.loginInfo.loginPort,
|
||
|
|
userName: _global.config.loginInfo.userName,
|
||
|
|
userPwd: _global.config.loginInfo.userPwd,
|
||
|
|
https: 1,
|
||
|
|
})
|
||
|
|
// this.$Message.info('登录中...');
|
||
|
|
this.ws.on('loginState', (res) => {
|
||
|
|
this.isLogin = res
|
||
|
|
if (res) {
|
||
|
|
this.$Message.success('登录成功')
|
||
|
|
// this.activePanel = 'key2';
|
||
|
|
} else {
|
||
|
|
this.$Message.info('登录失败')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 连接客户端失败
|
||
|
|
// this.$Message.info('请重新安装客户端');
|
||
|
|
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
|
||
|
|
confirmButtonText: '下载',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
const agent = this.getPCNum()
|
||
|
|
if (agent === 32) {
|
||
|
|
// 64位操作系统
|
||
|
|
this.downloadFile(
|
||
|
|
_global.config.loginInfo.name_32,
|
||
|
|
_global.config.loginInfo.url_32
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
// 32位操作系统
|
||
|
|
this.downloadFile(
|
||
|
|
_global.config.loginInfo.name_64,
|
||
|
|
_global.config.loginInfo.url_64
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
downloadFile(name, url) {
|
||
|
|
const alink = document.createElement('a')
|
||
|
|
alink.download = name // 文件名,大部分浏览器兼容,IE10及以下不兼容
|
||
|
|
alink.href = url // 创建 url地址
|
||
|
|
alink.click() // 自动点击
|
||
|
|
},
|
||
|
|
getPCNum() {
|
||
|
|
const agent = navigator.userAgent.toLowerCase()
|
||
|
|
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
|
||
|
|
return 32
|
||
|
|
}
|
||
|
|
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
|
||
|
|
return 64
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setVisible() {
|
||
|
|
// 调用设置控件显隐接口
|
||
|
|
if (!this.isLogin) {
|
||
|
|
// this.$Message.info("正在登陆客户端，请稍等......");
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
const params = [
|
||
|
|
{
|
||
|
|
ctrlCode: this.ctrl,
|
||
|
|
visible: !this.ws.ctrls.find((i) => {
|
||
|
|
if (i.ctrlCode === this.ctrl) {
|
||
|
|
return i
|
||
|
|
}
|
||
|
|
}).visible,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
this.ws.setCtrlVisible(params)
|
||
|
|
},
|
||
|
|
realTimeVideo() {
|
||
|
|
// // 调用控件实时播放接口
|
||
|
|
// if (!this.isLogin) {
|
||
|
|
// console.log("正在登陆客户端，请稍等......");
|
||
|
|
// // this.$Message.info("正在登陆客户端，请稍等......");
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
// this.displayMode = 1;
|
||
|
|
// if (this.ws.ctrls.length === 0) {
|
||
|
|
// console.log("请先创建控件！");
|
||
|
|
// // this.$Message.info("请先创建控件！");
|
||
|
|
// }
|
||
|
|
// const params = {
|
||
|
|
// ctrlCode: this.ctrl,
|
||
|
|
// channelIds: [this.channelId],
|
||
|
|
// };
|
||
|
|
// this.ws.openCtrlPreview(params);
|
||
|
|
console.log('播放', this.channelId)
|
||
|
|
if (!this.isLogin) {
|
||
|
|
// this.$Message.info('正在登陆客户端，请稍等......');
|
||
|
|
// return false;
|
||
|
|
this.login()
|
||
|
|
}
|
||
|
|
// const params = [this.channelId];
|
||
|
|
console.log('播放', this.channelId)
|
||
|
|
this.ws.openVideo(this.channelId)
|
||
|
|
},
|
||
|
|
destroy() {
|
||
|
|
// 调用销毁控件接口
|
||
|
|
if (!this.isLogin) {
|
||
|
|
// this.login();
|
||
|
|
// this.$Message.info("正在登陆客户端，请稍等......");
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
console.log('销毁插件', this.ws.ctrls)
|
||
|
|
const ctrls = this.ws.ctrls.map((i) => {
|
||
|
|
if (i.ctrlCode === this.ctrl) {
|
||
|
|
return i.ctrlCode
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log('销毁的插件名称', ctrls)
|
||
|
|
this.ws.destroyCtrl(ctrls)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// beforeDestroyed() {
|
||
|
|
// this.destroy()
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
</script>
|