From 89b245cbe310ade93a53820f521a6f53657045ee Mon Sep 17 00:00:00 2001 From: selia-zx <1771203023@qq.com> Date: Tue, 14 Jul 2026 14:58:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E8=B5=84?= =?UTF-8?q?=E6=96=99=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE=E3=80=81=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E6=B7=BB=E5=8A=A0=E8=83=BD=E8=80=97=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 8 +- src/utils/global.js | 2 +- src/views/components/viewEnergy.vue | 67 ++++++-- src/views/index.vue | 255 ++++++++++------------------ 4 files changed, 155 insertions(+), 177 deletions(-) diff --git a/.env.development b/.env.development index 4c2d515..3c5b8bc 100644 --- a/.env.development +++ b/.env.development @@ -6,12 +6,12 @@ ENV = 'development' # 开发环境 # VUE_APP_BASE_API = '/dev-api' -# 后台 -VUE_APP_BASE_API = 'http://192.168.1.222:8080' -# 梅州云端 +# # 后台 +# VUE_APP_BASE_API = 'http://192.168.1.222:8080' +# # 梅州云端 # VUE_APP_BASE_API = 'http://106.55.173.225:8091' # 保利山庄 -# VUE_APP_BASE_API = 'http://106.55.173.225:8092' +VUE_APP_BASE_API = 'http://106.55.173.225:8093' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/src/utils/global.js b/src/utils/global.js index 2ad0e0a..77b109d 100644 --- a/src/utils/global.js +++ b/src/utils/global.js @@ -1,6 +1,6 @@ // 图片url -export const imgUrl = "http://106.55.173.225:8090"; +export const imgUrl = "http://106.55.173.225:8093"; export default { diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue index fe1d66e..4ea8f3e 100644 --- a/src/views/components/viewEnergy.vue +++ b/src/views/components/viewEnergy.vue @@ -2,13 +2,8 @@
-
+
{{ item.name }}
@@ -81,12 +76,16 @@ export default { ); console.log("当前要渲染的数据对象", chartsObj); console.log("当前要渲染的颜色对象", colorObj); - const titleFontSize = this.$refs.chart_ref.offsetWidth / 50; + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; let adapterOption = {}; // 添加折线的配置 adapterOption = { tooltip: { trigger: "axis", + textStyle: { + // 设置提示框内文字的大小 + fontSize: titleFontSize, + }, // 自定义 tooltip 内容 formatter: function (params) { var res = params[0].name + "
"; @@ -139,9 +138,13 @@ export default { { data: chartsObj.data, name: event, + // 拐点大小 + symbolSize: titleFontSize * 0.5, //折线颜色 itemStyle: { color: colorObj.color, //折线的颜色 + // 设置折线的厚度 + width: titleFontSize * 0.1, }, lineStyle: { color: colorObj.color, //折线点的颜色 @@ -166,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 + } }, ], }; @@ -291,27 +334,29 @@ export default { .right-table { padding: 27px 15px 35px 15px; } -.choice { - margin-left: 0 !important; -} + .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/index.vue b/src/views/index.vue index c1cdf50..7049c55 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -5,25 +5,32 @@
项目简介
- Base64 Image + Base64 Image
- +
项目名称
{{ projectObj.proName }}
+
- -
建筑面积
-
-
{{ projectObj.buildingArea }}m³
-
-
-
- +
运营地址
{{ projectObj.proAddr }}
@@ -32,7 +39,22 @@
- + +
建筑面积
+
+
{{ projectObj.buildingArea }}m³
+
+
+
+
项目运行开始时间
{{ projectObj.operateStartTime }}
@@ -40,139 +62,39 @@
-
+
中央空调冷源系统(实时EER系数)
-
+
-
空压热回收系统
-
-
-
-
出水温度
-
-
-
离心机高温出水温度
-
-
-
-
中温换热出水温度
-
-
-
-
低温1换热出水温度
-
-
-
-
低温2换热出水温度
-
-
-
-
-
-
热量数据
-
-
-
生产累计热量
-
- {{ heatData.productionHeatSum }}kwh -
-
-
-
散热累计热量
-
- {{ heatData.dissipationHeatSum }}kwh -
-
-
-
总热量回收
-
- {{ heatData.totalHeatRecoverySum }}kwh -
-
-
-
热利用率
-
{{ heatData.heatUtilization }}%
-
-
-
-
-
-
-
系统数据
-
-
-
离心机入口温度
-
-
-
-
离心机出水温度
-
-
-
-
保障进水温度
-
-
-
-
- - - -
-
-
-
-
阀门开度
- -
-
-
-
热回收数据
-
-
-
瞬时热量:
-
{{ heatRecoveryData.instantaneousHeatSum }}kw
-
-
-
日累计热量:
-
{{ heatRecoveryData.dailyAccumulatedHeat }}kwh
-
-
-
累计热量:
-
{{ heatRecoveryData.accumulatedHeatSum }}kwh
-
-
-
-
-
应用测数据
-
-
-
瞬时热量:
-
{{ applicationData.instantaneousHeatSum }}kw
-
-
-
日累计热量:
-
{{ applicationData.dailyAccumulatedHeat }}kwh
-
-
-
累计热量:
-
{{ applicationData.accumulatedHeatSum }}kwh
-
-
-
-
-
+
能耗分析
+
- + - +
@@ -191,12 +113,14 @@ import { introduction, changeLogo, ersDatas } from "@/api/index"; import ViewColdSys from "./components/viewColdSys.vue"; import HotWater from "./components/hotWater.vue"; import SysEnergy from "./components/sysEnergy.vue"; +import ViewEnergy from "./components/viewEnergy.vue"; export default { components: { ViewColdSys, HotWater, - SysEnergy + SysEnergy, + ViewEnergy, }, data() { return { @@ -285,7 +209,7 @@ export default { this.viewImageUrl = file.url; }, // 上传成功 - handleUploadSuccess(response, file, fileList) { }, + handleUploadSuccess(response, file, fileList) {}, // 处理文件 handleFileChange(file, fileList) { console.log("file", file); @@ -433,11 +357,11 @@ export default { width: 100%; display: flex; flex-direction: row; - align-items: flex-start; + align-items: center; padding: 0.35rem; .project-img { - width: 1.4rem; + width: 1.7rem; height: 1.4rem; border-radius: 0.1rem; border: solid 1px #0163a8; @@ -492,9 +416,11 @@ export default { } .sysBg { - background: linear-gradient(180deg, - rgba(0, 68, 126, 0.45) 0%, - rgba(0, 40, 80, 0.2) 100%); + background: linear-gradient( + 180deg, + rgba(0, 68, 126, 0.45) 0%, + rgba(0, 40, 80, 0.2) 100% + ); border: 1px solid rgba(0, 136, 240, 0.25); border-radius: 8px; overflow: hidden; @@ -508,9 +434,11 @@ export default { left: 0; width: 40px; height: 40px; - background: radial-gradient(circle at top left, - rgba(0, 180, 255, 0.15) 0%, - transparent 70%); + background: radial-gradient( + circle at top left, + rgba(0, 180, 255, 0.15) 0%, + transparent 70% + ); pointer-events: none; } @@ -522,9 +450,11 @@ export default { right: 0; width: 60px; height: 60px; - background: radial-gradient(circle at bottom right, - rgba(0, 136, 240, 0.1) 0%, - transparent 70%); + background: radial-gradient( + circle at bottom right, + rgba(0, 136, 240, 0.1) 0%, + transparent 70% + ); pointer-events: none; } @@ -536,9 +466,11 @@ export default { color: #ffffff; letter-spacing: 2px; position: relative; - background: linear-gradient(90deg, - rgba(0, 121, 206, 0.5) 0%, - rgba(0, 121, 206, 0.08) 100%); + background: linear-gradient( + 90deg, + rgba(0, 121, 206, 0.5) 0%, + rgba(0, 121, 206, 0.08) 100% + ); border-bottom: 1px solid rgba(0, 136, 240, 0.2); // 标题左侧装饰竖条 @@ -550,9 +482,7 @@ export default { transform: translateY(-50%); width: 3px; height: 60%; - background: linear-gradient(180deg, - #00b4ff 0%, - #0079ce 100%); + background: linear-gradient(180deg, #00b4ff 0%, #0079ce 100%); border-radius: 2px; box-shadow: 0 0 6px rgba(0, 180, 255, 0.6); } @@ -582,7 +512,6 @@ export default { justify-content: space-between; margin: 20px; - .overview { width: 100%; padding: 30px 20px 5px 20px; @@ -605,10 +534,12 @@ export default { font-size: 15px; color: #ffffff; /* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */ - background: linear-gradient(to bottom, - rgba(31, 100, 146, 0.6) 0%, - rgba(33, 65, 87, 0.3) 50%, - rgba(40, 62, 77, 0) 100%); + background: linear-gradient( + to bottom, + rgba(31, 100, 146, 0.6) 0%, + rgba(33, 65, 87, 0.3) 50%, + rgba(40, 62, 77, 0) 100% + ); border-radius: 8px; padding: 5px; color: white; @@ -732,8 +663,10 @@ export default { } } -@media (max-width: 1485px) {} +@media (max-width: 1485px) { +} // 媒体查询，适配大于2000px分辨率的大屏样式 -@media (min-width: 2000px) {} +@media (min-width: 2000px) { +}