diff --git a/src/assets/images/overview/startPlay.png b/src/assets/images/overview/startPlay.png new file mode 100644 index 00000000..6db0acac Binary files /dev/null and b/src/assets/images/overview/startPlay.png differ diff --git a/src/assets/images/overview/stopPlay.png b/src/assets/images/overview/stopPlay.png new file mode 100644 index 00000000..164f721f Binary files /dev/null and b/src/assets/images/overview/stopPlay.png differ diff --git a/src/assets/images/overview3/headerBG2.png b/src/assets/images/overview3/headerBG2.png new file mode 100644 index 00000000..aae5dc58 Binary files /dev/null and b/src/assets/images/overview3/headerBG2.png differ diff --git a/src/assets/js/http.js b/src/assets/js/http.js index fd882353..1b2b505a 100644 --- a/src/assets/js/http.js +++ b/src/assets/js/http.js @@ -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/'//中建四局(沙湖)线上（最新）地址 diff --git a/src/router/index.js b/src/router/index.js index cbc7b1d6..841ce3c4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -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", diff --git a/src/store/index.js b/src/store/index.js index d76a5a6e..67abeeae 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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 diff --git a/src/util/nowDate/index.js b/src/util/nowDate/index.js index 16996624..58657203 100644 --- a/src/util/nowDate/index.js +++ b/src/util/nowDate/index.js @@ -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; +} diff --git a/src/views/projectFront/replayVideoManage/components/playBack/back.js b/src/views/projectFront/replayVideoManage/components/playBack/back.js new file mode 100644 index 00000000..ba2d38c2 --- /dev/null +++ b/src/views/projectFront/replayVideoManage/components/playBack/back.js @@ -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); + +} diff --git a/src/views/projectFront/replayVideoManage/components/playBack/playBack.vue b/src/views/projectFront/replayVideoManage/components/playBack/playBack.vue new file mode 100644 index 00000000..2828064b --- /dev/null +++ b/src/views/projectFront/replayVideoManage/components/playBack/playBack.vue @@ -0,0 +1,419 @@ + + + \ No newline at end of file diff --git a/src/views/projectFront/replayVideoManage/overview.vue b/src/views/projectFront/replayVideoManage/overview.vue new file mode 100644 index 00000000..959c1f81 --- /dev/null +++ b/src/views/projectFront/replayVideoManage/overview.vue @@ -0,0 +1,277 @@ + + + diff --git a/src/views/projectFront/replayVideoManage/style.less b/src/views/projectFront/replayVideoManage/style.less new file mode 100644 index 00000000..e0e3ba4e --- /dev/null +++ b/src/views/projectFront/replayVideoManage/style.less @@ -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; +} diff --git a/src/views/projectFront/videoManage/overview.vue b/src/views/projectFront/videoManage/overview.vue index cb205b12..204b2154 100644 --- a/src/views/projectFront/videoManage/overview.vue +++ b/src/views/projectFront/videoManage/overview.vue @@ -1,7 +1,9 @@