同比环比分析添加导出功能

2.修改能源分析页面折线图
3.对接热水热泵运行记录

.env.development

@@ -8,7 +8,7 @@ ENV = 'development'
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
 # VUE_APP_BASE_API = 'http://192.168.1.222:8080'
-# 云端
+# 海湾酒店-云端
 VUE_APP_BASE_API = 'http://106.55.173.225:8090'
 
 # 路由懒加载

src/api/aircAndWindc/index.js

@@ -8,3 +8,20 @@ export function windList(query) {
     params: query,
   });
 }
+
+//查询定时开关列表
+export function timeList(query) {
+  return request({
+    url: "/device/ahu/monitor/timeList",
+    method: "get",
+    params: query,
+  });
+}
+//修改定时开关
+export function undateTime(query) {
+  return request({
+    url: "/device/ahu/monitor/time",
+    method: "put",
+    params: query,
+  });
+}

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,
+  });
+}

src/api/comprehensiveEnergy/hotPumpLog.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+export const hotWaterList = (data) => {
+    return request({
+        url: "/reportHotWater/list",
+        method: "post",
+        data: data,
+    });
+};
+
+// 导出
+export const hotWaterExport = (data) => {
+    return request({
+        url: "/reportHotWater/export",
+        method: "post",
+        data,
+        responseType: "blob",
+    });
+};
+// 修改
+export const hotWaterEdit = (data) => {
+    return request({
+        url: "/reportHotWater/edit",
+        method: "put",
+        data: data,
+    });
+};

src/api/comprehensiveEnergy/meterRecord.js

@@ -0,0 +1,19 @@
+import request from "@/utils/request";
+
+export const meterReadingsList = (data) => {
+    return request({
+        url: "/reportMeterReadings/list",
+        method: "post",
+        data: data,
+    });
+};
+
+// 导出
+export const meterReadingsExport = (data) => {
+    return request({
+        url: "/reportMeterReadings/export",
+        method: "post",
+        data,
+        responseType: "blob",
+    });
+};

src/api/comprehensiveEnergy/systemEnergy.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export const compreReport = (data) => {
+    return request({
+        url: "/compre/report",
+        method: "post",
+        data,
+    });
+};

src/api/device/gather.js

@@ -8,6 +8,12 @@ export function cpmList(query) {
     params: query,
   });
 }
+export function cpmList2(cpmIds) {
+  return request({
+    url: "/device/cpm/list/" + cpmIds,
+    method: "get",
+  });
+}
 
 // 根据id查询设备采集参数信息
 export function getCPM(cpmId) {

src/api/hotWater/dataAnalysis.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 数据分析-月
+export function queryMonthDatas(query) {
+  return request({
+    url: "/hot_energy/analysis/queryMonth",
+    method: "get",
+    params: query,
+  });
+}
+// 数据分析-年
+export function queryYearDatas(query) {
+  return request({
+    url: "/hot_energy/analysis/queryYear",
+    method: "get",
+    params: query,
+  });
+}

src/api/hotWater/energyAnalysis.js

@@ -0,0 +1,34 @@
+import request from "@/utils/request";
+
+// 楼层
+export function hotBuildList(query) {
+  return request({
+    url: "/space/building/hot_list",
+    method: "get",
+    params: query,
+  });
+}
+// 楼栋能耗环比
+export function hotEnergySum(query) {
+  return request({
+    url: "/hot_energy/energySum",
+    method: "get",
+    params: query,
+  });
+}
+// 温度变化表
+export function hotWaterTemp(query) {
+  return request({
+    url: "/hot_energy/waterTemp",
+    method: "get",
+    params: query,
+  });
+}
+// 温度变化表
+export function hotWaterLevel(query) {
+  return request({
+    url: "/hot_energy/waterLevel",
+    method: "get",
+    params: query,
+  });
+}

src/api/hotWater/energyQuery.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 水电表读数
+export function queryDeviceDatas(query) {
+  return request({
+    url: "/hot_energy/queryDeviceDatas",
+    method: "get",
+    params: query,
+  });
+}

src/api/hotWater/overview.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 设备状态
+export function deviceState(query) {
+  return request({
+    url: "/device/hotWater/deviceState",
+    method: "get",
+    params: query,
+  });
+}
+// 楼栋能耗
+export function hotEnergyQuery(query) {
+  return request({
+    url: "/hot_energy/query",
+    method: "get",
+    params: query,
+  });
+}

src/api/hotWater/profitAnalysis.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 顶部
+export function waternErgySum(query) {
+  return request({
+    url: "/hot_water_revenue/energySum",
+    method: "get",
+    params: query,
+  });
+}
+// 数据列表
+export function waterRevenueQuery(query) {
+  return request({
+    url: "/hot_water_revenue/query",
+    method: "get",
+    params: query,
+  });
+}

src/api/region.js

@@ -7,6 +7,13 @@ export function spaceTree() {
     method: "get",
   });
 }
+export function floorTree() {
+  return request({
+    url: "/space/floorTree",
+    method: "get",
+  });
+}
+
 
 // 获取区域信息
 export function getAreaList(query) {

src/assets/icons/svg/dataAnalysis.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837487744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6669" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M930.133333 900.266667H93.866667a8.533333 8.533333 0 0 1-8.533334-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533334-8.533333h836.266666a8.533333 8.533333 0 0 1 8.533334 8.533333v25.6a8.533333 8.533333 0 0 1-8.533334 8.533334zM746.666667 661.333333h-170.666667a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333z" fill="" p-id="6670"></path><path d="M904.533333 117.333333H119.466667a8.533333 8.533333 0 0 0-8.533334 8.533334v665.6a8.533333 8.533333 0 0 0 8.533334 8.533333h785.066666a8.533333 8.533333 0 0 0 8.533334-8.533333v-665.6a8.533333 8.533333 0 0 0-8.533334-8.533334z m-563.2 149.333334c51.84 0 93.866667 42.026667 93.866667 93.866666s-42.026667 93.866667-93.866667 93.866667-93.866667-42.026667-93.866666-93.866667 42.026667-93.866667 93.866666-93.866666zM247.466667 512a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333H256a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6z m520.682666-82.709333l-0.149333 0.149333v0.247467l-16.0256 16.0256h-0.247467l-68.053333 68.053333a8.533333 8.533333 0 0 1-12.066133 0l-18.103467-18.103467a8.533333 8.533333 0 0 1 0-12.066133l37.883733-37.883733h-54.135466l-212.241067 212.241066a8.503467 8.503467 0 0 1-6.8736 3.515734H256a8.533333 8.533333 0 0 1-8.533333-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h147.818667l212.245333-212.245333a8.503467 8.503467 0 0 1 6.8736-3.515734h70.8864l-40.315733-40.315733a8.533333 8.533333 0 0 1 0-12.066133l18.103466-18.103467a8.533333 8.533333 0 0 1 12.066134 0l84.475733 84.475733c1.6896 1.6896 2.513067 3.912533 2.491733 6.126934a8.533333 8.533333 0 0 1-2.496 6.1312z" fill="" p-id="6671"></path></svg>

src/assets/icons/svg/elect.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1778635796144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9277" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M799.256365 357.474588c-6.383475-12.76695-12.76695-19.150424-25.533899-19.150425h-191.504243L760.955516 38.300849c6.383475-12.76695 6.383475-31.917374-12.766949-38.300849H467.315677c-12.76695 0-25.533899 6.383475-25.5339 19.150424l-204.271193 510.677983c-6.383475 12.76695 0 31.917374 12.76695 38.300848h140.436445l-153.203395 414.925861c-6.383475 12.76695 0 31.917374 19.150425 38.300849 12.76695 6.383475 25.533899 0 31.917374-6.383475l510.677982-625.580528c0-12.76695 6.383475-25.533899 0-31.917374z" p-id="9278"></path></svg>

src/assets/icons/svg/energyQuery.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837471498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4744" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 64H128c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h592a32 32 0 1 0 0-64H128V128h768v592a32 32 0 1 0 64 0V128c0-35.328-28.672-64-64-64z m-104.256 682.496A206.72 206.72 0 0 0 832 624 208.256 208.256 0 0 0 624 416 208.256 208.256 0 0 0 416 624 208.256 208.256 0 0 0 624 832c44.096 0 87.04-14.08 122.496-40.256l110.848 110.848a31.936 31.936 0 0 0 54.656-22.592 32 32 0 0 0-9.344-22.656l-110.912-110.848zM480 624c0-79.36 64.64-144 144-144S768 544.64 768 624 703.36 768 624 768 480 703.36 480 624z m320-360a32 32 0 0 0-32-32H256a32 32 0 0 0 0 64h512a32 32 0 0 0 32-32zM256 422.656a32 32 0 0 0 0 64h96a32 32 0 0 0 0-64H256z" fill="" p-id="4745"></path></svg>

src/assets/icons/svg/hotPumpLog.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761181457603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5548" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M670.208 223.053H193.183v0.017c-24.374 0.412-44.02 20.636-44.02 45.549 0 24.914 19.64 45.139 44.02 45.55v0.016h477.025c24.719 0 44.765-20.402 44.765-45.566 0-25.163-20.046-45.566-44.765-45.566zM395.732 439.798h-202.55v0.023c-24.374 0.406-44.02 20.635-44.02 45.543 0 24.914 19.64 45.143 44.02 45.55v0.015h202.556c24.719 0 44.76-20.395 44.76-45.565 0.001-25.164-20.04-45.566-44.766-45.566zM276.261 658.512h-83.083v0.022c-24.374 0.406-44.014 20.636-44.014 45.544 0 24.913 19.64 45.144 44.014 45.55v0.017h83.083c24.719 0 44.759-20.397 44.759-45.566 0-25.165-20.041-45.567-44.759-45.567z m0 0" p-id="5549"></path><path d="M715.201 1.954H148.93C67.141 1.954 0.84 68.257 0.84 150.043v724.501c0 81.786 66.301 148.09 148.09 148.09h241.713v-0.084c0.695 0.033 1.386 0.049 2.081 0.049 25.164 0 45.566-20.396 45.566-45.566 0-25.163-20.402-45.565-45.566-45.565-0.695 0-1.392 0.023-2.081 0.056v-0.021H148.93c-31.455 0-56.958-25.503-56.958-56.957V150.043c0-31.461 25.503-56.958 56.958-56.958h566.271c31.46 0 56.957 25.497 56.957 56.958V320.46c0 25.164 20.402 45.566 45.566 45.566 25.169 0 45.566-20.402 45.566-45.566V150.043c0.001-81.786-66.302-148.089-148.089-148.089z m0 0" p-id="5550"></path><path d="M676.148 840.226c-7.364 0-14.695-2.041-21.226-6.091-11.942-7.409-19.073-20.219-19.073-34.271V652.755c0-14.056 7.131-26.865 19.073-34.269 11.942-7.41 26.593-8.099 39.181-1.853l128.683 73.556c13.817 6.856 22.405 20.697 22.405 36.121 0 15.417-8.588 29.263-22.405 36.12l-128.683 73.557c-5.707 2.831-11.841 4.239-17.955 4.239z m0 0" p-id="5551"></path><path d="M726.854 430.13c-163.575 0-296.181 132.605-296.181 296.18s132.605 296.18 296.181 296.18c163.574 0 296.179-132.604 296.179-296.18S890.429 430.13 726.854 430.13z m0 501.227c-113.248 0-205.048-91.805-205.048-205.047s91.8-205.047 205.048-205.047c113.241 0 205.047 91.805 205.047 205.047s-91.805 205.047-205.047 205.047z m0 0" p-id="5552"></path></svg>

src/assets/icons/svg/income.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1778635839438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M851.564767 353.359585c-21.222798-21.222798-46.690155-46.690155-72.157513-67.912953 42.445596-21.222798 72.157513-63.668394 72.157513-110.358549 0-67.912953-67.912953-127.336788-148.559586-127.336788-16.978238 0-33.956477 4.24456-50.934715 8.48912-4.24456 0-8.489119 4.24456-12.733678 4.244559l-25.467358-25.467357c-55.179275-46.690155-127.336788-46.690155-182.516062 0-8.489119 12.733679-16.978238 25.467358-25.467358 33.956476-4.24456 0-8.489119-4.24456-12.733678-4.244559-16.978238-8.489119-33.956477-12.733679-50.934715-12.733679-80.646632 0-148.559585 55.179275-148.559586 127.336787 4.24456 38.201036 21.222798 76.402073 55.179275 97.624871C223.369948 298.180311 197.902591 323.647668 172.435233 344.870466c-80.646632 84.891192-118.847668 174.026943-118.847668 267.407254 0 246.184456 178.271503 407.47772 454.167875 407.47772 110.358549 0 207.98342-25.467358 284.385493-67.912953 118.847668-67.912953 178.271503-182.516062 178.271502-339.564767 0-84.891192-42.445596-174.026943-118.847668-258.918135zM304.01658 344.870466c8.489119-4.24456 16.978238-12.733679 21.222798-16.978238l8.489119-4.24456c21.222798-12.733679 29.711917-33.956477 29.711918-50.934715 0-16.978238-8.489119-33.956477-25.467358-42.445595L320.994819 217.533679c-25.467358-4.24456-38.201036-21.222798-38.201037-38.201037 0-21.222798 25.467358-42.445596 63.668394-42.445595 8.489119 0 12.733679 0 21.222798 4.244559 4.24456 0 4.24456 0 4.24456 4.24456l4.244559 4.244559c29.711917 16.978238 72.157513 4.24456 97.624871-21.222798l4.244559-4.244559c0-4.24456 8.489119-8.489119 12.733679-16.978238 21.222798-21.222798 46.690155-21.222798 67.912953 0 8.489119 8.489119 12.733679 12.733679 12.733679 16.978238l4.24456 4.244559c21.222798 25.467358 63.668394 33.956477 97.62487 16.978239l4.24456-4.24456s4.24456 0 4.244559-4.244559c8.489119-4.24456 12.733679-4.24456 21.222798-4.24456 38.201036 0 63.668394 21.222798 63.668394 42.445596 0 16.978238-16.978238 29.711917-38.201036 38.201036H724.227979c-8.489119 4.24456-12.733679 4.24456-12.733678 4.24456-25.467358 8.489119-42.445596 25.467358-46.690156 46.690155-4.24456 21.222798 8.489119 42.445596 25.467358 55.179275l8.489119 4.244559c8.489119 4.24456 12.733679 8.489119 21.222798 16.978239 25.467358 21.222798 46.690155 38.201036 67.912953 63.668394 63.668394 67.912953 97.62487 135.825907 97.624871 203.73886 0 267.407254-203.73886 322.586528-377.765804 322.586528-178.271503 0-369.276684-84.891192-369.276684-322.586528 0-72.157513 33.956477-144.315026 97.624871-212.22798 21.222798-12.733679 42.445596-33.956477 67.912953-50.934715z" fill="" p-id="12220"></path><path d="M384.663212 633.500518c-21.222798 0-38.201036 16.978238-38.201036 38.201036s16.978238 38.201036 38.201036 38.201037h84.891192v76.402072c0 16.978238 16.978238 33.956477 38.201036 33.956477s38.201036-12.733679 38.201037-33.956477v-76.402072h89.135751c21.222798 0 38.201036-16.978238 38.201036-38.201037s-16.978238-38.201036-38.201036-38.201036h-89.135751v-21.222798h89.135751c21.222798 0 38.201036-16.978238 38.201036-38.201036s-16.978238-38.201036-38.201036-38.201036h-72.157513l72.157513-76.402073c12.733679-12.733679 12.733679-38.201036 0-55.179274-12.733679-12.733679-38.201036-12.733679-50.934715 0L512 480.696373l-72.157513-76.402072c-12.733679-12.733679-38.201036-12.733679-50.934715 0-12.733679 12.733679-12.733679 38.201036 0 55.179274l72.157513 76.402073H384.663212c-21.222798 0-38.201036 16.978238-38.201036 38.201036s16.978238 38.201036 38.201036 38.201036h84.891192v21.222798H384.663212z" fill="" p-id="12221"></path></svg>

src/assets/icons/svg/unit.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1778635879182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13234" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M156.381564 593.519095h28.67242a103.005669 103.005669 0 0 1 103.005669 103.005669v206.047179a103.005669 103.005669 0 0 1-103.005669 103.005669h-28.67242a103.005669 103.005669 0 0 1-103.005669-103.005669v-206.047179a103.005669 103.005669 0 0 1 103.005669-103.005669z m334.033694-84.798682h28.67242a103.005669 103.005669 0 0 1 103.005669 103.005669v309.052847a103.005669 103.005669 0 0 1-103.005669 103.005669h-28.67242a103.005669 103.005669 0 0 1-103.005669-103.005669v-309.017007a103.005669 103.005669 0 0 1 102.969828-103.005669z m333.997853-211.960865h28.67242a103.005669 103.005669 0 0 1 103.005669 103.005669v515.100026a103.005669 103.005669 0 0 1-102.826466 103.005669h-28.672421a103.005669 103.005669 0 0 1-103.184871-103.005669V399.765217a103.005669 103.005669 0 0 1 103.005669-103.005669z m-39.030332-204.900282L723.557873 20.859186 970.499091 0l-55.015206 241.63682-63.151005-72.648744-313.712116 256.976564a49.639127 49.639127 0 0 1-75.265103-13.081791L392.176379 291.741874l-257.048246 203.574182a49.531606 49.531606 0 0 1-70.713356-8.064118 52.327167 52.327167 0 0 1 7.884915-72.433701l301.956424-240.131518a49.639127 49.639127 0 0 1 74.584133 13.691081L519.23104 308.228516l266.151739-216.476772z" fill="" p-id="13235"></path></svg>

src/assets/icons/svg/water.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1778635748668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5697" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C295.2192 1024 119.466667 846.848 119.466667 628.394667 119.466667 482.645333 250.299733 273.2032 512 0 773.700267 273.237333 904.533333 482.679467 904.533333 628.394667 904.533333 846.848 728.7808 1024 512 1024z m-287.675733-340.923733a337.134933 337.134933 0 0 0 213.060266 238.6944 34.577067 34.577067 0 0 0 44.270934-21.162667 34.986667 34.986667 0 0 0-20.992-44.612267 267.502933 267.502933 0 0 1-168.96-189.269333 34.6112 34.6112 0 1 0-67.3792 16.384z" fill="" p-id="5698"></path></svg>

src/assets/styles/bigScreen.scss

@@ -1,6 +1,5 @@
-// 媒体查询，适配大于2000px分辨率的大屏样式
+// 媒体查询，适配大于2000px分辨率的大屏样式-element样式
 @media (min-width: 2000px) {
-  // element样式
   .el-tabs--top .el-tabs__item.is-top:nth-child(2),
   .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
   .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
@@ -144,6 +143,15 @@
   .el-range-editor--medium .el-range__close-icon {
     line-height: 0.28rem !important;
   }
+  .el-range-editor--small.el-input__inner {
+    height: 0.32rem !important;
+  }
+  .el-range-editor--small .el-range-input {
+    font-size: 0.13rem !important;
+  }
+  .el-tag--mini .el-icon-close {
+    margin-left: -0.03rem !important;
+  }
   .el-date-editor .el-range__icon {
     font-size: 0.14rem !important;
     margin-left: -0.05rem !important;
@@ -151,7 +159,7 @@
   }
   .el-input__icon {
     width: 0.25rem !important;
-    line-height: 0.4rem !important;
+    line-height: 0.32rem !important;
   }
   .el-range-editor--medium .el-range-input {
     font-size: 0.14rem !important;
@@ -183,7 +191,10 @@
   }
   .el-picker-panel,
   .el-date-range-picker .el-picker-panel__body {
-    min-width: 5.13rem !important;
+    // min-width: 5.13rem !important;
+  }
+  .el-date-picker {
+    width: 3.22rem !important;
   }
   .el-date-range-picker__time-header {
     font-size: 0.12rem !important;
@@ -192,6 +203,29 @@
   .el-date-range-picker__time-picker-wrap {
     padding: 0 0.05rem !important;
   }
+  .el-date-range-picker .el-picker-panel__body {
+    min-width: 5.13rem !important;
+  }
+  .el-date-range-picker {
+    width: 6.46rem !important;
+  }
+  .el-date-editor--daterange.el-input,
+  .el-date-editor--daterange.el-input__inner,
+  .el-date-editor--timerange.el-input,
+  .el-date-editor--timerange.el-input__inner {
+    width: 3.5rem !important;
+  }
+  .el-date-editor--monthrange.el-input,
+  .el-date-editor--monthrange.el-input__inner {
+    width: 3rem !important;
+  }
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 2.2rem !important;
+  }
+  .el-year-table td {
+    padding: 0.2rem 0.03rem !important;
+  }
   .el-input--small {
     font-size: 0.13rem !important;
   }
@@ -224,6 +258,31 @@
     height: 0.24rem !important;
     line-height: 0.24rem !important;
   }
+  .el-year-table td .cell {
+    width: 0.48rem !important;
+    height: 0.32rem !important;
+    line-height: 0.32rem !important;
+  }
+  .el-year-table {
+    font-size: 0.12rem !important;
+    margin: -0.01rem !important;
+  }
+  .el-select-dropdown {
+    margin: 0.05rem 0 !important;
+    border-radius: 0.04rem !important;
+  }
+  .el-select-dropdown__wrap,
+  .el-scrollbar__wrap {
+    margin-bottom: -0.1rem !important;
+    margin-right: -0.1rem !important;
+  }
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+    right: 0.2rem !important;
+    font-size: 0.12rem !important;
+  }
+  .el-select-dropdown__wrap {
+    max-height: 2.74rem !important;
+  }
   .el-date-table td.start-date div {
     margin-left: 0.05rem !important;
     border-top-left-radius: 0.15rem !important;
@@ -242,14 +301,27 @@
     padding: 0.04rem 0 !important;
     position: relative;
   }
