<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>大华web控件</title>
|
<!-- import Vue.js -->
|
<script src="./lib/vue.js"></script>
|
<!-- import stylesheet -->
|
<link rel="stylesheet" href="./lib/iview.css">
|
<!-- import iView -->
|
<script src="./lib/iview.js"></script>
|
<script src=" ./lib/DHWs.js"></script>
|
<script src="./lib/jquery.js"></script>
|
<link rel="stylesheet" href="./lib/demo.css">
|
|
</head>
|
<body>
|
<div class="maskVideo"></div>
|
<div id="app">
|
<div class="dom" style="width:100%;height:350px;position:relative;">
|
<div id="dom1" class="dom1"></div>
|
<div id="dom2" class="dom2"></div>
|
<div id="dom3" class="dom3"></div>
|
</div>
|
<i-form ref="demo" >
|
<Tabs :value="activePanel" style="position: fixed; top: 350px; left: 100px; height: 550px">
|
<Tab-pane label="登陆模块" name="key1">
|
<Form-item >
|
<i-form :label-width="108">
|
<Form-item class="login" label="登录方式" prop="name">
|
<Radio-group v-model="loginType">
|
<Radio label="1">用户名+密码</Radio>
|
<Radio label="2">token</Radio>
|
</Radio-group>
|
</Form-item>
|
<Form-item label="https" prop="https">
|
<i-select v-model="https" style="width:200px">
|
<i-option v-for="item in httpsList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<Form-item label="登陆Ip" prop="name">
|
<i-input v-model="loginIp" placeholder="登陆Ip" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="登陆端口" prop="name">
|
<i-input v-model="loginPort" placeholder="登陆端口" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item v-show="loginType == '1'" label="用户名" prop="name">
|
<i-input v-model="userName" placeholder="用户名" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item v-show="loginType == '1'" label="密码" prop="name">
|
<i-input v-model="userPwd" type="password" placeholder="密码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item v-show="loginType == '2'" label="token" prop="name">
|
<i-input v-model="token" placeholder="token" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label=" " prop="name">
|
<i-button type="primary" @click="login">登入</i-button>
|
<i-button type="primary" @click="logout">登出</i-button>
|
</Form-item>
|
</i-form>
|
</Form-item>
|
</Tab-pane>
|
<Tab-pane label="控件模块" name="key2">
|
<Form-item >
|
<i-form :label-width="108">
|
<Form-item label="选择控件">
|
<i-select v-model="ctrl" style="width:200px">
|
<i-option v-for="item in ctrlList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
控件类型:
|
<i-select v-model="ctrlType" style="width:160px">
|
<i-option v-for="item in ctrlTypeList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<Form-item label="选择控件属性">
|
<span @click="clickx">控件起始坐标(x,y)：</span>
|
<i-input v-model="crtPosX" ref="inputdata" @on-enter="enterx" @on-focus="focusx" @on-change="changex" @on-blur="blurx" placeholder="x" style="width: 120px"></i-input>
|
<i-input v-model="crtPosY" placeholder="y" style="width: 120px"></i-input>
|
<span>(距离右侧顶部位置,本demo中为了方便查看,控件位置设置距离右侧顶部位置,具体项目中根据实际情况设置)</span>
|
<br/>
|
控件宽高(w,h)：
|
<i-input v-model="crtWidth" placeholder="宽" style="width: 120px"></i-input>
|
<i-input v-model="crtHeight" placeholder="高" style="width: 120px"></i-input>
|
</Form-item>
|
<Form-item label="选择裁剪属性">
|
<span v-on:click="click">相对控件起始坐标(x,y)：</span>
|
<i-input v-model="cutPosX" placeholder="x" @keyup.space.native="keyup" style="width: 120px"></i-input>
|
<i-input v-model="cutPosY" placeholder="y" style="width: 120px"></i-input>
|
<br/>
|
剪切宽高(w,h)：
|
<i-input v-model="cutWidth" placeholder="宽" style="width: 120px"></i-input>
|
<i-input v-model="cutHeight" placeholder="高" style="width: 120px"></i-input>
|
</Form-item>
|
<Form-item label="视频属性" v-show="ctrlType == 'playerWin'">
|
显示视频个数：
|
<i-select v-model="splitNum" style="width:100px">
|
<i-option v-for="item in splitList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
显示模式：
|
<i-select v-model="displayMode" style="width:160px">
|
<i-option v-for="item in displayModeList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<Form-item label="回放时间段" v-show="ctrlType == 'playerWin'">
|
<Date-picker v-model="displayTimeRange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间（不含秒）" style="width: 320px"></Date-picker>
|
</Form-item>
|
<Form-item label="控件操作">
|
<i-button type="primary" @click="create">创建控件</i-button>
|
<i-button type="primary" @click="cut">剪切控件</i-button>
|
<i-button type="primary" @click="setPos">设置控件大小及位置</i-button>
|
<i-button type="primary" @click="setVisible">显隐控件</i-button>
|
<i-button type="primary" @click="destroy">销毁控件</i-button>
|
<!-- <i-button type="primary" @click="() => { showModal = true }">显示弹窗</i-button> -->
|
</Form-item>
|
<Form-item label="通道编码" v-show="ctrlType == 'playerWin'">
|
<i-input v-model="channelId" placeholder="通道编码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="控件播放">
|
<i-button type="primary" @click="realTimeVideo">实时视频</i-button>
|
<i-button type="primary" @click="recordVideo">视频回放</i-button>
|
</Form-item>
|
</i-form>
|
</Form-item>
|
</Tab-pane>
|
<Tab-pane label="弹窗模块" name="key3" style="height: 300px;overflow: auto">
|
<Form-item >
|
<i-form :label-width="200">
|
<Form-item>
|
实时视频：
|
<Form-item label="通道编码">
|
<i-input v-model="channelId" placeholder="通道编码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="弹窗播放">
|
<i-button type="primary" @click="realTimeVideoDialog">弹窗视频</i-button>
|
<i-button type="primary" @click="realTimeVideoDialogMulti">多个弹窗视频</i-button>
|
</Form-item>
|
<hr style="background-color: #eee;height: 1px;border: none;" />
|
回放视频：
|
<Form-item label="通道编码">
|
<i-input v-model="channelId" placeholder="通道编码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="回放时间段">
|
<Date-picker v-model="modalDisplayTimeRange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间（不含秒）" style="width: 320px"></Date-picker>
|
</Form-item>
|
<Form-item label="弹窗播放">
|
<i-button type="primary" @click="recordVideoDialog">弹窗回放</i-button>
|
<i-button type="primary" @click="recordVideoDialogMulti">多个弹窗回放</i-button>
|
</Form-item>
|
<hr style="background-color: #eee;height: 1px;border: none;"/>
|
混合播放视频：
|
<Form-item label="通道编码">
|
<i-input v-model="channelId" placeholder="通道编码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="播放类型">
|
<i-select v-model="mixedVideoDisplayMode" style="width:160px">
|
<i-option v-for="item in mixedVideoDisplayModeList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
|
<Form-item label="混合模式录像开始时间" v-show="mixedVideoDisplayMode == '2'">
|
<Date-picker v-model="mixedVideoTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
|
</Form-item>
|
|
<Form-item label="弹窗播放">
|
<i-button type="primary" @click="mixedVideo">混合播放模式</i-button>
|
</Form-item>
|
</Form-item>
|
</i-form>
|
</Form-item>
|
</Tab-pane>
|
<Tab-pane label="录像下载模块" name="key4">
|
<Form-item >
|
<i-form :label-width="130">
|
<Form-item label="录像存储路径设置" style="border-bottom: 1px solid #dddddd; padding-bottom: 20px;">
|
<i-input v-model="recordPath" placeholder="输入路径" style="width: 320px"></i-input>
|
<i-button type="primary" @click="setDownPath">录像存储路径设置</i-button>
|
</Form-item>
|
<Form-item>
|
<Form-item label="通道名称">
|
<i-input v-model="downloadName" placeholder="channelName" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="通道编码">
|
<i-input v-model="channelId" placeholder="通道编码" style="width: 220px"></i-input>
|
</Form-item>
|
<Form-item label="时间段">
|
<Date-picker v-model="downTimeRange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间（不含秒）" style="width: 320px;z-index: 1;"></Date-picker>
|
</Form-item>
|
<Form-item label="下载格式">
|
<i-select v-model="downloadFormat" style="width:100px">
|
<i-option v-for="item in downloadFormatList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<Form-item label="录像来源">
|
<i-select v-model="downloadSource" style="width:100px" @on-change="changeDownloadSource(downloadSource)">
|
<i-option v-for="item in downloadSourceList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<Form-item v-if="showDownloadStreamType" label="码流类型">
|
<i-select v-model="downloadStreamType" style="width:100px">
|
<i-option v-for="item in downloadStreamTypeList" :value="item.value" :key="item.value">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item>
|
<!-- <Form-item label="是否显示下载详情">
|
<i-select v-model="downloadIsShow" style="width:100px">
|
<i-option v-for="item in downloadIsShowList" :value="item.value" :key="item.label">
|
{{ item.label }}
|
</i-option>
|
</i-select>
|
</Form-item> -->
|
<Form-item label="下载录像">
|
<i-button type="primary" @click="download">下载录像</i-button>
|
<i-button type="primary" @click="downloadMulti">多个下载录像</i-button>
|
</Form-item>
|
<Form-item label="截图">
|
<i-button type="primary" @click="previewSnap">截图</i-button>
|
</Form-item>
|
</Form-item>
|
</i-form>
|
</Form-item>
|
</Tab-pane>
|
<!-- <Tab-pane label="轻量级客户端下载" name="key5">
|
<Form-item >
|
<Form-item label="服务器地址" style="border-bottom: 1px solid #dddddd; padding-bottom: 20px;">
|
<i-input v-model="downloadIp" style="width: 320px"></i-input>
|
<i-button type="primary" @click="downloadClient">下载</i-button>
|
</Form-item>
|
</Form-item>
|
</Tab-pane> -->
|
</Tabs>
|
</i-form>
|
</div>
|
</body>
|
<script>
|
// const DHWsInstance = DHWs.getInstance();
|
// console.log(DHWsInstance);
|
const VueInstance = new Vue({
|
el: '#app',
|
watch:{
|
ctrl:function(newValue,oldValue){
|
if(newValue == 'ctrl1'){
|
this.domId = "dom1"
|
}else if(newValue == 'ctrl2'){
|
this.domId = "dom2"
|
this.crtPosX = 0;
|
this.crtPosY = 400;
|
this.crtWidth = 700;
|
this.crtHeight = 300;
|
}else if(newValue == 'ctrl3'){
|
this.domId = "dom3"
|
this.crtPosX = 0;
|
this.crtPosY = 700;
|
this.crtWidth = 700;
|
this.crtHeight = 300;
|
}
|
},
|
mixedVideoDisplayMode:function(newValue,oldValue){
|
console.log(newValue,oldValue);
|
}
|
},
|
data() {
|
return {
|
showModal: true,
|
activePanel: 'key1',
|
isLogin: false,
|
loginType: '1',
|
// loginIp: '10.1.240.10',
|
// userName: 'yanshi',
|
// userPwd: 'dahua123',
|
// loginPort: '8320',
|
loginIp: '10.35.98.219',
|
userName: 'system',
|
userPwd: 'system123',
|
loginPort: '8320',
|
token: '',
|
ctrlType: 'playerWin',
|
https: 1,
|
httpsList: [
|
{
|
value: 0,
|
label: 0
|
},
|
{
|
value: 1,
|
label: 1
|
},
|
],
|
ctrlTypeList: [{
|
value: 'playerWin',
|
label: '播放控件'
|
}, {
|
value: 'realMonitorUI',
|
label: '带设备树实时预览控件'
|
}, {
|
value: 'playbackUI',
|
label: '带设备树视频回放控件'
|
}, {
|
value: 'TVWallUI',
|
label: '视频上墙'
|
}],
|
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: '播放器回放模式'
|
}
|
],
|
mixedVideoDisplayModeList: [
|
{
|
value: 1,
|
label: '播放实时视频'
|
},
|
{
|
value: 2,
|
label: '播放回放视频'
|
}
|
],
|
ctrl: 'ctrl1',
|
splitNum: 1,
|
displayMode: 1,
|
displayTimeRange: [],
|
modalDisplayTimeRange: [],
|
mixedVideoTime: null,
|
channelId: '8ORBqXFlA1D77U45SM1ROC',
|
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: '否'
|
}],
|
cutPosX: 10,
|
cutPosY: 10,
|
cutWidth: 100,
|
cutHeight: 100,
|
crtPosX: 0,
|
crtPosY: 0,
|
crtWidth: 700,
|
crtHeight: 400,
|
domId:"dom1",
|
mixedVideoDisplayMode:2,
|
//downloadIp: "http://10.35.167.203:8314", //http://10.35.98.219:8314
|
isShowTipe: true
|
};
|
},
|
beforeCreate(){
|
const DHWsInstance = DHWs.getInstance();
|
Vue.prototype.ws = DHWsInstance;
|
console.log(this.ws);
|
},
|
created(){
|
// var agent = navigator.userAgent.toLowerCase();
|
// if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0 || agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
|
// this.downloadIp = "http://10.35.167.203:8314"
|
// }else if(agent.indexOf("aarch64") >= 0 || agent.indexOf("mips64") >= 0 || agent.indexOf("x86_64") >= 0){
|
// this.downloadIp = "http://10.35.98.219:8314"
|
// }
|
this.ws.addEventListener('connectStateChange', data => {
|
if(data){
|
console.log("连接成功");
|
}else{
|
console.log("连接失败，下载客户端");
|
this.isShowTipe && Vue.prototype.$Modal.confirm({
|
title: '下载客户端',
|
content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
|
onOk: () => {
|
//这里写下载方法
|
this.isShowTipe = false
|
},
|
onCancel: () => {
|
this.isShowTipe = false
|
}
|
});
|
}
|
});
|
// this.ws.addEventListener('updateDss', () => {
|
// console.log("更新客户端")
|
// Vue.prototype.$Modal.confirm({
|
// title: '客户端更新',
|
// content: '系统检测到新客户端版本，请更新后使用?',
|
// onOk: () => {
|
// this.downloadClient();
|
// },
|
// onCancel: () => {
|
// //detectDssVersion = false;
|
// }
|
// });
|
// });
|
},
|
mounted() {
|
// 今日零时时间戳
|
var nowDate = new Date(new Date().toLocaleDateString()).getTime();
|
// 今日末时时间戳
|
var nowDate1 = nowDate + 1000 * 60 * 60 * 24 - 1;
|
this.displayTimeRange = [this.formatDate(nowDate), this.formatDate(nowDate1)];
|
this.modalDisplayTimeRange = [this.formatDate(nowDate), this.formatDate(nowDate1)];
|
this.mixedVideoTime = this.formatDate(nowDate)
|
this.downTimeRange = [this.formatDate(Date.parse(new Date()) - 1000 * 60 * 60 * 0.5), this.formatDate(Date.parse(new Date()))];
|
// window.onbeforeunload = function (){
|
// this.$ws.logout();
|
// };
|
window.addEventListener('onunload', () => {
|
this.$ws.logout();
|
var timestamp = new Date().getTime();
|
while ((new Date().getTime() - timestamp)<100) {}
|
});
|
|
},
|
methods: {
|
click(){
|
console.log("click");
|
},
|
keyup(){
|
console.log("空格");
|
},
|
isLoginSuccess() {
|
if (!this.ws.isConnectSuccessQt) {
|
this.$Message.info('客户端未连接！');
|
return false;
|
}
|
if (!this.ws.isLoginSuccess) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
return true;
|
},
|
login() { // 调用登录接口
|
this.ws.detectConnectQt().then(res => {
|
if(res) { // 连接客户端成功
|
this.ws.login({
|
loginIp: this.loginIp,
|
loginPort: this.loginPort,
|
userName: this.userName,
|
userPwd: this.loginType == '1' ? this.userPwd : '',
|
token: this.loginType == '2' ? this.token : '',
|
https: this.https
|
})
|
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('请重新安装客户端');
|
}
|
})
|
},
|
logout() { // 调用登出接口
|
this.ws.logout({
|
loginIp: this.loginIp
|
});
|
},
|
create() { // 调用创建控件接口
|
// if (!this.isLogin) {
|
// this.$Message.info('正在登陆客户端，请稍等......');
|
// return false;
|
// }
|
let _this = this;
|
console.log(this.cutPosX,"this.cutPosX")
|
const params = [
|
{
|
ctrlType: this.ctrlType,
|
ctrlCode: this.ctrl,
|
ctrlProperty: {
|
displayMode: this.displayMode,
|
splitNum: this.splitNum,
|
channelList: [{channelId: this.channelId}]
|
},
|
visible: true,
|
domId: this.domId
|
}
|
];
|
this.setPos();
|
_this.ws.createCtrl(params).then(res => {
|
console.log(res);
|
}).catch(e => {
|
console.log(e);
|
});
|
_this.ws.on('createCtrlResult', (res) => {
|
console.warn(res);
|
});
|
|
},
|
cut() { // 调用设置控件属性接口 修改剪切属性
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
const params = [
|
{
|
ctrlCode: this.ctrl,
|
cutList: [
|
{
|
posX: Number(this.cutPosX),
|
posY: Number(this.cutPosY),
|
width: Number(this.cutWidth),
|
height: Number(this.cutHeight)
|
}
|
]
|
}
|
];
|
this.ws.setCtrlPos(params);
|
},
|
setPos(){
|
|
let target = document.getElementById(this.domId)
|
console.log(target,"target");
|
target.style.right = `${this.crtPosX}px`
|
target.style.top = `${this.crtPosY}px`
|
target.style.width = `${this.crtWidth}px`
|
target.style.height = `${this.crtHeight}px`
|
if(document.createEvent) {
|
var event = document.createEvent("HTMLEvents");
|
event.initEvent("resize", true, true);
|
window.dispatchEvent(event);
|
} else if(document.createEventObject) {
|
window.fireEvent("onresize");
|
}
|
},
|
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);
|
},
|
destroy() { // 调用销毁控件接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
const ctrls = this.ws.ctrls.map(i => {
|
if (i.ctrlCode === this.ctrl) {
|
return i.ctrlCode;
|
}
|
});
|
this.ws.destroyCtrl(ctrls);
|
},
|
realTimeVideo() { // 调用控件实时播放接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
this.displayMode = 1;
|
if(this.ws.ctrls.length === 0) {
|
this.$Message.info('请先创建控件！');
|
}
|
const params = {
|
ctrlCode: this.ctrl,
|
channelIds: [this.channelId]
|
};
|
this.ws.openCtrlPreview(params);
|
},
|
recordVideo() { // 调用控件录像播放接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
if(this.ws.ctrls.length === 0) {
|
this.$Message.info('请先创建控件！');
|
return false;
|
}
|
this.displayMode = 2;
|
if(!this.displayTimeRange[0]) {
|
this.$Message.info('请选择起始时间！');
|
return false;
|
}
|
let beginTime = this.formatDate((this.displayTimeRange[0].getTime()));
|
let endTime = this.formatDate((this.displayTimeRange[1].getTime()));
|
const params = [
|
{
|
ctrlCode: this.ctrl,
|
array: [
|
{
|
beginTime: beginTime,
|
endTime: endTime,
|
channelId: this.channelId
|
}
|
]
|
}
|
];
|
this.ws.openCtrlRecord(params);
|
},
|
mixedVideo() { // 调用控件混合弹窗接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
let menuCode = '111';
|
if(!this.modalDisplayTimeRange[0]) {
|
this.$Message.info('请选择起始时间！');
|
return false;
|
}
|
let apearTime = this.formatDate((this.mixedVideoTime.getTime()));
|
let arr = [];
|
if(this.mixedVideoDisplayMode == 1){
|
arr = [{
|
channelId: this.channelId // 通道Id
|
}];
|
}else if(this.mixedVideoDisplayMode == 2){
|
arr = [{
|
channelId: this.channelId, // 通道Id
|
apearTime: apearTime, // 回放开始时间
|
}];
|
}
|
this.ws.openMixedModeDialog(menuCode, arr, []);
|
},
|
realTimeVideoDialog() { // 调用弹窗实时播放接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
const params = [this.channelId];
|
this.ws.openVideo(params);
|
},
|
realTimeVideoDialogMulti() {
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
let params = [];
|
for(let i = 0; i < 9; i++) {
|
params.push(this.channelId);
|
}
|
this.ws.openVideo(params);
|
},
|
recordVideoDialog() { // 调用弹窗录像播放接口
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
if(!this.modalDisplayTimeRange[0]) {
|
this.$Message.info('请选择起始时间！');
|
return false;
|
}
|
let beginTime = this.formatDate((this.modalDisplayTimeRange[0].getTime()));
|
let endTime = this.formatDate((this.modalDisplayTimeRange[1].getTime()));
|
const params = [
|
{
|
beginTime: beginTime,
|
endTime: endTime,
|
channelId: this.channelId
|
}
|
];
|
this.ws.openRecord(params);
|
},
|
recordVideoDialogMulti() {
|
if (!this.isLogin) {
|
this.$Message.info('正在登陆客户端，请稍等......');
|
return false;
|
}
|
if(!this.modalDisplayTimeRange[0]) {
|
this.$Message.info('请选择起始时间！');
|
return false;
|
}
|
let beginTime = this.formatDate((this.modalDisplayTimeRange[0].getTime()));
|
let endTime = this.formatDate((this.modalDisplayTimeRange[1].getTime()));
|
const param =
|
{
|
beginTime: beginTime,
|
endTime: endTime,
|
channelId: this.channelId
|
};
|
params = [];
|
for(let i = 0;i < 9; i++) {
|
params.push(param);
|
}
|
this.ws.openRecord(params);
|
},
|
setDownPath() {
|
this.ws.setDownloadPath(this.recordPath);
|
// this.ws.transparent('setDownloadPath', { downloadPath: this.recordPath }); // 与上面的方法等效
|
this.ws.on('setDownloadPathResult', (res) => {
|
let message = (res && res.params && res.params.result === 0) ? '保存成功' : '保存失败';
|
this.$Message.success(message);
|
});
|
},
|
previewSnap() {
|
this.ws.transparent('openedCtrlPreviewSnap', {
|
ctrlCode: this.ctrl,
|
channelId: this.channelId,
|
serverIp: '10.33.69.199',
|
port: '21',
|
savePath: '123'
|
});
|
},
|
download() {
|
if(this.downTimeRange.length === 0) {
|
this.$Message.info('请选择下载时间段!');
|
return false;
|
}
|
let beginTime = Date.parse(this.downTimeRange[0]) / 1000;
|
let endTime = Date.parse(this.downTimeRange[1]) / 1000;
|
let array = [{
|
channelName: this.downloadName,
|
channelId: this.channelId,
|
beginTime: beginTime,
|
endTime: endTime,
|
format: this.downloadFormat,
|
sourceType: this.downloadSource,
|
streamType: this.downloadStreamType
|
}]
|
// let array = [{
|
// channelName: '中文',
|
// channelId: this.channelId,
|
// beginTime: (Date.parse(new Date()) - 1*24*3600*1000 / 72 - 1*24*3600*1000 / 480) / 1000,
|
// endTime: (Date.parse(new Date()) - 1*24*3600*1000 / 72) / 1000,
|
// format: 0,
|
// sourceType:2,
|
// streamType:1
|
// }]
|
this.ws.downloadVideo(array, true);
|
},
|
downloadMulti() {
|
if(this.downTimeRange.length === 0) {
|
this.$Message.info('请选择下载时间段!');
|
return false;
|
}
|
let beginTime = Date.parse(this.downTimeRange[0]) / 1000;
|
let endTime = Date.parse(this.downTimeRange[1]) / 1000;
|
let param = {
|
channelName: this.downloadName,
|
channelId: this.channelId,
|
beginTime: beginTime,
|
endTime: endTime,
|
format: this.downloadFormat,
|
sourceType: this.downloadSource,
|
streamType: this.downloadStreamType
|
}
|
let array = [];
|
for(let i = 0; i < 5; i++ ) {
|
let p = JSON.parse(JSON.stringify(param));
|
p.channelName = this.downloadName + '' + i;
|
array.push(p);
|
}
|
this.ws.downloadVideo(array, true);
|
},
|
changeDownloadSource() {
|
this.showDownloadStreamType = this.downloadSource == '2';
|
},
|
// 时间戳转 yyyy-MM-dd HH:mm:ss
|
formatDate(inputTime) {
|
var date = new Date(inputTime);
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
m = m < 10 ? ('0' + m) : m;
|
var d = date.getDate();
|
d = d < 10 ? ('0' + d) : d;
|
var h = date.getHours();
|
h = h < 10 ? ('0' + h) : h;
|
var minute = date.getMinutes();
|
var second = date.getSeconds();
|
minute = minute < 10 ? ('0' + minute) : minute;
|
second = second < 10 ? ('0' + second) : second;
|
return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
|
},
|
enterx(){
|
console.log("enter");
|
},
|
focusx(){
|
console.log("focusx");
|
},
|
changex(){
|
console.log("changex");
|
},
|
clickx(){
|
console.log("clickx");
|
this.$refs.inputdata.focus()
|
},
|
blurx(){
|
console.log("blurx");
|
},
|
// downloadClient(){
|
// this.ws.downloadClient(this.downloadIp);
|
// }
|
},
|
})
|
</script>
|
</html>
|
