| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box"> |
| | | <div v-if="showJk" class="jiankong"> |
| | | <div v-show="showJk" class="jiankong"> |
| | | <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt=""> |
| | | <div class="content"> |
| | | <video :src="activeVideo" class="video"></video> |
| | | <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div> |
| | | </div> |
| | | <div class="right_wrap"> |
| | | <div class="menus"> |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <div v-else class="center_box_one"> |
| | | <div v-show="!showJk" class="center_box_one"> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="name_wrap"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { ref, onMounted, nextTick } from 'vue' |
| | | import VScaleScreen from 'v-scale-screen' |
| | | import Percent from '@/components/percent.vue' |
| | | import dayjs from 'dayjs' |
| | |
| | | |
| | | }, 1000) |
| | | |
| | | |
| | | const oWebControl = ref(null) |
| | | const initCount = ref() |
| | | const pubKey = ref('') |
| | | const initPlugin = () => { |
| | | oWebControl.value = new WebControl({ |
| | | szPluginContainer: "playWnd", // 指定容器id |
| | | iServicePortStart: 15900, // 指定起止端口号,建议使用该值 |
| | | iServicePortEnd: 15900, |
| | | szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
| | | cbConnectSuccess: function () { |
| | | // 创建WebControl实例成功 |
| | | console.log('创建WebControl实例成功'); |
| | | |
| | | oWebControl.value.JS_StartService("window", { // WebControl实例创建成功后需要启动服务 |
| | | dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 |
| | | }).then(function () { |
| | | oWebControl.value.JS_SetWindowControlCallback({ // 设置消息回调 |
| | | cbIntegrationCallBack: cbIntegrationCallBack |
| | | })// 启动插件服务成功 |
| | | oWebControl.value.JS_CreateWnd("playWnd", '300', '200').then(function () { //JS_CreateWnd创建视频播放窗口,宽高可设定,boxWidth, boxHeight容器 |
| | | // oWebControl.value.JS_CreateWnd("playWnd").then(function () { //JS_CreateWnd创建视频播放窗口,宽高可设定,boxWidth, boxHeight容器 |
| | | init() // 创建播放实例成功后初始化 |
| | | }) |
| | | }, function () { // 启动插件服务失败 |
| | | }) |
| | | }, |
| | | cbConnectError: function () { // 创建WebControl实例失败 |
| | | console.log('创建WebControl实例失败'); |
| | | oWebControl.value = null |
| | | $("#playWnd").html("插件未启动,正在尝试启动,请稍候...") |
| | | WebControl.JS_WakeUp("VideoWebPlugin://") // 程序未启动时执行error函数,采用wakeup来启动程序 |
| | | initCount.value++ |
| | | if (initCount.value < 3) { |
| | | setTimeout(function () { |
| | | initPlugin() |
| | | }, 3000) |
| | | } else { |
| | | $("#playWnd").html("插件启动失败,请检查插件是否安装!或重新下载 <a href='./videoUrl/VideoWebPlugin.exe' target='_blank'>下载a<a>") |
| | | } |
| | | }, |
| | | cbConnectClose: function (bNormalClose) { |
| | | // 异常断开:bNormalClose = false |
| | | // JS_Disconnect正常断开:bNormalClose = true |
| | | console.log('异常断开:bNormalClose'); |
| | | oWebControl.value = null |
| | | $("#playWnd").html("插件未启动,正在尝试启动,请稍候...") |
| | | WebControl.JS_WakeUp("VideoWebPlugin://") |
| | | initCount.value++ |
| | | if (initCount.value < 3) { |
| | | setTimeout(function () { |
| | | initPlugin() |
| | | }, 3000) |
| | | } else { |
| | | $("#playWnd").html("插件启动失败,请检查插件是否安装!或重新下载 <a href='https://img0.baidu.com/it/u=3867022436,608124672&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422' target='_blank'>下载b<a>") |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | function fileDown() { |
| | | window.open('./videoUrl/VideoWebPlugin.exe') |
| | | } |
| | | // 消息回调 |
| | | const cbIntegrationCallBack = (oData) => { |
| | | let response = oData.responseMsg |
| | | // response.type=1 选中窗口消息 type=2 播放消息 |
| | | } |
| | | // 监控 |
| | | |
| | | |
| | | |
| | | |
| | | // 初始化 |
| | | const init = () => { |
| | | getPubKey(function () { |
| | | ////////////////////////////////// 请自行修改以下变量值 //////////////////////////////////// |
| | | let appkey = "23154099" //综合安防管理平台提供的appkey,必填 |
| | | let secret = '88wFsg3xfn7o8QMsWEO2' //综合安防管理平台提供的secret,必填 |
| | | // let secret = setEncrypt("88wFsg3xfn7o8QMsWEO2") //综合安防管理平台提供的secret,必填 |
| | | let ip = "10.50.250.253" //综合安防管理平台IP地址,必填 |
| | | let playMode = 0 //初始播放模式:0-预览(实时流),1-回放(视频) |
| | | let port = 443 //综合安防管理平台端口,若启用HTTPS协议,默认443 |
| | | let snapDir = "D:\\SnapDir" //抓图存储路径 |
| | | let videoDir = "D:\\VideoDir" //紧急录像或录像剪辑存储路径 |
| | | let layout = "1x1" //playMode指定模式的布局 |
| | | let enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1 |
| | | let encryptedFields = 'secret' //加密字段,默认加密领域为secret |
| | | let showToolbar = 1 //是否显示工具栏,0-不显示,非0-显示 |
| | | let showSmart = 1 //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示 |
| | | let buttonIDs = "0,16,256,257,258,259,260,513,514,515,516,517,768" //自定义工具条按钮 |
| | | oWebControl.value.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('初始化成功'); |
| | | |
| | | // oWebControl.value.JS_Resize(that.boxWidth, that.boxHeight) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 获取公钥 |
| | | function getPubKey(callback) { |
| | | oWebControl.value.JS_RequestInterface({ |
| | | funcName: 'getRSAPubKey', |
| | | argument: JSON.stringify({ |
| | | keyLength: 1024, |
| | | }), |
| | | }).then((oData) => { |
| | | if (oData.responseMsg.data) { |
| | | pubKey.value = oData.responseMsg.data |
| | | callback() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // RSA加密 |
| | | function setEncrypt(value) { |
| | | let that = this |
| | | let encrypt = new JSEncrypt() |
| | | encrypt.setPublicKey(pubKey.value) |
| | | return encrypt.encrypt(value) |
| | | } |
| | | |
| | | |
| | | const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a'] |
| | |
| | | data4.value = res.data || {} |
| | | let obj = data4.value |
| | | data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum |
| | | const result = res.data.visitRetentionDataList || [] |
| | | const result = res.data?.visitRetentionDataList || [] |
| | | dataList3.value = result.map(i => { |
| | | if (i.timeOutMinute) { |
| | | i.timeOutMinute = Math.abs(i.timeOutMinute) |
| | |
| | | } |
| | | } |
| | | const menuItemClick = (val) => { |
| | | initPlugin() |
| | | activeMenu.value = val |
| | | afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => { |
| | | activeVideo.value = res.data |
| | | nextTick(() => { |
| | | console.log('indexCode', val.indexCode); |
| | | |
| | | oWebControl.value.JS_RequestInterface({ |
| | | funcName: "startPreview", |
| | | argument: JSON.stringify({ |
| | | cameraIndexCode: val.indexCode, //监控点编号 |
| | | streamMode: 0, //主子码流标识:0-主码流,1-子码流 |
| | | transMode: 1, //传输协议:0-UDP,1-TCP |
| | | gpuMode: 0, //是否启用GPU硬解,0-不启用,1-启用 |
| | | wndId: -1 //播放窗口序号(在2x2以上布局下可指定播放窗口) |
| | | }) |
| | | }).then((oData) => { |
| | | if (oData.responseMsg.code === 1) { |
| | | console.log('success', oData) |
| | | } |
| | | }, err => { |
| | | console.log('err', err) |
| | | |
| | | }) |
| | | }) |
| | | |
| | | // afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => { |
| | | // activeVideo.value = res.data |
| | | // }) |
| | | } |
| | | |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | |
| | | |
| | | |
| | | |
| | | |
| | | onMounted(() => { |
| | | getData1() |
| | | getData2() |
| | |
| | | getData5() |
| | | getWarning() |
| | | |
| | | |
| | | setInterval(() => { |
| | | getData1() |
| | | getData2() |