+  .el-pager li {
+    padding: 0 0.04rem !important;
+    font-size: 0.13rem !important;
+    min-width: 0.355rem !important;
+    height: 0.28rem !important;
+    line-height: 0.28rem !important;
+  }
   .el-picker-panel__footer {
     padding: 0.04rem !important;
   }
+  .el-button {
+    padding: 0.08rem 0.15rem !important;
+  }
   .el-button--mini {
-    padding: 0.07rem 0.15rem !important;
+    // padding: 0.08rem 0.15rem !important;
     font-size: 0.12rem !important;
     border-radius: 0.03rem !important;
   }
+  .el-button--text {
+    padding: 0 !important;
+  }
   .el-input__suffix {
     right: 0.05rem !important;
   }
@@ -273,7 +345,7 @@
     line-height: 0.36rem !important;
   }
   .el-input--suffix .el-input__inner {
-    padding-right: 0.3rem !important;
+    padding: 0 0.3rem !important;
   }
   .el-input--medium {
     font-size: 0.14rem !important;
@@ -293,6 +365,7 @@
     width: 0.16rem !important;
     line-height: 0.16rem !important;
     right: 0rem !important;
+    top: -0.01rem !important;
   }
   .el-tag--small {
     height: 0.24rem !important;
@@ -320,7 +393,7 @@
     font-size: 0.14rem !important;
   }
   .el-table--medium .el-table__cell {
-    padding: 10px 0;
+    padding: 0.01rem 0 !important;
   }
   .el-table .cell {
     line-height: 0.23rem !important;
@@ -358,6 +431,9 @@
     height: 0.28rem !important;
     line-height: 0.28rem !important;
   }
+  .el-tree-node__label {
+    font-size: 0.14rem !important;
+  }
   .el-pagination.is-background .btn-prev,
   .el-pagination.is-background .btn-next,
   .el-pagination.is-background .el-pager li {
@@ -365,6 +441,12 @@
     min-width: 0.3rem !important;
     border-radius: 0.02rem !important;
   }
+  .pagination-container {
+    padding: 0.32rem 0.16rem !important;
+    height: 0.32rem !important;
+    margin-bottom: 0.1rem !important;
+    margin-top: 0.15rem !important;
+  }
   .el-pagination .btn-prev .el-icon,
   .el-pagination .btn-next .el-icon {
     font-size: 0.12rem !important;
@@ -400,7 +482,210 @@
     font-size: 0.14rem !important;
     padding-right: 0.08rem !important;
   }
