1 line
18 KiB
JSON
1 line
18 KiB
JSON
{"remainingRequest":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\src\\views\\center.vue?vue&type=style&index=1&id=288a5f22&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\src\\views\\center.vue","mtime":1670478643458},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\hua\\Desktop\\suyi1111\\suyi1111\\suyi1111\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKI2NlbnRlciB7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiAxMDAlOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKLy8gICBiYWNrZ3JvdW5kOiB1cmwoIn5AL2Fzc2V0cy9ib3gwMDEucG5nIikgbm8tcmVwZWF0OwovLyAgIGJhY2tncm91bmQtc2l6ZTogMTAwJTsKICAudXAgewogICAgd2lkdGg6IDEwMCU7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZmxleC1mbG93OiByb3cgbm93cmFwOwogICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgfQogIC50aXR7CiAgICB3aWR0aDogMTAwJTsKICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIGhlaWdodDogODBweDsKICAgIGZvbnQtc2l6ZTogMjBweDsKICAgIGNvbG9yOiAjZmZmOwogICAgbGluZS1oZWlnaHQ6IDgwcHg7CiAgICBtYXJnaW4tdG9wOiAtMTVweDsKICAgIAp9CiAgLmRvd24gewogICAgcGFkZGluZzogNnB4IDRweDsKICAgIHBhZGRpbmctYm90dG9tOiAwOwogICAgd2lkdGg6IDEwMCU7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgaGVpZ2h0OiAyNTVweDsKICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICAgIC5iZy1jb2xvci1ibGFjayB7CiAgICAgIGJvcmRlci1yYWRpdXM6IDVweDsKICAgIH0KICAgIC5yYW5raW5nIHsKICAgICAgcGFkZGluZzogMTBweDsKICAgICAgd2lkdGg6IDU5JTsKICAgICAgLmR2LXNjci1yYW5rLWJvYXJkIHsKICAgICAgICBoZWlnaHQ6IDIyNXB4OwogICAgICB9CiAgICB9CiAgICAucGVyY2VudCB7CiAgICAgIHdpZHRoOiA0MCU7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIGZsZXgtd3JhcDogd3JhcDsKICAgICAgLml0ZW0gewogICAgICAgIHdpZHRoOiA1MCU7CiAgICAgICAgaGVpZ2h0OiAxMjBweDsKICAgICAgICBzcGFuIHsKICAgICAgICAgIG1hcmdpbi10b3A6IDhweDsKICAgICAgICAgIGZvbnQtc2l6ZTogMTRweDsKICAgICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICB9CiAgICAgIH0KICAgICAgLndhdGVyIHsKICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAuZHYtd2EtbGUtcG8gewogICAgICAgICAgaGVpZ2h0OiAxMjBweDsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9Cn0K"},{"version":3,"sources":["center.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgSA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"center.vue","sourceRoot":"src/views","sourcesContent":["<template>\n <div id=\"center\">\n <div class=\"tit\">视频监控</div>\n <div class=\"up\">\n \n <div id=\"playWnd\" class=\"playWnd\" style=\"width:100%;height:100%;\"></div>\n <!-- <video src=\"@/assets/newimgs/videoScreen.mp4\" style=\" width:100%;height:100%;object-fit:cover\" autoplay controls></video> -->\n </div>\n </div>\n</template>\n\n<script>\n import publicUtils from \"../../utils/publicUtils\"; // 我自己的工具类, 可以不要\n let divWidth = 500; // 容器宽\n let divHeight = 300; // 容器高\n //声明公用变量\n let initCount = 0; // 初始化重试次数,3次失败则报错\n let oWebControl; // 页面控制对象\n let pubKey = '';\n export default {\n name: 'hkVideo',\n data() {\n return { // 视频播放\n cameraIndexCode: '3dbe7055a02e497d98c21169ee6c98e4', // 摄像头的code, 我是父页面传过来的\n }\n },\n // props: ['cameraIndexCodeProp'], // 接收父页面传来的摄像头 code\n methods: {\n // 创建播放实例, 这里不用改\n initPlugin() { // 初始化播放插件, 相当于准备播放环境(不是重点, 但要记着这是每次加载的第一步, 不然切换画面会有坑)\n const _this = this;\n oWebControl = new WebControl({\n szPluginContainer: \"playWnd\", // 指定容器id\n iServicePortStart: 15900, // 指定起止端口号，建议使用该值\n iServicePortEnd: 15909,\n szClassId: \"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11\", // 用于IE10使用ActiveX的clsid\n cbConnectSuccess: function () { // 创建WebControl实例成功\n oWebControl.JS_StartService(\"window\", { // WebControl实例创建成功后需要启动服务\n dllPath: \"./VideoPluginConnect.dll\" // 值\"./VideoPluginConnect.dll\"写死\n }).then(function () { // 启动插件服务成功\n oWebControl.JS_SetWindowControlCallback({ // 设置消息回调\n cbIntegrationCallBack: _this.cbIntegrationCallBack\n });\n \n oWebControl.JS_CreateWnd(\"playWnd\", divWidth, divHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定\n _this.init(); // 创建播放实例成功后初始化\n });\n }, function () { // 启动插件服务失败\n });\n },\n cbConnectError: function () { // 创建WebControl实例失败\n oWebControl = null;\n publicUtils.notify('warn', \"插件未启动，正在尝试启动，请稍候...\");\n WebControl.JS_WakeUp(\"VideoWebPlugin://\"); // 程序未启动时执行error函数，采用wakeup来启动程序\n initCount++;\n if (initCount < 3) {\n setTimeout(function () {\n this.initPlugin();\n }, 3000)\n } else {\n publicUtils.notify('error', \"插件启动失败，请检查插件是否安装！\");\n }\n },\n cbConnectClose: function (bNormalClose) {\n // 异常断开：bNormalClose = false\n // JS_Disconnect正常断开：bNormalClose = true\n if (!bNormalClose) {\n publicUtils.notify('error', \"视屏链接异常中断！\");\n }\n oWebControl = null;\n }\n });\n },\n \n //初始化, 主要改这里\n init() {\n const _this = this;\n this.getPubKey(function () {\n // 请自行修改以下变量值\t\n let appkey = \"你的appkey\"; //综合安防管理平台提供的appkey，必填\n let secret = _this.setEncrypt(\"你的secret\"); //综合安防管理平台提供的secret，必填\n let ip = \"192.168.2.110\"; //综合安防管理平台IP地址，必填\n let playMode = 0; //初始播放模式：0-预览，1-回放\n let port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443\n let snapDir = \"D:\\\\SnapDir\"; //抓图存储路径\n let videoDir = \"D:\\\\VideoDir\"; //紧急录像或录像剪辑存储路径\n let layout = \"1x1\"; //playMode指定模式的布局\n let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1\n let encryptedFields = 'secret';\t\t\t\t\t //加密字段，默认加密领域为secret\n let showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示\n let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示\n let buttonIDs = \"\"; //自定义工具条按钮\n // 请自行修改以上变量值\t\n \n oWebControl.JS_RequestInterface({\n funcName: \"init\",\n argument: JSON.stringify({\n appkey: appkey, //API网关提供的appkey\n secret: secret, //API网关提供的secret\n ip: ip, //API网关IP地址\n playMode: playMode, //播放模式（决定显示预览还是回放界面）\n port: port, //端口\n snapDir: snapDir, //抓图存储路径\n videoDir: videoDir, //紧急录像或录像剪辑存储路径\n layout: layout, //布局\n enableHTTPS: enableHTTPS, //是否启用HTTPS协议\n encryptedFields: encryptedFields, //加密字段\n showToolbar: showToolbar, //是否显示工具栏\n showSmart: showSmart, //是否显示智能信息\n buttonIDs: buttonIDs //自定义工具条按钮\n })\n }).then(function (oData) {\n oWebControl.JS_Resize(divWidth, divHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题\n });\n });\n },\n \n //获取公钥, 不用改\n getPubKey(callback) {\n oWebControl.JS_RequestInterface({\n funcName: \"getRSAPubKey\",\n argument: JSON.stringify({\n keyLength: 1024\n })\n }).then(function (oData) {\n console.log(oData);\n if (oData.responseMsg.data) {\n pubKey = oData.responseMsg.data;\n callback()\n }\n })\n },\n \n //RSA加密, 不用改\n setEncrypt(value) {\n let encrypt = new JSEncrypt();\n encrypt.setPublicKey(pubKey);\n return encrypt.encrypt(value);\n },\n \n // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口\n setWndCover() {\n let iWidth = $(window).width();\n let iHeight = $(window).height();\n let oDivRect = $(\"#playWnd\").get(0).getBoundingClientRect();\n \n let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;\n let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;\n let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;\n let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;\n \n iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;\n iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;\n iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;\n iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;\n \n oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条\n if (iCoverLeft != 0) {\n oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);\n }\n if (iCoverTop != 0) {\n oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条\n }\n if (iCoverRight != 0) {\n oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);\n }\n if (iCoverBottom != 0) {\n oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);\n }\n },\n \n //视频预览功能, 就设置 cameraIndexCode 就行了\n startPreview() {\n let _this = this;\n let cameraIndexCode = _this.cameraIndexCode; //获取输入的监控点编号值，必填\n let streamMode = 0; //主子码流标识：0-主码流，1-子码流\n let transMode = 1; //传输协议：0-UDP，1-TCP\n let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用\n let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）\n \n cameraIndexCode = cameraIndexCode.replace(/(^\\s*)/g, \"\");\n cameraIndexCode = cameraIndexCode.replace(/(\\s*$)/g, \"\");\n \n oWebControl.JS_RequestInterface({\n funcName: \"startPreview\",\n argument: JSON.stringify({\n cameraIndexCode: cameraIndexCode, //监控点编号\n streamMode: streamMode, //主子码流标识\n transMode: transMode, //传输协议\n gpuMode: gpuMode, //是否开启GPU硬解\n wndId: wndId //可指定播放窗口\n })\n })\n },\n // 这里根据你的需要去改, 只加载一次的话, 就放到 mounted 中就行了\n initView(){\n // 先准备环境, 环境准备好才能加载, 所以给了个延迟, 用 Promise 同步执行, 加载不出来.只能用此下策, 有空再优化\n if(this.cameraIndexCode){\n this.initPlugin();\n setTimeout(this.startPreview, 1000);\n }\n },\n //停止全部预览\n stopAllPreview() {\n oWebControl.JS_RequestInterface({\n funcName: \"stopAllPreview\"\n })\n },\n destroyedView(){\n if (oWebControl != null) {\n this.stopAllPreview();\n oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题\n oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功\n },\n function () { // 断开与插件服务连接失败\n });\n }\n }\n },\n mounted() {\n // 有摄像头 code, 才加载, 另外因为我每次只显示一个, 所以显示之前要把之前显示的摄像头销毁, 所以加了 oWebControl == null 的判断.\n if(this.cameraIndexCode && oWebControl == null){\n this.initView();\n }else{\n // 如果 code 不为空, 则先销毁现有摄像头, 再去加载新的摄像头\n this.destroyedView();\n setTimeout(this.initView, 1000);\n }\n },\n destroyed() {\n this.destroyedView();\n }\n }\n</script>\n \n<style scoped>\n html, body {\n padding: 0;\n margin: 0;\n }\n \n .playWnd {\n width: 500px; /*播放容器的宽和高设定*/\n height: 300px;\n }\n \n .operate {\n margin-top: 24px;\n }\n \n .operate::after {\n content: '';\n display: block;\n clear: both;\n }\n \n .module {\n float: left;\n width: 340px;\n /*min-height: 320px;*/\n margin-left: 16px;\n padding: 16px 8px;\n box-sizing: border-box;\n border: 1px solid #e5e5e5;\n }\n \n .module .item {\n margin-bottom: 4px;\n }\n \n .module input[type=\"text\"] {\n box-sizing: border-box;\n display: inline-block;\n vertical-align: middle;\n margin-left: 0;\n width: 150px;\n min-height: 20px;\n }\n \n .module .btn {\n min-width: 80px;\n min-height: 24px;\n margin-top: 100px;\n margin-left: 80px;\n }\n</style>\n\n<style lang=\"scss\" scoped>\n#center {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n// background: url(\"~@/assets/box001.png\") no-repeat;\n// background-size: 100%;\n .up {\n width: 100%;\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n }\n .tit{\n width: 100%;\n text-align: center;\n height: 80px;\n font-size: 20px;\n color: #fff;\n line-height: 80px;\n margin-top: -15px;\n \n}\n .down {\n padding: 6px 4px;\n padding-bottom: 0;\n width: 100%;\n display: flex;\n height: 255px;\n justify-content: space-between;\n .bg-color-black {\n border-radius: 5px;\n }\n .ranking {\n padding: 10px;\n width: 59%;\n .dv-scr-rank-board {\n height: 225px;\n }\n }\n .percent {\n width: 40%;\n display: flex;\n flex-wrap: wrap;\n .item {\n width: 50%;\n height: 120px;\n span {\n margin-top: 8px;\n font-size: 14px;\n display: flex;\n justify-content: center;\n }\n }\n .water {\n width: 100%;\n .dv-wa-le-po {\n height: 120px;\n }\n }\n }\n }\n}\n</style>\n"]}]} |