feat: 视频回放管理模块添加
This commit is contained in:
kun
parent
81ade4bd74
commit
0c1665c383
BIN
src/assets/images/overview/startPlay.png
Normal file
BIN
src/assets/images/overview/startPlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 843 B |
BIN
src/assets/images/overview/stopPlay.png
Normal file
BIN
src/assets/images/overview/stopPlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
BIN
src/assets/images/overview3/headerBG2.png
Normal file
BIN
src/assets/images/overview3/headerBG2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@ -83,12 +83,12 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45001/' //上海张江
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45011/' //上海优益（上海建工）
|
||||
// axios.defaults.baseURL = 'http://192.168.34.221:28889/' //郭圣雄本地
|
||||
// axios.defaults.baseURL ='http://192.168.34.221:9111/' //郭圣雄本地
|
||||
axios.defaults.baseURL ='http://192.168.34.221:9111/' //郭圣雄本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
||||
// axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
||||
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
||||
axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
|
||||
// axios.defaults.baseURL = 'http://125.88.207.86:8088/'//中建四局线上（最新）地址
|
||||
// axios.defaults.baseURL = 'http://125.88.207.86:8099/'//中建四局(沙湖)线上（最新）地址
|
||||
|
||||
|
||||
@ -3027,6 +3027,13 @@ const routes2 = [
|
||||
component: (resolve) =>
|
||||
require(["@/views/projectFront/videoManage/overview.vue"], resolve),
|
||||
},
|
||||
// 回放视频
|
||||
{
|
||||
path: "/project/replayVideo",
|
||||
name: "videoOverview",
|
||||
component: (resolve) =>
|
||||
require(["@/views/projectFront/replayVideoManage/overview.vue"], resolve),
|
||||
},
|
||||
// 内网视频
|
||||
{
|
||||
path: "/project/insideVideo",
|
||||
|
||||
@ -46,19 +46,19 @@ export default new Vuex.Store({
|
||||
PAGESIZRS: [10, 20, 30, 50],
|
||||
// UPLOADURL:' http://101.43.164.214:11111/upload/image/',// 百色
|
||||
// FILEURL:' http://101.43.164.214:11111/image/',// 百色
|
||||
// UPLOADURL:'http://192.168.34.221:9111/upload/image/',// 郭圣雄
|
||||
// FILEURL:'http://192.168.34.221:9111/image/',//郭圣雄
|
||||
UPLOADURL:'http://192.168.34.221:9111/upload/image/',// 郭圣雄
|
||||
FILEURL:'http://192.168.34.221:9111/image/',//郭圣雄
|
||||
// UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
|
||||
// FILEURL:'http://10.0.1.43:6023/image/',//测试
|
||||
BASEURL: baseUrl
|
||||
? baseUrl
|
||||
: window.location.protocol + "//" + window.location.host + "/", //正式环境
|
||||
UPLOADURL:
|
||||
window.location.protocol +
|
||||
"//" +
|
||||
window.location.host +
|
||||
"/upload/image", //正式环境
|
||||
FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //正式环境
|
||||
// BASEURL: baseUrl
|
||||
// ? baseUrl
|
||||
// : window.location.protocol + "//" + window.location.host + "/", //正式环境
|
||||
// UPLOADURL:
|
||||
// window.location.protocol +
|
||||
// "//" +
|
||||
// window.location.host +
|
||||
// "/upload/image", //正式环境
|
||||
// FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //正式环境
|
||||
//---------------------------------------------------------------------------------------------
|
||||
// BASEURL: baseUrl
|
||||
// ? baseUrl
|
||||
|
||||
@ -41,3 +41,24 @@ export function getNowTime() {
|
||||
return dateTime
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
export function dateFormat(oDate, fmt) {
|
||||
var o = {
|
||||
"M+": oDate.getMonth() + 1, //月份
|
||||
"d+": oDate.getDate(), //日
|
||||
"h+": oDate.getHours(), //小时
|
||||
"m+": oDate.getMinutes(), //分
|
||||
"s+": oDate.getSeconds(), //秒
|
||||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
|
||||
"S": oDate.getMilliseconds()//毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp("(" + k + ")").test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
}
|
||||
|
||||
@ -0,0 +1,494 @@
|
||||
import './jsencrypt.min.js'
|
||||
// import {
|
||||
// WebControl
|
||||
// } from './jsWebControl-1.0.0.min.js'
|
||||
|
||||
var isChrome = navigator.userAgent.indexOf('Chrome') > -1 // 是否是谷歌
|
||||
|
||||
if (isChrome) {
|
||||
// let WebControl = null
|
||||
var aa = () => import('./jsWebControl-1.0.0.min.js')
|
||||
aa().then(res => {
|
||||
console.log(res)
|
||||
WebControl = res.WebControl
|
||||
})
|
||||
}
|
||||
console.log('谷歌' + isChrome)
|
||||
var oWebControl = null;
|
||||
var pubKey = '';
|
||||
var initCount = 0;
|
||||
var a, b, c, d, types, layouts;
|
||||
var width, height;
|
||||
// var _thiss;
|
||||
// 获取公钥
|
||||
// function getPubKey(callback) {
|
||||
// oWebControl.JS_RequestInterface({
|
||||
// funcName: "getRSAPubKey",
|
||||
// argument: JSON.stringify({
|
||||
// keyLength: 1024
|
||||
// })
|
||||
// }).then(function (oData) {
|
||||
// console.log(oData)
|
||||
// if (oData.responseMsg.data) {
|
||||
// pubKey = oData.responseMsg.data
|
||||
// callback()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// RSA加密
|
||||
function setEncrypt(value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
// 反初始化
|
||||
export function unInitObjPlugin() {
|
||||
console.log('调用unInitObjPlugin', '5555555');
|
||||
//
|
||||
if (!oWebControl) {
|
||||
return false;
|
||||
}
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "destroyWnd"
|
||||
}).then(function (oData) {
|
||||
console.log(JSON.stringify(oData ? oData.responseMsg : ''));
|
||||
console.log('销毁失败');
|
||||
});
|
||||
//
|
||||
var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
|
||||
if (bIE) {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Disconnect().then(function () {
|
||||
console.log("JS_Disconnect");
|
||||
}, function () { });
|
||||
}
|
||||
} else {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_DestroyWnd().then(function () {
|
||||
console.log("JS_DestroyWnd");
|
||||
}, function () { });
|
||||
oWebControl.JS_StopService("window").then(function () {
|
||||
oWebControl.JS_Disconnect().then(function () {
|
||||
console.log("JS_Disconnect");
|
||||
}, function () { });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
//预览视频
|
||||
export function OpenVideo(cameraIndexCode, streamMode, winIndex) {
|
||||
var transMode = +'1'; //传输协议：1、TCP 0、UDP
|
||||
var gpuMode = +'0'; //是否启用GPU硬解：1、启用 0、不启用
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode,
|
||||
streamMode: streamMode,
|
||||
transMode: transMode,
|
||||
gpuMode: gpuMode,
|
||||
wndId: -1
|
||||
})
|
||||
}).then(function (oData) {
|
||||
console.log(oData.responseMsg.code === 336)
|
||||
console.log(JSON.stringify(oData ? oData.responseMsg : ''));
|
||||
|
||||
// if(oData.responseMsg.code === 336){
|
||||
// return
|
||||
// }
|
||||
console.log('预览视频失败');
|
||||
});
|
||||
}
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 页面缩放比例
|
||||
function getRatio() {
|
||||
let bodyWidth = document.body.clientWidth
|
||||
// console.log(window.screen.width)
|
||||
let bodyHeight = document.body.clientHeight
|
||||
let scaleWidthNum = bodyWidth / 1920
|
||||
let scaleHeightNum = bodyHeight / 1080
|
||||
|
||||
let ratio;
|
||||
if (scaleWidthNum > scaleHeightNum) {
|
||||
ratio = scaleHeightNum
|
||||
} else {
|
||||
ratio = scaleWidthNum
|
||||
}
|
||||
return ratio;
|
||||
}
|
||||
|
||||
// 初始化
|
||||
export function InitObjPlugin(appkey, secret, ip, port, type, videoData, layout) {
|
||||
console.log(videoData)
|
||||
a = appkey
|
||||
b = secret
|
||||
c = ip
|
||||
d = port
|
||||
types = type
|
||||
layouts = layout
|
||||
//
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", //指定容器id
|
||||
iServicePortStart: 15900,
|
||||
iServicePortEnd: 15909,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
|
||||
cbConnectSuccess: function () {
|
||||
setCallbacks();
|
||||
oWebControl.JS_StartService("window", {
|
||||
dllPath: "./VideoPluginConnect.dll"
|
||||
//dllPath: "./DllForTest-Win32.dll"
|
||||
}).then(function () {
|
||||
// if (type) {
|
||||
// var a = document.getElementById('videoBoxContainer')
|
||||
// width = a.offsetWidth - 10
|
||||
// height = a.offsetHeight - 60
|
||||
// } else {
|
||||
// console.log(document.getElementById('videoOverview').offsetWidth,document.getElementById('videoOverview').offsetHeight)
|
||||
var bottomHeight = 0
|
||||
// if(window.location.href.indexOf('/project/')!=-1){
|
||||
// bottomHeight = 60
|
||||
// }
|
||||
width = document.getElementById('videoOverview').offsetWidth
|
||||
height = document.getElementById('videoOverview').offsetHeight - bottomHeight
|
||||
let ratio = 1
|
||||
// console.log(JSON.parse(localStorage.getItem('systemInfo')).zoomType)
|
||||
if (enabledProjectV2 != 1) {
|
||||
if (localStorage.getItem('systemInfo') && JSON.parse(localStorage.getItem('systemInfo')).zoomType != 1) {
|
||||
ratio = getRatio()
|
||||
}
|
||||
}
|
||||
console.log(ratio)
|
||||
width = width * ratio
|
||||
height = height * ratio
|
||||
// width = 500
|
||||
// height = 500
|
||||
// console.dir(document.getElementById('videoOverview'))
|
||||
console.log(width, height)
|
||||
// }
|
||||
window.$timeId = null;
|
||||
if (window.localStorage.getItem('isIframe')) {
|
||||
if (window.localStorage.getItem('isIframe') == '1') {
|
||||
// width = 796
|
||||
// height = 672
|
||||
width = width * 0.66
|
||||
height = height * 0.98
|
||||
}
|
||||
console.log(window.localStorage.getItem('isIframe'))
|
||||
}
|
||||
// 0.766667
|
||||
console.log(12)
|
||||
window.onresize = function () {
|
||||
width = document.getElementById('videoOverview').offsetWidth
|
||||
height = document.getElementById('videoOverview').offsetHeight - bottomHeight
|
||||
let ratio = 1
|
||||
// if(enabledProjectV2!=1){
|
||||
// ratio = getRatio()
|
||||
// }
|
||||
width = width * ratio
|
||||
height = height * ratio
|
||||
clearTimeout(window.$timeId);
|
||||
window.$timeId = setTimeout(() => {
|
||||
var a = document.getElementById('videoBoxContainer') || document.querySelector('.videocBox')
|
||||
if (a) {
|
||||
width = a.offsetWidth
|
||||
height = a.offsetHeight - 80
|
||||
}
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(width, height);
|
||||
// setWndCover();
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
oWebControl.JS_CreateWnd("playWnd", width, height, {
|
||||
cbSetDocTitle: function (uuid) {
|
||||
oWebControl._pendBg = false;
|
||||
window.parent.postMessage({
|
||||
action: 'updateTitle',
|
||||
msg: '子页面通知父页面修改title',
|
||||
info: uuid
|
||||
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
||||
}
|
||||
}).then(function () {
|
||||
console.log("JS_CreateWnd success");
|
||||
// ;
|
||||
|
||||
init(videoData)
|
||||
});
|
||||
}, function () {
|
||||
|
||||
});
|
||||
},
|
||||
cbConnectError: function () {
|
||||
console.log("cbConnectError");
|
||||
oWebControl = null;
|
||||
console.log("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
initCount++;
|
||||
console.log(initCount)
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
InitObjPlugin(a, b, c, d, types);
|
||||
}, 3000)
|
||||
} else {
|
||||
console.log("插件启动失败，请检查插件是否安装！");
|
||||
if (confirm("检测到视频插件未安装，是否下载视频插件?")) {
|
||||
// window.location.href = "http://139.159.136.114:8081/itbgp/file/b092b773-ca5a-479d-b5bc-1ed84d46e762.exe"
|
||||
// window.location.href = "/video/VideoWebPlugin.exe"
|
||||
window.location.href = "http://101.43.164.214:11111/image/VideoWebPlugin.rar"
|
||||
// window.location.href = "https://jk.cscec1b1.com:5138/image/VideoWebPlugin.exe"
|
||||
}
|
||||
// _thiss.$confirm('检测到视频插件未安装，是否下载视频插件?', '提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// window.location.href="http://139.217.224.209:8080/itbgp/file/VideoWebPlugin.exe"
|
||||
// }).catch(() => {
|
||||
// _thiss.$message({
|
||||
// type: 'info',
|
||||
// message: '已取消下载'
|
||||
// });
|
||||
// });
|
||||
}
|
||||
},
|
||||
cbConnectClose: function () {
|
||||
console.log("cbConnectClose");
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
//初始化
|
||||
function init(videoData) {
|
||||
console.log(videoData)
|
||||
getPubKey(function () {
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
// var appkey = "20880397"; //综合安防管理平台提供的appkey，必填
|
||||
// var secret = setEncrypt("WhyICfLp0NAalGjRa8Hx"); //综合安防管理平台提供的secret，必填
|
||||
|
||||
var appkey = a; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt(b); //综合安防管理平台提供的secret，必填
|
||||
var ip = c; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = parseInt(d); //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = layouts; //playMode指定模式的布局
|
||||
// var layout = "2x2"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
console.log(width, height, oWebControl)
|
||||
console.log('COMPANY++++++++++++++',COMPANY)
|
||||
console.log(window.localStorage.getItem('isIframe'))
|
||||
|
||||
if (COMPANY=='xingxuan') {
|
||||
oWebControl.oDocOffset.top = 94;
|
||||
oWebControl.oDocOffset.left = 280;
|
||||
}
|
||||
|
||||
|
||||
oWebControl.JS_Resize(width, height);
|
||||
// console.log('OpenVideo')
|
||||
for (let i = 0; i < videoData.length; i++) {
|
||||
if (i < 24 && videoData.length >= i) {
|
||||
// setTimeout(()=>{
|
||||
OpenVideo(videoData[i].serialNumber, 0, i + 1)
|
||||
// },1000)
|
||||
|
||||
}
|
||||
}
|
||||
// oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
});
|
||||
});
|
||||
}
|
||||
//判断有没有初始化插件
|
||||
export function isLoadPlugin(devList, layout) {
|
||||
console.log('isLoadPlugin', oWebControl, devList)
|
||||
if (oWebControl) {
|
||||
devList.forEach(element => {
|
||||
setTimeout(() => {
|
||||
OpenVideo(element.serialNumber, 1)
|
||||
}, 500)
|
||||
|
||||
});
|
||||
} else {
|
||||
InitObjPlugin(
|
||||
devList[0].appId,
|
||||
devList[0].appSecret,
|
||||
devList[0].account,
|
||||
devList[0].password,
|
||||
false,
|
||||
devList, layout
|
||||
);
|
||||
}
|
||||
}
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
console.log(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
//获取公钥
|
||||
function getPubKey(callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
console.log(oData);
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动条scroll
|
||||
// window.onscroll = function () {
|
||||
// if (oWebControl != null) {
|
||||
// width = document.getElementById('videoOverview').offsetWidth
|
||||
// height = document.getElementById('videoOverview').offsetHeight - 0
|
||||
// oWebControl.JS_Resize(width, height);
|
||||
// // setWndCover();
|
||||
// }
|
||||
// }
|
||||
|
||||
// 监听滚动条
|
||||
window.addEventListener('scroll', () => {
|
||||
// console.log('滚动条')
|
||||
if(oWebControl != null){
|
||||
width = document.getElementById('videoOverview').offsetWidth-20
|
||||
height = document.getElementById('videoOverview').offsetHeight-18
|
||||
oWebControl.JS_Resize(width, height );
|
||||
}
|
||||
},true);
|
||||
// 监听窗口
|
||||
// window.addEventListener('resize', () => {
|
||||
// console.log('窗口')
|
||||
// if(oWebControl != null){
|
||||
// width = document.getElementById('videoOverview').offsetWidth-38
|
||||
// height = document.getElementById('videoOverview').offsetHeight-20
|
||||
// oWebControl.JS_Resize(width, height );
|
||||
// }
|
||||
// },true);
|
||||
|
||||
//窗口关闭时销毁插件
|
||||
window.onunload = function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function () { }, function () { });
|
||||
}
|
||||
}
|
||||
export function resizeFn(val) {
|
||||
if (oWebControl) {
|
||||
width = document.getElementById('videoOverview').offsetWidth
|
||||
height = document.getElementById('videoOverview').offsetHeight - 0
|
||||
if (val && val == 1) {
|
||||
oWebControl.JS_Resize(width / 2 + 20, height - 215);
|
||||
} else {
|
||||
oWebControl.JS_Resize(width, height);
|
||||
}
|
||||
|
||||
// setWndCover();
|
||||
}
|
||||
|
||||
}
|
||||
// 设置窗口遮挡
|
||||
function setWndCover() {
|
||||
console.log('setWndCover')
|
||||
var iWidth = document.body.clientWidth;
|
||||
var iHeight = document.body.clientHeight;
|
||||
var oDivRect = document.getElementById('playWnd').getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > width) ? width : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > height) ? height : iCoverTop;
|
||||
iCoverRight = (iCoverRight > width) ? width : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > height) ? height : iCoverBottom;
|
||||
|
||||
if (iLastCoverLeft != iCoverLeft) {
|
||||
console.log("iCoverLeft: " + iCoverLeft);
|
||||
iLastCoverLeft = iCoverLeft;
|
||||
oWebControl.JS_SetWndCover("left", iCoverLeft);
|
||||
}
|
||||
if (iLastCoverTop != iCoverTop) {
|
||||
console.log("iCoverTop: " + iCoverTop);
|
||||
iLastCoverTop = iCoverTop;
|
||||
oWebControl.JS_SetWndCover("top", iCoverTop);
|
||||
}
|
||||
if (iLastCoverRight != iCoverRight) {
|
||||
console.log("iCoverRight: " + iCoverRight);
|
||||
iLastCoverRight = iCoverRight;
|
||||
oWebControl.JS_SetWndCover("right", iCoverRight);
|
||||
}
|
||||
if (iLastCoverBottom != iCoverBottom) {
|
||||
console.log("iCoverBottom: " + iCoverBottom);
|
||||
iLastCoverBottom = iCoverBottom;
|
||||
oWebControl.JS_SetWndCover("bottom", iCoverBottom);
|
||||
}
|
||||
}
|
||||
//隐藏插件窗口
|
||||
export function hidePluginWindow() {
|
||||
// console.log(123)
|
||||
// console.log('hidePluginWindow')
|
||||
oWebControl.JS_HideWnd()
|
||||
// oWebControl.JS_RequestInterface({
|
||||
// funcName: "hideWnd"
|
||||
// }).then(function(data){
|
||||
// console.log('hidePluginWindow',data)
|
||||
// })
|
||||
}
|
||||
//显示插件窗口
|
||||
export function showPluginWindow() {
|
||||
// console.log(112)
|
||||
// console.log('showPluginWindow')
|
||||
oWebControl.JS_ShowWnd()
|
||||
// oWebControl.JS_RequestInterface({
|
||||
// funcName: "showWnd"
|
||||
// }).then(function(data){
|
||||
// console.log('showPluginWindow',data)
|
||||
// })
|
||||
}
|
||||
export function setOffset(l, t) {
|
||||
WebControl.JS_SetDocOffset({
|
||||
left: l,
|
||||
top: t
|
||||
})
|
||||
console.log(l, t, "===============================")
|
||||
}
|
||||
|
||||
export function setWidthAndHeight(width, height) {
|
||||
oWebControl.JS_Resize(width, height);
|
||||
|
||||
}
|
||||
@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<div class="maxBox">
|
||||
<div id="playWnds" class="playWnds"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["devList","isReplayNum","startTime","endTime","showVideo"],
|
||||
data() {
|
||||
return {
|
||||
videoType:"",
|
||||
locationValue:1,
|
||||
//声明公用变量
|
||||
initCount: 0,
|
||||
//初始化参数
|
||||
initparam: {
|
||||
appKey: "",
|
||||
secret: "",
|
||||
apiIp: "",
|
||||
apiPort: 443,
|
||||
layout: "2x2" //这里是来控制你一开始初始化之后的分屏的
|
||||
},
|
||||
pointCode: "",//监控点编号
|
||||
pubKey: "",
|
||||
oWebControl: null,
|
||||
WebControl: null,
|
||||
width:'',
|
||||
height:""
|
||||
};
|
||||
},
|
||||
// props: ["videoPlatformId", "indexCode"],
|
||||
created() {
|
||||
if(this.devList.length > 0){
|
||||
this.initparam.appKey = this.devList[0].appId
|
||||
this.initparam.secret = this.devList[0].appSecret
|
||||
this.initparam.apiIp = this.devList[0].account
|
||||
this.initparam.apiPort = this.devList[0].password
|
||||
this.pointCode = this.devList[0].serialNumber
|
||||
}
|
||||
|
||||
console.log('当前时间默认', this.endTime)
|
||||
console.log('当前时间', this.startTime)
|
||||
|
||||
|
||||
// console.log('拿到的对象',this.initparam)
|
||||
//调用电脑中的插件
|
||||
this.WebControl = WebControl;
|
||||
},
|
||||
// 此处应该是value
|
||||
watch: {
|
||||
devList: function(newVal, oldVal) {
|
||||
console.log('新的值',newVal)
|
||||
this.pointCode = newVal[0].serialNumber;
|
||||
if(newVal.length > 0){
|
||||
this.startPlayback();
|
||||
}
|
||||
},
|
||||
isReplayNum: function(newVal, oldVal) {
|
||||
console.log('新的值',newVal)
|
||||
if(newVal > 0) {
|
||||
this.startPlayback();
|
||||
} else {
|
||||
this.stopAllPlayback();
|
||||
}
|
||||
},
|
||||
// 解决插件层级遮挡问题
|
||||
showVideo: function(newVal, oldVal) {
|
||||
console.log('新的值',newVal)
|
||||
if(newVal) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.init();
|
||||
//页面加载时创建播放实例初始化
|
||||
this.initPlugin();
|
||||
console.log('====')
|
||||
var ratio = this.getRatio()
|
||||
console.log('======比例',this.getRatio())
|
||||
let w1 = document.getElementById('playWnds').offsetWidth
|
||||
let h1 = document.getElementById('playWnds').offsetHeight
|
||||
// this.width = w1 * ratio
|
||||
// this.height = h1 * ratio
|
||||
this.width = w1
|
||||
this.height = h1
|
||||
console.log('宽高',this.width,this.height)
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(() => {
|
||||
if (this.oWebControl != null) {
|
||||
this.oWebControl.JS_Resize(this.width, this.height);
|
||||
this.setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(() => {
|
||||
if (this.oWebControl != null) {
|
||||
this.oWebControl.JS_Resize(this.width, this.height);
|
||||
this.setWndCover();
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.closeWindow();//关闭插件
|
||||
},
|
||||
methods: {
|
||||
get(){
|
||||
this.oWebControl.JS_HideWnd();
|
||||
},
|
||||
hide() {
|
||||
this.oWebControl.JS_HideWnd();
|
||||
},
|
||||
show() {
|
||||
this.oWebControl.JS_ShowWnd();
|
||||
},
|
||||
// this.oWebControl.JS_ShowWnd();
|
||||
// 创建WebControl实例与启动插件
|
||||
initPlugin() {
|
||||
this.oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnds", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: () => {
|
||||
// 创建WebControl实例成功
|
||||
this.oWebControl
|
||||
.JS_StartService("window", {
|
||||
// WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
})
|
||||
.then(
|
||||
() => {
|
||||
console.log('=========初始化成功'),
|
||||
// 启动插件服务成功
|
||||
this.oWebControl.JS_SetWindowControlCallback({
|
||||
// 设置消息回调
|
||||
cbIntegrationCallBack: this.cbIntegrationCallBack() // 封装的推送消息方法
|
||||
});
|
||||
this.oWebControl.JS_CreateWnd("playWnds",this.width, this.height).then(() => {
|
||||
//JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
this.init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
},
|
||||
function() {
|
||||
// 启动插件服务失败
|
||||
}
|
||||
);
|
||||
},
|
||||
cbConnectError: () => {
|
||||
// 创建WebControl实例失败
|
||||
this.oWebControl = null;
|
||||
this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
this.initCount++;
|
||||
if (this.initCount < 3) {
|
||||
setTimeout(() => {
|
||||
this.initPlugin(); // 重新创建播放实例
|
||||
}, 3000);
|
||||
} else {
|
||||
console.log("插件启动失败，请检查插件是否安装!");
|
||||
}
|
||||
},
|
||||
cbConnectClose: bNormalClose => {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
this.oWebControl = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 设置窗口控制回调
|
||||
setCallbacks() {
|
||||
this.oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: this.cbIntegrationCallBack // 封装的推送消息方法
|
||||
});
|
||||
},
|
||||
|
||||
// 推送消息
|
||||
cbIntegrationCallBack(oData) {
|
||||
//oData是封装的视频web插件回调信息的消息体
|
||||
// console.log(JSON.stringify(oData.responseMsg)); //此处为视频web插件消息json报文字符串
|
||||
},
|
||||
|
||||
//初始化
|
||||
init() {
|
||||
this.getPubKey(() => {
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = this.initparam.appKey; //综合安防管理平台提供的appkey，必填
|
||||
var secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret，必填
|
||||
var ip = this.initparam.apiIp; //综合安防管理平台IP地址，必填
|
||||
var playMode = 1; //初始播放模式：0-预览，1-回放
|
||||
var port = this.initparam.apiPort; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
port = parseInt(port);
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = this.initparam.layout; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs =
|
||||
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
this.oWebControl
|
||||
.JS_RequestInterface({
|
||||
//通用请求响应接口
|
||||
funcName: "init", // 功能标识
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
})
|
||||
.then(oData => {
|
||||
this.oWebControl.JS_Resize(this.width, this.height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
console.log('=====第二步')
|
||||
// this.startpreview(); //初始化后开启预览
|
||||
this.startPlayback(); // 自动播放回放
|
||||
console.log('appkey',this.initparam.appKey)
|
||||
console.log('appkey',this.initparam.apiIp)
|
||||
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//获取公钥
|
||||
getPubKey(callback) {
|
||||
this.oWebControl
|
||||
.JS_RequestInterface({
|
||||
//通用请求响应接口
|
||||
funcName: "getRSAPubKey", // 功能标识
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024 // 秘钥长度，可选1024或2048
|
||||
})
|
||||
})
|
||||
.then(oData => {
|
||||
if (oData.responseMsg.data) {
|
||||
// 当code为-1时无data字段
|
||||
this.pubKey = oData.responseMsg.data; // 返回的数据，如RSA公钥
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 页面缩放比例
|
||||
getRatio() {
|
||||
let bodyWidth = document.body.clientWidth
|
||||
// console.log(window.screen.width)
|
||||
let bodyHeight = document.body.clientHeight
|
||||
let scaleWidthNum = bodyWidth / 1920
|
||||
let scaleHeightNum = bodyHeight / 1080
|
||||
// let scaleWidthNum = bodyWidth
|
||||
// let scaleHeightNum = bodyHeight
|
||||
|
||||
let ratio;
|
||||
if (scaleWidthNum > scaleHeightNum) {
|
||||
ratio = scaleHeightNum
|
||||
} else {
|
||||
ratio = scaleWidthNum
|
||||
}
|
||||
return ratio;
|
||||
},
|
||||
|
||||
//RSA加密
|
||||
setEncrypt(value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(this.pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
},
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnds")
|
||||
.get(0)
|
||||
.getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
|
||||
var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
|
||||
var iCoverRight = oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = iCoverLeft > this.width ? this.width : iCoverLeft;
|
||||
iCoverTop = iCoverTop > this.height ? this.height : iCoverTop;
|
||||
iCoverRight = iCoverRight > this.width ? this.width : iCoverRight;
|
||||
iCoverBottom = iCoverBottom > this.height ? this.height : iCoverBottom;
|
||||
|
||||
this.oWebControl.JS_RepairPartWindow(0, 0, this.width, this.height); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.height);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
this.oWebControl.JS_CuttingPartWindow(0, 0, this.width, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
this.oWebControl.JS_CuttingPartWindow(
|
||||
this.width - iCoverRight,
|
||||
0,
|
||||
iCoverRight,
|
||||
this.height
|
||||
);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
this.oWebControl.JS_CuttingPartWindow(
|
||||
0,
|
||||
this.height - iCoverBottom,
|
||||
this.width,
|
||||
iCoverBottom
|
||||
);
|
||||
}
|
||||
},
|
||||
//录像回放功能
|
||||
|
||||
startPlayback(){
|
||||
console.log('点击查看',this.locationValue)
|
||||
console.log('编号',this.pointCode)
|
||||
console.log('开始时间', this.startTime )
|
||||
console.log('开始时间', new Date(this.startTime).getTime() / 1000 )
|
||||
console.log('开始时间', new Date().getTime() / 1000 )
|
||||
var cameraIndexCode = this.pointCode; //获取输入的监控点编号值，必填
|
||||
var startTimeStamp = new Date(this.startTime).getTime(); //回放开始时间戳，必填
|
||||
var endTimeStamp = new Date(this.endTime).getTime(); //回放结束时间戳，必填
|
||||
var recordLocation = +this.locationValue; //录像存储位置：0-中心存储，1-设备存储
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
console.log('====参数',cameraIndexCode,startTimeStamp,endTimeStamp,recordLocation)
|
||||
this.oWebControl.JS_RequestInterface({
|
||||
funcName: "startPlayback",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode, //监控点编号
|
||||
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
|
||||
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒
|
||||
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
|
||||
transMode: transMode, //传输协议：0-UDP，1-TCP
|
||||
gpuMode: gpuMode, //是否启用GPU硬解，0-不启用，1-启用
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
}).then((res)=>{
|
||||
// console.log('====到这一步了吗')
|
||||
console.log('请求结果',res)
|
||||
})
|
||||
|
||||
},
|
||||
// 停止回放功能
|
||||
stopAllPlayback() {
|
||||
this.oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPlayback"
|
||||
})
|
||||
},
|
||||
// 格式化时间
|
||||
dateFormat(oDate, fmt) {
|
||||
var o = {
|
||||
"M+": oDate.getMonth() + 1, //月份
|
||||
"d+": oDate.getDate(), //日
|
||||
"h+": oDate.getHours(), //小时
|
||||
"m+": oDate.getMinutes(), //分
|
||||
"s+": oDate.getSeconds(), //秒
|
||||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
|
||||
"S": oDate.getMilliseconds()//毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp("(" + k + ")").test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
},
|
||||
|
||||
|
||||
//关闭视频窗口
|
||||
closeWindow() {
|
||||
if (this.oWebControl != null) {
|
||||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
this.oWebControl.JS_Disconnect().then(
|
||||
() => {
|
||||
// 断开与插件服务连接成功
|
||||
},
|
||||
() => {
|
||||
// 断开与插件服务连接失败
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.maxBox{
|
||||
// width: calc(100% - 300px);
|
||||
height: calc(100% - 100px);
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
.playWnds{
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
277
src/views/projectFront/replayVideoManage/overview.vue
Normal file
277
src/views/projectFront/replayVideoManage/overview.vue
Normal file
@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="fullHeight videoOverview">
|
||||
<closePage></closePage>
|
||||
<div class="header">
|
||||
<span>视频回放中心</span>
|
||||
</div>
|
||||
<div class="videoContent">
|
||||
<div class="videoListBox fullHeight">
|
||||
<div class="pageTitle">视频列表</div>
|
||||
<div class="videoBox" v-if="dataType == 1">
|
||||
<vue-scroll>
|
||||
<ul v-if="devList.length > 0">
|
||||
<li
|
||||
@click.stop="changeVideo(item)"
|
||||
v-for="(item, index) in devList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
v-if="item.deviceType == 2"
|
||||
src="@/assets/images/icon-video2-white.png"
|
||||
/>
|
||||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||||
{{ item.videoName }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="placeholderBox" v-else>
|
||||
<img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
<div class="videoBox" v-else>
|
||||
<vue-scroll>
|
||||
<el-collapse v-model="activeNames" style="padding: 0 20px">
|
||||
<el-collapse-item
|
||||
:title="item.name"
|
||||
:name="index"
|
||||
v-for="(item, index) in devList"
|
||||
:key="index"
|
||||
>
|
||||
<ul v-if="item.list.length > 0">
|
||||
<li
|
||||
@click.stop="changeVideo(data)"
|
||||
v-for="(data, index2) in item.list"
|
||||
:key="index2"
|
||||
>
|
||||
<img
|
||||
v-if="data.deviceType == 2"
|
||||
src="@/assets/images/icon-video2-white.png"
|
||||
/>
|
||||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||||
{{ data.videoName }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
<div class="timeBox">
|
||||
<div class="time-select">
|
||||
<span>回放开始时间：</span>
|
||||
<el-date-picker
|
||||
v-model="selectDate.startTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 68%;"
|
||||
:clearable="false"
|
||||
@focus="showVideo = false"
|
||||
@blur="showVideo = true"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<span>回放结束时间：</span>
|
||||
<el-date-picker
|
||||
v-model="selectDate.endTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 68%;"
|
||||
:clearable="false"
|
||||
@focus="showVideo = false"
|
||||
@blur="showVideo = true"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="btn-option">
|
||||
<div class="start-play" @click="replayVideo">回放</div>
|
||||
<div class="stop-play" @click="isReplayNum = 0">停止全部回放</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<playBack class="playVideoBox" :showVideo="showVideo" :devList="selectList" :isReplayNum="isReplayNum" :startTime="selectDate.startTime" :endTime="selectDate.endTime" v-if="selectList.length > 0"></playBack>
|
||||
<div class="noVideoContent" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
selectProjectVideoListApi,
|
||||
selectUserVideoListApi,
|
||||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||||
import playBack from "./components/playBack/playBack.vue";
|
||||
import closePage from "@/components/closePage";
|
||||
import { dateFormat } from "@/util/nowDate/index"
|
||||
export default {
|
||||
components: { playBack, closePage },
|
||||
data() {
|
||||
return {
|
||||
devList: [],
|
||||
selectList: [],
|
||||
dataType: 1,
|
||||
activeNames: [0],
|
||||
screens: {},
|
||||
pluginType: "",
|
||||
selectDate: {
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
},
|
||||
isReplayNum: 1,
|
||||
showVideo: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// console.dir(window.parent)
|
||||
// console.log(window.parent.document.getElementById("myFrame"), 12312313)
|
||||
// if (this.$store.state.userInfo.accountType != 6) {
|
||||
// this.loadData()
|
||||
// } else {
|
||||
// this.loadData2()
|
||||
// }
|
||||
//设置录像回放时间的默认值
|
||||
this.selectDate.startTime = dateFormat(new Date(), "yyyy-MM-dd 00:00:00");
|
||||
this.selectDate.endTime = dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 回放视频
|
||||
replayVideo(){
|
||||
this.isReplayNum = this.isReplayNum + 1;
|
||||
},
|
||||
changeVideo(item) {
|
||||
console.log("点击了列表----");
|
||||
|
||||
console.log(item, "xxxxxxxxxx");
|
||||
this.selectList = [item];
|
||||
console.log("右边的值", this.selectList);
|
||||
},
|
||||
loadData() {
|
||||
selectProjectVideoListApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
}).then((res) => {
|
||||
var DATA = res.result.videoList;
|
||||
this.devList = DATA;
|
||||
console.log("视频的列表", res.result);
|
||||
this.dataType = res.result.type;
|
||||
});
|
||||
},
|
||||
loadData2() {
|
||||
selectUserVideoListApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
userId: this.$store.state.userInfo.userId,
|
||||
}).then((res) => {
|
||||
var DATA = res.result.videoList;
|
||||
this.devList = DATA;
|
||||
this.dataType = res.result.type;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./style.less";
|
||||
.videoListBox {
|
||||
float: left;
|
||||
width: 300px;
|
||||
color: white;
|
||||
background-color: #01112d;
|
||||
}
|
||||
.pageTitle {
|
||||
margin: 12px 0;
|
||||
background-color: #01112d;
|
||||
&::before {
|
||||
background-color: #00fafa;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
background-color: #030919;
|
||||
height: calc(100% - 240px);
|
||||
margin: 0 10px 0 10px;
|
||||
position: relative;
|
||||
li {
|
||||
padding: 10px 25px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #003e4b;
|
||||
}
|
||||
}
|
||||
/deep/.el-collapse-item__header,
|
||||
/deep/.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
/deep/.el-collapse-item__content {
|
||||
color: white;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.timeBox {
|
||||
margin: 10px 10px 0 10px;
|
||||
background: rgba(31, 59, 64, 0.71);
|
||||
padding: 10px 0px;
|
||||
.time-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.btn-option {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.start-play {
|
||||
padding: 6px 8px;
|
||||
background: url("./../../../assets/images/overview/startPlay.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.stop-play {
|
||||
padding: 6px 8px;
|
||||
background: url("./../../../assets/images/overview/stopPlay.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noVideoContent{
|
||||
width: calc(100% - 302px);
|
||||
height: calc(100% - 24px);
|
||||
background-color: #030303;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-color: #CDBE23;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
/deep/.playVideoBox {
|
||||
background-color: #030303;
|
||||
float: left;
|
||||
width: calc(100% - 300px);
|
||||
height: calc(100% - 22px)
|
||||
}
|
||||
// element 样式
|
||||
/deep/.el-date-editor .el-input__inner {
|
||||
background: rgba(5, 177, 194, 0.15);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #00fdff;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
22
src/views/projectFront/replayVideoManage/style.less
Normal file
22
src/views/projectFront/replayVideoManage/style.less
Normal file
@ -0,0 +1,22 @@
|
||||
.videoOverview{
|
||||
background-color: #0D1534;
|
||||
}
|
||||
.header{
|
||||
background: url('../../../assets/images/overview3/headerBG2.png') center;
|
||||
background-size: contain;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
span{
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: 800;
|
||||
font-size: 26px;
|
||||
color: #0EF6F8;
|
||||
}
|
||||
}
|
||||
.videoContent{
|
||||
height: calc(100% - 70px);
|
||||
background-color: #01112d;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="fullHeight videoOverview">
|
||||
<closePage></closePage>
|
||||
<div class="header"></div>
|
||||
<div class="header">
|
||||
<span>视频管理中心</span>
|
||||
</div>
|
||||
<div class="videoContent">
|
||||
<div class="videoListBox fullHeight">
|
||||
<div class="pageTitle">视频列表</div>
|
||||
|
||||
@ -2,9 +2,18 @@
|
||||
background-color: #0D1534;
|
||||
}
|
||||
.header{
|
||||
background: url('../../../assets/images/overview3/headerBG.png') center;
|
||||
background: url('../../../assets/images/overview3/headerBG2.png') center;
|
||||
background-size: contain;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 70px;
|
||||
span{
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: 800;
|
||||
font-size: 26px;
|
||||
color: #0EF6F8;
|
||||
}
|
||||
}
|
||||
.videoContent{
|
||||
height: calc(100% - 70px);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user