-
+  .el-form-item--small .el-form-item__label {
+    line-height: 0.32rem !important;
+  }
+  .el-form-item__label {
+    font-size: 0.14rem !important;
+  }
+  .el-date-picker__header-label {
+    font-size: 0.16rem !important;
+    padding: 0 0.05rem !important;
+    line-height: 0.22rem !important;
+  }
+  .el-month-table td .cell {
+    width: 0.6rem !important;
+    height: 0.36rem !important;
+    line-height: 0.36rem !important;
+    border-radius: 0.18rem !important;
+  }
+  .el-month-table {
+    font-size: 0.12rem !important;
+  }
+  .el-month-table td {
+    padding: 0.08rem 0px !important;
+  }
+  .mb8 {
+    margin-bottom: 0.08rem !important;
+  }
+  .el-month-table td div {
+    height: 0.48rem !important;
+    padding: 0.06rem 0 !important;
+  }
+  .el-date-picker .el-picker-panel__content {
+    width: 2.92rem !important;
+  }
+  .el-cascader-panel {
+    border-radius: 0.04rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-cascader-menu {
+    min-width: 1.8rem !important;
+  }
+  .el-cascader-menu__wrap {
+    height: 2.04rem !important;
+  }
+  .el-cascader-menu__list {
+    padding: 0.06rem 0 !important;
+  }
+  .el-cascader-node {
+    padding: 0 0.3rem 0 0.2rem !important;
+    height: 0.34rem !important;
+    line-height: 0.34rem !important;
+  }
+  .el-checkbox {
+    font-size: 0.14rem !important;
+    margin-right: 0.08rem !important;
+  }
+  .el-checkbox__label {
+    padding-left: 0.1rem !important;
+    line-height: 0.19rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-input-number--medium .el-input-number__increase,
+  .el-input-number--medium .el-input-number__decrease {
+    width: 0.36rem !important;
+    height: 50% !important;
+    font-size: 0.14rem !important;
+  }
+  .el-table__expand-icon {
+    font-size: 0.12rem !important;
+  }
+  .el-table [class*="el-table__row--level"] .el-table__expand-icon {
+    width: 0.2rem !important;
+    line-height: 0.2rem !important;
+    height: 0.2rem !important;
+    margin-right: 0.03rem !important;
+  }
+  .el-cascader-node__label {
+    padding: 0 0.1rem !important;
+  }
+  .el-input--prefix .el-input__inner {
+    padding-left: 0.3rem !important;
+  }
+  .el-input__prefix {
+    left: 0.05rem !important ;
+  }
+  .el-checkbox__inner {
+    border-radius: 0.02rem !important;
+    width: 0.14rem !important;
+    height: 0.14rem !important;
+  }
+  .el-checkbox__inner::after {
+    height: 0.07rem !important;
+    left: 0.04rem !important;
+    top: 0.01rem !important;
+  }
+  .el-checkbox__inner::after {
+    height: 0.07rem !important;
+    left: 0.04rem !important;
+    top: 0.01rem !important;
+    width: 0.03rem !important;
+  }
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 0.02rem !important;
+    top: 0.05rem !important;
+  }
+  .el-dialog {
+    border-radius: 0.1rem !important;
+    border: 0.02rem solid #005fbf !important;
+  }
+  .el-dialog__body {
+    padding: 0.3rem 0.2rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-form-item {
+    margin-bottom: 0.22rem !important;
+  }
+  .el-dialog__title {
+    width: 2.84rem !important;
+    height: 0.45rem !important;
+    font-size: 0.2rem !important;
+    line-height: 0.25rem !important;
+  }
+  .el-dialog__footer {
+    padding: 0.2rem !important;
+    padding-top: 0.1rem !important;
+  }
+  .el-form-item__content {
+    line-height: 0.32rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-message-box__message p {
+    line-height: 0.24rem !important;
+  }
+  .el-dialog .el-row {
+    margin-bottom: 0.1rem !important;
+  }
+  .el-dialog__headerbtn {
+    top: 0.32rem !important;
+    right: 0.2rem !important;
+    font-size: 0.16rem !important;
+  }
+  .el-dialog__header {
+    padding: 0.2rem !important;
+    padding-bottom: 0.1rem !important;
+  }
+  .el-dialog__headerbtn .el-dialog__close {
+    font-size: 0.25rem !important;
+  }
+  .el-dropdown-menu--medium .el-dropdown-menu__item {
+    line-height: 0.3rem !important;
+    padding: 0 0.17rem !important;
+    font-size: 0.14rem !important;
+  }
+  .vue-treeselect--searchable .vue-treeselect__input-container {
+    padding-left: 0.05rem !important;
+    padding-right: 0.05rem !important;
+  }
+  .vue-treeselect__x-container,
+  .vue-treeselect__control-arrow-container {
+    width: 0.2rem !important;
+  }
+  .vue-treeselect__x {
+    width: 0.08rem !important;
+    height: 0.08rem !important;
+  }
+  .vue-treeselect__control-arrow,
+  .vue-treeselect__option-arrow {
+    width: 0.09rem !important;
+    height: 0.09rem !important;
+  }
+  .vue-treeselect__option-arrow-container,
+  .vue-treeselect__option-arrow-placeholder {
+    width: 0.2rem !important;
+  }
+  .vue-treeselect div,
+  .vue-treeselect span {
+    line-height: 0.36rem !important;
+  }
+  .el-dropdown-menu--mini .el-dropdown-menu__item {
+    line-height: 0.24rem !important;
+    padding: 0 0.1rem !important;
+    font-size: 0.12rem !important;
+  }
+  // 弹框input宽度对齐
+  .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+  .el-popover {
+    // min-width: 1.5rem !important;
+    min-width: 4.6rem !important;
+    border-radius: 0.04rem !important;
+    border: 0.01rem solid #e6ebf5 !important;
+    padding: 0.12rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-card__header {
+    padding: 0.14rem 0.15rem 0.07rem !important;
+    min-height: 0.4rem !important;
+  }
+  .el-form-item__error {
+    font-size: 0.12rem !important;
+    padding-top: 0.04rem !important;
+}
+}
+@media (min-width: 2000px) {
   // 页面公共样式
   .analysis-table th {
     height: 0.5rem !important;
@@ -428,4 +713,50 @@
       font-size: 0.24rem !important;
     }
   }
+  .choice {
+    margin-left: 0.42rem !important;
+    .mr20 {
+      font-size: 0.16rem !important;
+      width: 0.48rem !important;
+      border-radius: 0.14rem !important;
+      margin-right: 0.1rem !important;
+    }
+  }
+  .timeStyle {
+    border-radius: 0.14rem !important;
+  }
+  .special-div {
+    .special-top {
+      padding: 0.04rem 0.26rem 0.04rem 0 !important;
+      min-height: 0.37rem !important;
+    }
+    .special-top::after {
+      height: 0.01rem !important;
+      top: -0.03rem !important;
+    }
+    .special-top::before {
+      height: 0.01rem !important;
+      bottom: -0.03rem !important;
+    }
+    .special-title {
+      padding-left: 0.36rem !important;
+      font-size: 0.2rem !important;
+      line-height: 0.23rem !important;
+      background-size: 1.4rem 0.35rem !important;
+      background-position: 0px -0.03rem !important;
+    }
+    .special-title::before {
+      width: 0.34rem !important;
+      height: 0.13rem !important;
+    }
+  }
+  // 首页
+  .project-data {
+    margin: 0.16rem 0 !important;
+  }
+  .form-header {
+    font-size: 0.15rem !important;
+    margin: 0.08rem 0.1rem 0.25rem 0.1rem !important;
+    padding-bottom: 0.05rem !important;
+  }
 }

src/assets/styles/element-ui.scss

@@ -1439,3 +1439,23 @@
   align-items: center;
   flex-wrap: nowrap;
 }
+.el-table--group,
+.el-table--border {
+  border: 1px solid #00264f !important;
+}
+.el-table--border .el-table__cell {
+  border-right: 1px solid #00264f !important;
+}
+.el-table--border th.el-table__cell {
+  border-bottom: 1px solid #00264f !important;
+}
+.el-table__expand-icon{
+  color: #fff !important;
+}
+.el-tag {
+  font-weight: bold !important;
+}
+.el-tag.el-tag--success{
+  font-weight: bold !important;
+  color: #03a249 !important;
+}

src/assets/styles/index.scss

@@ -357,7 +357,7 @@ aside {
 }
 // 弹框内容超出高度滚动
 .dialog-content {
-  max-height: 500px; /* 设置最大高度，可根据实际情况调整 */
+  max-height: 600px; /* 设置最大高度，可根据实际情况调整 */
   overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
 }
 .intput-text {
@@ -380,7 +380,7 @@ table {
   border-spacing: 0;
 }
 table tr {
-  height: 45px !important;
+  height: 45px;
   color: #ffffff;
 }
 table th {
@@ -513,3 +513,265 @@ table th {
   background-color: #002249;
   /* 设置滑道颜色 */
 }
+
+.detail-data-li {
+  width: 80%;
+  margin-right: 0.1rem;
+  position: relative;
+  color: #c0dffc;
+  font-family: Arial, sans-serif;
+  letter-spacing: 0.02rem;
+  font-size: 0.18rem;
+  position: relative;
+  margin-bottom: 0.08rem;
+  border-left: 0.01rem solid #217df5;
+  border-right: 0.01rem solid #217df5;
+  background-image: radial-gradient(
+      circle at left top,
+      #217df5 0.01rem,
+      transparent 0.01rem
+    ),
+    radial-gradient(circle at right top, #217df5 0.01rem, transparent 0.01rem),
+    radial-gradient(circle at left bottom, #217df5 0.01rem, transparent 0.01rem),
+    radial-gradient(
+      circle at right bottom,
+      #217df5 0.01rem,
+      transparent 0.01rem
+    );
+  background-repeat: no-repeat;
+  background-position: left top, right top, left bottom, right bottom;
+}
+.detail-data-li::before,
+.detail-data-li::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.01rem;
+  background-image: linear-gradient(
+    to right,
+    #217df5 0%,
+    rgba(41, 128, 185, 0) 50%,
+    #217df5 100%
+  ) !important;
+}
+.year-data {
+  margin-top: 0.1rem;
+}
+.rightDot {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+.leftDot {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0.04rem 0.1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .dotData {
+    font-weight: bold;
+    margin: 0 0.06rem;
+    color: #3b80ff;
+    display: flex;
+    align-items: center;
+  }
+  .dotUnit {
+    width: 0.55rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.rightDot::before {
+  content: "";
+  position: absolute;
+  top: -0.03rem;
+  right: -0.03rem;
+  width: 0.06rem;
+  height: 0.06rem;
+  background-color: #217df5;
+  box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+  background-image: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
+  border-radius: 50%;
+}
+
+.rightDot::after {
+  content: "";
+  position: absolute;
+  bottom: -0.03rem;
+  right: -0.03rem;
+  width: 0.06rem;
+  height: 0.06rem;
+  background-color: #217df5;
+  box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+  background-image: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
+  border-radius: 50%;
+}
+.leftDot::before {
+  content: "";
+  position: absolute;
+  top: -0.03rem;
+  left: -0.03rem;
+  width: 0.06rem;
+  height: 0.06rem;
+  background-color: #217df5;
+  border-radius: 50%;
+  box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+  background-image: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
+}
+
+.leftDot::after {
+  content: "";
+  position: absolute;
+  bottom: -0.03rem;
+  left: -0.03rem;
+  width: 0.06rem;
+  height: 0.06rem;
+  background-color: #217df5;
+  box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+  background-image: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
+  border-radius: 50%;
+}
+
+/* 设备控制列表样式 */
+.device-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #142c4e;
+  padding: 10px 10px 30px 10px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+
+.device-li {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 0;
+  color: #abcdfc;
+  border-bottom: 1px dashed #0349ac;
+  .device-name {
+    flex: 1;
+    white-space: nowrap;
+    font-size: 14px;
+    .el-switch {
+      width: 120px !important;
+    }
+    .run {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      display: block;
+    }
+    .run::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background-color: rgb(16, 231, 16);
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+    .no-run {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      display: block;
+    }
+    .no-run::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background-color: rgb(180, 180, 180);
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+    .el-input {
+      width: 100px;
+    }
+    .strong-electric {
+      background-color: rgba(59, 130, 246, 0.2);
+      color: #60a5fa;
+      padding: 5px 20px;
+      border-radius: 10px;
+    }
+    .auto-electric {
+      background-color: rgba(231, 144, 45, 0.2);
+      color: #e47f21;
+      padding: 5px 20px;
+      border-radius: 10px;
+    }
+    .good-status {
+      color: #4ade80;
+    }
+    .bad-status {
+      color: #f05348;
+    }
+  }
+  .device-name2 {
+    width: 140px;
+  }
+}
+.device-li:nth-child(1) {
+  color: #9ca3af;
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .device-li {
+    padding: 0.12rem 0 !important;
+    border-bottom: 0.01rem dashed #0349ac !important;
+    .device-name {
+      font-size: 0.14rem !important;
+      .el-switch {
+        width: 1.2rem !important;
+      }
+      .run::before {
+        width: 0.1rem !important;
+        height: 0.1rem !important;
+        margin-right: 0.05rem !important;
+      }
+
+      .no-run::before {
+        width: 0.1rem !important;
+        height: 0.1rem !important;
+        margin-right: 0.05rem !important;
+      }
+      .el-input {
+        width: 1rem !important;
+      }
+      .strong-electric {
+        padding: 0.05rem 0.2rem;
+        border-radius: 0.1rem !important;
+      }
+      .auto-electric {
+        padding: 0.05rem 0.2rem;
+        border-radius: 0.1rem !important;
+      }
+    }
+  }
+}

src/components/IconSelect/index.vue

@@ -73,6 +73,8 @@ export default {
           display: flex;
           .icon-item {
             display: flex;
+            flex-wrap: row;
+            align-items: center;
             max-width: 100%;
             height: 100%;
             padding: 0 5px;
@@ -101,4 +103,34 @@ export default {
       }
     }
   }
+  // 媒体查询，适配大于2000px分辨率的大屏样式-element样式
+@media (min-width: 2000px) {
+  .icon-body {
+    padding: 0.1rem !important;
+    .icon-search {
+      margin-bottom: 0.05rem !important;
+    }
+    .icon-list {
+      height: 2rem !important;
+      .list-container {
+        .icon-item-wrapper {
+          height: 0.25rem !important;
+          line-height: 0.25rem !important;
+          .icon-item {
+            padding: 0 0.05rem !important;
+            &:hover {
+              border-radius: 0.05rem !important;
+            }
+            span {
+              padding-left: 0.02rem !important;
+            }
+          }
+          .icon-item.active {
+            border-radius: 0.05rem !important;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -96,6 +96,14 @@ export const constantRoutes = [
       component: () => import("@/views/bigScreen/bigScreen"),
       meta: { title: "大屏总览", icon: "screen" },
     },
+    // 轮播监测
+    {
+       path: '/path/to/monitor/:page?',
+      name:"monitor",
+      hidden: true,
+      component: () => import("@/views/components/monitor/index"),
+      meta: { title: "系统监测", icon: "monitor" },
+    },
 ];
 
 // 动态路由，基于用户权限动态去加载

src/store/modules/permission.js

@@ -40,6 +40,7 @@ const permission = {
           const rewriteRoutes = filterAsyncRouter(rdata, false, true);
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
           rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
+          // 有中央空调
           // 如果动态的路由有中央空调-系统监控-系统监测页面，那就添加一个hidden为true非Layout的大屏页面
           const result = checkRouteArray(
             sidebarRoutes,
@@ -54,14 +55,6 @@ const permission = {
             // );
             // 定义要添加的多个路由对象数组
             const additionalRoutes = [
-              {
-                path: "/monitorCenter",
-                name: "monitorCenter",
-                hidden: true,
-                component: () =>
-                  import("@/views/centerairC/sysMonitor/monitorCenter"),
-                meta: { title: "系统监测", icon: "screen" },
-              },
               {
                 path: "/hostDetails",
                 name: "hostDetails",
@@ -90,6 +83,33 @@ const permission = {
             // console.log("不满足条件");
           }
 
+          // 热水
+          const result4 = sidebarRoutes.find(
+            (item) => item.name === "HotWater"
+          );
+          if (result4) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes4 = [
+              {
+                path: "/waterMonitorDetails",
+                name: "waterMonitorDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/hotWater/waterMonitor/waterMonitorDetails"),
+                meta: { title: "热水监控", icon: "screen" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes4.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // console.log("不满足条件");
+          }
+
           commit("SET_ROUTES", rewriteRoutes);
           commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
           commit("SET_DEFAULT_ROUTES", sidebarRoutes);

src/views/aircAndWindc/awSysMonitor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" v-loading="loading">
+  <div class="app-container">
     <div class="left-tree">
       <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
       <div style="height: 7rem; overflow-y: auto">
@@ -39,6 +39,10 @@
       </div>
       <div class="mostDiv">
         <div class="windC">
+          <!-- 定时开关机定位 -->
+          <div class="menu-title" @click="openTimeSwitch">
+            <div @click="openTimeSwitch">定时开关机</div>
+          </div>
           <!-- 空调风柜定位 -->
           <img
             class="wind-img"
@@ -137,6 +141,7 @@
               @keyup.enter.native="handleEnter(airSupplyObj, $event, '℃')"
               @input="handleInput(airSupplyObj)"
               @blur="handleBlur()"
+              disabled
               v-model="airSupplyObj.collectValue"
               size="mini"
             >
@@ -199,6 +204,7 @@
                 @keyup.enter.native="handleEnter(waterSupplyObj, $event, '℃')"
                 @input="handleInput(waterSupplyObj)"
                 @blur="handleBlur()"
+                disabled
                 v-model="waterSupplyObj.collectValue"
                 size="mini"
               >
@@ -215,6 +221,7 @@
                 @keyup.enter.native="handleEnter(backwaterObj, $event, '℃')"
                 @input="handleInput(backwaterObj)"
                 @blur="handleBlur()"
+                disabled
                 v-model="backwaterObj.collectValue"
                 size="mini"
               >
@@ -243,11 +250,11 @@
             </div>
           </div>
           <div class="wind-valve" v-if="isObjectValid(airValveBackObj)">
-            <div class="wind-text">风阀反馈：</div>
+            <div class="wind-text">新风阀反馈：</div>
             <div>{{ airValveBackObj.collectValue }}%</div>
           </div>
           <div class="wind-valve2" v-if="isObjectValid(airValveObj)">
-            <div class="wind-text">风阀调节</div>
+            <div class="wind-text">新风阀调节</div>
             <el-input
               @keyup.enter.native="handleEnter(airValveObj, $event, '%')"
               @input="handleInput(airValveObj)"
@@ -265,12 +272,88 @@
         </div>
       </div>
     </div>
+    <!-- 定时开关内容 -->
+    <el-dialog
+      title="定时开关机功能"
+      :visible.sync="isOpenTimeSwitch"
+      append-to-body
+      width="800px"
+    >
+      <div class="dialog-content">
+        <div class="device-container" v-loading="loading">
+          <div class="device-li">
+            <div class="device-name">定时名称</div>
+            <div class="device-name">定时开机</div>
+            <div class="device-name">定时关机</div>
+            <div class="device-name">启动状态</div>
+          </div>
+          <div
+            class="device-li"
+            v-for="(item, index) in delayList"
+            :key="index"
+            :class="{ highlight: item.name.includes(currentWeekday) }"
+          >
+            <div class="device-name">{{ item.name }}</div>
+            <div class="device-name">
+              <el-input
+                size="mini"
+                v-model="item.delayOpenHour"
+                @keyup.enter.native="
+                  handleSwitchEnter(item, 'openHour', $event)
+                "
+                @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
+              ></el-input>
+              <div class="slip">:</div>
+              <el-input
+                size="mini"
+                v-model="item.delayOpenMinute"
+                @keyup.enter.native="
+                  handleSwitchEnter(item, 'openMinute', $event)
+                "
+                @input="handleSwitchInput(item, 'delayOpenMinute', 'minute')"
+              ></el-input>
+            </div>
+            <div class="device-name">
+              <el-input
+                size="mini"
+                v-model="item.delayCloseHour"
+                @keyup.enter.native="
+                  handleSwitchEnter(item, 'closeHour', $event)
+                "
+                @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
+              ></el-input>
+              <div class="slip">:</div>
+              <el-input
+                size="mini"
+                v-model="item.delayCloseMinute"
+                @keyup.enter.native="
+                  handleSwitchEnter(item, 'closeMinute', $event)
+                "
+                @input="handleSwitchInput(item, 'delayCloseMinute', 'minute')"
+              ></el-input>
+            </div>
+            <div class="device-name">
+              <el-switch
+                style="display: block"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="开启"
+                inactive-text="停用"
+                v-model="item.delayStatus"
+                @change="handleSwitchStatus(item)"
+              >
+              </el-switch>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { spaceTree } from "@/api/region";
-import { windList } from "@/api/aircAndWindc/index";
+import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
 import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
   data() {
@@ -308,6 +391,9 @@ export default {
       autoStatus: false, //手自动状态
       startStatus: false, //启停控制
       frequency: "v",
+      isOpenTimeSwitch: false,
+      delayList: [],
+      currentWeekday: "",
     };
   },
   watch: {
@@ -339,6 +425,21 @@ export default {
       }
     },
   },
+  created() {
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    const date = new Date();
+    const dayIndex = date.getDay();
+    this.currentWeekday = weekdays[dayIndex];
+    console.log("今天是星期几", this.currentWeekday);
+  },
   mounted() {
     this.getSysBuild();
   },
@@ -513,7 +614,7 @@ export default {
                 //风阀调节
                 else if (
                   item.paramType === "3" &&
-                  item.collectName.includes("新风风阀")
+                  item.collectName.includes("新风阀")
                 ) {
                   this.airValveObj = item;
                 }
@@ -524,7 +625,7 @@ export default {
                 //水阀调节
                 else if (
                   item.paramType === "3" &&
-                  item.collectName.includes("调节阀")
+                  item.collectName.includes("水阀调节")
                 ) {
                   this.waterValveObj = item;
                 }
@@ -720,6 +821,239 @@ export default {
           this.getWindList();
         });
     },
+    // 打开定时开关弹框
+    openTimeSwitch() {
+      this.isOpenTimeSwitch = true;
+      this.getPolicyList();
+    },
+    // 请求列表
+    getPolicyList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: "2",
+          funPolicyType: "3",
+          houseId: this.currentId,
+        };
+        timeList(data)
+          .then((res) => {
+            console.log("设备定时开关返回res", res);
+            if (res.code === 200) {
+              let handleList = res.rows;
+              this.delayList = [];
+              handleList.forEach((element, index) => {
+                if (element.values && element.values.length > 0) {
+                  // 初始化一个空对象来存储非蝶阀处理后的结果
+                  let delayItem = {
+                    name: element.name,
+                  };
+                  const limitedChildren = element.values;
+                  limitedChildren.forEach((child) => {
+                    // console.log("定时${index}开_时", `定时${index}开_时`);
+                    // console.log("child.pointName", child.pointName);
+                    if (child.pointName) {
+                      // 定时开机-小时
+                      if (child.pointName.includes("开_时")) {
+                        // console.log("定时开机-时·························");
+                        delayItem.delayOpenHour = child.curValue;
+                        delayItem.delayOpenHourId = child.id;
+                      }
+                      //   定时开机-分钟
+                      else if (
+                        child.pointName.includes("开_分")
+                      ) {
+                        delayItem.delayOpenMinute = child.curValue;
+                        delayItem.delayOpenMinuteId = child.id;
+                      }
+                      // 定时关机-小时
+                      else if (
+                        child.pointName.includes("关_时")
+                      ) {
+                        delayItem.delayCloseHour = child.curValue;
+                        delayItem.delayCloseHourId = child.id;
+                      }
+                      //   定时关机-分钟
+                      else if (
+                        child.pointName.includes("关_分")
+                      ) {
+                        delayItem.delayCloseMinute = child.curValue;
+                        delayItem.delayCloseMinuteId = child.id;
+                      }
+                      // 启动状态
+                      else if (child.pointName.includes(`启动标志`)) {
+                        delayItem.delayStatus =
+                          Number(child.curValue) == 0 ? false : true;
+                        delayItem.delayStatusId = child.id;
+                      }
+                    }
+                  });
+                  // 将处理后的对象添加到 delayList 中
+                  if (Object.keys(delayItem).length > 1) {
+                    this.delayList.push(delayItem);
+                  }
+                }
+              });
+              console.log("处理后的数组", this.delayList);
+              //   this.delayList = res.rows;
+            } else {
+              this.delayList = [];
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 处理输入事件，过滤非数字字符
+    handleSwitchInput(item, propertyName, name) {
+      console.log("校验", item[propertyName]);
+      // 如果值为空，不进行后续校验
+      if (item[propertyName] === "") {
+        return;
+      }
+      let isValid = true;
+      // 实时校验并过滤非数字字符
+      let inputValue = String(item[propertyName]).replace(/[^\d]/g, "");
+      if (name === "hour") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 23;
+        if (!isValid) {
+          this.$message.error("输入值在0-23区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      } else if (name === "minute") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 59;
+        if (!isValid) {
+          this.$message.error("输入值在0-59区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      }
+      item[propertyName] = inputValue;
+    },
+    handleSwitchEnter(item, name, event) {
+      console.log("item",item)
+      // 失去焦点
+      event.target.blur();
+      let id = "";
+      let value = "";
+      let title = "";
+      let unit = "";
+      if (name === "openHour") {
+        id = item.delayOpenHourId;
+        value = item.delayOpenHour;
+        title = "定时开机-小时";
+        unit = "时";
+      } else if (name === "openMinute") {
+        id = item.delayOpenMinuteId;
+        value = item.delayOpenMinute;
+        title = "定时开机-分钟";
+        unit = "分";
+      } else if (name === "closeHour") {
+        id = item.delayCloseHourId;
+        value = item.delayCloseHour;
+        title = "定时关机-小时";
+        unit = "时";
+      } else if (name === "closeMinute") {
+        id = item.delayCloseMinuteId;
+        value = item.delayCloseMinute;
+        title = "定时关机-分钟";
+        unit = "分";
+      }
+
+      if (value === "") {
+        this.$message.warning("请输入当前设置值!");
+        return;
+      }
+      console.log("请求后端", item);
+      this.$confirm(
+        `确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // console.log("打印id",id)
+          this.handleSwitchOperationConrol(id, value);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          this.getPolicyList();
+        });
+    },
+    handleSwitchOperationConrol(id, param) {
+      let data = {
+        policyId: id,
+        timeValue: param,
+      };
+      console.log("操作参数", data);
+      undateTime(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getPolicyList().finally(() => {
+                // 关闭 loading 效果
+                this.loading = false;
+              });
+            }, 500);
+          } else {
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getPolicyList();
+          }
+        })
+        .catch((error) => {
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getPolicyList();
+        });
+    },
+    // 启用状态
+    handleSwitchStatus(item) {
+      this.$confirm(
+        `确定要切换"${item.name}"的状态为:${
+          item.delayStatus ? "开启" : "停用 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.delayStatus);
+          let param = null;
+          if (item.delayStatus) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.handleSwitchOperationConrol(item.delayStatusId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.delayStatus = !item.delayStatus;
+          console.log("不请求后台");
+        });
+    },
   },
 };
 </script>
@@ -758,6 +1092,59 @@ export default {
   width: 13rem;
   height: 5.38rem;
   position: relative;
+  .menu-title {
+    color: #e1f4ff;
+    font-size: 0.18rem;
+    --bRadius: 0.05rem;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    right: 0.5rem;
+    width: 1.25rem;
+    cursor: pointer;
+    z-index: 999;
+    div {
+      position: relative;
+      text-align: center;
+      border-radius: var(--bRadius);
+      transition: all 0.3s;
+      padding: 0.01rem 0.02rem;
+      background-color: rgba(85, 139, 211, 0.2);
+      cursor: pointer;
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: -10px;
+        left: -10px;
+        right: -10px;
+        bottom: -10px;
+        border: 2px solid #46b2f1;
+        transition: all 0.5s;
+        border-radius: var(--bRadius);
+        animation: clippath 3s infinite linear;
+        cursor: pointer;
+      }
+      &::after {
+        animation: clippath 3s infinite -1.5s linear;
+      }
+      @keyframes clippath {
+        0%,
+        100% {
+          clip-path: inset(0 0 98% 0);
+        }
+        25% {
+          clip-path: inset(0 98% 0 0);
+        }
+        50% {
+          clip-path: inset(98% 0 0 0);
+        }
+        75% {
+          clip-path: inset(0 0 0 98%);
+        }
+      }
+    }
+  }
   .wind-img {
     width: 13.1rem;
     height: 5.5rem;
@@ -1155,6 +1542,97 @@ export default {
     }
   }
 }
+.device-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 530px;
+  background-color: #142c4e;
+  padding: 10px 10px 30px 10px;
+  border-radius: 10px;
+  font-size: 14px;
+  .device-li {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 0;
+    color: #abcdfc;
+    border-bottom: 1px dashed #0349ac;
+    .device-name {
+      flex: 1;
+      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+      padding: 0 5px;
+      .slip {
+        margin: 0 5px;
+        color: #1282d8;
+        font-weight: bold;
+      }
+    }
+  }
+  .device-li:nth-child(1) {
+    color: #9ca3af;
+  }
+}
+.highlight {
+  background-color: #003863 !important; /* 定义高亮的背景颜色 */
+  color: #ffffff !important;
+  font-weight: bold;
+}
+.device-container .highlight .device-name .slip {
+  color: #ffffff !important;
+  font-weight: bold;
+}
+/* 为高亮行添加图片箭头 */
+.device-li.highlight::before {
+  content: "";
+  background-image: url("../../../assets/images/step.png");
+  background-size: contain; 
+  background-repeat: no-repeat;
+  width: 30px; 
+  height: 30px; 
+  position: absolute;
+  left: 2px; /* 图片位置，根据实际情况调整 */
+  top: 20%;
+  transform: translateY(-50%);
+  z-index: 999;
+  animation: moveRight 1s ease-in-out infinite alternate;
+}
+@keyframes moveRight {
+  0% {
+    transform: translateX(0); /* 初始位置，不移动 */
+  }
+  100% {
+    transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
+  }
+}
+
+/* 确保 device-li 有相对定位 */
+.device-li {
+  position: relative;
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .device-container {
+    min-height: 7rem !important;
+    padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
+    border-radius: 0.1rem !important;
+    font-size: 0.14rem !important;
+    .device-li {
+      padding: 0.12rem 0 !important;
+      .device-name {
+        .slip {
+          margin: 0 0.05rem !important;
+        }
+      }
+    }
+  }
+}
 @media (min-width: 1360px) and (max-width: 1680px) {
   .windC {
     transform: scale(0.9);

src/views/alarm/alarmCode/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="消息编码" prop="msgCode">
             <el-input
@@ -213,8 +212,8 @@
     />
 
     <!-- 添加或报警编码对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" >
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="消息编码" prop="msgCode">
@@ -494,3 +493,35 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 700px !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 110px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7.5rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.1rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
+

src/views/alarm/alarmRecord/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="设备名称" prop="deviceName">
             <el-input
@@ -203,8 +202,8 @@
     />
 
     <!-- 修改报警记录对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="设备名称" prop="deviceName">
@@ -481,3 +480,34 @@ export default {
   color: rgb(7, 214, 110);
 }
 </style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 700px !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 140px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7.5rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.4rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/alarm/alarmRule/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="报警类型" prop="alarmType">
             <el-select
@@ -243,8 +242,8 @@
     />
 
     <!-- 添加或报警规则对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="设备名称" prop="ledgerId">
@@ -670,7 +669,7 @@ export default {
         this.getCpmIdList(this.form.ledgerId);
       }
       //清除采集位点
-      this.form.cpmId = ""
+      this.form.cpmId = "";
     },
     //采集参数列表
     getCpmIdList(id) {
@@ -819,3 +818,34 @@ export default {
   color: red;
 }
 </style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 700px !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 150px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7.5rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.5rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/bigScreen/bigScreen.vue

@@ -581,4 +581,58 @@ export default {
     }
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式-element样式
+@media (min-width: 2000px) {
+  .loginD {
+    padding-bottom: 0.2rem !important;
+    .title-left {
+      width: calc(100% - 0.3rem) !important;
+    }
+    .special-div {
+      margin-bottom: 0.17rem !important;
+    }
+    .screen-page {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: stretch;
+      width: calc(100% - 1.22rem) !important;
+      margin-top: 0.86rem !important;
+      .screen-left {
+        width: 30% !important;
+        .left-Indicator {
+          position: absolute;
+          right: -0.9rem !important;
+          width: 0.6rem !important;
+          height: 0.4rem !important;
+        }
+      }
+      .screen-right {
+        width: 30% !important;
+        .message {
+          margin-top: 0.29rem !important;
+          font-size: 0.16rem !important;
+          .message-li {
+            width: calc(33.33% - 0.32rem) !important;
+            margin: 0 0.16rem !important;
+            .message-data {
+              font-size: 0.2rem !important;
+              margin-bottom: 0.3rem !important;
+            }
+            .message-img {
+              width: 1rem !important;
+              height: 0.99rem !important;
+            }
+          }
+        }
+        .right-Indicator {
+          position: absolute;
+          left: -0.9rem !important;
+          width: 0.6rem !important;
+          height: 0.4rem !important;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/bigScreen/components/allEnergy.vue

@@ -17,7 +17,7 @@ export default {
     return {
       chartInstance: null,
       option: {},
-      energyMes:{}
+      energyMes: {},
     };
   },
   watch: {
@@ -29,7 +29,7 @@ export default {
           this.energyMes = newVal;
           this.$nextTick(() => {
             this.echartsData();
-          })
+          });
         }
       },
     },
@@ -124,10 +124,10 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
+                { value: this.energyMes.waterStandardCoal, name: "用水量" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
+                { value: this.energyMes.coldStandardCoal, name: "产冷量" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -140,10 +140,10 @@ export default {
             },
             {
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
+                { value: this.energyMes.waterStandardCoal, name: "用水量" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
+                { value: this.energyMes.coldStandardCoal, name: "产冷量" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
               ],
             },
           ],
@@ -227,10 +227,10 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: 0, name: "耗电量标准煤" },
+                { value: 0, name: "耗电量" },
-                { value: 0, name: "用水量标准煤" },
+                { value: 0, name: "用水量" },
-                { value: 0, name: "产冷量标准煤" },
+                { value: 0, name: "产冷量" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "蒸汽量" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -243,10 +243,10 @@ export default {
             },
             {
               data: [
-                { value: 0, name: "耗电量标准煤" },
+                { value: 0, name: "耗电量" },
-                { value: 0, name: "用水量标准煤" },
+                { value: 0, name: "用水量" },
-                { value: 0, name: "产冷量标准煤" },
+                { value: 0, name: "产冷量" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "蒸汽量" },
               ],
             },
           ],
@@ -278,7 +278,7 @@ export default {
       this.option = {
         //环形图中间文字
         title: {
-          subtext: "总标准煤",
+          subtext: "标准煤",
           textStyle: {
             color: "#ffffff",
           },
@@ -426,4 +426,12 @@ export default {
   height: 200px;
   margin-top: 20px;
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .charts {
+    margin-top: 0.3rem !important;
+    height: 2.4rem !important;
+    margin-top: 0.2rem !important;
+  }
+}
 </style>

src/views/bigScreen/components/coldSysEnergy.vue

@@ -460,14 +460,25 @@ export default {
         console.log("两个系统参数返回", res);
         if (res.code == 200) {
           this.energyMes = res.rows[0];
-          this.useForm.maxData = 10;
+          this.useForm.maxData = 10; //最大值
-          this.useForm.useData = res.rows[0].eer;
+          const { totalEle, totalCold } = res.rows[0];
+          if (totalEle === 0 || totalCold === 0) {
+            this.useForm.useData = 0;
+          } else {
+            const result = totalCold / totalEle;
+            if (Number.isInteger(result)) {
+              this.useForm.useData = result;
+            } else {
+              this.useForm.useData = parseFloat(result.toFixed(2));
+            }
+          }
           let that = this;
           // 使用配置函数
           const axisLineColor = this.getAxisLineColor(
             this.useForm.useData,
             this.useForm.maxData
           );
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 25;
           const adapterOption = {
             series: [
               {
@@ -498,7 +509,7 @@ export default {
                 label: {
                   show: true,
                   position: "center", // 文字显示在中心位置
-                  offset: [0, -5], // 向上偏移 10 个单位
+                  offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
                   formatter: function () {
                     // 返回 HTML 标签，使用 rich 里定义的样式
                     return `{line|${that.useForm.useData}}`;
@@ -506,7 +517,7 @@ export default {
                   rich: {
                     line: {
                       color: "#fff", // 第二行文字颜色
-                      fontSize: 20, // 第二行文字大小
+                      fontSize: titleFontSize, // 第二行文字大小
                       lineHeight: 0, // 行高，实现间距
                     },
                   },
@@ -579,10 +590,11 @@ export default {
   justify-content: center;
   width: 100% !important;
   height: 100%;
+  padding: 10px 0;
 
   .sys_charts {
     width: 100%;
-    height: 1.6rem;
+    height: 160px;
   }
   .eer {
     width: 80%;
@@ -595,4 +607,17 @@ export default {
     margin: 10px 0;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .energy_content {
+    padding: 0.1rem 0 !important;
+    .sys_charts {
+      height: 1.6rem !important;
+    }
+    .eer {
+      font-size: 0.18rem !important;
+      margin: 0.2rem 0 !important;
+    }
+  }
+}
 </style>

src/views/bigScreen/components/useElect.vue

@@ -180,6 +180,7 @@ export default {
       systemTrend(data).then((res) => {
         console.log("用电趋势返回", res);
         if (res.code == 200) {
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 40;
           let adapterOption = {};
           // 添加折线的配置
           adapterOption = {
@@ -209,6 +210,14 @@ export default {
             },
             xAxis: {
               data: res.rows[0].timeStr,
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
+            },
+            yAxis: {
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
             },
             series: [
               {
@@ -255,11 +264,23 @@ export default {
 
   .sys_charts {
     width: 100%;
-    height: 2rem;
+    height: 230px;
   }
   .eer {
     font-size: 18px;
     margin-top: 25px;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .energy_content {
+    .sys_charts {
+      height: 2.4rem !important;
+    }
+    .eer {
+      font-size: 0.18rem !important;
+      margin-top: 0.25rem !important;
+    }
+  }
+}
 </style>

src/views/bigScreen/components/waterSysEnergy.vue

@@ -460,14 +460,26 @@
         console.log("两个系统参数返回", res);
         if (res.code == 200) {
           this.energyMes = res.rows[0];
-            this.useForm.maxData = 10;
+          this.useForm.maxData = 50; //最大值
-            this.useForm.useData = res.rows[0].eer;
+          const { totalEle, totalWater } = res.rows[0];
+          if (totalEle === 0 || totalWater === 0) {
+            this.useForm.useData = 0;
+          } else {
+            const result = totalEle / totalWater;
+            if (Number.isInteger(result)) {
+              this.useForm.useData = result;
+            } else {
+              this.useForm.useData = parseFloat(result.toFixed(2));
+            }
+          }
+          console.log("热水的eer", this.useForm.useData);
           let that = this;
           // 使用配置函数
           const axisLineColor = this.getAxisLineColor(
             this.useForm.useData,
             this.useForm.maxData
           );
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 25;
           const adapterOption = {
             series: [
               {
@@ -498,7 +510,7 @@
                 label: {
                   show: true,
                   position: "center", // 文字显示在中心位置
-                    offset: [0, -5], // 向上偏移 10 个单位
+                  offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
                   formatter: function () {
                     // 返回 HTML 标签，使用 rich 里定义的样式
                     return `{line|${that.useForm.useData}}`;
@@ -506,7 +518,7 @@
                   rich: {
                     line: {
                       color: "#fff", // 第二行文字颜色
-                        fontSize: 20, // 第二行文字大小
+                      fontSize: titleFontSize, // 第二行文字大小
                       lineHeight: 0, // 行高，实现间距
                     },
                   },
@@ -579,10 +591,10 @@
   justify-content: center;
   width: 100% !important;
   height: 100%;
-  
+  padding: 10px 0;
   .sys_charts {
     width: 100%;
-      height: 1.6rem;
+    height: 160px;
   }
   .eer {
     width: 80%;
@@ -595,5 +607,17 @@
     margin: 10px 0;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .energy_content {
+    padding: 0.1rem 0 !important;
+    .sys_charts {
+      height: 1.6rem !important;
+    }
+    .eer {
+      font-size: 0.18rem !important;
+      margin: 0.2rem 0 !important;
+    }
+  }
+}
 </style>
-  

src/views/centerairC/deviceStrategy/index.vue

@@ -370,7 +370,7 @@ export default {
     position: relative;
     width: calc(33.33% - 40px);
     margin: 0 20px;
-    min-height: 300px;
+    min-height: 350px;
     background-image: url(../../../assets/images/strategy-border.png);
     background-size: 100% 100%;
     border-bottom: 1px solid #1587cc;
@@ -431,6 +431,30 @@ export default {
     }
   }
 }
+</style>
+<style scoped>
+.policy-li >>> .el-input__inner {
+  background-color: #04193a;
+  border: 1px solid #1262db;
+  color: #3ef0fd;
+  font-weight: 700;
+  text-align: center;
+  padding: 0 0.1rem !important;
+  font-size: 0.16rem !important;
+}
+.policy-li >>> .el-radio {
+  margin-bottom: 5px;
+}
+.policy-li >>> .el-radio__label {
+  color: #3ef0fd;
+}
+.policy-li >>> .el-radio__inner {
+  border: 1px solid #042063;
+  /* background-color: transparent !important; */
+}
+.policy-li >>> .el-radio.is-bordered {
+  border: 1px solid #2c6afa;
+}
 @media (min-width: 1560px) and (max-width: 1670px) {
   .policy {
     padding: 70px 0.3rem 20px 40px !important;
@@ -445,6 +469,9 @@ export default {
   .policy-li {
     font-size: 14px !important;
   }
+  .policy-li >>> .el-input__inner {
+    font-size: 14px !important;
+  }
 }
 @media (min-width: 1340px) and (max-width: 1400px) {
   .policy {
@@ -455,11 +482,14 @@ export default {
   .policy-li {
     font-size: 14px !important;
   }
+  .policy-li >>> .el-input__inner {
+    font-size: 14px !important;
+  }
   .radio-style {
     padding: 70px 0.3rem 20px 20px !important;
-    .policy-li {
-      width: calc(50% - 20px) !important;
   }
+  .radio-style .policy-li {
+    width: calc(50% - 20px) !important;
   }
 }
 @media (min-width: 1025px) and (max-width: 1340px) {
@@ -474,8 +504,11 @@ export default {
   .policy-li {
     font-size: 14px !important;
   }
+  .policy-li >>> .el-input__inner {
+    font-size: 14px !important;
+  }
 }
-@media (max-width: 1240px) {
+@media (max-width: 1180px) {
   .policy {
     width: calc(80% - 20px) !important;
     margin: 0 10px 25px 10px !important;
@@ -488,8 +521,11 @@ export default {
   .policy-li {
     font-size: 14px !important;
   }
+  .policy-li >>> .el-input__inner {
+    font-size: 14px !important;
   }
-// 媒体查询，适配大于2000px分辨率的大屏样式
+}
+/* 媒体查询，适配大于2000px分辨率的大屏样式 */
 @media (min-width: 2000px) {
   .policy-flex {
     margin-top: 0.15rem !important;
@@ -527,26 +563,3 @@ export default {
   }
 }
 </style>
-<style scoped>
-.policy-li >>> .el-input__inner {
-  background-color: #04193a;
-  border: 1px solid #1262db;
-  color: #3ef0fd;
-  font-weight: 700;
-  text-align: center;
-  padding: 0 0.1rem !important;
-}
-.policy-li >>> .el-radio {
-  margin-bottom: 5px;
-}
-.policy-li >>> .el-radio__label {
-  color: #3ef0fd;
-}
-.policy-li >>> .el-radio__inner {
-  border: 1px solid #042063;
-  /* background-color: transparent !important; */
-}
-.policy-li >>> .el-radio.is-bordered {
-  border: 1px solid #2c6afa;
-}
-</style>

src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue

@@ -60,7 +60,6 @@
                 v-model="startYear"
                 type="year"
                 placeholder="选择开始年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -69,7 +68,6 @@
                 v-model="endYear"
                 type="year"
                 placeholder="选择结束年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>

src/views/centerairC/enSourceAnalysis/components/equipment.vue

@@ -59,7 +59,6 @@
                 v-model="startYear"
                 type="year"
                 placeholder="选择开始年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -68,7 +67,6 @@
                 v-model="endYear"
                 type="year"
                 placeholder="选择结束年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>

src/views/centerairC/enSourceAnalysis/components/machineRoom.vue

@@ -53,7 +53,6 @@
             v-model="startYear"
             type="year"
             placeholder="选择开始年份"
-            style="width: 180px"
             value-format="yyyy"
           >
           </el-date-picker>
@@ -62,7 +61,6 @@
             v-model="endYear"
             type="year"
             placeholder="选择结束年份"
-            style="width: 180px"
             value-format="yyyy"
           >
           </el-date-picker>

src/views/centerairC/energyAnalysis/components/energyAnalysis.vue

@@ -124,7 +124,7 @@
                 </thead>
                 <tbody>
                   <tr>
-                    <td v-if="coldData">制冷量(kwr)</td>
+                    <td v-if="coldData">制冷量(kwh)</td>
                     <td v-for="(item, index) in coldData" :key="index">
                       {{ item }}
                     </td>
@@ -454,7 +454,7 @@ export default {
                   '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                   value +
                   " " +
-                  "kwr" +
+                  "kw" +
                   "</span><br>";
               } else if (seriesName === "瞬时功率") {
                 res +=

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 {
                   '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                   value +
                   " " +
-                  "kwr" +
+                  "kwh" +
                   "</span><br>";
               } else if (seriesName === "上期") {
                 res +=

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 {
                   '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                   value +
                   " " +
-                  "kwr" +
+                  "kwh" +
                   "</span><br>";
               } else if (seriesName === "上期") {
                 res +=

src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue

@@ -100,9 +100,9 @@
             <div class="success-btn" style="margin-left: 0.24rem">
               <el-button type="success" @click="findData">查询</el-button>
             </div>
-            <!-- <div class="warning-bnt" style="margin-left: 0.24rem">
+            <div class="warning-bnt" style="margin-left: 0.15rem">
               <el-button type="warning" @click="exportData">导出</el-button>
-            </div> -->
+            </div>
           </div>
         </div>
         <div class="charts-table" v-loading="listLoading">
@@ -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 {
                   '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                   value +
                   " " +
-                  "kwr" +
+                  "kwh" +
                   "</span><br>";
               } else if (
                 (seriesName === "本期" || seriesName === "同期") &&
@@ -890,20 +890,20 @@ export default {
         this.exportArr.push(newData);
       }
 
-      //   // console.log("导出的数据", this.exportArr);
+        // console.log("导出的数据", this.exportArr);
-      //   import("@/assets/excel/Export2Excel").then((excel) => {
+        import("@/assets/excel/Export2Excel").then((excel) => {
-      //     let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名
+          let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名
-      //     let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息
+          let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息
-      //     const data = this.formatJson(filterVal, this.exportArr);
+          const data = this.formatJson(filterVal, this.exportArr);
-      //     const autoWidth = true;
+          const autoWidth = true;
-      //     excel.export_json_to_excel({
+          excel.export_json_to_excel({
-      //       header: tHeader, //表头
+            header: tHeader, //表头
-      //       data, //数据
+            data, //数据
-      //       filename: `${this.checkList}同比环比分析报表`, //名称
+            filename: `${this.checkList}同比环比分析报表(${this.startTime}至${this.endTime})`, //名称
-      //       autoWidth: true, //宽度自适应
+            autoWidth: true, //宽度自适应
-      //     });
+          });
-      //     this.$message.success("导出成功!");
+          this.$message.success("导出成功!");
-      //   });
+        });
     },
     //格式转换,不需要改动
     formatJson(filterVal, jsonData) {

src/views/centerairC/overview/index.vue

@@ -109,7 +109,7 @@
             <div class="table-content" style="width: 100%">
               <el-table :data="tableData" style="width: 100%" stripe>
                 <el-table-column prop="date" label="时间"> </el-table-column>
-                <el-table-column prop="coldData" label="制冷量(kwr)">
+                <el-table-column prop="coldData" label="制冷量(kwh)">
                 </el-table-column>
                 <el-table-column prop="electData" label="用电量(kwh)">
                 </el-table-column>
@@ -155,7 +155,7 @@
             </tr>
             <tr>
               <th align="center">时间</th>
-              <th align="center">制冷量(kwr)</th>
+              <th align="center">制冷量(kwh)</th>
               <th align="center">用电量(kwh)</th>
               <th align="center">EER</th>
             </tr>
@@ -455,6 +455,7 @@ export default {
         endTime: this.endTime,
         pageNum: 0,
         pageSize: 10,
+        systemType: this.systemType,
       };
       console.log("查询数据参数", data);
       energyInquiry(data).then((res) => {
@@ -578,7 +579,7 @@ export default {
                   '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                   value +
                   " " +
-                  "kwr" +
+                  "kwh" +
                   "</span><br>";
               } else if (seriesName === "用电量") {
                 res +=

src/views/centerairC/sysControl/index copy 2.vue

@@ -1,431 +0,0 @@
-<template>
-  <div class="app-container" v-loading="loading">
-    <!-- 状态统计 -->
-    <div class="status-statistics">
-      <div class="status-card">
-        <div class="status-label">运行设备</div>
-        <div class="status-value-running">
-          {{ statistics.running }}/{{ total }}
-        </div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">手动模式</div>
-        <div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">自动模式</div>
-        <div class="status-value-maintenance">
-          {{ statistics.auto }}/{{ total }}
-        </div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">故障设备</div>
-        <div class="status-value-error">{{ statistics.warn }}/{{ total }}</div>
-      </div>
-    </div>
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="主机" name="host"> </el-tab-pane>
-      <el-tab-pane label="冷却塔" name="second"> </el-tab-pane>
-      <el-tab-pane label="冷却泵" name="three"> </el-tab-pane>
-      <el-tab-pane label="冷冻泵" name="three"> </el-tab-pane>
-      <el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane>
-      <el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane>
-      <el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane>
-    </el-tabs>
-    <!-- 非蝶阀控制列表 -->
-    <div class="device-container">
-      <list-header
-        :deviceList="hostList"
-        @operationControl="hadleOperationConrol"
-      ></list-header>
-    </div>
-    <div class="device-container">
-      <list-header
-        :deviceList="coolingTowerFanList"
-        @operationControl="hadleOperationConrol"
-      ></list-header>
-    </div>
-    <div class="device-container">
-      <list-header
-        :deviceList="coolingPump"
-        @operationControl="hadleOperationConrol"
-      ></list-header>
-    </div>
-    <div class="device-container">
-      <list-header
-        :deviceList="freezingPump"
-        @operationControl="hadleOperationConrol"
-      ></list-header>
-    </div>
-    <!-- 蝶阀控制列表 -->
-    <div class="device-container">
-      <vavleheader
-        :valveList="freezingValve"
-        @operationControl="hadleOperationConrol"
-      ></vavleheader>
-    </div>
-    <div class="device-container">
-      <vavleheader
-        :valveList="coolingValve"
-        @operationControl="hadleOperationConrol"
-      ></vavleheader>
-    </div>
-    <div class="device-container">
-      <vavleheader
-        :valveList="coolingTowerOutValve"
-        @operationControl="hadleOperationConrol"
-      ></vavleheader>
-    </div>
-  </div>
-</template>
-
-<script>
-import { operationList, operationConrol } from "@/api/centerairC/sysMonitor";
-import listHeader from "./listHeader.vue";
-import Vavleheader from "./vavleheader.vue";
-export default {
-  components: { listHeader, Vavleheader },
-  name: "sysMonitor",
-  data() {
-    return {
-      loading: false,
-      deviceList: [], //全部
-      hostList: [], //主机
-      coolingTowerFanList: [], //冷却塔风机
-      coolingPump: [], //冷却泵
-      freezingPump: [], //冷冻泵
-      valveList: [], //阀
-      total: null,
-      freezingValve: [], //冷冻蝶阀
-      coolingValve: [], //冷却蝶阀
-      coolingTowerOutValve: [], //冷却塔出水阀
-      activeName: "host", //设备管理
-    };
-  },
-  computed: {
-    statistics() {
-      const deviceManual = this.deviceList.filter(
-        (d) => d.automaticText === false
-      ).length;
-      const deviceAuto = this.deviceList.filter(
-        (d) => d.automaticText === true
-      ).length;
-      const valveManual = this.valveList.filter(
-        (v) => v.automaticText === false
-      ).length;
-      const valveAuto = this.valveList.filter(
-        (v) => v.automaticText === true
-      ).length;
-
-      return {
-        running: this.deviceList.filter((d) => d.runStatus === "运行").length,
-        manual: deviceManual + valveManual,
-        auto: deviceAuto + valveAuto,
-        warn: this.deviceList.filter((d) => d.warnText === "故障").length,
-      };
-    },
-  },
-  mounted() {
-    this.getOperationList();
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-    // 系统控制列表
-    getOperationList() {
-      return new Promise((resolve, reject) => {
-        operationList({ systemType: 0 })
-          .then((res) => {
-            console.log("列表返回res", res);
-            if (res.code === 200) {
-              let handleList = res.rows;
-              this.deviceList = [];
-              this.valveList = [];
-              handleList.forEach((element) => {
-                if (element.children && element.children.length > 0) {
-                  // 初始化一个空对象来存储非蝶阀处理后的结果
-                  let deviceItem = {
-                    name: element.name,
-                  };
-                  // 初始化一个空对象来存储阀门处理后的结果
-                  let valveItem = {
-                    name: element.name,
-                  };
-
-                  const limitedChildren = element.children;
-                  let valveClosed = false;
-                  let valveOpened = false;
-
-                  limitedChildren.forEach((child) => {
-                    if (child.name) {
-                      // 运行状态
-                      if (
-                        child.paramType === "1" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.runStatus =
-                          Number(child.value) == 0 ? "不运行" : "运行";
-                      }
-                      // 手动控制
-                      else if (
-                        child.paramType === "2" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.controlText =
-                          Number(child.value) == 0 ? false : true;
-                        deviceItem.controlId = child.id;
-                      }
-                      // 手自动切换    0自动1手动
-                      else if (
-                        child.paramType === "6" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.automaticText =
-                          Number(child.value) == 0 ? true : false;
-                        deviceItem.automaticId = child.id;
-                      }
-                      // 故障报警
-                      else if (
-                        child.paramType === "5" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.warnText =
-                          Number(child.value) == 0 ? "未故障" : "故障";
-                        // 本地远程
-                      } else if (
-                        child.paramType === "22" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.localRemote =
-                          Number(child.value) == 0 ? "本地" : "远程";
-                      }
-                      // 频率调节
-                      else if (
-                        child.paramType === "3" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.frequencySet =
-                          Number(child.value) == 0 ? "0" : child.value;
-                        deviceItem.frequencyId = child.id;
-                      }
-                      // 频率反馈
-                      else if (child.paramType === "4") {
-                        deviceItem.frequency = child.value;
-                      }
-
-                      // 阀门的-手自动切换
-                      else if (
-                        child.paramType === "6" &&
-                        child.name.includes("阀")
-                      ) {
-                        valveItem.automaticText =
-                          Number(child.value) == 0 ? true : false;
-                        valveItem.automaticId = child.id;
-                      }
-                      // 阀门的-手动控制
-                      else if (
-                        child.paramType === "2" &&
-                        child.name.includes("阀")
-                      ) {
-                        valveItem.controlText =
-                          Number(child.value) == 0 ? false : true;
-                        valveItem.controlId = child.id;
-                      }
-
-                      // 记录阀关到位状态
-                      if (
-                        child.name.includes("阀关到位") &&
-                        Number(child.value) == 0
-                      ) {
-                        valveClosed = false;
-                      } else if (
-                        child.name.includes("阀关到位") &&
-                        Number(child.value) == 1
-                      ) {
-                        valveClosed = true;
-                      }
-                      // 记录阀开到位的状态
-                      if (
-                        child.name.includes("阀开到位") &&
-                        Number(child.value) == 0
-                      ) {
-                        valveOpened = false;
-                      } else if (
-                        child.name.includes("阀开到位") &&
-                        Number(child.value) == 1
-                      ) {
-                        valveOpened = true;
-                      }
-                    }
-                  });
-
-                  // 根据阀关到位和阀开到位的状态设置阀门状态
-                  if (valveClosed && !valveOpened) {
-                    valveItem.closeStatus = "开启";
-                    valveItem.openStauts = "关闭";
-                  } else if (!valveClosed && valveOpened) {
-                    valveItem.closeStatus = "关闭";
-                    valveItem.openStauts = "开启";
-                  } else if (!valveClosed && !valveOpened) {
-                    valveItem.closeStatus = "关闭";
-                    valveItem.openStauts = "关闭";
-                  }
-
-                  // 将处理后的对象添加到 deviceList 中
-                  if (Object.keys(deviceItem).length > 1) {
-                    this.deviceList.push(deviceItem);
-                  }
-                  // 将处理后的对象添加到 valveList 中
-                  if (Object.keys(valveItem).length > 1) {
-                    this.valveList.push(valveItem);
-                  }
-                }
-              });
-              this.valveList = this.valveList.filter(
-                (item) => item.name && item.name.includes("阀")
-              );
-              console.log("处理过的this.deviceList", this.deviceList);
-              console.log("处理过的this.valveList", this.valveList);
-              this.total = this.deviceList.length + this.valveList.length;
-
-              // 再分类不同的设备列表
-              this.hostList = [];
-              this.coolingTowerFanList = [];
-              this.coolingPump = [];
-              this.freezingPump = [];
-              this.freezingValve = [];
-              this.coolingValve = [];
-              this.coolingTowerOutValve = [];
-              this.deviceList.forEach((list) => {
-                if (list.name.includes("机") && !list.name.includes("风")) {
-                  this.hostList.push(list);
-                }
-                if (list.name.includes("风机")) {
-                  this.coolingTowerFanList.push(list);
-                }
-                if (list.name.includes("冷却泵")) {
-                  this.coolingPump.push(list);
-                }
-                if (list.name.includes("冷冻泵")) {
-                  this.freezingPump.push(list);
-                }
-              });
-              this.valveList.forEach((list) => {
-                if (list.name.includes("冷冻蝶阀")) {
-                  this.freezingValve.push(list);
-                }
-                if (list.name.includes("冷却蝶阀")) {
-                  this.coolingValve.push(list);
-                }
-                if (list.name.includes("冷却塔出水阀")) {
-                  this.coolingTowerOutValve.push(list);
-                }
-              });
-              console.log("处理过后的主机列表", this.hostList);
-            } else {
-              this.deviceList = [];
-              this.valveList = [];
-              this.total = 0;
-            }
-            // 成功时解析 Promise
-            resolve(res);
-          })
-          .catch((error) => {
-            // 失败时拒绝 Promise
-            reject(error);
-          });
-      });
-    },
-    // 操作
-    hadleOperationConrol(id, param) {
-      let data = {
-        id: id,
-        param: param,
-      };
-      console.log("操作参数", data);
-      operationConrol([data])
-        .then((res) => {
-          if (res.code == 200) {
-            this.$modal.msgSuccess("指令下发成功!");
-            // 开启 loading 效果
-            this.loading = true;
-            // 更新所有设备状态;
-            setTimeout(() => {
-              this.getOperationList().finally(() => {
-                // 关闭 loading 效果
-                this.loading = false;
-              });
-            }, 6000);
-          } else {
-            // this.$modal.msgError("操作失败");
-            console.log("应该更新状态的");
-            // 更新所有设备状态;
-            this.getOperationList();
-          }
-        })
-        .catch((error) => {
-          console.log("请求发生错误，更新设备状态", error);
-          // 更新所有设备状态;
-          this.getOperationList();
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-/* 设备控制列表样式 */
-.device-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: #142c4e;
-  padding: 10px 10px 30px 10px;
-  border-radius: 10px;
-  margin-bottom: 20px;
-}
-/* 状态统计样式 */
-.status-statistics {
-  margin-bottom: 25px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.status-card {
-  background-color: #142c4e;
-  border-radius: 10px;
-  padding: 10px;
-  width: 24%;
-}
-
-.status-label {
-  color: #9ca3af;
-  margin-bottom: 20px;
-}
-
-.status-value-running {
-  font-size: 24px;
-  font-weight: bold;
-  color: #22c55e;
-}
-
-.status-value-auto {
-  font-size: 24px;
-  font-weight: bold;
-  color: #60a5fa;
-}
-
-.status-value-error {
-  font-size: 24px;
-  font-weight: bold;
-  color: #ef4444;
-}
-
-.status-value-maintenance {
-  font-size: 24px;
-  font-weight: bold;
-  color: #f59e0b;
-}
-</style>

src/views/centerairC/sysControl/index copy.vue

@@ -1,643 +0,0 @@
-<template>
-  <div class="app-container" v-loading="loading">
-    <!-- 状态统计 -->
-    <div class="status-statistics">
-      <div class="status-card">
-        <div class="status-label">运行设备</div>
-        <div class="status-value-running">
-          {{ statistics.running }}/{{ total }}
-        </div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">手动模式</div>
-        <div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">自动模式</div>
-        <div class="status-value-maintenance">
-          {{ statistics.auto }}/{{ total }}
-        </div>
-      </div>
-      <div class="status-card">
-        <div class="status-label">故障设备</div>
-        <div class="status-value-error">{{ statistics.warn }}/{{ total }}</div>
-      </div>
-    </div>
-    <!-- 非蝶阀控制列表 -->
-    <div class="device-container">
-      <!-- <div class="device-li">
-        <div class="device-name">设备名称</div>
-        <div class="device-name">运行状态</div>
-        <div class="device-name">手动控制</div>
-        <div class="device-name">手自动切换</div>
-        <div class="device-name">本地远程状态</div>
-        <div class="device-name">故障报警</div>
-        <div class="device-name">频率调节</div>
-        <div class="device-name">频率反馈</div>
-      </div> -->
-      <list-header :deviceList ="deviceList"></list-header>
-      <!-- <div class="device-li" v-for="(item, index) in deviceList" :key="index">
-        <div class="device-name">{{ item.name }}</div>
-        <div class="device-name">
-          <div
-            class="run"
-            :class="item.runStatus === '运行' ? 'run' : 'no-run'"
-          >
-            {{ item.runStatus }}
-          </div>
-        </div>
-        <div class="device-name">
-          <el-switch
-            style="display: block"
-            v-model="item.controlText"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="开启"
-            inactive-text="停止"
-            @change="handleControlText(item)"
-          >
-          </el-switch>
-        </div>
-        <div class="device-name">
-          <el-switch
-            style="display: block"
-            v-model="item.automaticText"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="自动"
-            inactive-text="手动"
-            @change="handleAutomaticText(item)"
-          >
-          </el-switch>
-        </div>
-        <div class="device-name">
-          <span
-            :class="
-              item.localRemote === '远程' ? 'strong-electric' : 'auto-electric'
-            "
-            >{{ item.localRemote }}</span
-          >
-        </div>
-        <div class="device-name">
-          <div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'">
-            {{ item.warnText }}
-          </div>
-        </div>
-        <div class="device-name">
-          <el-input
-            v-if="item.frequencySet !== null && item.frequencySet !== undefined"
-            v-model="item.frequencySet"
-            size="mini"
-            @keyup.enter.native="handleEnter(item)"
-            @input="handleInput(item)"
-          ></el-input>
-          <div class="device-name" v-else></div>
-        </div>
-        <div class="device-name" v-if="item.frequency">
-          {{ item.frequency }}Hz
-        </div>
-        <div class="device-name" v-else></div>
-      </div> -->
-    </div>
-    <!-- 蝶阀控制列表 -->
-    <div class="device-container second">
-      <div class="device-li">
-        <div class="device-name">设备名称</div>
-        <div class="device-name">手动控制</div>
-        <div class="device-name">手自动切换</div>
-        <div class="device-name">本地远程状态</div>
-        <div class="device-name">阀关反馈</div>
-        <div class="device-name">阀开反馈</div>
-      </div>
-      <div class="device-li" v-for="(item, index) in valveList" :key="index">
-        <div class="device-name">{{ item.name }}</div>
-        <div class="device-name">
-          <el-switch
-            style="display: block"
-            v-model="item.controlText"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="开启"
-            inactive-text="停止"
-            @change="handleControlText(item)"
-          >
-          </el-switch>
-        </div>
-        <div class="device-name">
-          <el-switch
-            style="display: block"
-            v-model="item.automaticText"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="自动"
-            inactive-text="手动"
-            @change="handleAutomaticText(item)"
-          >
-          </el-switch>
-        </div>
-        <div class="device-name">
-          <span
-            :class="
-              item.localRemote === '远程' ? 'strong-electric' : 'auto-electric'
-            "
-            >{{ item.localRemote }}</span
-          >
-        </div>
-        <div class="device-name">
-          <div
-            :class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'"
-          >
-            {{ item.openStauts }}
-          </div>
-        </div>
-        <div class="device-name">
-          <div
-            :class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'"
-          >
-            {{ item.closeStatus }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { operationList, operationConrol } from "@/api/centerairC/sysMonitor";
-import listHeader from "./listHeader.vue";
-export default {
-  components: { listHeader },
-  name: "sysMonitor",
-  data() {
-    return {
-      loading: false,
-      deviceList: [], //全部
-      hostList: [], //主机
-      coolingTowerFanList: [], //冷却塔风机
-      coolingPump: [], //冷却泵
-      freezingPump: [], //冷冻泵
-      valveList: [], //阀
-      total: null,
-      freezingValve: [], //冷冻蝶阀
-      coolingValve: [], //冷却蝶阀
-      coolingTowerOutValve: [], //冷却塔出水阀
-    };
-  },
-  computed: {
-    statistics() {
-      const deviceManual = this.deviceList.filter(
-        (d) => d.automaticText === false
-      ).length;
-      const deviceAuto = this.deviceList.filter(
-        (d) => d.automaticText === true
-      ).length;
-      const valveManual = this.valveList.filter(
-        (v) => v.automaticText === false
-      ).length;
-      const valveAuto = this.valveList.filter(
-        (v) => v.automaticText === true
-      ).length;
-
-      return {
-        running: this.deviceList.filter((d) => d.runStatus === "运行").length,
-        manual: deviceManual + valveManual,
-        auto: deviceAuto + valveAuto,
-        warn: this.deviceList.filter((d) => d.warnText === "故障").length,
-      };
-    },
-  },
-  mounted() {
-    this.getOperationList();
-  },
-  methods: {
-    // 系统控制列表
-    getOperationList() {
-      return new Promise((resolve, reject) => {
-        operationList({ systemType: 0 })
-          .then((res) => {
-            console.log("列表返回res", res);
-            if (res.code === 200) {
-              let handleList = res.rows;
-              this.deviceList = [];
-              this.valveList = [];
-              handleList.forEach((element) => {
-                if (element.children && element.children.length > 0) {
-                  // 初始化一个空对象来存储非蝶阀处理后的结果
-                  let deviceItem = {
-                    name: element.name,
-                  };
-                  // 初始化一个空对象来存储阀门处理后的结果
-                  let valveItem = {
-                    name: element.name,
-                  };
-
-                  const limitedChildren = element.children;
-                  let valveClosed = false;
-                  let valveOpened = false;
-
-                  limitedChildren.forEach((child) => {
-                    if (child.name) {
-                      // 运行状态
-                      if (
-                        child.paramType === "1" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.runStatus =
-                          Number(child.value) == 0 ? "不运行" : "运行";
-                      }
-                      // 手动控制
-                      else if (
-                        child.paramType === "2" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.controlText =
-                          Number(child.value) == 0 ? false : true;
-                        deviceItem.controlId = child.id;
-                      }
-                      // 手自动切换    0自动1手动
-                      else if (
-                        child.paramType === "6" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.automaticText =
-                          Number(child.value) == 0 ? true : false;
-                        deviceItem.automaticId = child.id;
-                      }
-                      // 故障报警
-                      else if (
-                        child.paramType === "5" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.warnText =
-                          Number(child.value) == 0 ? "未故障" : "故障";
-                        // 本地远程
-                      } else if (
-                        child.paramType === "22" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.localRemote =
-                          Number(child.value) == 0 ? "本地" : "远程";
-                      }
-                      // 频率调节
-                      else if (
-                        child.paramType === "3" &&
-                        !child.name.includes("阀")
-                      ) {
-                        deviceItem.frequencySet =
-                          Number(child.value) == 0 ? "0" : child.value;
-                        deviceItem.frequencyId = child.id;
-                      }
-                      // 频率反馈
-                      else if (child.paramType === "4") {
-                        deviceItem.frequency = child.value;
-                      }
-
-                      // 阀门的-本地远程状态
-                      else if (
-                        child.paramType === "22" &&
-                        child.name.includes("阀")
-                      ) {
-                        valveItem.localRemote =
-                          Number(child.value) == 0 ? "本地" : "远程";
-                      }
-                      // 阀门的-手自动切换
-                      else if (
-                        child.paramType === "6" &&
-                        child.name.includes("阀")
-                      ) {
-                        valveItem.automaticText =
-                          Number(child.value) == 0 ? true : false;
-                        valveItem.automaticId = child.id;
-                      }
-                      // 阀门的-手动控制
-                      else if (
-                        child.paramType === "2" &&
-                        child.name.includes("阀")
-                      ) {
-                        valveItem.controlText =
-                          Number(child.value) == 0 ? false : true;
-                        valveItem.controlId = child.id;
-                      }
-
-                      // 记录阀关到位状态
-                      if (
-                        child.name.includes("阀关到位") &&
-                        Number(child.value) == 0
-                      ) {
-                        valveClosed = false;
-                      } else if (
-                        child.name.includes("阀关到位") &&
-                        Number(child.value) == 1
-                      ) {
-                        valveClosed = true;
-                      }
-                      // 记录阀开到位的状态
-                      if (
-                        child.name.includes("阀开到位") &&
-                        Number(child.value) == 0
-                      ) {
-                        valveOpened = false;
-                      } else if (
-                        child.name.includes("阀开到位") &&
-                        Number(child.value) == 1
-                      ) {
-                        valveOpened = true;
-                      }
-                    }
-                  });
-
-                  // 根据阀关到位和阀开到位的状态设置阀门状态
-                  if (valveClosed && !valveOpened) {
-                    valveItem.closeStatus = "开启";
-                    valveItem.openStauts = "关闭";
-                  } else if (!valveClosed && valveOpened) {
-                    valveItem.closeStatus = "关闭";
-                    valveItem.openStauts = "开启";
-                  }
-
-                  // 将处理后的对象添加到 deviceList 中
-                  if (Object.keys(deviceItem).length > 1) {
-                    this.deviceList.push(deviceItem);
-                  }
-                  // 将处理后的对象添加到 valveList 中
-                  if (Object.keys(valveItem).length > 1) {
-                    this.valveList.push(valveItem);
-                  }
-                }
-              });
-              console.log("处理过的this.deviceList", this.deviceList);
-              console.log("处理过的this.valveList", this.valveList);
-              this.total = this.deviceList.length + this.valveList.length;
-
-              // 再分类不同的设备列表
-              this.hostList = [];
-              this.deviceList.forEach((list) => {
-                if (list.name.includes("机") && !list.name.includes("风")) {
-                  this.hostList.push(list);
-                }
-              });
-              console.log("处理过后的主机列表", this.hostList);
-            } else {
-              this.deviceList = [];
-              this.valveList = [];
-              this.total = 0;
-            }
-            // 成功时解析 Promise
-            resolve(res);
-          })
-          .catch((error) => {
-            // 失败时拒绝 Promise
-            reject(error);
-          });
-      });
-    },
-    // 处理输入事件，过滤非数字字符
-    handleInput(item) {
-      console.log("校验");
-      // 实时校验并过滤非数字字符
-      item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
-    },
-    handleEnter(item) {
-      console.log("请求后端");
-      this.$confirm(
-        `确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(() => {
-          this.hadleOperationConrol(item.frequencyId, item.frequencySet);
-        })
-        .catch(() => {
-          // 用户取消操作，需要更新原来的频率
-          this.getOperationList();
-        });
-    },
-    //手动控制
-    handleControlText(item) {
-      this.$confirm(
-        `确定要切换设备"${item.name}"的状态为:${
-          item.controlText ? "开启" : "停止 吗?"
-        }`,
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(() => {
-          // 这里调用请求函数
-          console.log("请求后台", item.controlText);
-          let param = null;
-          if (item.controlText) {
-            param = 1;
-          } else {
-            param = 0;
-          }
-          this.hadleOperationConrol(item.controlId, param);
-        })
-        .catch(() => {
-          // 用户取消操作，恢复开关状态
-          item.controlText = !item.controlText;
-          console.log("不请求后台");
-        });
-    },
-    // 手自动切换
-    handleAutomaticText(item) {
-      this.$confirm(
-        `确定要切换设备"${item.name}"的状态为:${
-          item.automaticText ? "自动" : "手动 吗?"
-        }`,
-        "提示",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(() => {
-          // 这里调用请求函数
-          console.log("请求后台", item.automaticText);
-          let param = null;
-          if (item.automaticText) {
-            param = 0;
-          } else {
-            param = 1;
-          }
-          this.hadleOperationConrol(item.automaticId, param);
-        })
-        .catch(() => {
-          // 用户取消操作，恢复开关状态
-          item.automaticText = !item.automaticText;
-          console.log("不请求后台");
-        });
-    },
-    hadleOperationConrol(id, param) {
-      let data = {
-        id: id,
-        param: param,
-      };
-      console.log("操作参数", data);
-      operationConrol([data])
-        .then((res) => {
-          if (res.code == 200) {
-            this.$modal.msgSuccess("操作成功");
-            // 开启 loading 效果
-            this.loading = true;
-            // 更新所有设备状态;
-            setTimeout(() => {
-              this.getOperationList().finally(() => {
-                // 关闭 loading 效果
-                this.loading = false;
-              });
-            }, 6000);
-          } else {
-            // this.$modal.msgError("操作失败");
-            console.log("应该更新状态的");
-            // 更新所有设备状态;
-            this.getOperationList();
-          }
-        })
-        .catch((error) => {
-          console.log("请求发生错误，更新设备状态", error);
-          // 更新所有设备状态;
-          this.getOperationList();
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-/* 设备控制列表样式 */
-.device-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: #142c4e;
-  padding: 10px 10px 30px 10px;
-  border-radius: 10px;
-  .device-li {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px 0;
-    color: #abcdfc;
-    border-bottom: 1px dashed #0349ac;
-    .device-name {
-      flex: 1;
-      white-space: nowrap;
-      .el-switch {
-        width: 120px !important;
-      }
-      .run {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        display: block;
-      }
-      .run::before {
-        content: "";
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        background-color: rgb(16, 231, 16);
-        border-radius: 50%;
-        margin-right: 5px;
-      }
-      .no-run {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        display: block;
-      }
-      .no-run::before {
-        content: "";
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        background-color: rgb(180, 180, 180);
-        border-radius: 50%;
-        margin-right: 5px;
-      }
-      .el-input {
-        width: 100px;
-      }
-      .strong-electric {
-        background-color: rgba(59, 130, 246, 0.2);
-        color: #60a5fa;
-        padding: 5px 20px;
-        border-radius: 10px;
-      }
-      .auto-electric {
-        background-color: rgba(231, 144, 45, 0.2);
-        color: #e47f21;
-        padding: 5px 20px;
-        border-radius: 10px;
-      }
-      .good-status {
-        color: #4ade80;
-      }
-      .bad-status {
-        color: #f05348;
-      }
-    }
-  }
-  .device-li:nth-child(1) {
-    color: #9ca3af;
-  }
-}
-.second {
-  margin-top: 20px;
-}
-
-/* 状态统计样式 */
-.status-statistics {
-  margin-bottom: 25px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.status-card {
-  background-color: #142c4e;
-  border-radius: 10px;
-  padding: 10px;
-  width: 24%;
-}
-
-.status-label {
-  color: #9ca3af;
-  margin-bottom: 20px;
-}
-
-.status-value-running {
-  font-size: 24px;
-  font-weight: bold;
-  color: #22c55e;
-}
-
-.status-value-auto {
-  font-size: 24px;
-  font-weight: bold;
-  color: #60a5fa;
-}
-
-.status-value-error {
-  font-size: 24px;
-  font-weight: bold;
-  color: #ef4444;
-}
-
-.status-value-maintenance {
-  font-size: 24px;
-  font-weight: bold;
-  color: #f59e0b;
-}
-</style>

src/views/centerairC/sysControl/index.vue

@@ -86,6 +86,7 @@
           <list-header
             :deviceList="hostList"
             :isNoShowHz="true"
+            :isNoShowlocalRemote="true"
             @operationControl="hadleOperationConrol"
             @upList="getOperationList"
           ></list-header>
@@ -187,7 +188,8 @@ export default {
                       // 手动控制
                       else if (
                         child.paramType === "2" &&
-                        !child.name.includes("阀")
+                        !child.name.includes("阀") &&
+                        child.name.includes("启停")
                       ) {
                         deviceItem.controlText =
                           Number(child.value) == 0 ? false : true;
@@ -217,6 +219,15 @@ export default {
                         deviceItem.localRemote =
                           Number(child.value) == 0 ? "本地" : "远程";
                       }
+                      // 频率-手自动切换
+                      else if (
+                        child.paramType === "40" &&
+                        !child.name.includes("阀")
+                      ) {
+                        deviceItem.frequencyAutotext =
+                          Number(child.value) == 0 ? false : true;
+                        deviceItem.frequencyAutotextId = child.id;
+                      }
                       // 频率调节
                       else if (
                         child.paramType === "3" &&
@@ -258,24 +269,24 @@ export default {
                       }
                       // 记录阀关到位状态
                       if (
-                        child.name.includes("阀关到位") &&
+                        child.name.endsWith("关到位") &&
                         Number(child.value) == 0
                       ) {
                         valveClosed = false;
                       } else if (
-                        child.name.includes("阀关到位") &&
+                        child.name.endsWith("关到位") &&
                         Number(child.value) == 1
                       ) {
                         valveClosed = true;
                       }
                       // 记录阀开到位的状态
                       if (
-                        child.name.includes("阀开到位") &&
+                        child.name.endsWith("开到位") &&
                         Number(child.value) == 0
                       ) {
                         valveOpened = false;
                       } else if (
-                        child.name.includes("阀开到位") &&
+                        child.name.endsWith("开到位") &&
                         Number(child.value) == 1
                       ) {
                         valveOpened = true;
@@ -414,16 +425,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* 设备控制列表样式 */
-.device-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: #142c4e;
-  padding: 10px 10px 30px 10px;
-  border-radius: 10px;
-  margin-bottom: 20px;
-}
 /* 状态统计样式 */
 .status-statistics {
   margin-bottom: 25px;

src/views/centerairC/sysControl/listHeader.vue

@@ -7,6 +7,7 @@
       <div class="device-name">手动控制</div>
       <div class="device-name" v-if="!isNoShowlocalRemote">本地远程状态</div>
       <div class="device-name">故障报警</div>
+      <div class="device-name" v-if="!isNoShowHz">频率手自动切换</div>
       <div class="device-name" v-if="!isNoShowHz">频率调节</div>
       <div class="device-name" v-if="!isNoShowHz">频率反馈</div>
       <div class="device-name">运行时间</div>
@@ -55,6 +56,20 @@
           {{ item.warnText }}
         </div>
       </div>
+      <!-- 频率-手自动切换 -->
+      <div class="device-name" v-if="!isNoShowHz">
+        <el-switch
+          style="display: block"
+          v-model="item.frequencyAutotext"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          active-text="手动"
+          inactive-text="自动"
+          v-if="item.frequencySet !== null && item.frequencySet !== undefined"
+          @change="handleFrequencyAutomaticText(item)"
+        >
+        </el-switch>
+      </div>
       <!-- 频率调节 -->
       <div class="device-name" v-if="!isNoShowHz">
         <el-input
@@ -64,7 +79,7 @@
           @keyup.enter.native="handleEnter(item, $event)"
           @input="handleInput(item)"
           @blur="handleBlur()"
-          :disabled="!item.automaticText"
+          :disabled="!item.frequencyAutotext"
         ></el-input>
         <div class="device-name" v-else></div>
       </div>
@@ -108,7 +123,7 @@ export default {
       // this.currentFocusIndex = "";
     },
     handleEnter(item, event) {
-      console.log("请求后端");
+      console.log("请求后端", item);
       // 失去焦点
       event.target.blur();
       this.$confirm(
@@ -121,7 +136,6 @@ export default {
         }
       )
         .then(() => {
-          // 触发自定义事件 operationControl，并传递两个参数
           this.$emit("operationControl", item.frequencyId, item.frequencySet);
         })
         .catch(() => {
@@ -189,116 +203,37 @@ export default {
           console.log("不请求后台");
         });
     },
+    // 频率-手自动切换
+    handleFrequencyAutomaticText(item) {
+      this.$confirm(
+        `确定要切换"${item.name}"的频率手自动状态为:${
+          item.frequencyAutotext ? "手动" : "自动 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.frequencyAutotext);
+          let param = null;
+          if (item.frequencyAutotext) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.$emit("operationControl", item.frequencyAutotextId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.frequencyAutotext = !item.frequencyAutotext;
+          console.log("不请求后台");
+        });
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.device-li {
-  flex: 1;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 12px 0;
-  color: #abcdfc;
-  border-bottom: 1px dashed #0349ac;
-  .device-name {
-    flex: 1;
-    white-space: nowrap;
-    font-size: 14px;
-    .el-switch {
-      width: 120px !important;
-    }
-    .run {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      display: block;
-    }
-    .run::before {
-      content: "";
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      background-color: rgb(16, 231, 16);
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-    .no-run {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      display: block;
-    }
-    .no-run::before {
-      content: "";
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      background-color: rgb(180, 180, 180);
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-    .el-input {
-      width: 100px;
-    }
-    .strong-electric {
-      background-color: rgba(59, 130, 246, 0.2);
-      color: #60a5fa;
-      padding: 5px 20px;
-      border-radius: 10px;
-    }
-    .auto-electric {
-      background-color: rgba(231, 144, 45, 0.2);
-      color: #e47f21;
-      padding: 5px 20px;
-      border-radius: 10px;
-    }
-    .good-status {
-      color: #4ade80;
-    }
-    .bad-status {
-      color: #f05348;
-    }
-  }
-}
-.device-li:nth-child(1) {
-  color: #9ca3af;
-}
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .device-li {
-    padding: 0.12rem 0 !important;
-    border-bottom: 0.01rem dashed #0349ac !important;
-    .device-name {
-      font-size: 0.14rem !important;
-      .el-switch {
-        width: 1.2rem !important;
-      }
-      .run::before {
-        width: 0.1rem !important;
-        height: 0.1rem !important;
-        margin-right: 0.05rem !important;
-      }
-
-      .no-run::before {
-        width: 0.1rem !important;
-        height: 0.1rem !important;
-        margin-right: 0.05rem !important;
-      }
-      .el-input {
-        width: 1rem !important;
-      }
-      .strong-electric {
-        padding: 0.05rem 0.2rem;
-        border-radius: 0.1rem !important;
-      }
-      .auto-electric {
-        padding: 0.05rem 0.2rem;
-        border-radius: 0.1rem !important;
-      }
-    }
-  }
-}
-</style>

src/views/centerairC/sysControl/vavleheader.vue

@@ -125,111 +125,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.device-li {
-  flex: 1;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 12px 0;
-  color: #abcdfc;
-  border-bottom: 1px dashed #0349ac;
-  .device-name {
-    flex: 1;
-    white-space: nowrap;
-    font-size: 14px;
-    .el-switch {
-      width: 120px !important;
-    }
-    .run {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      display: block;
-    }
-    .run::before {
-      content: "";
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      background-color: rgb(16, 231, 16);
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-    .no-run {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      display: block;
-    }
-    .no-run::before {
-      content: "";
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      background-color: rgb(180, 180, 180);
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-    .el-input {
-      width: 100px;
-    }
-    .strong-electric {
-      background-color: rgba(59, 130, 246, 0.2);
-      color: #60a5fa;
-      padding: 5px 20px;
-      border-radius: 10px;
-    }
-    .auto-electric {
-      background-color: rgba(231, 144, 45, 0.2);
-      color: #e47f21;
-      padding: 5px 20px;
-      border-radius: 10px;
-    }
-    .good-status {
-      color: #4ade80;
-    }
-    .bad-status {
-      color: #f05348;
-    }
-  }
-}
-.device-li:nth-child(1) {
-  color: #9ca3af;
-}
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .device-li {
-    padding: 0.12rem 0 !important;
-    border-bottom: 0.01rem dashed #0349ac !important;
-    .device-name {
-      font-size: 0.14rem !important;
-      .el-switch {
-        width: 1.2rem !important;
-      }
-      .run::before {
-        width: 0.1rem !important;
-        height: 0.1rem !important;
-        margin-right: 0.05rem !important;
-      }
-
-      .no-run::before {
-        width: 0.1rem !important;
-        height: 0.1rem !important;
-        margin-right: 0.05rem !important;
-      }
-      .el-input {
-        width: 1rem !important;
-      }
-      .strong-electric {
-        padding: 0.05rem 0.2rem;
-        border-radius: 0.1rem !important;
-      }
-      .auto-electric {
-        padding: 0.05rem 0.2rem;
-        border-radius: 0.1rem !important;
-      }
-    }
-  }
-}
 </style>

src/views/centerairC/sysMonitor/components/hostChart.vue

@@ -3,7 +3,6 @@
     <div class="historyCharts" ref="chart_ref"></div>
   </div>
 </template>
-
 <script>
 import * as echarts from "echarts";
 export default {
@@ -21,6 +20,7 @@ export default {
       chartData2: [],
       chartData3: [],
       chartData4: [],
+      chartData5: [],
       bottomData: [],
     };
   },
@@ -36,11 +36,10 @@ export default {
           let data = newVal;
           if (data.length > 0) {
             // 获取 title 和 titleStr 数组
-            const title = data.data[0].title;
+            const title = data[0].title;
-            const titleStr = data.data[1].titleStr;
+            const titleStr = data[1].titleStr;
             // 获取 dataList 数组
-            const dataList = data.data[3].dataList;
+            const dataList = data[3].dataList;
-
             // 遍历 dataList 数组
             dataList.forEach((item) => {
               // 查找 name 在 title 数组中的索引
@@ -51,46 +50,97 @@ export default {
               }
             });
             console.log("处理后的data", data);
+            let name1 = "";
+            let name2 = "";
+            let name3 = "";
+            let name4 = "";
+            let name5 = "";
             data.forEach((item) => {
               if (item.timeStr) {
                 this.bottomData = item.timeStr;
               }
               if (item.dataList) {
-                let name1 = "";
+                // 用于存储 name 的数组
-                let name2 = "";
+                const names = [];
-                let name3 = "";
+                // 用于存储 chartData 的数组
-                let name4 = "";
+                const chartData = [];
-                item.dataList.forEach((val, index) => {
+                // 查找包含“负载”的数据
-                  if (val.name) {
+                let loadDataIndex = -1;
-                    switch (index) {
+                for (let i = 0; i < item.dataList.length; i++) {
-                      case 0:
+                  if (
-                        this.chartData1 = val.value;
+                    item.dataList[i].name &&
-                        name1 = val.name;
+                    item.dataList[i].name.includes("负载")
-                        break;
+                  ) {
-                      case 1:
+                    loadDataIndex = i;
-                        this.chartData2 = val.value;
+                    this.chartData5 = item.dataList[i].value;
-                        name2 = val.name;
+                    name5 = item.dataList[i].name;
-                        break;
-                      case 2:
-                        this.chartData3 = val.value;
-                        name3 = val.name;
-                        break;
-                      case 3:
-                        this.chartData4 = val.value;
-                        name4 = val.name;
-                        break;
-                      default:
                     break;
                   }
                 }
+                // 剔除包含“负载”的数据
+                if (loadDataIndex !== -1) {
+                  item.dataList.splice(loadDataIndex, 1);
+                }
+                // 处理剩下的数据
+                item.dataList.slice(0, 4).forEach((val, index) => {
+                  if (val.name) {
+                    chartData[index] = val.value;
+                    names[index] = val.name;
+                  }
                 });
+                // 将 chartData 数组的值赋值给 this.chartDataX
+                this.chartData1 = chartData[0] || "";
+                this.chartData2 = chartData[1] || "";
+                this.chartData3 = chartData[2] || "";
+                this.chartData4 = chartData[3] || "";
+                // 将 names 数组的值赋值给外部作用域的变量
+                name1 = names[0] || "";
+                name2 = names[1] || "";
+                name3 = names[2] || "";
+                name4 = names[3] || "";
               }
             });
+            // console.log("this.chartData1", this.chartData1);
+            // console.log("this.chartData2", this.chartData2);
+            // console.log("this.chartData3", this.chartData3);
+            // console.log("this.chartData4", this.chartData4);
+            // console.log("this.chartData5", this.chartData5);
             this.$nextTick(() => {
+              // 计算双y轴最大最小值，
+              var Min1 = 0,
+                Min2 = 0,
+                Max1 = Math.ceil(
+                  Math.max(
+                    ...this.chartData1,
+                    ...this.chartData2,
+                    ...this.chartData3,
+                    ...this.chartData4
+                  )
+                ),
+                Max2 = Math.ceil(Math.max(...this.chartData5));
+              console.log("Min1", Min1);
+              console.log("Min2", Min2);
+              console.log("Max1", Max1);
+              console.log("Max2", Max2);
               const adapterOption = {
                 xAxis: {
                   data: this.bottomData,
                 },
+                yAxis: [
+                  //两个y轴
+                  {
+                    min: Min1,
+                    max: Max1,
+                    splitNumber: 10,
+                    interval: (Max1 - Min1) / 10,
+                  },
+                  {
+                    min: Min2,
+                    max: Max2,
+                    splitNumber: 10,
+                    interval: (Max2 - Min2) / 10,
+                  },
+                ],
                 series: [
                   {
                     yAxisIndex: 0,
@@ -112,6 +162,11 @@ export default {
                     name: name4,
                     data: this.chartData4,
                   },
+                  {
+                    yAxisIndex: 1,
+                    name: name5,
+                    data: this.chartData5,
+                  },
                 ],
               };
               this.chartInstance.setOption(adapterOption);
@@ -124,6 +179,21 @@ export default {
                 xAxis: {
                   data: [],
                 },
+                yAxis: [
+                  //两个y轴
+                  {
+                    min: 0,
+                    max: 0,
+                    splitNumber: 10,
+                    interval: 0,
+                  },
+                  {
+                    min: 0,
+                    max: 0,
+                    splitNumber: 10,
+                    interval: 0,
+                  },
+                ],
                 series: [
                   {
                     yAxisIndex: 0,
@@ -141,6 +211,10 @@ export default {
                     yAxisIndex: 0,
                     data: [],
                   },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
                 ],
               };
               this.chartInstance.setOption(adapterOption);
@@ -175,19 +249,71 @@ export default {
     },
     //初始化chartInstance对象
     initChart() {
+      var Min1 = 0,
+        Min2 = 0,
+        Max1 = Math.ceil(
+          Math.max(
+            ...this.chartData1,
+            ...this.chartData2,
+            ...this.chartData3,
+            ...this.chartData4
+          ) + 4
+        ),
+        Max2 = Math.ceil(Math.max(...this.chartData5) + 4);
       const chartRef = this.$refs.chart_ref;
       if (chartRef) {
         // 初始化图表的代码
         this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
         this.option = {
           tooltip: {
             trigger: "axis",
+            // 自定义 tooltip 内容
+            formatter: function (params) {
+              var res = params[0].name + "<br/>";
+              for (var i = 0, l = params.length; i < l; i++) {
+                var seriesName = params[i].seriesName;
+                var value = params[i].value;
+                // console.log("打印颜色", params[i].color)
+                var marker =
+                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                  params[i].color +
+                  '"></span>';
+                // 根据不同的seriesName 返回不同的单位
+                if (seriesName.includes("负载")) {
+                  res +=
+                    marker +
+                    seriesName +
+                    ":" +
+                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                    value +
+                    " " +
+                    "%" +
+                    "</span><br>";
+                } else {
+                  res +=
+                    marker +
+                    seriesName +
+                    ":" +
+                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                    value +
+                    " " +
+                    "℃" +
+                    "</span><br>";
+                }
+              }
+              return res;
+            },
+            textStyle: {
+              fontSize: titleFontSize * 1.5,
+            },
           },
           legend: {
             show: true,
             top: 0,
             textStyle: {
               color: "white",
+              fontSize: titleFontSize * 1.5,
             },
           },
           grid: {
@@ -206,6 +332,9 @@ export default {
               // interval: 0, //强制显示所有x轴数据
               // rotate: 30, //x轴坐标字体倾斜30度
               color: "rgba(255, 255, 255, 1)",
+              textStyle: {
+                fontSize: titleFontSize * 1.5,
+              },
             },
             axisTick: {
               show: false, // 不显示坐标轴刻度线
@@ -224,22 +353,25 @@ export default {
             }, //x轴分割线
             data: this.bottomData,
           },
-          yAxis: {
+          yAxis: [
-            min: 0,
+            {
-            // max:20,
+              min: Min1,
-            // // // min:'dataMin',
+              max: Max1,
-            // // // max:'dataMax',
+              splitNumber: 10,
-            // name: "kwh", // 第一个 y 轴的单位描述
+              interval: (Max1 - Min1) / 10,
               // 设置 name 的样式
               nameTextStyle: {
                 color: "rgba(255, 255, 255, 1)",
-              fontSize: 12,
+                fontSize: titleFontSize * 2,
               },
               miniInterval: 5,
               type: "value",
               // 修饰刻度标签的颜色即y坐标数据
               axisLabel: {
                 color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
               },
               // 显示y坐标轴
               axisLine: {
@@ -258,142 +390,117 @@ export default {
                 },
               },
             },
+            {
+              min: Min2,
+              max: Max2,
+              splitNumber: 10,
+              interval: (Max2 - Min2) / 10,
+              // 设置 name 的样式
+              nameTextStyle: {
+                color: "rgba(255, 255, 255, 1)",
+                fontSize: titleFontSize * 1.5,
+              },
+              miniInterval: 5,
+              type: "value",
+              name: "负载", // y 轴的单位描述
+              // 修饰刻度标签的颜色即y坐标数据
+              axisLabel: {
+                color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
+              },
+              // 显示y坐标轴
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#365576", // 设置 y 轴线的颜色
+                },
+              },
+              //y轴分割线段数
+              // splitNumber: 10,
+              // 修改y轴分割线的颜色
+              splitLine: {
+                lineStyle: {
+                  color: "#1a3d62", // 设置分割线的颜色
+                  type: "dashed", // 设置分割线为虚线
+                },
+              },
+            },
+          ],
           series: [
             {
               type: "line",
               // 拐点大小
               symbolSize: 8,
               data: this.chartData1,
+              yAxisIndex: 0,
               //折线颜色
               itemStyle: {
-                color: "#1a69f1", //折线点的颜色
+                color: "#00CED1", //折线点的颜色
               },
               lineStyle: {
-                color: "#1a69f1", //折线点的颜色
+                color: "#00CED1", //折线点的颜色
               },
               smooth: false,
               // 不显示折线点
               showSymbol: false,
-              // 区域填充样式，添加渐变背景
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
             },
             {
               type: "line",
               // 拐点大小
               symbolSize: 8,
               data: this.chartData2,
+              yAxisIndex: 0,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                color: "#3ba272", //折线的颜色
               },
               smooth: false,
               // 不显示折线点
               showSymbol: false,
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
             },
             {
               type: "line",
               // 拐点大小
               symbolSize: 8,
               data: this.chartData3,
+              yAxisIndex: 0,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                color: "#1a69f1", //折线的颜色
               },
               smooth: false,
               // 不显示折线点
               showSymbol: false,
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
             },
             {
               type: "line",
               // 拐点大小
               symbolSize: 8,
               data: this.chartData4,
+              yAxisIndex: 0,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                color: "#ee6666", //折线的颜色
               },
               smooth: false,
               // 不显示折线点
               showSymbol: false,
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
             },
             {
-                      offset: 1,
+              type: "line",
-                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+              // 拐点大小
-                    },
+              symbolSize: 8,
-                  ],
+              data: this.chartData5,
-                  global: false, // 缺省为 false
+              yAxisIndex: 1,
-                },
+              //折线颜色
+              itemStyle: {
+                color: "#fac858", //折线的颜色
               },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
             },
           ],
         };
@@ -406,10 +513,10 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .historyCharts {
   width: 100%;
-  height: 4rem;
+  height: 4.4rem;
 }
 </style>
+

src/views/centerairC/sysMonitor/components/loadData.vue

@@ -3,12 +3,8 @@
     <div class="sys_charts" ref="sys_charts"></div>
   </div>
 </template>
-
 <script>
 import * as echarts from "echarts";
-import { eventBus } from "@/utils/evenBus";
-import { overView } from "@/api/bigScreen";
-import { getDay, getMonth, getYear } from "@/utils/datetime";
 export default {
   props: {
     hostData: {
@@ -65,7 +61,6 @@ export default {
       // 计算阈值
       // 真实值大于最大值的0.75才使用颜色渐变
       const threshold = maxData * 0.75;
-
       // 判断实际值是否超过阈值
       if (useData > threshold) {
         return [
@@ -99,6 +94,7 @@ export default {
       // 初始化数据
       const dataArr = this.loadPercent; //负载数据
       const dataX = 100;
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
       this.chartInstance = echarts.init(this.$refs.sys_charts);
       this.option = {
         backgroundStyle: {
@@ -108,17 +104,16 @@ export default {
         title: [
           {
             text: `${dataArr} %`,
-            bottom: "8%",
+            bottom: titleFontSize,
             left: "center",
             textStyle: {
-              fontSize: "16", //标记
+              fontSize: titleFontSize * 1.5, //标记
               color: "#ffff",
               fontWeight: 800,
             },
             triggerEvent: true,
           },
         ],
-
         legend: {
           show: false,
         },
@@ -374,7 +369,6 @@ export default {
               show: false,
             },
           },
-
           // 中间半圆装饰
           {
             type: "gauge",
@@ -443,10 +437,10 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .sys_charts {
   width: 2rem;
   height: 2rem;
 }
 </style>
+

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -62,14 +62,14 @@
           <div class="host-name">{{ deviceName }}</div>
           <!-- 冷凝器蒸发器压力-->
           <div class="outIn">
-            <div class="outIn-li in1">
+            <!-- <div class="outIn-li in1">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
             </div>
             <div class="outIn-li out1">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
-            </div>
+            </div> -->
             <!-- <div class="outIn-li in2">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">566.6kpa</div>
@@ -90,7 +90,14 @@
             alt=""
           />
           <!-- 启停状态 -->
-          <div class="startClass" v-if="hostListClass('2')"></div>
+          <div
+            class="startClass"
+            :class="{
+              startClass1: isMagnetic === 'true',
+              startClass2: isMagnetic === 'false',
+            }"
+            v-if="hostListClass('2')"
+          ></div>
           <!-- 冷冻冷却水流信号 -->
           <div class="water-flow3">
             <div class="water-flow-li">
@@ -122,6 +129,61 @@
       </div>
       <div class="detail-bottom">
         <div class="hostStatus">
+          <div class="hostStatus-li" v-if="isMagnetic === 'false'">
+            <span style="">远程开关机:</span>
+            <el-switch
+              style="display: block"
+              v-model="remoteSwitch"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="开机"
+              inactive-text="关机"
+              @change="
+                handleControlText(remoteSwitch, remoteSwitchId, '开机', '关机')
+              "
+            >
+            </el-switch>
+          </div>
+          <div class="hostStatus-li" v-if="isMagnetic === 'false'">
+            <span style="">冷冻水设定值:</span>
+            <el-input
+              size="mini"
+              style="width: 40%"
+              v-model="frozenupply"
+              @keyup.enter.native="
+                handleEnter(
+                  '冷冻水设定值',
+                  '℃',
+                  frozenupply,
+                  frozenupplyId,
+                  $event
+                )
+              "
+              @input="handleInput(children)"
+              @blur="handleBlur()"
+            ></el-input>
+            <span>℃</span>
+          </div>
+          <div class="hostStatus-li" v-if="isMagnetic === 'false'">
+            <span>电流负载限制值:</span>
+            <el-input
+              size="mini"
+              style="width: 40%"
+              v-model="electLoadSet"
+              @keyup.enter.native="
+                handleEnter(
+                  '电流负载限制值',
+                  '%',
+                  electLoadSet,
+                  electLoadSetId,
+                  $event
+                )
+              "
+              @input="handleInput(children)"
+              @blur="handleBlur()"
+            ></el-input>
+            <span>%</span>
+          </div>
           <div class="hostStatus-li">
             <span>手自动切换:</span>
             <span class="automaticData">{{ automaticObj.showValue }}</span>
@@ -163,12 +225,6 @@
               </div>
             </div>
           </div>
-          <line-square
-            class="line1"
-            :horizontalLength="700"
-            :verticalLength="300"
-            :overlap="15"
-          ></line-square>
         </div>
         <div class="detail-data compressor">
           <div class="detail-data-top">
@@ -191,18 +247,11 @@
               </div>
             </div>
           </div>
-          <line-square
-            class="line1"
-            :horizontalLength="700"
-            :verticalLength="300"
-            :overlap="15"
-          ></line-square>
         </div>
       </div>
     </div>
   </div>
 </template>
-
 <script>
 import {
   hostDetailsData,
@@ -216,13 +265,14 @@ import hostChart from "./components/hostChart.vue";
 import titleImg from "./components/titleImg.vue";
 import lineSquare from "./components/lineSquare.vue";
 import { format } from "@/utils/datetime";
+import { getDay } from "@/utils/datetime";
+import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
   name: "sysControl",
   components: { LoadData, hostChart, titleImg, lineSquare },
   data() {
     return {
       loading: false,
-
       currentDate: new Date(),
       nowTimer: null,
       deviceName: "", //主机名称
@@ -230,6 +280,12 @@ export default {
       condenserPre: "", //冷凝器压力
       evaporatorPre: "", //蒸发器压力
       rightHostData: [], //右
+      remoteSwitch: false, //远程开关机
+      remoteSwitchId: "",
+      frozenupply: "", //冷冻水设定值
+      frozenupplyId: "",
+      electLoadSet: "", //电流负载限制值
+      electLoadSetId: "",
       automaticObj: {}, //手自动状态
       localObj: {}, //本地远程状态
       badObj: {}, //故障状态
@@ -318,7 +374,7 @@ export default {
     },
     // 返回上一页
     goBack() {
-      this.$router.back();
+      this.$router.push('/path/to/monitor/0');
     },
     // 监测天数
     getDayData() {
@@ -369,50 +425,110 @@ export default {
               // 主机参数分开两列
               this.leftHostData = [];
               this.rightHostData = [];
+              // 筛选去掉特定 paramType 的数据
+              this.rightHostData = this.hostData.filter((item) => {
+                const specificParamTypes = [6, 5, 22, 26];
+                const orderNumList = [99];
+                // const specificParamTypes = [];
+                // 检查是否属于需要排除的特定 paramType
+                const isSpecificParamType = specificParamTypes.includes(
+                  Number(item.paramType)
+                );
+                // 检查是否属于需要排除的特定 paramType
+                const isOrderNum = orderNumList.includes(
+                  Number(item.orderNum)
+                );
+                // const isCombinedCondition0 =
+                //   Number(item.paramType) === 2 &&
+                //   item.otherName.includes("手动启停");
+                // 返回 false 表示要排除该元素
+                return !isSpecificParamType && !isOrderNum;
+              });
+              // 根据 ordernum 进行排序
+              this.rightHostData.sort((a, b) => {
+                return Number(a.orderNum) - Number(b.orderNum);
+              });
               this.hostData.forEach((item) => {
-                // 右边主机参数  温度12
-                if (item.paramType === "12") {
-                  this.rightHostData.push(item);
-                }
                 //左边主机参数 根据不同的 paramType 处理 showValue
-                if (item.paramType === "6") {
+                if (
+                  item.paramType === "6" &&
+                  item.otherName.includes("手自动切换")
+                ) {
                   // 运行状态
                   item.showValue =
                     Number(item.curValue) === 0 ? "自动" : "手动";
                   this.automaticObj = item;
-                } else if (item.paramType === "5") {
+                } else if (
+                  item.paramType === "5" &&
+                  item.otherName.includes("故障")
+                ) {
                   // 故障状态
-                  item.showValue =
+                  if (item.curValue === "正常") {
-                    Number(item.curValue) === 0 ? "未故障" : "故障";
+                    item.showValue = "无故障";
+                  } else {
+                    item.showValue = "故障";
+                  }
                   this.badObj = item;
-                } else if (item.paramType === "22") {
+                } else if (
+                  item.paramType === "22" &&
+                  item.otherName === "本地_远程"
+                ) {
                   // 本地远程
                   item.showValue =
                     Number(item.curValue) === 0 ? "本地" : "远程";
                   this.localObj = item;
-                } else if (item.paramType === "26") {
+                } else if (
+                  item.paramType === "26" &&
+                  item.otherName.includes("运行累计时间")
+                ) {
                   // 累计运行时间
                   item.showValue = item.curValue;
                   this.timeObj = item;
+                } else if (
+                  item.paramType === "2" &&
+                  item.otherName.includes("远程开关机")
+                ) {
+                  // 远程开关机
+                  this.remoteSwitch =
+                    Number(item.curValue) === 1 ? true : false;
+                  this.remoteSwitchId = item.id;
+                } else if (
+                  item.paramType === "14" &&
+                  item.otherName.includes("冷冻出水温度设定值")
+                ) {
+                  // 冷冻水设定值
+                  this.frozenupply = item.curValue;
+                  this.frozenupplyId = item.id;
+                } else if (
+                  item.paramType === "32" &&
+                  item.otherName.includes("电流限制设定值")
+                ) {
+                  // 电流负载限制值
+                  this.electLoadSet = item.curValue;
+                  this.electLoadSetId = item.id;
                 }
               });
             }
             if (item.mtType === "9") {
               // 压缩机参数
               this.compressorData = item.list;
-              this.compressorData.forEach((item) => {
+              // 根据orderNum升序排序
-                if (
+              this.compressorData.sort((a, b) => {
-                  item.paramType === "13" &&
+                return Number(a.orderNum) - Number(b.orderNum);
-                  item.otherName.includes("冷凝器")
+              });
-                ) {
+              // 遍历数组
-                  this.condenserPre = item.curValue;
+              for (let i = 0; i < this.compressorData.length; i++) {
+                const item = this.compressorData[i];
+                if (item.paramType === "1" && Number(item.curValue) === 0) {
+                  item.curValue = "停止";
+                  console.log("压缩机停止了啊是0···················");
                 } else if (
-                  item.paramType === "13" &&
+                  item.paramType === "1" &&
-                  item.otherName.includes("蒸发器")
+                  Number(item.curValue) === 1
                 ) {
-                  this.evaporatorPre = item.curValue;
+                  item.curValue = "运行";
+                }
               }
-              });
             }
           });
         }
@@ -433,10 +549,12 @@ export default {
           let newDataArray = []; // 用于存储符合条件的对象的新数组
           data.forEach((item) => {
             if (
-              item.otherName.includes("冷冻出水温度") ||
+              (item.otherName.includes("冷冻回水温度") ||
-              item.otherName.includes("冷冻进水温度") ||
+              item.otherName.includes("冷冻供水温度") ||
-              item.otherName.includes("冷却出水温度") ||
+              item.otherName.includes("冷却回水温度") ||
-              item.otherName.includes("冷却进水温度")
+              item.otherName.includes("冷却供水温度") ||
+              item.otherName.includes("主机负载")) 
+              && !item.otherName.includes("设定")
             ) {
               let dataItem = {
                 name: item.otherName,
@@ -474,10 +592,43 @@ export default {
     hostListClass(paramType) {
       for (let i = 0; i < this.hostData.length; i++) {
         const item = this.hostData[i];
+        if (item.paramType === paramType) {
+          // console.log("item.paramType ",item )
+          switch (paramType) {
+            case "1": // 运行状态
+              if (item.curValue === "运行" && item.otherName.includes("运行状态")) {
+                console.log("item", item);
+                return true;
+              }
+              break;
+            case "2": // 启停
+              if (item.curValue === "启动" && item.otherName.includes("启停")) {
+                console.log("item", item);
+                return true;
+              }
+              break;
+            case "20": // 冷冻水流
+              if ( Number(item.curValue) !== 0) {
+                console.log("item", item);
+                return true;
+              }
+              break;
+            case "21": // 冷却水流
+              if ( Number(item.curValue) !== 0) {
+                console.log("item", item);
+                return true;
+              }
+              break;
+            default:
+              return false;
+              break;
+          }
+        } else {
           if (item.paramType === paramType && Number(item.curValue) !== 0) {
             return true;
           }
         }
+      }
       // 否则
       return false;
     },
@@ -501,15 +652,116 @@ export default {
       this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
+    // 处理输入事件，过滤非数字字符
+    handleInput(children) {
+      console.log("校验");
+      // 实时校验并过滤非数字和非小数点字符
+      children.curValue = String(children.curValue).replace(/[^\d.]/g, "");
+      // 确保只有一个小数点
+      const parts = children.curValue.split(".");
+      if (parts.length > 2) {
+        // 如果有多个小数点，只保留第一个小数点及之前的部分和第一个小数点之后的部分
+        children.curValue = parts[0] + "." + parts[1];
+      }
+      // 确保小数点后最多两位
+      if (parts.length === 2) {
+        children.curValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    },
+    // 失去焦点
+    handleBlur() {
+      // this.currentFocusIndex = "";
+    },
+    handleEnter(title, unit, value, id, event) {
+      console.log("请求后端", value);
+      // 失去焦点
+      event.target.blur();
+      this.$confirm(
+        `确定要修改"${title}"的数据为:${value} ${unit}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.hadleOperationConrol(id, value);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          // this.getOperationList();
+        });
+    },
+    //启停控制/手动控制
+    handleControlText(item, itemId, name1, name2) {
+      this.$confirm(
+        `确定要切换远程开关机的状态为:${item ? name1 : name2}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          let param = null;
+          if (item) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.hadleOperationConrol(itemId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          console.log("item后", item);
+          item = !item;
+          console.log("item原始", item);
+          this.remoteSwitch = item;
+          console.log("this.remoteSwitch", this.remoteSwitch);
+          console.log("不请求后台");
+        });
+    },
+    hadleOperationConrol(id, param) {
+      let data = {
+        id: id,
+        param: param,
+      };
+      console.log("操作参数", data);
+      operationConrol([data])
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getPolicyList().finally(() => {
+                // 关闭 loading 效果
+                this.loading = false;
+              });
+            }, 5000);
+          } else {
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getPolicyList();
+          }
+        })
+        .catch((error) => {
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getPolicyList();
+        });
+    },
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .monitor {
   width: 100%;
   min-height: 100vh;
-  height: auto;
   background-color: black;
   color: #fff;
   .monitor-top {
@@ -699,14 +951,20 @@ export default {
         .startClass {
           z-index: 10;
           position: absolute;
-          top: 2.9rem;
-          left: 3.4rem;
           width: 0.18rem;
           height: 0.18rem;
           border-radius: 50%;
           animation: blink 1s infinite;
           background-color: #38fc52 !important;
         }
+        .startClass1 {
+          top: 2.9rem;
+          left: 3.4rem;
+        }
+        .startClass2 {
+          top: 2.3rem;
+          left: 3.2rem;
+        }
         .water-flow3 {
           z-index: 10;
           position: absolute;
@@ -753,9 +1011,9 @@ export default {
         .fanBlade {
           z-index: 10;
           position: absolute;
-          top: 2.55rem;
+          top: 2.75rem;
-          left: 4.65rem;
+          left: 4.4rem;
-          width: 0.5rem;
+          width: 0.6rem;
           height: 0.5rem;
           transform-style: preserve-3d;
           transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
@@ -797,7 +1055,7 @@ export default {
       }
     }
     .detail-bottom {
-      height: 2.6rem;
+      // height: 5rem;
       margin-top: 0.3rem;
       margin-left: 0.25rem;
       display: flex;
@@ -806,8 +1064,9 @@ export default {
       .hostStatus {
         display: flex;
         flex-direction: column;
-        justify-content: flex-end;
+        justify-content: flex-start;
-        width: 3rem;
+        width: 3rem !important;
+        margin-top: 1.5rem;
         .hostStatus-li {
           background-color: #25455a;
           color: #c0dffc;
@@ -815,6 +1074,16 @@ export default {
           margin-bottom: 0.1rem;
           padding: 0.1rem;
           letter-spacing: 0.02rem;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          span {
+            white-space: nowrap;
+          }
+          .el-input {
+            margin: 0 0.05rem;
+          }
         }
       }
       .detail-data {
@@ -838,19 +1107,20 @@ export default {
           }
         }
         .detail-data-bottom {
-          width: 100%;
+          // width: 100%;
-          padding: 0.1rem 0.3rem;
+          // padding: 0.1rem 0.3rem;
           z-index: 0;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
-          align-items: flex-start;
+          align-items: stretch;
           justify-content: flex-start;
           .detail-data-li {
             // width: 100%;
             margin-right: 0.1rem;
+            margin-bottom: 0.15rem !important;
             position: relative;
-            color: #89acc4;
+            color: #c0dffc;
             font-family: Arial, sans-serif;
             letter-spacing: 0.02rem;
             font-size: 0.18rem;
@@ -895,7 +1165,6 @@ export default {
               #217df5 100%
             );
           }
-
           .detail-data-li::before {
             top: 0;
           }
@@ -912,8 +1181,11 @@ export default {
             width: 100%;
             height: 100%;
             padding: 0.04rem 0.1rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
           }
-
           .rightDot::before {
             content: "";
             position: absolute;
@@ -931,7 +1203,6 @@ export default {
             border-radius: 50%;
             z-index: 10;
           }
-
           .rightDot::after {
             content: "";
             position: absolute;
@@ -966,7 +1237,6 @@ export default {
               rgba(255, 255, 255, 0) 70%
             );
           }
-
           .leftDot::after {
             content: "";
             position: absolute;
@@ -987,24 +1257,30 @@ export default {
         }
         .line1 {
           position: absolute;
-          top: 0.53rem;
+          top: 0rem;
         }
       }
       .hostparams {
-        width: 7.6rem;
+        // width: 7.7rem;
+        width: 7rem;
         .detail-data-bottom {
-          padding-left: 0.75rem;
+          // padding-left: 0.5rem;
           .detail-data-li {
-            width: 3rem;
+            // width: 3.2rem;
+            width: calc(50% - 0.2rem) !important;
+            margin: 0 0.1rem;
           }
         }
       }
       .compressor {
         width: 7.6rem;
         .detail-data-bottom {
-          padding-left: 0.75rem;
+          // padding-left: 0.75rem;
+          //  width: 10rem;
           .detail-data-li {
-            width: 3rem;
+            // width: 3.4rem;
+            width: calc(50% - 0.2rem) !important;
+            margin: 0 0.1rem;
           }
         }
       }
@@ -1039,3 +1315,48 @@ export default {
   }
 }
 </style>
+<style scoped>
+@media (min-width: 0px) and (max-width: 1430px) {
+  .hostStatus-li >>> .el-input--mini .el-input__inner {
+    height: 0.28rem !important;
+    line-height: 0.28rem !important;
+    padding: 0.1rem !important;
+  }
+  .hostStatus-li >>> .el-switch {
+    height: 0.2rem !important;
+    line-height: 0.2rem !important;
+    font-size: 0.18rem !important;
+  }
+  .hostStatus-li >>> .el-switch__label {
+    height: 0.2rem !important;
+    line-height: 0.2rem !important;
+    font-size: 0.18rem !important;
+  }
+  .hostStatus-li >>> .el-switch__label * {
+    font-size: 0.18rem !important;
+  }
+  .hostStatus-li >>> .el-switch__core {
+    width: 0.4rem !important;
+    height: 0.2rem !important;
+    border-radius: 0.1rem !important;
+  }
+  .hostStatus-li >>> .el-switch__core:after {
+    width: 0.16rem !important;
+    height: 0.16rem !important;
+    top: 0.01rem !important;
+  }
+  .hostStatus-li >>> .el-switch.is-checked .el-switch__core::after {
+    margin-left: -0.17rem !important;
+  }
+
+  .hostStatus-li >>> .el-input--mini {
+    font-size: 0.14rem !important;
+  }
+  .hostStatus-li >>> .el-input--mini .el-input__icon {
+    line-height: 0.28rem !important;
+  }
+  .hostStatus-li >>> .el-input__icon {
+    width: 0.25rem !important;
+  }
+}
+</style>

src/views/centerairC/sysMonitor/index.vue

@@ -11,7 +11,7 @@ export default {
     toPage() {
       console.log("需要跳转的")
       // 跳转到高校导航大屏展示
-      this.$router.push("/monitorCenter")
+      this.$router.push('/path/to/monitor/0');
     },
   },
 };

src/views/centerairC/timeSwitch/index.vue

@@ -102,28 +102,28 @@ export default {
                     // console.log("child.pointName", child.pointName);
                     if (child.pointName) {
                       // 定时开机-小时
-                      if (child.pointName == `定时${index + 1}开_时`) {
+                      if (child.pointName.includes(`开_时`)) {
                         // console.log("定时开机-时·························");
                         delayItem.delayOpenHour = child.curValue;
                         delayItem.delayOpenHourId = child.cpmId;
                       }
                       //   定时开机-分钟
                       else if (
-                        child.pointName.includes(`定时${index + 1}开_分`)
+                        child.pointName.includes(`开_分`)
                       ) {
                         delayItem.delayOpenMinute = child.curValue;
                         delayItem.delayOpenMinuteId = child.cpmId;
                       }
                       // 定时关机-小时
                       else if (
-                        child.pointName.includes(`定时${index + 1}关_时`)
+                        child.pointName.includes(`关_时`)
                       ) {
                         delayItem.delayCloseHour = child.curValue;
                         delayItem.delayCloseHourId = child.cpmId;
                       }
                       //   定时关机-分钟
                       else if (
-                        child.pointName.includes(`定时${index + 1}关_分`)
+                        child.pointName.includes(`关_分`)
                       ) {
                         delayItem.delayCloseMinute = child.curValue;
                         delayItem.delayCloseMinuteId = child.cpmId;
@@ -419,13 +419,7 @@ export default {
   border-radius: 10px;
   font-size: 14px;
   .device-li {
-    width: 100%;
+    flex: none !important;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px 0;
-    color: #abcdfc;
-    border-bottom: 1px dashed #0349ac;
     .device-name {
       flex: 1;
       white-space: nowrap;
@@ -441,9 +435,6 @@ export default {
       }
     }
   }
-  .device-li:nth-child(1) {
-    color: #9ca3af;
-  }
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {

src/views/components/aircAndWindcMeter.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="sys_content">
+    <div class="charts" ref="chart_ref"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    subData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      chartData1: "",
+      chartData2: "",
+      allData: "",
+    };
+  },
+  watch: {
+    subData: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal) {
+        console.log("检测到传功来的数据", this.subData);
+        if (Object.keys(newVal).length > 0) {
+          console.log("newval", newVal);
+          let data = newVal;
+          this.chartData1 = "";
+          this.chartData2 = "";
+          data.forEach((item) => {
+            if (item.name.includes("运行")) {
+              this.chartData1 = parseInt(item.value);
+            }
+            if (item.name.includes("停止")) {
+              this.chartData2 = parseInt(item.value);
+            }
+            // 计算总和
+            this.allData = this.chartData1 + this.chartData2;
+          });
+          this.$nextTick(() => {
+            // // 销毁现有的 ECharts 实例
+            // if (this.chartInstance) {
+            //   this.chartInstance.dispose();
+            // }
+            // // 重新初始化图表
+            // this.initChart();
+            this.echartsData();
+          });
+        }
+      },
+    },
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener("resize", this.screenAdapter);
+    this.screenAdapter();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    echartsData() {
+      console.log("父组件传过来的值", this.subData);
+      if (this.subData) {
+        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+        const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表
+        const adapterOption = {
+          //环形图中间文字
+          title: {
+            subtextStyle: {
+              fontSize: titleFontSize * 2,
+            },
+          },
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
+          },
+          legend: {
+            itemWidth: titleFontSize,
+            itemHeight: titleFontSize,
+            itemGap: titleFontSize * 2,
+            formatter: function (name) {
+              var arr = [];
+              let data = adapterOption.series[0].data;
+              var index = 0;
+              var total = 0;
+              // 计算总和
+              for (var i = 0; i < data.length; i++) {
+                total += data[i].value;
+                if (data[i].name == name) {
+                  index = i;
+                }
+              }
+              // 检查当前项的值是否为 0
+              var percentage =
+                data[index].value === 0
+                  ? "0.00"
+                  : ((data[index].value / total) * 100).toFixed(2);
+              arr.push(
+                "{name|" + name + "}",
+                "{text|" + " " + ":" + " " + "}",
+                "{value|" + data[index].value + " " + "}",
+                "{percentage|" + " " + percentage + "%}"
+              );
+              return arr.join("");
+            },
+            textStyle: {
+              color: function (name) {
+                const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                const index = dataSeries.findIndex(
+                  (item) => item.name === name
+                );
+                const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
+                return colorList[index];
+              },
+              rich: {
+                name: {
+                  align: "left",
+                  fontSize: titleFontSize * 2,
+                },
+                text: {
+                  align: "left",
+                  fontSize: titleFontSize * 2,
+                },
+                value: {
+                  align: "left",
+                  fontSize: titleFontSize * 2,
+                  // color: function (params) {
+                  //   let data = adapterOption.series[1].data;
+                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                  // },
+                },
+                percentage: {
+                  align: "left",
+                  fontSize: titleFontSize * 2,
+                  // color: function (params) {
+                  //   let data = adapterOption.series[1].data;
+                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                  // },
+                },
+              },
+            },
+          },
+          series: [
+            {
+              name: "风柜系统:",
+              data: [
+                { value: this.chartData1, name: "运行数" },
+                { value: this.chartData2, name: "停止数" },
+              ],
+              itemStyle: {
+                color: function (params) {
+                  var colorList = ["#0882ff", "#ffe21e"];
+                  return colorList[params.dataIndex];
+                },
+                // borderWidth: 5,
+                borderColor: "#002a56",
+              },
+            },
+            {
+              data: [
+                { value: this.chartData1, name: "运行数" },
+                { value: this.chartData2, name: "停止数" },
+              ],
+            },
+          ],
+        };
+        this.chartInstance.setOption(adapterOption);
+        this.chartInstance.resize();
+      } else {
+        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+        const adapterOption = {
+          //环形图中间文字
+          title: {
+            subtextStyle: {
+              fontSize: titleFontSize * 2,
+            },
+          },
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
+          },
+          legend: {
+            itemWidth: titleFontSize,
+            itemHeight: titleFontSize,
+            itemGap: titleFontSize * 2,
+            formatter: function (name) {
+              var arr = [];
+              let data = adapterOption.series[0].data;
+              var index = 0;
+              var total = 0;
+              // 计算总和
+              for (var i = 0; i < data.length; i++) {
+                total += data[i].value;
+                if (data[i].name == name) {
+                  index = i;
+                }
+              }
+              // 检查当前项的值是否为 0
+              var percentage =
+                data[index].value === 0
+                  ? "0.00"
+                  : ((data[index].value / total) * 100).toFixed(2);
+              arr.push(
+                "{name|" + name + "}",
+                "{text|" + " " + ":" + " " + "}",
+                "{value|" + data[index].value + " " + "}",
+                "{percentage|" + " " + percentage + "%}"
+              );
+              return arr.join("");
+            },
+            textStyle: {
+              color: function (name) {
+                const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                const index = dataSeries.findIndex(
+                  (item) => item.name === name
+                );
+                const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
+                return colorList[index];
+              },
+              rich: {
+                name: {
+                  align: "left",
+                  fontSize: titleFontSize * 1.6,
+                },
+                text: {
+                  align: "left",
+                  fontSize: titleFontSize * 1.6,
+                },
+                value: {
+                  align: "left",
+                  fontSize: titleFontSize * 1.6,
+                  // color: function (params) {
+                  //   let data = adapterOption.series[1].data;
+                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                  // },
+                },
+                percentage: {
+                  align: "left",
+                  fontSize: titleFontSize * 1.6,
+                  // color: function (params) {
+                  //   let data = adapterOption.series[1].data;
+                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                  // },
+                },
+              },
+            },
+          },
+          series: [
+            {
+              name: "风柜系统:",
+              data: [
+                { value: 0, name: "运行数" },
+                { value: 0, name: "停止数" },
+              ],
+              itemStyle: {
+                color: function (params) {
+                  var colorList = ["#0882ff", "#ffe21e"];
+                  return colorList[params.dataIndex];
+                },
+                // borderWidth: 5,
+                borderColor: "#002a56",
+              },
+            },
+            {
+              data: [
+                { value: 0, name: "运行数" },
+                { value: 0, name: "停止数" },
+              ],
+            },
+          ],
+        };
+        this.chartInstance.setOption(adapterOption);
+        this.chartInstance.resize();
+      }
+    },
+    //初始化chartInstance对象
+    initChart() {
+      this.chartInstance = echarts.init(this.$refs.chart_ref);
+      this.option = {
+        //环形图中间文字
+        title: {
+          subtext: "运行状态",
+          textStyle: {
+            color: "#ffffff",
+          },
+          subtextStyle: {
+            color: "#ffffff",
+          },
+          textAlign: "center",
+          x: "49%",
+          y: "36%", //距离上边的距离
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        //图例
+        legend: {
+          orient: "horizontal", // 水平布局
+          bottom: 0, // 位于最底部
+          left: "center", // 水平居中
+          //图例文字颜色
+          textStyle: {
+            color: "#ffffff",
+            // fontSize: 18,
+          },
+        },
+        series: [
+          // 数据圆
+          {
+            name: "风柜系统:",
+            type: "pie",
+            radius: ["60%", "72%"],
+            center: ["50%", "44%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+            itemStyle: {
+              color: function (params) {
+                var colorList = ["#0882ff", "#ffe21e"];
+                return colorList[params.dataIndex];
+              },
+              borderWidth: 5,
+              borderColor: "#002a56",
+            },
+            z: 10, //设置层级更高,否则会被阴影圆遮住
+          },
+          // 阴影圆
+          {
+            type: "pie",
+            radius: ["50%", "62%"],
+            center: ["50%", "44%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            silent: true,
+            labelLine: {
+              show: false,
+            },
+            //颜色
+            itemStyle: {
+              color: function (colors) {
+                var colorList = ["#02427f", "#385f5c"];
+                return colorList[colors.dataIndex];
+              },
+            },
+            z: 15,
+          },
+          // 内圈边框
+          {
+            // 颜色
+            color: ["#305376"],
+            type: "pie",
+            silent: true, //鼠标移入不显示内容，不触发鼠标事件
+            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+            // 这里开启silent: true, 就达到效果了
+            // center与非内圈一致
+            radius: ["38%", "39%"],
+            center: ["50%", "44%"],
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 0,
+                name: "",
+                itemStyle: {},
+              },
+            ],
+          },
+          //  最里面渐变小圆
+          {
+            // 颜色
+            type: "pie",
+            silent: true, //鼠标移入不显示内容，不触发鼠标事件
+            // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+            // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+            // 这里开启silent: true, 就达到效果了
+            // center与非内圈一致
+            radius: ["0%", "38%"],
+            center: ["50%", "44%"],
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 0,
+                name: "",
+                itemStyle: {},
+              },
+            ],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#002a55" }, // 0% 处的颜色
+                  { offset: 1, color: "#0a457a" }, // 100% 处的颜色
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sys_content {
+  padding: 20px;
+  .charts {
+    width: 100%;
+    height: 250px;
+  }
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .sys_content {
+    padding: 0.2rem !important;
+    .charts {
+      width: 100%;
+      height: 2.5rem !important;
+    }
+  }
+}
+</style>

src/views/components/hotWater.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="card-div">
+    <div class="card-li room-temp">
+      <div class="card-header">
+        <h2 class="card-title">回水平均温度</h2>
+        <div class="icon">
+          <i class="fas fa-home"></i>
+        </div>
+      </div>
+      <div class="thermometer">
+        <div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div>
+      </div>
+      <div class="temperature">{{temData1}}℃</div>
+    </div>
+    <div class="card-li amb-temp">
+      <div class="card-header">
+        <h2 class="card-title">供水平均温度</h2>
+        <div class="icon">
+          <i class="fas fa-home"></i>
+        </div>
+      </div>
+      <div class="thermometer">
+        <div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div>
+      </div>
+      <div class="temperature">{{temData2}}℃</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    subData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      temData1: "",
+      temData2: "",
+    };
+  },
+  watch: {
+    subData: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal) {
+        console.log("检测到传功来的数据", this.subData);
+        if (Object.keys(newVal).length > 0) {
+          console.log("newval", newVal);
+          let data = newVal;
+          this.temData1 = "";
+          this.temData2 = "";
+          data.forEach((item) => {
+            if (item.name.includes("回水")) {
+              this.temData1 = parseInt(item.value);
+            }
+            if (item.name.includes("供水")) {
+              this.temData2 = parseInt(item.value);
+            }
+          });
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-div {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .card-li {
+    width: 50%;
+    padding: 0.2rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.1rem;
+      .card-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #ffffff;
+      }
+    }
+    .temperature {
+      font-size: 20px;
+      font-weight: 700;
+      position: relative;
+      display: inline-block;
+    }
+    .thermometer {
+      height: 180px;
+      width: 40px;
+      background: #3d5581;
+      border-radius: 20px;
+      margin: 0 auto 0.25rem;
+      overflow: hidden;
+      box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1);
+      position: relative;
+    }
+    .temprogress {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      border-top-left-radius: 20px;
+      border-top-right-radius:20px;
+      background: linear-gradient(to top, #3498db, #2ecc71) !important;
+    }
+  }
+}
+@media (min-width: 2000px) {
+.card-div {
+  .card-li {
+    .card-header {
+      .card-title {
+        font-size: 0.15rem !important;
+      }
+    }
+    .temperature {
+      font-size: 0.2rem !important;
+    }
+    .thermometer {
+      height: 1.8rem !important;
+      width: 0.4rem !important;
+      border-radius: 0.2rem !important;
+    }
+    .temprogress {
+      border-top-left-radius: 0.2rem !important;
+      border-top-right-radius:0.2rem !important;
+    }
+  }
+}
+}
+</style>