From e30daf2a0c5426987728dc6ff85685a16119b7cd Mon Sep 17 00:00:00 2001 From: selia-zx <1771203023@qq.com> Date: Sat, 9 May 2026 17:14:56 +0800 Subject: [PATCH] =?UTF-8?q?1.=E7=BB=9F=E4=B8=80=E7=B4=AF=E7=A7=AF=E5=86=B7?= =?UTF-8?q?=E9=87=8F=E5=8D=95=E4=BD=8Dkwh=EF=BC=8C=E7=9E=AC=E6=97=B6?= =?UTF-8?q?=E5=86=B7=E9=87=8F=E5=8D=95=E4=BD=8Dkw=202.=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E3=80=81=E4=B8=AD=E5=A4=AE=E7=83=AD=E6=B0=B4-=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E6=80=BB=E8=A7=88=E3=80=81=E8=83=BD=E6=BA=90=E5=88=86?= =?UTF-8?q?=E6=9E=90=E9=A1=B5=E9=9D=A2=E5=9B=BE=E8=A1=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=9C=80=E5=A4=A7=E6=9C=80=E5=B0=8F=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/energyAnalysis.vue | 4 +- .../energyAnalysis/components/qnqAnalysis.vue | 4 +- .../energyAnalysis/components/ynyAnalysis.vue | 4 +- .../components/ynyQnqAnalysis.vue | 4 +- src/views/centerairC/overview/index.vue | 6 +- .../components/monitor/hotWaterMonitor.vue | 110 ++++++++++-------- src/views/components/viewEnergy.vue | 54 +++++++-- .../components/energyReport.vue | 51 +++++++- .../energyAnalysis/components/temReport.vue | 94 ++++++++++----- .../energyAnalysis/components/waterReport.vue | 98 +++++++++++----- src/views/hotWater/overview/index.vue | 98 +++++++++++----- src/views/index.vue | 4 +- 12 files changed, 380 insertions(+), 151 deletions(-) diff --git a/src/views/centerairC/energyAnalysis/components/energyAnalysis.vue b/src/views/centerairC/energyAnalysis/components/energyAnalysis.vue index c7c5201..2f6bb74 100644 --- a/src/views/centerairC/energyAnalysis/components/energyAnalysis.vue +++ b/src/views/centerairC/energyAnalysis/components/energyAnalysis.vue @@ -124,7 +124,7 @@ - 制冷量(kwr) + 制冷量(kwh) {{ item }} @@ -454,7 +454,7 @@ export default { '' + value + " " + - "kwr" + + "kw" + "
"; } else if (seriesName === "瞬时功率") { res += diff --git a/src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue b/src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue index 4708eb9..25dc0fa 100644 --- a/src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue +++ b/src/views/centerairC/energyAnalysis/components/qnqAnalysis.vue @@ -414,7 +414,7 @@ export default { console.log("Max2", Max2); // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 if (this.timeIndex2 == 0) { - this.unitValue = "(kwr)"; + this.unitValue = "(kwh)"; } else if (this.timeIndex2 == 1) { this.unitValue = "(kwh)"; } else { @@ -553,7 +553,7 @@ export default { '' + value + " " + - "kwr" + + "kwh" + "
"; } else if (seriesName === "上期") { res += diff --git a/src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue b/src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue index 5e4ca89..a802891 100644 --- a/src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue +++ b/src/views/centerairC/energyAnalysis/components/ynyAnalysis.vue @@ -411,7 +411,7 @@ export default { console.log("Max2", Max2); // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 if (this.timeIndex2 == 0) { - this.unitValue = "(kwr)"; + this.unitValue = "(kwh)"; } else if (this.timeIndex2 == 1) { this.unitValue = "(kwh)"; } else { @@ -558,7 +558,7 @@ export default { '' + value + " " + - "kwr" + + "kwh" + "
"; } else if (seriesName === "上期") { res += diff --git a/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue b/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue index f1ca078..7fde51a 100644 --- a/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue +++ b/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue @@ -414,7 +414,7 @@ export default { // console.log("Max2", Max2); // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 if (this.timeIndex2 == 0) { - this.unitValue = "(kwr)"; + this.unitValue = "(kwh)"; } else if (this.timeIndex2 == 1) { this.unitValue = "(kwh)"; } else { @@ -565,7 +565,7 @@ export default { '' + value + " " + - "kwr" + + "kwh" + "
"; } else if ( (seriesName === "本期" || seriesName === "同期") && diff --git a/src/views/centerairC/overview/index.vue b/src/views/centerairC/overview/index.vue index 52a3f9f..c11bd3e 100644 --- a/src/views/centerairC/overview/index.vue +++ b/src/views/centerairC/overview/index.vue @@ -109,7 +109,7 @@
- + @@ -155,7 +155,7 @@ 时间 - 制冷量(kwr) + 制冷量(kwh) 用电量(kwh) EER @@ -579,7 +579,7 @@ export default { '' + value + " " + - "kwr" + + "kwh" + "
"; } else if (seriesName === "用电量") { res += diff --git a/src/views/components/monitor/hotWaterMonitor.vue b/src/views/components/monitor/hotWaterMonitor.vue index 16664a6..a274d5f 100644 --- a/src/views/components/monitor/hotWaterMonitor.vue +++ b/src/views/components/monitor/hotWaterMonitor.vue @@ -48,8 +48,8 @@
无线网关
回水阀
房间
-
水箱1
-
水箱2
+
水箱1(总容量:2.5米)
+
水箱2(总容量:2.5米)
- + -
@@ -90,14 +90,14 @@
{{ item.pumpName }}
-
-
+
- {{ item.waterTemp }}℃ + {{ item.tempSet }}℃ @@ -190,12 +190,12 @@
- {{ progress2 }}米 + 实际容量:{{ progress2 }}米
- {{ progress2 }}米 + 实际容量:{{ progress2 }}米
@@ -211,12 +211,12 @@
- {{ progress1 }}米 + 实际容量:{{ progress1 }}米
- {{ progress1 }}米 + 实际容量:{{ progress1 }}米
@@ -232,6 +232,7 @@
低区回水泵1
低区回水泵2
回水管
+
水箱(总容量:2.5米)
@@ -271,10 +272,10 @@ @click="handleHotPumpClick(item)" alt="" />
-
+
- {{ item.waterTemp }}℃ + {{ item.tempSet }}℃
@@ -309,12 +310,12 @@
- {{ progress1 }}米 + 实际容量:{{ progress1 }}米
- {{ progress1 }}米 + 实际容量:{{ progress1 }}米
@@ -1052,21 +1053,24 @@ export default { isHotPumpRunning() { return this.tableData.some(item => Number(item.runState) !== 0); }, - // 获取主楼-循环泵1的图片 - getCyclePump1Img() { + // 获取循环泵图片（通用方法） + getCyclePumpImg(stateKey) { if (this.tableData.length === 0) return require('../../../assets/flowimg/closepum.png'); - const state = Number(this.tableData[0].loopPumpState1); + const state = Number(this.tableData[0][stateKey]); if (state === 1) return require('../../../assets/flowimg/startpum.png'); if (state === 2) return require('../../../assets/flowimg/badpum.png'); return require('../../../assets/flowimg/closepum.png'); }, - // 获取主楼-循环泵2的图片 - getCyclePump2Img() { - if (this.tableData.length === 0) return require('../../../assets/flowimg/closepum.png'); - const state = Number(this.tableData[0].loopPumpState2); - if (state === 1) return require('../../../assets/flowimg/startpum.png'); - if (state === 2) return require('../../../assets/flowimg/badpum.png'); - return require('../../../assets/flowimg/closepum.png'); + // 获取循环管道图片（判断是否显示动态图） + getCyclePipelineImg() { + if (this.tableData.length === 0) return require('../../../assets/flowimg/cycle-pipeline.png'); + const state1 = Number(this.tableData[0].loopPumpState1); + const state2 = Number(this.tableData[0].loopPumpState2); + // 如果任一循环泵状态为1，则显示动态图 + if (state1 === 1 || state2 === 1) { + return require('../../../assets/flowimg/cycle-pipeline.gif'); + } + return require('../../../assets/flowimg/cycle-pipeline.png'); }, // 点击热泵图片事件 handleHotPumpClick(item) { @@ -1701,14 +1705,20 @@ export default { .text20 { position: absolute; top: 3.4rem; - left: 5.4rem; + left: 4.8rem; z-index: 1; } .text21 { position: absolute; top: 3.4rem; - left: 2.8rem; + left: 2.2rem; + z-index: 1; + } + .text22 { + position: absolute; + top: 3.2rem; + left: 2rem; z-index: 1; } @@ -1944,7 +1954,7 @@ export default { width: 0.6rem; height: 1.15rem; position: absolute; - top: 1.9rem; + top: 1.7rem; left: 3rem; z-index: 3; } @@ -2009,7 +2019,7 @@ export default { .waterBox3 { position: absolute; - top: 0.7rem; + top: 0.5rem; left: 1.6rem; width: 2.16rem; height: 2.6rem; @@ -2045,7 +2055,7 @@ export default { letter-spacing: 0.01rem; color: #d22727; position: absolute; - top: 1.8rem; + top: 1.6rem; left: 3rem; z-index: 3; } @@ -2077,6 +2087,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.5rem; z-index: 3; white-space: nowrap; } @@ -2109,6 +2120,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.5rem; z-index: 3; white-space: nowrap; } @@ -2141,6 +2153,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.4rem; z-index: 3; white-space: nowrap; } @@ -2173,6 +2186,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.4rem; z-index: 3; white-space: nowrap; } @@ -2184,7 +2198,7 @@ export default { background-color: #dff1fa; margin-left: 2%; position: absolute; - top: 1.7rem; + top: 1.5rem; left: 1.9rem; border: solid 0.01rem #11aaea; z-index: 3; @@ -2205,6 +2219,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.4rem; z-index: 3; white-space: nowrap; } @@ -2216,7 +2231,7 @@ export default { background-color: #dff1fa; margin-left: 2%; position: absolute; - top: 1.7rem; + top: 1.5rem; left: 1.9rem; border: solid 0.01rem red; z-index: 3; @@ -2237,6 +2252,7 @@ export default { color: #d22727; position: absolute; top: -0.3rem; + left:-0.4rem; z-index: 3; white-space: nowrap; } diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue index fbd43a5..4ea8f3e 100644 --- a/src/views/components/viewEnergy.vue +++ b/src/views/components/viewEnergy.vue @@ -2,13 +2,8 @@
-
+
{{ item.name }}
@@ -174,6 +169,46 @@ export default { global: false, // 缺省为 false }, }, + markPoint: { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + chartsObj.unit; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + chartsObj.unit; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: colorObj.color, + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: colorObj.color + }, + symbolSize: titleFontSize * 1 + } }, ], }; @@ -299,24 +334,29 @@ export default { .right-table { padding: 27px 15px 35px 15px; } + .mr20 { width: 92px; padding: 2px; } + .charts { margin-top: 20px; width: 100%; height: 300px; } + // 媒体查询，适配大于2000px分辨率的大屏样式 @media (min-width: 2000px) { .right-table { padding: 0.27rem 0.15rem 0.25rem 0.15rem !important; } + .mr20 { width: 0.92rem !important; padding: 0.02rem !important; } + .charts { margin-top: 0.2rem !important; height: 3rem !important; diff --git a/src/views/hotWater/energyAnalysis/components/energyReport.vue b/src/views/hotWater/energyAnalysis/components/energyReport.vue index 32d6880..65bcbcd 100644 --- a/src/views/hotWater/energyAnalysis/components/energyReport.vue +++ b/src/views/hotWater/energyAnalysis/components/energyReport.vue @@ -559,6 +559,8 @@ export default { } }, renderingBroken() { + let unit = ""; + let itemColor = ""; if (this.currentIndex === 0) { this.brokenOption.yAxis.name = "吨"; this.brokenOption.yAxis.nameTextStyle = { @@ -577,6 +579,8 @@ export default { color: "rgba(212, 142, 23,0)", // 100% 处的颜色 }, ]; + unit = "吨"; + itemColor = "#d48e17"; } else if (this.currentIndex === 1) { this.brokenOption.yAxis.name = "度"; this.brokenOption.yAxis.nameTextStyle = { @@ -595,6 +599,8 @@ export default { color: "rgba(26, 179, 149,0)", // 100% 处的颜色 }, ]; + unit = "度"; + itemColor = "#1ab395"; } else if (this.currentIndex === 2) { this.brokenOption.yAxis.name = "度/吨"; this.brokenOption.yAxis.nameTextStyle = { @@ -613,9 +619,12 @@ export default { color: "rgba(31, 141, 238,0)", // 100% 处的颜色 }, ]; + unit = ""; + itemColor = "#1f8dee"; } // 保存当前索引用于闭包 const currentIndex = this.currentIndex; + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; // 动态设置 tooltip 格式化函数 this.brokenOption.tooltip = { trigger: "axis", @@ -635,6 +644,46 @@ export default { } }, }; + this.brokenOption.series[0].markPoint = { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + unit; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + unit; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: itemColor, + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: itemColor + }, + symbolSize: titleFontSize * 1 + } this.brokenOption.xAxis.data = this.brokenTime; this.brokenInstanc.setOption(this.brokenOption); }, @@ -764,7 +813,7 @@ export default { }, grid: { - top: "10%", + top: "15%", left: "3%", right: "4%", bottom: "5%", diff --git a/src/views/hotWater/energyAnalysis/components/temReport.vue b/src/views/hotWater/energyAnalysis/components/temReport.vue index e6eab20..a3e230f 100644 --- a/src/views/hotWater/energyAnalysis/components/temReport.vue +++ b/src/views/hotWater/energyAnalysis/components/temReport.vue @@ -2,25 +2,10 @@
- - + + - +
查询 @@ -31,14 +16,8 @@
- + @@ -241,6 +220,7 @@ export default { color: "rgba(31, 141, 238,0)", // 100% 处的颜色 }, ]; + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; // 动态设置 tooltip 格式化函数 this.brokenOption.tooltip = { trigger: "axis", @@ -252,6 +232,46 @@ export default { return `${month}
温度: ${value} ℃`; }, }; + this.brokenOption.series[0].markPoint = { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '℃'; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '℃'; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: "#1f8dee", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: "#1f8dee" + }, + symbolSize: titleFontSize * 1 + } this.brokenOption.xAxis.data = this.brokenTime; this.brokenInstanc.setOption(this.brokenOption); }, @@ -576,6 +596,7 @@ export default { } } } + .data-content { display: flex; flex-direction: row; @@ -583,6 +604,7 @@ export default { justify-content: space-between; width: 100%; margin-top: 23px; + .data-li { background-color: transparent; border-radius: 8px; @@ -597,16 +619,19 @@ export default { font-size: 0.16rem; position: relative; overflow: hidden; + .use-icon { width: 0.6rem; height: 0.6rem; } + .use-text { width: 33%; display: flex; flex-direction: column; align-items: flex-start; color: #dbdbdb; + .data-text { z-index: 11 !important; font-family: DIN-Bold; @@ -614,22 +639,26 @@ export default { margin-top: 0.05rem; color: #ffffff; } + .downText { color: #ff4027; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom { margin-right: 0.08rem; } } + .upText { color: #2ff016; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom, .el-icon-top { margin-right: 0.08rem; @@ -637,6 +666,7 @@ export default { } } } + .type-img { position: absolute; bottom: 0; @@ -644,12 +674,14 @@ export default { height: 0.52rem; z-index: 10; } + .type1 { border: 1px solid #e8aa13; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); } + .type1::after { content: ""; width: 100%; @@ -663,12 +695,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type2 { border: 1px solid #27a0f2; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); } + .type2::after { content: ""; width: 100%; @@ -682,12 +716,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type3 { border: 1px solid #1ad3ef; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); } + .type3::after { content: ""; width: 100%; @@ -701,12 +737,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type4 { border: 1px solid #11d47b; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); } + .type4::after { content: ""; width: 100%; @@ -721,19 +759,23 @@ export default { z-index: 1; } } + .choice { margin: 20px; + .mr20 { padding: 0.05rem 0.2rem; white-space: nowrap; width: auto; } } + .charts { width: 100%; height: 300px; margin-bottom: 0.1rem; } + // 媒体查询，适配大于2000px分辨率的大屏样式 @media (min-width: 2000px) { .condition { diff --git a/src/views/hotWater/energyAnalysis/components/waterReport.vue b/src/views/hotWater/energyAnalysis/components/waterReport.vue index b686cd6..409a315 100644 --- a/src/views/hotWater/energyAnalysis/components/waterReport.vue +++ b/src/views/hotWater/energyAnalysis/components/waterReport.vue @@ -2,25 +2,10 @@
- - + + - +
查询 @@ -31,14 +16,8 @@
- + @@ -241,6 +220,7 @@ export default { }, ]; // 动态设置 tooltip 格式化函数 + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; this.brokenOption.tooltip = { trigger: "axis", formatter: function (params) { @@ -248,9 +228,49 @@ export default { const data = params[0]; const month = data.name; const value = data.value; - return `${month}
水位: ${value} %`; + return `${month}
水位: ${value} 米`; }, }; + this.brokenOption.series[0].markPoint = { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '米'; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '米'; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: "#1f8dee", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: "#1f8dee" + }, + symbolSize: titleFontSize * 1 + } this.brokenOption.xAxis.data = this.brokenTime; this.brokenInstanc.setOption(this.brokenOption); }, @@ -437,7 +457,7 @@ export default { }, grid: { - top: "10%", + top: "15%", left: "3%", right: "4%", bottom: "5%", @@ -576,6 +596,7 @@ export default { } } } + .data-content { display: flex; flex-direction: row; @@ -583,6 +604,7 @@ export default { justify-content: space-between; width: 100%; margin-top: 23px; + .data-li { background-color: transparent; border-radius: 8px; @@ -597,16 +619,19 @@ export default { font-size: 0.16rem; position: relative; overflow: hidden; + .use-icon { width: 0.6rem; height: 0.6rem; } + .use-text { width: 33%; display: flex; flex-direction: column; align-items: flex-start; color: #dbdbdb; + .data-text { z-index: 11 !important; font-family: DIN-Bold; @@ -614,22 +639,26 @@ export default { margin-top: 0.05rem; color: #ffffff; } + .downText { color: #ff4027; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom { margin-right: 0.08rem; } } + .upText { color: #2ff016; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom, .el-icon-top { margin-right: 0.08rem; @@ -637,6 +666,7 @@ export default { } } } + .type-img { position: absolute; bottom: 0; @@ -644,12 +674,14 @@ export default { height: 0.52rem; z-index: 10; } + .type1 { border: 1px solid #e8aa13; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); } + .type1::after { content: ""; width: 100%; @@ -663,12 +695,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type2 { border: 1px solid #27a0f2; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); } + .type2::after { content: ""; width: 100%; @@ -682,12 +716,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type3 { border: 1px solid #1ad3ef; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); } + .type3::after { content: ""; width: 100%; @@ -701,12 +737,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type4 { border: 1px solid #11d47b; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); } + .type4::after { content: ""; width: 100%; @@ -721,19 +759,23 @@ export default { z-index: 1; } } + .choice { margin: 20px; + .mr20 { padding: 0.05rem 0.2rem; white-space: nowrap; width: auto; } } + .charts { width: 100%; height: 300px; margin-bottom: 0.1rem; } + // 媒体查询，适配大于2000px分辨率的大屏样式 @media (min-width: 2000px) { .condition { diff --git a/src/views/hotWater/overview/index.vue b/src/views/hotWater/overview/index.vue index 5942af5..2199f90 100644 --- a/src/views/hotWater/overview/index.vue +++ b/src/views/hotWater/overview/index.vue @@ -8,38 +8,22 @@
- +
{{ useHotWater }}
昨日用水量(吨)
- +
{{ electValue }}
昨日用电量(度)
- +
{{ electWater }}
昨日单耗(度/吨)
- +
{{ allData }}
通讯设备设备总数(台)
@@ -62,13 +46,8 @@
当月数据统计
-
+
{{ item.title }}
@@ -504,6 +483,7 @@ export default { //初始化chartInstance2对象 折线图 initChart2() { this.brokenInstanc = echarts.init(this.$refs.analyse_ref); + const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100; this.brokenOption = { tooltip: { trigger: "axis", @@ -527,7 +507,7 @@ export default { }, grid: { - top: "4%", + top: "15%", left: "3%", right: "4%", bottom: "5%", @@ -711,18 +691,27 @@ export default { }); }, renderingBroken() { + let unit = ""; + let itemColor = ""; if (this.currentIndex === 0) { this.brokenOption.series[0].data = this.brokenData1; this.brokenOption.series[0].itemStyle.color = "#d48e17"; + unit = "吨"; + itemColor = "#d48e17"; } else if (this.currentIndex === 1) { this.brokenOption.series[0].data = this.brokenData2; this.brokenOption.series[0].itemStyle.color = "#1ab395"; + unit = "度"; + itemColor = "#1ab395"; } else if (this.currentIndex === 2) { this.brokenOption.series[0].data = this.brokenData3; this.brokenOption.series[0].itemStyle.color = "#1f8dee"; + unit = ""; + itemColor = "#1f8dee"; } // 保存当前索引用于闭包 const currentIndex = this.currentIndex; + const titleFontSize = this.$refs.analyse_ref.offsetWidth / 100; // 动态设置 tooltip 格式化函数 this.brokenOption.tooltip = { trigger: "axis", @@ -742,6 +731,46 @@ export default { } }, }; + this.brokenOption.series[0].markPoint = { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + unit; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + unit; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: itemColor, + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: itemColor + }, + symbolSize: titleFontSize * 1 + } this.brokenOption.xAxis.data = this.brokenTime; this.brokenInstanc.setOption(this.brokenOption); }, @@ -756,8 +785,10 @@ export default { align-items: stretch; justify-content: space-between; margin-bottom: 0.2rem; + .overview-top-left { width: 65%; + .overview-data { width: 100%; padding: 0.5rem; @@ -765,16 +796,19 @@ export default { flex-direction: row; align-items: center; justify-content: space-between; + .overview-data-li { width: 1.8rem; height: 1.65rem; position: relative; + .overview-img { width: 1.8rem; height: 1.65rem; position: absolute; top: 0; } + .overview-num { font-family: DIN-Bold; font-size: 0.3rem; @@ -787,6 +821,7 @@ export default { top: 0.28rem; right: 0; } + .overview-title { font-family: SourceHanSansCN-Regular; font-size: 0.18rem; @@ -802,23 +837,28 @@ export default { } } } + .overview-top-right { width: 33%; + .pump-charts { width: 100%; height: 2.65rem; } } } + .overview-bottom { .choice { - margin: 20px; + margin: 20px 20px 0 20px; + .mr20 { padding: 0.05rem 0.2rem; white-space: nowrap; width: auto; } } + .brokenEcharts { width: 100%; height: 4rem; diff --git a/src/views/index.vue b/src/views/index.vue index ee63482..d591919 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -84,7 +84,7 @@
-
总产冷量(kw)
+
总产冷量(kwh)
{{ projectView.totalCold }}
@@ -108,7 +108,7 @@
-
今年产冷量(kw)
+
今年产冷量(kwh)
{{ projectView.yearCold }}