From bf2640958b8be1228a97bf0c456a1889f55022e0 Mon Sep 17 00:00:00 2001 From: selia-zx <1771203023@qq.com> Date: Mon, 16 Jun 2025 17:25:25 +0800 Subject: [PATCH] =?UTF-8?q?1.=E9=A6=96=E9=A1=B5=E6=B7=BB=E5=8A=A0=E7=94=9F?= =?UTF-8?q?=E6=B4=BB=E7=83=AD=E6=B0=B4=E3=80=81=E6=B8=A9=E5=BA=A6=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E3=80=81=E9=A3=8E=E6=9F=9C=E7=B3=BB=E7=BB=9F=E7=9A=84?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=202.=E5=86=B7=E6=BA=90=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8E=86=E5=8F=B2=E5=A4=A9=E6=B0=94=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E9=A1=B5=E9=9D=A2=E5=B9=B6=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- src/api/centerairC/temHistory.js | 9 + .../centerairC/sysMonitor/monitorCenter.vue | 8 +- .../centerairC/temHistoryQuery/index.vue | 368 ++++++++++++++++++ src/views/components/aircAndWindcMeter.vue | 332 ++++++++++++++++ src/views/components/hotWater.vue | 142 +++++++ src/views/components/temMeter.vue | 331 ++++++++++++++++ src/views/components/viewColdSys.vue | 223 ++++++----- src/views/components/viewEnergy.vue | 14 + src/views/index.vue | 102 ++++- 10 files changed, 1416 insertions(+), 117 deletions(-) create mode 100644 src/api/centerairC/temHistory.js create mode 100644 src/views/centerairC/temHistoryQuery/index.vue create mode 100644 src/views/components/aircAndWindcMeter.vue create mode 100644 src/views/components/hotWater.vue create mode 100644 src/views/components/temMeter.vue diff --git a/.env.development b/.env.development index a08e7e1..13c7001 100644 --- a/.env.development +++ b/.env.development @@ -7,9 +7,9 @@ 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:8091' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/src/api/centerairC/temHistory.js b/src/api/centerairC/temHistory.js new file mode 100644 index 0000000..8aaaa74 --- /dev/null +++ b/src/api/centerairC/temHistory.js @@ -0,0 +1,9 @@ +import request from "@/utils/request"; +// 历史天气查询 +export function weatherTempData(query) { + return request({ + url: "/device/cs/getWeatherTemp", + method: "get", + params: query, + }); +} diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue index d0656c1..49fc345 100644 --- a/src/views/centerairC/sysMonitor/monitorCenter.vue +++ b/src/views/centerairC/sysMonitor/monitorCenter.vue @@ -2506,7 +2506,7 @@ export default { } ) .then(() => { - this.operationConrol(item.frequencyId, item.frequencySet); + this.hadleOperationConrol(item.frequencyId, item.frequencySet); }) .catch(() => { // 用户取消操作，需要更新原来的频率 @@ -2535,7 +2535,7 @@ export default { } else { param = 0; } - this.operationConrol(item.controlId, param); + this.hadleOperationConrol(item.controlId, param); }) .catch(() => { // 用户取消操作，恢复开关状态 @@ -2565,7 +2565,7 @@ export default { } else { param = 0; } - this.operationConrol(item.automaticId, param); + this.hadleOperationConrol(item.automaticId, param); }) .catch(() => { // 用户取消操作，恢复开关状态 @@ -2595,7 +2595,7 @@ export default { } else { param = 0; } - this.operationConrol(item.frequencyAutotextId, param); + this.hadleOperationConrol(item.frequencyAutotextId, param); }) .catch(() => { // 用户取消操作，恢复开关状态 diff --git a/src/views/centerairC/temHistoryQuery/index.vue b/src/views/centerairC/temHistoryQuery/index.vue new file mode 100644 index 0000000..1db9a50 --- /dev/null +++ b/src/views/centerairC/temHistoryQuery/index.vue @@ -0,0 +1,368 @@ + + + + diff --git a/src/views/components/aircAndWindcMeter.vue b/src/views/components/aircAndWindcMeter.vue new file mode 100644 index 0000000..59f8f37 --- /dev/null +++ b/src/views/components/aircAndWindcMeter.vue @@ -0,0 +1,332 @@ + + + + + diff --git a/src/views/components/hotWater.vue b/src/views/components/hotWater.vue new file mode 100644 index 0000000..e00c49f --- /dev/null +++ b/src/views/components/hotWater.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/src/views/components/temMeter.vue b/src/views/components/temMeter.vue new file mode 100644 index 0000000..cfa61bb --- /dev/null +++ b/src/views/components/temMeter.vue @@ -0,0 +1,331 @@ + + + + + diff --git a/src/views/components/viewColdSys.vue b/src/views/components/viewColdSys.vue index 9c36dd5..bf71eb6 100644 --- a/src/views/components/viewColdSys.vue +++ b/src/views/components/viewColdSys.vue @@ -9,6 +9,12 @@ import * as echarts from "echarts"; import { viewMainParams } from "@/api/index"; export default { + props: { + subData: { + type: Array, + required: true, + }, + }, data() { return { chartInstance: null, @@ -36,11 +42,24 @@ export default { }, }; }, + watch: { + subData: { + immediate: true, // 页面加载时立即触发一次监听 + handler(newVal) { + // console.log("检测到传功来的数据", this.subData); + if (Object.keys(newVal).length > 0) { + console.log("newval", newVal); + this.$nextTick(() => { + this.echartsData(); + }); + } + }, + }, + }, mounted() { this.initChart(); this.screenAdapter(); window.addEventListener("resize", this.screenAdapter); - this.getChartsData(); }, destroyed() { //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 @@ -441,117 +460,113 @@ export default { this.chartInstance.resize(); }, // 请求的数据 - getChartsData() { - viewMainParams().then((res) => { - console.log("系统参数返回", res); - console.log("冷源监控返回",res.rows[0]); - if (res.code == 200) { - this.useForm.maxData = 10; - this.useForm.useData = res.rows[0].values[0].value; - let that = this; - // 使用配置函数 - const axisLineColor = this.getAxisLineColor( - this.useForm.useData, - this.useForm.maxData - ); - const adapterOption = { - series: [ - { - name: "内部动态阴影", - axisLine: { - lineStyle: { - color: axisLineColor, - // 相当于阴影部分的直径 - // width: 80, - }, + echartsData() { + if (this.subData.length > 0) { + this.useForm.maxData = 10; + this.useForm.useData = this.subData[0].value; + let that = this; + // 使用配置函数 + const axisLineColor = this.getAxisLineColor( + this.useForm.useData, + this.useForm.maxData + ); + const adapterOption = { + series: [ + { + name: "内部动态阴影", + axisLine: { + lineStyle: { + color: axisLineColor, + // 相当于阴影部分的直径 + // width: 80, }, }, - { - name: "内部大边框", - min: 0, - max: this.useForm.maxData, - }, - { - name: "指针上的圆", - data: [ - { - value: 5, + }, + { + name: "内部大边框", + min: 0, + max: this.useForm.maxData, + }, + { + name: "指针上的圆", + data: [ + { + value: 5, + }, + ], + }, + { + name: "指针上的渐变圆", + label: { + show: true, + position: "center", // 文字显示在中心位置 + offset: [0, -5], // 向上偏移 10 个单位 + formatter: function () { + // 返回 HTML 标签，使用 rich 里定义的样式 + return `{line|${that.useForm.useData}}`; + }, + rich: { + line: { + color: "#fff", // 第二行文字颜色 + fontSize: 20, // 第二行文字大小 + lineHeight: 0, // 行高，实现间距 }, - ], + }, }, - { - name: "指针上的渐变圆", - label: { - show: true, - position: "center", // 文字显示在中心位置 - offset: [0, -5], // 向上偏移 10 个单位 - formatter: function () { - // 返回 HTML 标签，使用 rich 里定义的样式 - return `{line|${that.useForm.useData}}`; - }, - rich: { - line: { - color: "#fff", // 第二行文字颜色 - fontSize: 20, // 第二行文字大小 - lineHeight: 0, // 行高，实现间距 + data: [ + { + value: 0, + itemStyle: { + // 设置渐变颜色 + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "rgb(4,112,212)", // 顶部颜色 + }, + { + offset: 0.3, + color: "rgba(0, 46, 93)", // 底部透明 + }, + ], + global: false, // 缺省为 false }, }, }, - data: [ - { - value: 0, - itemStyle: { - // 设置渐变颜色 - color: { - type: "linear", - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: "rgb(4,112,212)", // 顶部颜色 - }, - { - offset: 0.3, - color: "rgba(0, 46, 93)", // 底部透明 - }, - ], - global: false, // 缺省为 false - }, - }, - }, - ], - }, - { - // 指针 数据 - name: this.energyCostText, - max: this.useForm.maxData, //最大刻度 - axisLabel: { - formatter: (value) => { - // 仅显示 0 和最大值 - if (value === 0 || value == this.useForm.maxData) { - // 替换 100 为你的最大值 - return value; - } - return ""; - }, + ], + }, + { + // 指针 数据 + name: this.energyCostText, + max: this.useForm.maxData, //最大刻度 + axisLabel: { + formatter: (value) => { + // 仅显示 0 和最大值 + if (value === 0 || value == this.useForm.maxData) { + // 替换 100 为你的最大值 + return value; + } + return ""; }, - data: [ - { - name: this.dateUse, - value: this.useForm.useData, - }, - ], }, - ], - }; - this.chartInstance.setOption(adapterOption); - //手动的调用图标对象的resize才能产生效果 - this.chartInstance.resize(); - } - }); + data: [ + { + name: this.dateUse, + value: this.useForm.useData, + }, + ], + }, + ], + }; + this.chartInstance.setOption(adapterOption); + //手动的调用图标对象的resize才能产生效果 + this.chartInstance.resize(); + } }, }, }; @@ -568,7 +583,7 @@ export default { .sys_charts { width: 100%; - height: 1.6rem; + height: 150px; } .eer { font-size: 18px; diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue index 999bb40..a2d1584 100644 --- a/src/views/components/viewEnergy.vue +++ b/src/views/components/viewEnergy.vue @@ -290,4 +290,18 @@ export default { 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 ee63482..abd3236 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -119,15 +119,33 @@
冷源系统
- +
-
能耗分析
+
冷源能耗
- + +
+
+
+
热水系统
+
+ +
+
+
+
风柜系统
+
+ +
+
+
+
温度系统
+
+
import * as echarts from "echarts"; import { imgUrl } from "@/utils/global"; -import { introduction, changeLogo, viewProfile } from "@/api/index"; +import { + introduction, + changeLogo, + viewProfile, + viewMainParams, +} from "@/api/index"; import viewEnergy from "./components/viewEnergy.vue"; import ViewColdSys from "./components/viewColdSys.vue"; +import HotWater from "./components/hotWater.vue"; +import AircAndWindcMeter from "./components/aircAndWindcMeter.vue"; +import TemMeter from "./components/temMeter.vue"; export default { - components: { viewEnergy, ViewColdSys }, + components: { + viewEnergy, + ViewColdSys, + HotWater, + AircAndWindcMeter, + TemMeter, + }, data() { return { imgUrl: "", @@ -203,11 +235,18 @@ export default { chartsData1: null, chartsData2: null, isShowHome: true, + + //传给子组件的数据 + coldSys: [], + hotWaterSys: [], + airAndWindSys: [], + temSys: [], }; }, mounted() { this.getProject(); this.getHomeData(); + this.getSubData(); // this.initChart(); // window.addEventListener("resize", this.screenAdapter); // this.screenAdapter(); @@ -474,7 +513,7 @@ export default { //手动的调用图标对象的resize才能产生效果 this.chartInstance.resize(); }, - // 近30天楼栋用水 + // getChartsData() { const now = new Date(); const startDate = new Date( @@ -547,6 +586,34 @@ export default { } }); }, + // 请求的数据 + getSubData() { + viewMainParams().then((res) => { + console.log("系统参数返回", res); + console.log("冷源监控返回", res.rows[0]); + this.coldSys = []; + this.hotWaterSys = []; + this.airAndWindSys = []; + this.temSys = []; + if (res.code == 200 && res.rows) { + res.rows.forEach((val) => { + if (val.name.includes("冷源")) { + this.coldSys = val.values; + console.log("this.coldSys111111111111", this.coldSys); + } + if (val.name.includes("热水")) { + this.hotWaterSys = val.values; + } + if (val.name.includes("风柜")) { + this.airAndWindSys = val.values; + } + if (val.name.includes("温度")) { + this.temSys = val.values; + } + }); + } + }); + }, }, }; @@ -653,7 +720,28 @@ export default { align-items: stretch; justify-content: space-between; .special-div { - width: 100%; + width: 24.5%; + } +} +@media (max-width: 1485px) { + .overview-li { + width: calc(33.33%) !important; + height: 2rem !important; + background-size: 2rem 2rem !important; + margin-bottom: 0.3rem; + font-size: 0.22rem !important; + .overview-details { + font-size: 0.27rem !important; + } + } + .project-bie { + flex-wrap: wrap !important; + .special-div { + width: 49.5% !important; + margin-bottom: 0.25rem; + } } } +// 媒体查询，适配大于2000px分辨率的大屏样式 +@media (min-width: 2000px) {}