diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue index 7882316..36b2356 100644 --- a/src/pages/views/WatershedOneMap/OneMapModal.vue +++ b/src/pages/views/WatershedOneMap/OneMapModal.vue @@ -469,7 +469,7 @@ }); // 工艺图弹窗展示 bus.on('getGongYt', (e) => { - allData.iframeUrl = e.url; //工艺图链接 + allData.iframeUrl = e; //工艺图链接 allData.videoUrlLists = e.videoCodes || []; //摄像头url数组 if (allData.videoUrlLists.length > 0) { allData.videoUrlLists.map((item) => { diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue index 7882316..36b2356 100644 --- a/src/pages/views/WatershedOneMap/OneMapModal.vue +++ b/src/pages/views/WatershedOneMap/OneMapModal.vue @@ -469,7 +469,7 @@ }); // 工艺图弹窗展示 bus.on('getGongYt', (e) => { - allData.iframeUrl = e.url; //工艺图链接 + allData.iframeUrl = e; //工艺图链接 allData.videoUrlLists = e.videoCodes || []; //摄像头url数组 if (allData.videoUrlLists.length > 0) { allData.videoUrlLists.map((item) => { diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue index 4748644..a437d95 100644 --- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue +++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue @@ -35,8 +35,69 @@ gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 wndId: 1, // 播放窗口序号 }, + treesData: [ + { + label: '0', + key: '0', + click: false, + children: [ + { + label: '组1', + key: '1-0', + click: false, + children: [ + { + label: '铁路桥', + key: 'cf99e49a50f641ba83832dd5ebff3fa5', + click: true, + }, + { + label: '王家墩', + key: '4097ade6e64142d7ac7adff80b4617f0', + click: true, + }, + ], + }, + ], + }, + ], }); - + // 获取摄像头列表 + const getVideoList = async () => { + allData.treesData = []; + let res = await getCameraTree(); + if (res && res.code == 200) { + let datas = res.data; + // allData.defaultExpandedKeys.push(datas[0].key); + allData.treesData = datas; + } + }; + // 选择树结构的摄像头 + const checkCamera = ({ option }) => { + return { + onClick() { + if (allData.showVideo != true) { + allData.showVideo = true; + allData.constIndex = 1; + } else { + allData.constIndex = -1; + } + console.log('option---', option); + // 只有子节点点击才能查看视频 + if (option.click) { + allData.ifFirstTime = false; + allData.showVideos = { + cameraIndexCode: option.key, // 监控点编号 + streamMode: 0, // 主子码流标识：0-主码流，1-子码流 + transMode: 1, // 传输协议：0-UDP，1-TCP + gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 + wndId: allData.constIndex, // 播放窗口序号 + }; + initVideo(allData.oWebControl); + } + }, + }; + }; /* 创建插件实例 */ function initPlugin() { const dll = { dllPath: './VideoPluginConnect.dll' }; @@ -121,7 +182,13 @@ }; oWebControl.JS_RequestInterface(configObj).then(() => { oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight); - getClickAction(); + // 初次加载时，显示默认多个，点击时单个加载 + if (allData.ifFirstTime) { + getClickMoreAction(); + } else { + allData.constIndex = -1; + getClickAction(); + } }); } /* 视频流RSA加密 */ @@ -145,21 +212,31 @@ argument: { list: [ { - cameraIndexCode: allData.defaultCode, // 监控点编号 + cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号 ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 streamMode: 0, // 主子码流标识 0-主码流 1-子码流 transMode: 1, // 传输协议 0-UDP 1-TCP wndId: 1, // 播放窗口序号 }, + // { + // cameraIndexCode: '0c2ea982b2b746dd901b483acece2c0f', // 监控点编号 + // ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 + // gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 + // streamMode: 0, // 主子码流标识 0-主码流 1-子码流 + // transMode: 1, // 传输协议 0-UDP 1-TCP + // wndId: 2, // 播放窗口序号 + // }, ], }, }); } onMounted(() => { + getVideoList(); // 获取默认的监控点编号 - allData.defaultCode = '6de14b27d9714f3e8e964d233deef9fa'; + allData.defaultCode = '6f80e61b22624e899e88dd4395bb6388'; + // 动态获取宽度 // 动态获取宽度 allData.videoWidth = 630; allData.videoHeight = 440; @@ -178,10 +255,12 @@ return { ...toRefs(allData), + checkCamera, initPlugin, initVideo, setEncrypt, getVideoConfig, + getVideoList, }; }, }; diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue index 7882316..36b2356 100644 --- a/src/pages/views/WatershedOneMap/OneMapModal.vue +++ b/src/pages/views/WatershedOneMap/OneMapModal.vue @@ -469,7 +469,7 @@ }); // 工艺图弹窗展示 bus.on('getGongYt', (e) => { - allData.iframeUrl = e.url; //工艺图链接 + allData.iframeUrl = e; //工艺图链接 allData.videoUrlLists = e.videoCodes || []; //摄像头url数组 if (allData.videoUrlLists.length > 0) { allData.videoUrlLists.map((item) => { diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue index 4748644..a437d95 100644 --- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue +++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue @@ -35,8 +35,69 @@ gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 wndId: 1, // 播放窗口序号 }, + treesData: [ + { + label: '0', + key: '0', + click: false, + children: [ + { + label: '组1', + key: '1-0', + click: false, + children: [ + { + label: '铁路桥', + key: 'cf99e49a50f641ba83832dd5ebff3fa5', + click: true, + }, + { + label: '王家墩', + key: '4097ade6e64142d7ac7adff80b4617f0', + click: true, + }, + ], + }, + ], + }, + ], }); - + // 获取摄像头列表 + const getVideoList = async () => { + allData.treesData = []; + let res = await getCameraTree(); + if (res && res.code == 200) { + let datas = res.data; + // allData.defaultExpandedKeys.push(datas[0].key); + allData.treesData = datas; + } + }; + // 选择树结构的摄像头 + const checkCamera = ({ option }) => { + return { + onClick() { + if (allData.showVideo != true) { + allData.showVideo = true; + allData.constIndex = 1; + } else { + allData.constIndex = -1; + } + console.log('option---', option); + // 只有子节点点击才能查看视频 + if (option.click) { + allData.ifFirstTime = false; + allData.showVideos = { + cameraIndexCode: option.key, // 监控点编号 + streamMode: 0, // 主子码流标识：0-主码流，1-子码流 + transMode: 1, // 传输协议：0-UDP，1-TCP + gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 + wndId: allData.constIndex, // 播放窗口序号 + }; + initVideo(allData.oWebControl); + } + }, + }; + }; /* 创建插件实例 */ function initPlugin() { const dll = { dllPath: './VideoPluginConnect.dll' }; @@ -121,7 +182,13 @@ }; oWebControl.JS_RequestInterface(configObj).then(() => { oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight); - getClickAction(); + // 初次加载时，显示默认多个，点击时单个加载 + if (allData.ifFirstTime) { + getClickMoreAction(); + } else { + allData.constIndex = -1; + getClickAction(); + } }); } /* 视频流RSA加密 */ @@ -145,21 +212,31 @@ argument: { list: [ { - cameraIndexCode: allData.defaultCode, // 监控点编号 + cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号 ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 streamMode: 0, // 主子码流标识 0-主码流 1-子码流 transMode: 1, // 传输协议 0-UDP 1-TCP wndId: 1, // 播放窗口序号 }, + // { + // cameraIndexCode: '0c2ea982b2b746dd901b483acece2c0f', // 监控点编号 + // ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 + // gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 + // streamMode: 0, // 主子码流标识 0-主码流 1-子码流 + // transMode: 1, // 传输协议 0-UDP 1-TCP + // wndId: 2, // 播放窗口序号 + // }, ], }, }); } onMounted(() => { + getVideoList(); // 获取默认的监控点编号 - allData.defaultCode = '6de14b27d9714f3e8e964d233deef9fa'; + allData.defaultCode = '6f80e61b22624e899e88dd4395bb6388'; + // 动态获取宽度 // 动态获取宽度 allData.videoWidth = 630; allData.videoHeight = 440; @@ -178,10 +255,12 @@ return { ...toRefs(allData), + checkCamera, initPlugin, initVideo, setEncrypt, getVideoConfig, + getVideoList, }; }, }; diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue index b33d207..80d0a16 100644 --- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue +++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue @@ -32,7 +32,7 @@
积水点名称 - 积水深度(mm) + 积水深度(m) 监测时间
@@ -104,7 +104,19 @@ rainAnalyses: {}, index: 0, months: new Date().getTime(), - checkedLegend: [{ isCheck: false, layername: 'waterLoging' }], // 设置默认选中的图例图层 + checkedLegend: [ + { isCheck: false, layername: 'waterLoging' }, + { isCheck: false, layername: 'mingqu' }, + { isCheck: false, layername: 'anhan' }, + { isCheck: false, layername: 'xianghan' }, + { isCheck: false, layername: 'layer0' }, + { isCheck: false, layername: 'layer1' }, + { isCheck: false, layername: 'layer5' }, + { isCheck: false, layername: 'layer6' }, + { isCheck: false, layername: 'layer8' }, + { isCheck: false, layername: 'layer9' }, + { isCheck: false, layername: 'layer11' }, + ], // 设置默认选中的图例图层 columns: [ { title: '雨量站名称', width: '150', key: 'STNM' }, { title: '今日降雨(mm)', key: 'DAYDRP' }, @@ -347,7 +359,19 @@ }); onBeforeUnmount(() => { bus.emit('ifQixiang', false); - bus.emit('showDefaultLegend', [{ isCheck: true, layername: 'waterLoging' }]); //清空图例默认开启 + bus.emit('showDefaultLegend', [ + { isCheck: false, layername: 'waterLoging' }, + { isCheck: false, layername: 'mingqu' }, + { isCheck: false, layername: 'anhan' }, + { isCheck: false, layername: 'xianghan' }, + { isCheck: false, layername: 'layer0' }, + { isCheck: false, layername: 'layer1' }, + { isCheck: false, layername: 'layer5' }, + { isCheck: false, layername: 'layer6' }, + { isCheck: false, layername: 'layer8' }, + { isCheck: false, layername: 'layer9' }, + { isCheck: false, layername: 'layer11' }, + ]); //清空图例默认开启 if (echartNature) echartNature.dispose(); }); return { diff --git a/src/pages/views/WatershedOneMap/OneMapModal.vue b/src/pages/views/WatershedOneMap/OneMapModal.vue index 7882316..36b2356 100644 --- a/src/pages/views/WatershedOneMap/OneMapModal.vue +++ b/src/pages/views/WatershedOneMap/OneMapModal.vue @@ -469,7 +469,7 @@ }); // 工艺图弹窗展示 bus.on('getGongYt', (e) => { - allData.iframeUrl = e.url; //工艺图链接 + allData.iframeUrl = e; //工艺图链接 allData.videoUrlLists = e.videoCodes || []; //摄像头url数组 if (allData.videoUrlLists.length > 0) { allData.videoUrlLists.map((item) => { diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue index 4748644..a437d95 100644 --- a/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue +++ b/src/pages/views/WatershedOneMap/modalPart/modal/Bzhk.vue @@ -35,8 +35,69 @@ gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 wndId: 1, // 播放窗口序号 }, + treesData: [ + { + label: '0', + key: '0', + click: false, + children: [ + { + label: '组1', + key: '1-0', + click: false, + children: [ + { + label: '铁路桥', + key: 'cf99e49a50f641ba83832dd5ebff3fa5', + click: true, + }, + { + label: '王家墩', + key: '4097ade6e64142d7ac7adff80b4617f0', + click: true, + }, + ], + }, + ], + }, + ], }); - + // 获取摄像头列表 + const getVideoList = async () => { + allData.treesData = []; + let res = await getCameraTree(); + if (res && res.code == 200) { + let datas = res.data; + // allData.defaultExpandedKeys.push(datas[0].key); + allData.treesData = datas; + } + }; + // 选择树结构的摄像头 + const checkCamera = ({ option }) => { + return { + onClick() { + if (allData.showVideo != true) { + allData.showVideo = true; + allData.constIndex = 1; + } else { + allData.constIndex = -1; + } + console.log('option---', option); + // 只有子节点点击才能查看视频 + if (option.click) { + allData.ifFirstTime = false; + allData.showVideos = { + cameraIndexCode: option.key, // 监控点编号 + streamMode: 0, // 主子码流标识：0-主码流，1-子码流 + transMode: 1, // 传输协议：0-UDP，1-TCP + gpuMode: 0, // 是否启用GPU硬解，0-不启用，1-启用 + wndId: allData.constIndex, // 播放窗口序号 + }; + initVideo(allData.oWebControl); + } + }, + }; + }; /* 创建插件实例 */ function initPlugin() { const dll = { dllPath: './VideoPluginConnect.dll' }; @@ -121,7 +182,13 @@ }; oWebControl.JS_RequestInterface(configObj).then(() => { oWebControl.JS_Resize(allData.videoWidth, allData.videoHeight); - getClickAction(); + // 初次加载时，显示默认多个，点击时单个加载 + if (allData.ifFirstTime) { + getClickMoreAction(); + } else { + allData.constIndex = -1; + getClickAction(); + } }); } /* 视频流RSA加密 */ @@ -145,21 +212,31 @@ argument: { list: [ { - cameraIndexCode: allData.defaultCode, // 监控点编号 + cameraIndexCode: '6f80e61b22624e899e88dd4395bb6388', // 监控点编号 ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 streamMode: 0, // 主子码流标识 0-主码流 1-子码流 transMode: 1, // 传输协议 0-UDP 1-TCP wndId: 1, // 播放窗口序号 }, + // { + // cameraIndexCode: '0c2ea982b2b746dd901b483acece2c0f', // 监控点编号 + // ezvizDirect: 0, // 是否直连萤石预览 未指定或为 0-非直连 其它值-直连 + // gpuMode: 0, // 是否启用 GPU 硬解 0-不启用 1-启用 + // streamMode: 0, // 主子码流标识 0-主码流 1-子码流 + // transMode: 1, // 传输协议 0-UDP 1-TCP + // wndId: 2, // 播放窗口序号 + // }, ], }, }); } onMounted(() => { + getVideoList(); // 获取默认的监控点编号 - allData.defaultCode = '6de14b27d9714f3e8e964d233deef9fa'; + allData.defaultCode = '6f80e61b22624e899e88dd4395bb6388'; + // 动态获取宽度 // 动态获取宽度 allData.videoWidth = 630; allData.videoHeight = 440; @@ -178,10 +255,12 @@ return { ...toRefs(allData), + checkCamera, initPlugin, initVideo, setEncrypt, getVideoConfig, + getVideoList, }; }, }; diff --git a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue index b33d207..80d0a16 100644 --- a/src/pages/views/WatershedOneMap/modalPart/rainTz.vue +++ b/src/pages/views/WatershedOneMap/modalPart/rainTz.vue @@ -32,7 +32,7 @@
积水点名称 - 积水深度(mm) + 积水深度(m) 监测时间
@@ -104,7 +104,19 @@ rainAnalyses: {}, index: 0, months: new Date().getTime(), - checkedLegend: [{ isCheck: false, layername: 'waterLoging' }], // 设置默认选中的图例图层 + checkedLegend: [ + { isCheck: false, layername: 'waterLoging' }, + { isCheck: false, layername: 'mingqu' }, + { isCheck: false, layername: 'anhan' }, + { isCheck: false, layername: 'xianghan' }, + { isCheck: false, layername: 'layer0' }, + { isCheck: false, layername: 'layer1' }, + { isCheck: false, layername: 'layer5' }, + { isCheck: false, layername: 'layer6' }, + { isCheck: false, layername: 'layer8' }, + { isCheck: false, layername: 'layer9' }, + { isCheck: false, layername: 'layer11' }, + ], // 设置默认选中的图例图层 columns: [ { title: '雨量站名称', width: '150', key: 'STNM' }, { title: '今日降雨(mm)', key: 'DAYDRP' }, @@ -347,7 +359,19 @@ }); onBeforeUnmount(() => { bus.emit('ifQixiang', false); - bus.emit('showDefaultLegend', [{ isCheck: true, layername: 'waterLoging' }]); //清空图例默认开启 + bus.emit('showDefaultLegend', [ + { isCheck: false, layername: 'waterLoging' }, + { isCheck: false, layername: 'mingqu' }, + { isCheck: false, layername: 'anhan' }, + { isCheck: false, layername: 'xianghan' }, + { isCheck: false, layername: 'layer0' }, + { isCheck: false, layername: 'layer1' }, + { isCheck: false, layername: 'layer5' }, + { isCheck: false, layername: 'layer6' }, + { isCheck: false, layername: 'layer8' }, + { isCheck: false, layername: 'layer9' }, + { isCheck: false, layername: 'layer11' }, + ]); //清空图例默认开启 if (echartNature) echartNature.dispose(); }); return { diff --git a/src/pages/views/WatershedOneMap/newPart/rainTz.vue b/src/pages/views/WatershedOneMap/newPart/rainTz.vue index 8561627..409c20c 100644 --- a/src/pages/views/WatershedOneMap/newPart/rainTz.vue +++ b/src/pages/views/WatershedOneMap/newPart/rainTz.vue @@ -79,7 +79,7 @@ columnsJ: [ { title: '积水点名称', width: '150', key: 'STNM' }, { - title: '积水深度(mm)', + title: '积水深度(m)', key: 'Z', render(row) { return row.Z || '--';