diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index 5c8d86f..a93bd74 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -106,7 +106,7 @@ ]); const AllData = reactive({ - queryParams: { BODName: '1', area: '', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, + queryParams: { BODName: '1', area: '0', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, }); const { queryParams } = toRefs(AllData); @@ -238,7 +238,8 @@ // 典型项目点击 function changeProject(val) { - // bus.emit('checkProjectFX', { project: XmList.value[val] }); + bus.emit('checkProjectFX', { project: XmList.value[val] }); + // 渲染点位上图 bus.emit('setIniteLayer', [ { layername: 'pipeMonitor', @@ -254,8 +255,6 @@ zoom: 15.2, pitch: 30, }); - // 渲染点位上图 - console.log('渲染4个管网监测点位和1个海绵设施点位'); } // 项目设施分析点击 diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index 5c8d86f..a93bd74 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -106,7 +106,7 @@ ]); const AllData = reactive({ - queryParams: { BODName: '1', area: '', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, + queryParams: { BODName: '1', area: '0', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, }); const { queryParams } = toRefs(AllData); @@ -238,7 +238,8 @@ // 典型项目点击 function changeProject(val) { - // bus.emit('checkProjectFX', { project: XmList.value[val] }); + bus.emit('checkProjectFX', { project: XmList.value[val] }); + // 渲染点位上图 bus.emit('setIniteLayer', [ { layername: 'pipeMonitor', @@ -254,8 +255,6 @@ zoom: 15.2, pitch: 30, }); - // 渲染点位上图 - console.log('渲染4个管网监测点位和1个海绵设施点位'); } // 项目设施分析点击 diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue index 37476c8..60ac7bf 100644 --- a/src/views/sponeScreen/projectHM/canvasRainP.vue +++ b/src/views/sponeScreen/projectHM/canvasRainP.vue @@ -21,7 +21,7 @@ // 存放雨滴的数组 let arr = []; // 雨滴的数量 -const size = ref(300); +const size = ref(400); // 雨滴的构造函数 class Rain { x = random(w); diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index 5c8d86f..a93bd74 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -106,7 +106,7 @@ ]); const AllData = reactive({ - queryParams: { BODName: '1', area: '', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, + queryParams: { BODName: '1', area: '0', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, }); const { queryParams } = toRefs(AllData); @@ -238,7 +238,8 @@ // 典型项目点击 function changeProject(val) { - // bus.emit('checkProjectFX', { project: XmList.value[val] }); + bus.emit('checkProjectFX', { project: XmList.value[val] }); + // 渲染点位上图 bus.emit('setIniteLayer', [ { layername: 'pipeMonitor', @@ -254,8 +255,6 @@ zoom: 15.2, pitch: 30, }); - // 渲染点位上图 - console.log('渲染4个管网监测点位和1个海绵设施点位'); } // 项目设施分析点击 diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue index 37476c8..60ac7bf 100644 --- a/src/views/sponeScreen/projectHM/canvasRainP.vue +++ b/src/views/sponeScreen/projectHM/canvasRainP.vue @@ -21,7 +21,7 @@ // 存放雨滴的数组 let arr = []; // 雨滴的数量 -const size = ref(300); +const size = ref(400); // 雨滴的构造函数 class Rain { x = random(w); diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index ef051f6..fb6e34f 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -31,7 +31,7 @@ alt="左" class="waterFlow" :style="{ - height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + height: (120 * maxSS1) / 1.1 + 'px', left: '73px', width: '846px', }" @@ -41,7 +41,7 @@ alt="右" class="waterFlow" :style="{ - height: (120 * (nameToData(station5.propertyMonitorList, '水位')[valIndex5] || 0.2)) / 1.8 + 'px', + height: (120 * maxSS2) / 1.8 + 'px', right: '75px', width: '555px', }" @@ -49,27 +49,31 @@
-

实时水深：{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

-

实时水深：{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

+

最大水深：{{ maxSS1 || '--' }}米

+

最大水深：{{ maxSS2 || '--' }}米

- 水深：{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 水深：{{ maxSS1 || '--' }} m 流速：{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s SS：{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L 时间：{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径：2.4*1.1m
- 水深：{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + + 水深：{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速：{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s SS：{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L 时间：{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径：2.4*1.1m
- 水深：{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + + 水深：{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速：{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s SS：{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L 时间：{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} @@ -83,7 +87,7 @@ 管径：3*1.8m
- 水深：{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 水深：{{ maxSS2 || '--' }} m 流速：{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s SS：{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L 时间：{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} @@ -122,6 +126,15 @@ 车4 车5 车3 + + +
+ 左1 + 左2 + 左3 + 左4 + 左5 +
@@ -143,6 +156,8 @@ const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const maxSS1 = ref(0); +const maxSS2 = ref(0); // 获取实时数据 function getRealData() { @@ -161,6 +176,7 @@ valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { return item == max; }); + maxSS1.value = max; } }); @@ -199,6 +215,7 @@ valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { return item == max; }); + maxSS2.value = max; } }); } @@ -343,15 +360,16 @@ .tipsM{ position:absolute; z-index: 120; - background: linear-gradient(0deg, #057AD4 0%, #015080 100%); - border: 1px solid #057AD4; + background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat; + background-size: 100% 100%; padding:10PX; - color:#fff; + color:#C1E8FF; font-size:16PX; width:150PX; span{ width:100%; display: inline-block; + margin-bottom:3px; } } .realData{ @@ -370,9 +388,10 @@ } .waterFX{ + background: red; img{ position:absolute; - z-index: 10; + z-index: 20; } } } diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index 5c8d86f..a93bd74 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -106,7 +106,7 @@ ]); const AllData = reactive({ - queryParams: { BODName: '1', area: '', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, + queryParams: { BODName: '1', area: '0', Xm: '1', XmP: '', XmA: '', XmQ: '1' }, }); const { queryParams } = toRefs(AllData); @@ -238,7 +238,8 @@ // 典型项目点击 function changeProject(val) { - // bus.emit('checkProjectFX', { project: XmList.value[val] }); + bus.emit('checkProjectFX', { project: XmList.value[val] }); + // 渲染点位上图 bus.emit('setIniteLayer', [ { layername: 'pipeMonitor', @@ -254,8 +255,6 @@ zoom: 15.2, pitch: 30, }); - // 渲染点位上图 - console.log('渲染4个管网监测点位和1个海绵设施点位'); } // 项目设施分析点击 diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue index 37476c8..60ac7bf 100644 --- a/src/views/sponeScreen/projectHM/canvasRainP.vue +++ b/src/views/sponeScreen/projectHM/canvasRainP.vue @@ -21,7 +21,7 @@ // 存放雨滴的数组 let arr = []; // 雨滴的数量 -const size = ref(300); +const size = ref(400); // 雨滴的构造函数 class Rain { x = random(w); diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index ef051f6..fb6e34f 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -31,7 +31,7 @@ alt="左" class="waterFlow" :style="{ - height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + height: (120 * maxSS1) / 1.1 + 'px', left: '73px', width: '846px', }" @@ -41,7 +41,7 @@ alt="右" class="waterFlow" :style="{ - height: (120 * (nameToData(station5.propertyMonitorList, '水位')[valIndex5] || 0.2)) / 1.8 + 'px', + height: (120 * maxSS2) / 1.8 + 'px', right: '75px', width: '555px', }" @@ -49,27 +49,31 @@
-

实时水深：{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

-

实时水深：{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

+

最大水深：{{ maxSS1 || '--' }}米

+

最大水深：{{ maxSS2 || '--' }}米

- 水深：{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 水深：{{ maxSS1 || '--' }} m 流速：{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s SS：{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L 时间：{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径：2.4*1.1m
- 水深：{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + + 水深：{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速：{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s SS：{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L 时间：{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径：2.4*1.1m
- 水深：{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + + 水深：{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速：{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s SS：{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L 时间：{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} @@ -83,7 +87,7 @@ 管径：3*1.8m
- 水深：{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 水深：{{ maxSS2 || '--' }} m 流速：{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s SS：{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L 时间：{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} @@ -122,6 +126,15 @@ 车4 车5 车3 + + +
+ 左1 + 左2 + 左3 + 左4 + 左5 +
@@ -143,6 +156,8 @@ const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const maxSS1 = ref(0); +const maxSS2 = ref(0); // 获取实时数据 function getRealData() { @@ -161,6 +176,7 @@ valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { return item == max; }); + maxSS1.value = max; } }); @@ -199,6 +215,7 @@ valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { return item == max; }); + maxSS2.value = max; } }); } @@ -343,15 +360,16 @@ .tipsM{ position:absolute; z-index: 120; - background: linear-gradient(0deg, #057AD4 0%, #015080 100%); - border: 1px solid #057AD4; + background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat; + background-size: 100% 100%; padding:10PX; - color:#fff; + color:#C1E8FF; font-size:16PX; width:150PX; span{ width:100%; display: inline-block; + margin-bottom:3px; } } .realData{ @@ -370,9 +388,10 @@ } .waterFX{ + background: red; img{ position:absolute; - z-index: 10; + z-index: 20; } } } diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index 6625f7b..9c0be3f 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -23,7 +23,7 @@
3 雨水管网产流开始时间1:45，结束时间4:45，累计流量 843.5m³， 最大水深 - {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m + {{ realSW || '--' }}m
@@ -34,22 +34,17 @@ - +

管径：2.4 x 1.1米

-

最大水深：{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

-

进口流速：{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

-

进口SS：{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

-

出口流速：{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

-

出口SS：{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

-

水位最深时间：{{ station1.propertyMonitorXList[valIndex] || '--' }}

+

最大水深：{{ realSW || '--' }} 米

+

进口流速：{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] }} m/s

+

进口SS：{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L

+

出口流速：{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s

+

出口SS：{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L

+

水位最深时间：{{ station2.propertyMonitorXList[valIndex2].slice(11) || '--' }}

@@ -84,39 +79,49 @@ const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); -const valIndex = ref(0); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const realSW = ref(0); //最大水深 // 获取实时数据 -function getRealData() { - let params = { +async function getRealData() { + let params1 = { startTime: localStorage.getItem('setRainDateKF'), endTime: localStorage.getItem('setRainDateKF'), - stCode: '', + stCode: '0371000037', }; - params.stCode = '0371000037'; - graphicReport(params).then(res => { - if (res.data.propertyMonitorList.length > 0) { - station1.value = res.data; - } - }); + let res1 = await graphicReport(params1); + if (res1.data.propertyMonitorList.length > 0) { + station1.value = res1.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); + } - params.stCode = '0371000038'; - graphicReport(params).then(res => { - if (res.data.propertyMonitorList.length > 0) { - station2.value = res.data; - } - }); + let params2 = { + startTime: localStorage.getItem('setRainDateKF'), + endTime: localStorage.getItem('setRainDateKF'), + stCode: '0371000038', + }; + let res2 = await graphicReport(params2); + if (res2.data.propertyMonitorList.length > 0) { + station2.value = res2.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); + // 最大水位出口 + realSW.value = nameToData(station2.value.propertyMonitorList, '水位')[valIndex2.value] || 0.2; + } } // 公共方法，根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); let lists = arr[0] ? arr[0].ylist : []; - // 取最大的值 - let max = Math.max(...lists); - valIndex.value = lists.findIndex(item => { - return item == max; - }); return lists; } @@ -214,6 +219,13 @@ left:243PX; bottom:28PX; } + .waterFlowS{ + width:46PX; + position:absolute; + z-index: 10; + left:247PX; + bottom:105PX; + } .realData{ color:#fff; p{