采暖系统报表增加设定温度

2.修改水电抄表记录页面的内容

.env.development

@@ -8,8 +8,8 @@ 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'
+# 梅州云端
+VUE_APP_BASE_API = 'http://106.55.173.225:8091'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -7,4 +7,4 @@ ENV = 'production'
 # 生产环境
 # VUE_APP_BASE_API = '/prod-api'
 # 后台
-VUE_APP_BASE_API = 'http://106.55.173.225:8090'
+VUE_APP_BASE_API = 'http://106.55.173.225:8091'

package.json

@@ -59,7 +59,8 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
@@ -72,6 +73,7 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "html-webpack-plugin": "^5.6.3",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
     "sass": "1.32.13",

src/App.vue

@@ -7,18 +7,37 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
+import { exitFullscreen, isFullscreen } from "@/utils/fullscreen";
 
 export default {
   name: "App",
   components: { ThemePicker },
   metaInfo() {
     return {
-      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-      titleTemplate: title => {
-        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
+  mounted() {
+    // 监听键盘事件，当用户按 Esc 键时退出全屏
+    window.addEventListener("keydown", this.handleKeyDown);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+  },
+  methods: {
+    handleKeyDown(event) {
+      if (event.key === "Escape" && isFullscreen()) {
+        exitFullscreen();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

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/boiler/boilerRunReport.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 查询运行记录
+export function boilerSysList(data) {
+  return request({
+    url: "/reportSteam/list",
+    method: "post",
+    data,
+  });
+}
+// 编辑运行记录
+export function boilerSysEdit(data) {
+  return request({
+    url: "/reportSteam/edit",
+    method: "put",
+    data,
+  });
+}
+// 导出
+export function boilerSysExport(data) {
+  return request({
+    url: "/reportSteam/export",
+    method: "post",
+    data,
+    responseType: "blob",
+  });
+}

src/api/boiler/heatingPump.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 采暖泵列表
+export function heatPumpList(query) {
+  return request({
+    url: "/device/heatPump/list",
+    method: "get",
+    params: query,
+  });
+}
+// 采暖泵在线情况
+export function heatPumpOnlineList(query) {
+  return request({
+    url: "/device/heatPump/online",
+    method: "get",
+    params: query,
+  });
+}
+// 采暖泵报警列表
+export function heatPumpAlarmList(query) {
+  return request({
+    url: "/device/heatPump/alarmList",
+    method: "get",
+    params: query,
+  });
+}
+

src/api/boiler/heatingRunPeport.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 查询运行记录
+export function boilerSysList(data) {
+  return request({
+    url: "/reportHeating/list",
+    method: "post",
+    data,
+  });
+}
+// 编辑运行记录
+export function boilerSysEdit(data) {
+  return request({
+    url: "/reportHeating/edit",
+    method: "put",
+    data,
+  });
+}
+// 导出
+export function boilerSysExport(data) {
+  return request({
+    url: "/reportHeating/export",
+    method: "post",
+    data,
+    responseType: "blob",
+  });
+}

src/api/boiler/hotwaterBoiler.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 热水锅炉设备参数列表
+export function hotWaterBoiler(query) {
+  return request({
+    url: "/device/hotWaterBoiler/list",
+    method: "get",
+    params: query,
+  });
+}

src/api/boiler/steamBoiler.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 蒸汽锅炉设备参数列表
+export function steamBoilerBoiler(query) {
+  return request({
+    url: "/device/steamBoiler/list",
+    method: "get",
+    params: query,
+  });
+}

src/api/centerairC/hostRunReport.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 查询运行记录
+export function reportSysList(data) {
+  return request({
+    url: "/reportSys/list",
+    method: "post",
+    data,
+  });
+}
+// 编辑运行记录
+export function reportSysEdit(data) {
+  return request({
+    url: "/reportSys/edit",
+    method: "put",
+    data,
+  });
+}
+// 导出
+export function reportSysExport(data) {
+  return request({
+    url: "/reportSys/export",
+    method: "post",
+    data,
+      responseType: 'blob',
+  });
+}

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/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/boilerSys.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="1757379307805" class="icon" viewBox="0 0 1335 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1517" xmlns:xlink="http://www.w3.org/1999/xlink" width="260.7421875" height="200"><path d="M1233.548986 825.047188V692.461449C1293.801739 651.456928 1335.652174 562.176 1335.652174 458.722319c0-137.676058-73.935768-250.078609-167.179131-257.335652v-0.415537l-165.917681-25.822608V115.533913h-56.750376v50.665739L810.889275 139.664696V75.790841h-60.697971v54.494608L514.285449 87.010319V0h-66.337391v76.636754l-105.768812-16.458203v0.296811c60.549565 8.221681 103.231072 167.045565 96.048232 359.780174-7.182841 192.734609-61.677449 347.863188-122.672232 351.573334l87.188406-2.849392v40.158609l-159.016811 8.102956v66.841971l370.554434-30.660637 1.409855 25.555478-195.628521 13.341681 23.240348 11.353044v113.975652l861.792463-106.733449v-84.027363l-34.934724-4.541217-36.61171 2.700985z m-553.360696-32.218898v-34.489507l160.975768-6.678261v32.085333l-160.975768 9.082435zM528.517565 204.503188l27.870609-13.623652v-0.845913l1.409855 0.148406 0.430377-0.148406v0.281971l147.737971 23.552v295.787594l-145.91258-4.11084-31.551072 3.546898V204.503188z m-53.099594 600.791189l8.310725-39.179131 125.19513-4.11084 2.122203 36.478145-135.642899 6.826666z m204.770319 38.882319l269.148753-24.976696v-40.870957l-43.52742 2.270609 4.927073-31.22458 231.824695-14.766376 15.909102 93.822145-478.133797 42.859594-0.148406-27.098899z m-406.854493-73.579595c-56.008348-2.122203-97.458087-133.179362-99.980985-302.955594l-35.008928-2.700985c-21.563362 8.934029-17.066667 54.895304-17.066667 54.895304H0c0-138.150957 105.160348-144.814377 105.160348-144.814377l70.848927 1.27629c12.184116-180.134957 65.402435-319.280232 123.785276-316.994782 62.033623 2.404174 106.421797 163.528348 99.135072 359.973101-7.271884 196.429913-63.562203 353.740058-125.595826 351.321043zM250.227014 320.853333c-11.620174 0-21.696928 22.973217-26.742724 56.869102l30.942609 0.712348-0.281971 92.620058-30.245102-1.27629c4.897391 32.204058 14.988986 54.168116 26.327188 54.168116 16.384 0 29.681159-45.516058 29.68116-101.539247 0-56.023188-13.297159-101.554087-29.68116-101.554087z" fill="" p-id="1518"></path></svg>

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/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/heatingPump.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="1757380960233" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3007" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M428.8 704h153.6c236.8-134.4 57.6-339.2 25.6-358.4 12.8 25.6 12.8 64-6.4 76.8-38.4-128-121.6-160-121.6-160 12.8 70.4-38.4 147.2-83.2 204.8 0-25.6-6.4-44.8-19.2-70.4-6.4 44.8-44.8 89.6-51.2 140.8-19.2 64 6.4 115.2 102.4 166.4z m0 0" fill="" p-id="3008"></path><path d="M1024 76.8H512c-57.6 0-115.2 12.8-166.4 32-51.2 25.6-102.4 57.6-140.8 96-38.4 38.4-70.4 83.2-96 140.8-19.2 51.2-32 108.8-32 166.4 0 57.6 12.8 115.2 32 166.4 6.4 19.2 12.8 32 25.6 51.2H0v217.6h512c57.6 0 115.2-12.8 166.4-32s96-51.2 140.8-96c38.4-38.4 70.4-83.2 96-140.8 25.6-51.2 32-108.8 32-166.4 0-76.8-19.2-153.6-57.6-217.6H1024V76.8M460.8 896H51.2v-115.2h185.6c-12.8-12.8-32-32-44.8-51.2-38.4-64-64-134.4-64-217.6 0-211.2 172.8-384 384-384h460.8v115.2h-179.2l32 38.4C870.4 352 896 428.8 896 512c0 211.2-172.8 384-384 384h-51.2z m0 0" fill="" p-id="3009"></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/hz-icon.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="1758105515572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7076" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M480.256 16.384C219.648 16.384 8.192 227.84 8.192 488.448c0 260.608 211.456 472.064 472.064 472.064 260.608 0 472.064-211.456 472.064-472.064 0.512-260.608-210.944-472.064-472.064-472.064z m0 881.664c-225.792 0-409.088-183.296-409.088-409.088 0-225.792 183.296-409.088 409.088-409.088 225.792 0 409.088 183.296 409.088 409.088 0.512 225.792-182.784 409.088-409.088 409.088z" p-id="7077"></path><path d="M203.264 281.088h50.688v160.256h199.68V281.088h50.688v383.488h-50.688V484.864h-199.68v179.712h-50.688V281.088zM562.176 625.664l160.768-199.68h-152.576v-40.448H778.24v40.448l-158.72 198.144h165.888l-7.68 40.448h-215.552v-38.912z" p-id="7078"></path></svg>

src/assets/icons/svg/meterRecord.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="1761011231553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M925.425633 514.798111a38.910648 38.910648 0 0 0-25.59911-9.727662 38.398666 38.398666 0 0 0-28.415013 12.543564l-138.747178 153.594662a62.973812 62.973812 0 0 0-62.973812 62.973812 38.398666 38.398666 0 0 0 0 5.631804l-28.926995 31.742897a38.398666 38.398666 0 0 0 56.830026 51.198221l24.319155-26.879066a69.373589 69.373589 0 0 0 10.239644 0 62.973812 62.973812 0 0 0 63.229802-63.229802A66.045705 66.045705 0 0 0 793.590215 716.775092l106.74829-117.243926a214.008563 214.008563 0 1 1-167.674173-80.893189 38.398666 38.398666 0 0 0 0-76.797331 291.061886 291.061886 0 1 0 192.50531 72.701474z" p-id="2522"></path><path d="M365.317097 732.902532a367.859217 367.859217 0 0 1 367.603226-367.603226 112.124104 112.124104 0 0 1 38.398666 6.655769v-207.352795a38.398666 38.398666 0 0 0-38.398666-38.398666H455.681957V63.997776A63.997776 63.997776 0 0 0 391.684181 0H64.015567A63.997776 63.997776 0 0 0 0.017791 63.997776v921.567976A38.398666 38.398666 0 0 0 38.416457 1023.964417h470.51165a366.835252 366.835252 0 0 1-143.61101-291.061885zM293.639588 793.572423H167.179982a38.398666 38.398666 0 0 1 0-76.797331h126.459606a38.398666 38.398666 0 0 1 0 76.797331z m0-255.991104H167.179982a38.398666 38.398666 0 0 1 0-76.797331h126.459606a38.398666 38.398666 0 0 1 0 76.797331z m0-255.991104H167.179982a38.398666 38.398666 0 0 1 0-76.797332h126.459606a38.398666 38.398666 0 0 1 0 76.797332z" p-id="2523"></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,206 @@
     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;
+}
+}
+@media (min-width: 2000px) {
   // 页面公共样式
   .analysis-table th {
     height: 0.5rem !important;
@@ -428,4 +709,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

@@ -1430,7 +1430,7 @@
   min-width: 50px !important;
   z-index: 0;
 }
-.el-input__suffix{
+.el-input__suffix {
   z-index: 10;
 }
 .el-cascader__tags {
@@ -1438,4 +1438,24 @@
   flex-direction: row;
   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.el-tag--danger {
+  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 {
@@ -449,7 +449,7 @@ table th {
 .el-dialog .el-row .el-select {
   width: 100% !important;
 }
-.el-dialog .el-row .el-date-editor{
+.el-dialog .el-row .el-date-editor {
   width: 100% !important;
 }
 
@@ -502,7 +502,7 @@ table th {
   /* 设置滚动条背景颜色 */
 }
 .analysis-table::-webkit-scrollbar-thumb {
-  background-color:  rgb(21, 50, 104);
+  background-color: rgb(21, 50, 104);
   /* 设置滑块颜色 */
 }
 .analysis-table::-webkit-scrollbar-thumb:hover {
@@ -513,3 +513,272 @@ 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;
+      }
+    }
+  }
+}
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+  .app-main {
+    height: 100% !important;
+    overflow-y: hidden !important;
+  }
+}

src/assets/styles/sidebar.scss

@@ -116,7 +116,7 @@
     }
 
     & .nest-menu .el-submenu > .el-submenu__title,
-    & .el-submenu .el-menu-item {
+    & .nest-menu .el-menu-item {
       min-width: var(--base-sidebar-width) !important;
       padding: 0 35px !important;
 
@@ -124,6 +124,9 @@
         background-color: rgba(0, 0, 0, 0.06) !important;
       }
     }
+    & .nest-menu .el-menu > .nest-menu .el-menu-item {
+      padding: 0 55px !important;
+    }
 
     & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
@@ -328,18 +331,21 @@
       }
     }
   }
-  .hideSidebar .fixed-header{
+  .hideSidebar .fixed-header {
     width: calc(100% - 0.54rem) !important;
   }
   .el-submenu__title {
     font-size: 0.14rem !important;
     height: 0.56rem !important;
     line-height: 0.56rem !important;
-    font-size:0.14rem !important;
+    font-size: 0.14rem !important;
     padding: 0 0.2rem !important;
   }
   #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
-  #app .sidebar-container .el-submenu .el-menu-item {
+  #app .sidebar-container .nest-menu .el-menu-item {
     padding: 0 0.35rem !important;
   }
+  #app .sidebar-container .nest-menu .el-menu > .nest-menu .el-menu-item {
+    padding: 0 0.55rem !important;
+  }
 }

src/components/Crontab/index.vue

@@ -70,33 +70,33 @@
         <p class="title">时间表达式</p>
         <table>
           <thead>
-            <th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
+            <th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th>
             <th>Cron 表达式</th>
           </thead>
           <tbody>
             <td>
-              <span>{{crontabValueObj.second}}</span>
+              <span>{{ crontabValueObj.second }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.min}}</span>
+              <span>{{ crontabValueObj.min }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.hour}}</span>
+              <span>{{ crontabValueObj.hour }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.day}}</span>
+              <span>{{ crontabValueObj.day }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.month}}</span>
+              <span>{{ crontabValueObj.month }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.week}}</span>
+              <span>{{ crontabValueObj.week }}</span>
             </td>
             <td>
-              <span>{{crontabValueObj.year}}</span>
+              <span>{{ crontabValueObj.year }}</span>
             </td>
             <td>
-              <span>{{crontabValueString}}</span>
+              <span>{{ crontabValueString }}</span>
             </td>
           </tbody>
         </table>
@@ -329,7 +329,7 @@ export default {
     },
   },
   computed: {
-    crontabValueString: function() {
+    crontabValueString: function () {
       let obj = this.crontabValueObj;
       let str =
         obj.second +
@@ -363,7 +363,7 @@ export default {
       // 隐藏部分组件
     },
   },
-  mounted: function() {
+  mounted: function () {
     this.resolveExp();
   },
 };

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/permission.js

@@ -1,63 +1,87 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isPathMatch } from '@/utils/validate'
-import { isRelogin } from '@/utils/request'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+import { isPathMatch } from "@/utils/validate";
+import { isRelogin } from "@/utils/request";
+import {
+  isFullscreenSupported,
+  requestFullscreen,
+  isFullscreen,
+} from "@/utils/fullscreen";
+NProgress.configure({ showSpinner: false });
 
-NProgress.configure({ showSpinner: false })
-
-const whiteList = ['/login', '/register']
+const whiteList = ["/login", "/register"];
 
 const isWhiteList = (path) => {
-  return whiteList.some(pattern => isPathMatch(pattern, path))
-}
+  return whiteList.some((pattern) => isPathMatch(pattern, path));
+};
+
+let userManuallyExitedFullscreen = false;
+
+// 监听全屏状态变化事件
+document.addEventListener("fullscreenchange", () => {
+  if (!isFullscreen()) {
+    userManuallyExitedFullscreen = true;
+  }
+});
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    if (to.path === "/login") {
+      next({ path: "/" });
+      NProgress.done();
     } else if (isWhiteList(to.path)) {
-      next()
+      if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+        const element = document.documentElement;
+        requestFullscreen(element);
+      }
+      next();
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+            });
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+          const element = document.documentElement;
+          requestFullscreen(element);
+        }
+        next();
       }
     }
   } else {
     // 没有token
     if (isWhiteList(to.path)) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
-      NProgress.done()
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});

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,
@@ -90,6 +91,141 @@ const permission = {
             // console.log("不满足条件");
           }
 
+          // 风柜
+          const result2 = sidebarRoutes.find(
+            (item) => item.name === "AircAndWindc"
+          );
+          if (result2) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes2 = [
+              {
+                path: "/asSysMonitorDetails",
+                name: "asSysMonitorDetails",
+                hidden: true,
+                component: () =>
+                  import(
+                    "@/views/aircAndWindc/awSysMonitor/asSysMonitorDetails"
+                  ),
+                meta: { title: "系统监控", icon: "screen" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes2.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // console.log("不满足条件");
+          }
+
+          // 锅炉
+          const result3 = sidebarRoutes.find(
+            (item) => item.name === "BoilerSys"
+          );
+          if (result3) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes3 = [
+              {
+                path: "/boilerMonitorDetails",
+                name: "boilerMonitorDetails",
+                hidden: true,
+                component: () =>
+                  import(
+                    "@/views/boilerSys/boilerMonitor/boilerMonitorDetails"
+                  ),
+                meta: { title: "锅炉监控", icon: "screen" },
+              },
+              {
+                path: "/hotWaterBoilerDetails",
+                name: "hotWaterBoilerDetails",
+                hidden: true,
+                component: () =>
+                  import(
+                    "@/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails"
+                  ),
+                meta: { title: "热水锅炉监控", icon: "screen" },
+              },
+              {
+                path: "/heatingPumpDetails",
+                name: "heatingPumpDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/boilerSys/heatingPump/heatingPumpDetails"),
+                meta: { title: "采暖泵监控", icon: "screen" },
+              },
+              {
+                path: "/steamHeatingDetails",
+                name: "steamHeatingDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/boilerSys/steamHeating/steamHeatingDetails"),
+                meta: { title: "蒸汽采暖运行监控", icon: "screen" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes3.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // 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("不满足条件");
+          }
+
+          // 温度监测
+          const result5 = sidebarRoutes.find((item) => item.name === "TemSys");
+          if (result5) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes5 = [
+              {
+                path: "/temMonitorDeatils",
+                name: "temMonitorDeatils",
+                hidden: true,
+                component: () =>
+                  import("@/views/temSys/temMonitor/temMonitorDeatils"),
+                meta: { title: "温度监测", icon: "screen" },
+              },
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes5.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/utils/fullscreen.js

@@ -0,0 +1,53 @@
+// 检查浏览器是否支持全屏 API
+function isFullscreenSupported() {
+  return (
+    document.fullscreenEnabled ||
+    document.webkitFullscreenEnabled ||
+    document.mozFullScreenEnabled ||
+    document.msFullscreenEnabled
+  );
+}
+
+// 进入全屏模式
+function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+// 退出全屏模式
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+}
+
+// 检查当前是否处于全屏状态
+function isFullscreen() {
+  return (
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  );
+}
+
+
+export {
+  isFullscreenSupported,
+  requestFullscreen,
+  exitFullscreen,
+  isFullscreen,
+};

src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 15000
 })
 
 // request拦截器

src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue

@@ -0,0 +1,721 @@
+<template>
+  <div class="monitor">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        src="../../../assets/images/title-center.png"
+        alt=""
+        @click="goSys"
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title" @click="goSys">空调风柜监控系统</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
+    <div class="app-container">
+      <div class="left-tree">
+        <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
+        <div class="tree-div">
+          <el-tree
+            ref="tree"
+            :data="treeData"
+            node-key="id"
+            :default-expand-all="false"
+            :default-expanded-keys="expandedKeys"
+            :auto-expand-parent="true"
+            icon-class="none"
+            @node-expand="handleNodeExpand"
+            @node-collapse="handleNodeCollapse"
+            :highlight-current="true"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ node }">
+              <span class="custom-tree-node">
+                <!-- 根据节点状态动态设置图标类名 -->
+                <div class="tree-left">
+                  <i :class="getIconClass(node)" class="custom-tree-icon"></i>
+                  <span class="tree-label">{{ node.label }}</span>
+                </div>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+      <damper-monitor
+        :currentId="currentId"
+        :currentName="currentName"
+        ref="damperMonitorRef"
+        v-if="isShowdamper"
+      ></damper-monitor>
+      <normal-monitor
+        :currentId="currentId"
+        :currentName="currentName"
+        ref="normalMonitorRef"
+        v-else
+      ></normal-monitor>
+    </div>
+  </div>
+</template>
+
+<script>
+import { runTime } from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { getDay } from "@/utils/datetime";
+import { spaceTree } from "@/api/region";
+import damperMonitor from "./components/damperMonitor.vue";
+import normalMonitor from "./components/normalMonitor.vue";
+export default {
+  components: { damperMonitor, normalMonitor },
+  name: "asSysMonitorDetails",
+  data() {
+    return {
+      currentDate: new Date(),
+      nowTimer: null,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      deviceList: [],
+      expandedKeys: [],
+      currentId: "", //当前选中高亮的id
+      currentName: "", //当前选中的名称
+      currentLevel: "", //当前节点的层级
+      currentParentId: "", //当前节点的上级的id
+
+      backwaterObj: {}, //回水温度
+      airValveObj: {}, //风阀调节
+      airValveBackObj: {}, //风阀反馈
+      waterValveObj: {}, //水阀调节
+      startControlObj: {}, //启停控制
+      runStatusObj: {}, //运行状态
+      airSupplyObj: {}, //送风温度
+      pressureObj: {}, //压差
+      automaticObj: {}, //手自动状态
+      backAirObj: {}, //回风温度
+      faultAlarmObj: {}, //故障报警
+      waterSupplyObj: {}, //供水温度
+
+      tableData: [], //系统状态表格数据
+      temValue: "℃", //回风温度
+      valvePercent: "%", //阀比例
+      runStatus: false, //运行状态
+      autoStatus: false, //手自动状态
+      startStatus: false, //启停控制
+      frequency: "v",
+      isOpenTimeSwitch: false,
+      delayList: [],
+      currentWeekday: "",
+
+      isShowdamper: false,
+    };
+  },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+  },
+  watch: {
+    temValue(newVal) {
+      let valueWithoutTem = newVal.replace(/℃/g, "");
+      if (valueWithoutTem === "") {
+        this.temValue = "℃";
+      } else {
+        this.temValue = valueWithoutTem + "℃";
+      }
+    },
+    valvePercent(newVal) {
+      // 去除输入值中的 %
+      let valueWithoutPercent = newVal.replace(/%/g, "");
+      // 如果输入值为空，保持 %
+      if (valueWithoutPercent === "") {
+        this.temValue = "%";
+      } else {
+        // 否则在输入值后面添加 %
+        this.temValue = valueWithoutPercent + "%";
+      }
+    },
+    frequency(newVal) {
+      let valueWithoutFrequency = newVal.replace(/v/g, "");
+      if (valueWithoutFrequency === "") {
+        this.temValue = "v";
+      } else {
+        this.temValue = valueWithoutFrequency + "v";
+      }
+    },
+  },
+  created() {
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    const date = new Date();
+    const dayIndex = date.getDay();
+    this.currentWeekday = weekdays[dayIndex];
+    console.log("今天是星期几", this.currentWeekday);
+  },
+  mounted() {
+    this.requestFullscreen();
+    // 首次进入页面时执行
+    this.getSysBuild();
+    this.getAlarnStatus();
+    this.getDayData();
+    // 每秒更新一次时间
+    this.nowTimer = setInterval(() => {
+      this.currentDate = new Date();
+    }, 1000);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      // this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      window.history.go(-2);
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+    // 判断对象是否有效（不为空且不为 undefined）
+    isObjectValid(obj) {
+      return obj && Object.keys(obj).length > 0;
+    },
+    getSysBuild() {
+      spaceTree().then((res) => {
+        if (res.code == 200) {
+          // 只需要保留热水的系统
+          console.log("楼栋返回值", res);
+          let newRes = { ...res };
+
+          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
+            newRes.data[0].children = newRes.data[0].children.filter((item) => {
+              // 假设子项有一个 label属性，用于检查是否包含 "热水"
+              return item.label && item.label.includes("空调风柜");
+            });
+          }
+          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 5 级
+          const targetLevel = 5;
+          // 从 data[0] 开始处理，当前层级为 1
+          if (newRes.data[0]) {
+            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
+          }
+          console.log("筛选后的新结果", newRes);
+          this.treeData = newRes.data;
+          this.$nextTick(() => {
+            // 默认展开节点
+            this.getExpandedKeys(this.treeData, 1);
+            if (this.treeData.length > 0) {
+              // 找到最后一层的第一个子节点
+              const lastLevelFirstChild = this.findLastLevelFirstChild(
+                this.treeData[0]
+              );
+              // this.$refs.tree.setCurrentKey(
+              //   this.treeData[0].children[0].children[0].children[0].id
+              // );
+              // 设置当前选中的节点,默认高亮
+              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
+              // 更新当前节点的信息
+              this.currentId = lastLevelFirstChild.id;
+              this.currentLevel = lastLevelFirstChild.level;
+              this.currentName = lastLevelFirstChild.label;
+              console.log("当前选中节点ID", this.currentId);
+              console.log("当前选中节点层级", this.currentLevel);
+              console.log("当前选中节点名称", this.currentName);
+              //  传给子组件,触发子组件getWindList()
+              if (
+                this.currentName.includes("新风阀") ||
+                this.currentName.includes("AHU")
+              ) {
+                this.isShowdamper = true;
+                this.$nextTick(() => {
+                  this.$refs.damperMonitorRef.getWindList();
+                });
+              } else {
+                this.isShowdamper = false;
+                this.$nextTick(() => {
+                  this.$refs.normalMonitorRef.getWindList();
+                });
+              }
+            }
+          });
+        }
+      });
+    },
+    // 递归函数，用于去除指定层级往后的 children 数据
+    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
+      if (currentLevel >= targetLevel) {
+        // 当达到指定层级时，将 children 属性置为空数组
+        obj.children = [];
+        return;
+      }
+      if (obj.children && obj.children.length > 0) {
+        // 若存在 children 数组，则递归处理每个子项
+        for (let i = 0; i < obj.children.length; i++) {
+          this.removeChildrenAfterLevel(
+            obj.children[i],
+            currentLevel + 1,
+            targetLevel
+          );
+        }
+      }
+    },
+    // 递归函数，找到最后一层的第一个子节点
+    findLastLevelFirstChild(node, level = 1) {
+      if (!node.children || node.children.length === 0) {
+        return {
+          id: node.id,
+          level,
+          label: node.label,
+        };
+      }
+      return this.findLastLevelFirstChild(node.children[0], level + 1);
+    },
+    // 默认只展示一二级菜单
+    getExpandedKeys(nodes, level) {
+      nodes.forEach((node) => {
+        if (level <= this.currentId + 4) {
+          this.expandedKeys.push(node.id);
+        }
+        if (node.children) {
+          this.getExpandedKeys(node.children, level + 1);
+        }
+      });
+    },
+    // 更换图标
+    getIconClass(node) {
+      // console.log("当前图标的节点内容", node);
+      if (node.level === 5) {
+        // 5级菜单时的图标
+        if (node.expanded) {
+          return "el-icon-document-opened"; // 5级菜单展开时的图标类名
+        }
+        return "el-icon-document"; // 5级菜单收缩时的图标类名
+      }
+      if (node.expanded) {
+        return "el-icon-folder-opened"; // 非5级菜单展开时的图标类名
+      }
+      return "el-icon-folder-add"; // 非5级菜单收缩时的图标类名
+    },
+    handleNodeExpand(node) {
+      // 节点展开时触发
+    },
+    handleNodeCollapse(node) {
+      // 节点收缩时触发
+    },
+    // 点击当前节点，保存节点内容
+    handleNodeClick(node, data) {
+      console.log("点击的当前节点", node, data);
+      if (data.level !== 5) {
+        console.log("不是第5层000");
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+      } else {
+        console.log("第5层111");
+        this.currentId = node.id;
+        this.currentLevel = data.level;
+        this.currentName = node.label;
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+        // 传给子组件,触发子组件getWindList()
+        if (
+          this.currentName.includes("新风阀") ||
+          this.currentName.includes("AHU")
+        ) {
+          this.isShowdamper = true;
+          this.$nextTick(() => {
+            this.$refs.damperMonitorRef.getWindList();
+          });
+        } else {
+          this.isShowdamper = false;
+          this.$nextTick(() => {
+            this.$refs.normalMonitorRef.getWindList();
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  background-color: black;
+  color: #fff;
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+    .title-center {
+      width: 9.46rem;
+      height: 0.8rem;
+    }
+    .title-right {
+      width: 5.04rem;
+      height: 0.78rem;
+    }
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      cursor: pointer;
+    }
+    .nowTime {
+      position: absolute;
+      top: 0.37rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .icon_warning {
+      position: absolute;
+      top: 0.39rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+    }
+    .icon_home {
+      position: absolute;
+      top: 0.39rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+    .back-icon {
+      position: absolute;
+      top: 0.39rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      cursor: pointer;
+    }
+  }
+}
+.app-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  height: 100%;
+  padding: 0.3rem 0.2rem 0 0.35rem;
+  width: 100%;
+  .left-tree {
+    width: 256px;
+    padding: 15px 10px 10px 10px;
+    border: 1px solid #004b8c;
+    .tree-div {
+      height: 7rem;
+      overflow-y: auto;
+    }
+    .status {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-top: 20px;
+      .status-li {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 15px;
+      }
+      .status1,
+      .status2,
+      .status3,
+      .status4 {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 5px;
+      }
+      .status1::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #00d2ff;
+        margin-right: 5px;
+      }
+      .status2::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #ff2f2f;
+        margin-right: 5px;
+      }
+      .status3::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #ff9908;
+        margin-right: 5px;
+      }
+      .status4::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #7398c7;
+        margin-right: 5px;
+      }
+    }
+  }
+  .right-monitor {
+    width: calc(100% - 280px);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+}
+.tree-container {
+  height: 300px; /* 设置固定高度 */
+  overflow-y: auto; /* 启用垂直滚动条 */
+}
+// 滚动条
+:-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important; /* 滚动条轨道背景色 */
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  .tree-left {
+    .custom-tree-icon {
+      margin-right: 5px;
+    }
+  }
+}
+.highlight {
+  background-color: #003863 !important; /* 定义高亮的背景颜色 */
+  color: #ffffff !important;
+  font-weight: bold;
+}
+// 手机端样式
+@media (min-width: 0px) and (max-width: 990px) {
+  .app-container {
+    padding: 0rem 0.2rem 0 0.35rem !important;
+  }
+  .app-container .left-tree {
+    width: 200px !important;
+    min-height: 340px !important;
+    padding: 0.15rem 0 !important;
+  }
+  .app-container .tree-div {
+    height: 300px !important;
+    width: 100%;
+    overflow-x: hidden !important;
+  }
+  .app-container .right-monitor {
+    width: calc(100% - 210px) !important;
+  }
+  .custom-tree-node {
+    font-size: 12px !important;
+  }
+}
+</style>
+<style scoped>
+/* 自定义高亮颜色 */
+.left-tree
+  >>> .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: #285b9e !important;
+  /* color: #f56c6c;  */
+  color: #25f1f8;
+}
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
+    padding: 3px !important;
+  }
+}
+</style>

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
@@ -22,6 +21,7 @@
               v-model="queryParams.status"
               placeholder="选择采集类别"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_collection_type"
@@ -36,6 +36,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -50,6 +51,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -213,8 +215,8 @@
     />
 
     <!-- 添加或报警编码对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" >
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="消息编码" prop="msgCode">
@@ -227,6 +229,7 @@
                 v-model="form.collectionType"
                 placeholder="请选择采集类别"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_collection_type"
@@ -245,6 +248,7 @@
                 v-model="form.eventType"
                 placeholder="请选择事件类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_event_type"
@@ -260,6 +264,7 @@
                 v-model="form.alarmLevel"
                 placeholder="请选择报警等级"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_level"
@@ -494,3 +499,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
@@ -22,6 +21,7 @@
               v-model="queryParams.alarmType"
               placeholder="选择报警类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_type"
@@ -36,6 +36,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -50,6 +51,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -72,6 +74,7 @@
               v-model="queryParams.status"
               placeholder="选择处理状态"
               clearable
+              filterable
             >
               <el-option label="未处理" value="0" />
               <el-option label="已处理" value="1" />
@@ -203,8 +206,8 @@
     />
 
     <!-- 修改报警记录对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <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 +484,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,13 +7,13 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="报警类型" prop="alarmType">
             <el-select
               v-model="queryParams.alarmType"
               placeholder="选择报警类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_type"
@@ -28,6 +28,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -42,6 +43,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -243,8 +245,8 @@
     />
 
     <!-- 添加或报警规则对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="设备名称" prop="ledgerId">
@@ -253,6 +255,7 @@
                 placeholder="请选择设备类型"
                 clearable
                 @change="handleDevice"
+                filterable
               >
                 <el-option
                   v-for="item in devices"
@@ -270,6 +273,7 @@
                 placeholder="请选择设备类型"
                 clearable
                 @change="handleMeter"
+                filterable
               >
                 <el-option
                   v-for="item in cpmList"
@@ -288,6 +292,7 @@
                 v-model="form.alarmType"
                 placeholder="请选择报警类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_type"
@@ -315,6 +320,7 @@
                 v-model="form.eventType"
                 placeholder="请选择事件类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_event_type"
@@ -330,6 +336,7 @@
                 v-model="form.alarmLevel"
                 placeholder="请选择报警等级"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_level"
@@ -347,6 +354,7 @@
                 v-model="form.triggerEvent"
                 placeholder="请选择"
                 clearable
+                filterable
               >
                 <el-option label="开" value="0" />
                 <el-option label="关" value="1" />
@@ -359,6 +367,7 @@
                 v-model="form.timePeriodSet"
                 placeholder="请选择"
                 clearable
+                filterable
               >
                 <el-option label="全时段" value="0" />
                 <el-option label="自定义时段" value="1" />
@@ -433,7 +442,12 @@
         <el-row type="flex" justify="flex-start">
           <el-col :span="12">
             <el-form-item label="状态" prop="status">
-              <el-select v-model="form.status" placeholder="请选择" clearable>
+              <el-select
+                v-model="form.status"
+                placeholder="请选择"
+                clearable
+                filterable
+              >
                 <el-option label="已启用" value="0" />
                 <el-option label="未启用" value="1" />
               </el-select>
@@ -654,7 +668,8 @@ export default {
       this.multiple = !selection.length;
     },
     // 弹框选择设备名称
-    handleDevice(selectedValue) {
+    handleDevice(selectedValue, val) {
+      console.log("选择设备", selectedValue);
       // 通过选中的 value 找到对应的 label
       const selectedItem = this.devices.find(
         (item) => item.id === selectedValue
@@ -669,8 +684,13 @@ export default {
         // 请求采集位点
         this.getCpmIdList(this.form.ledgerId);
       }
-      //清除采集位点
-      this.form.cpmId = ""
+      if (!val) {
+        console.log("非第一次打开弹框-选择设备类型");
+        //清除采集位点
+        this.form.cpmId = "";
+      } else {
+        console.log("第一次打开弹框-默认采集点位");
+      }
     },
     //采集参数列表
     getCpmIdList(id) {
@@ -761,6 +781,8 @@ export default {
         };
         this.open = true;
         this.title = "修改报警规则";
+        // 手动调用 handleDevice 方法
+        this.handleDevice(this.form.ledgerId, true);
       });
     },
     /** 提交按钮 */
@@ -819,3 +841,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

@@ -10,7 +10,7 @@
       class="loginD_img_down"
       alt=""
     />
-    <div class="sys-title">楼宇智慧管理系统平台</div>
+    <div class="sys-title" @click="goSys">楼宇智慧管理系统平台</div>
     <!-- <div class="day">已监测100天</div> -->
     <div class="set">
       <img src="../../assets/images/icon_time.png" class="icon_time" alt="" />
@@ -52,7 +52,7 @@
             <div class="special-top">
               <div class="special-title">
                 <div class="title-left">
-                  <div>冷源系统能耗</div>
+                  <div>冷源系统能效</div>
                   <time-data
                     v-model="sharedIndex"
                     :currentIndex="sharedIndex"
@@ -147,13 +147,13 @@
                 <div class="message-data">{{ viewMes.totalGas }}t</div>
                 <div>总蒸汽量</div>
               </div>
-              <div class="message-li">
+              <!-- <div class="message-li">
                 <img
                   class="message-img"
                   src="../../assets/images/message-img5.png"
                   alt=""
                 />
-                <div class="message-data">{{ viewMes.eleUnitArea }}wkh/m²</div>
+                <div class="message-data">{{ viewMes.eleUnitArea }}kwh/m²</div>
                 <div>面积电耗</div>
               </div>
               <div class="message-li">
@@ -162,7 +162,7 @@
                   src="../../assets/images/message-img7.png"
                   alt=""
                 />
-                <div class="message-data">{{ viewMes.waterUnitArea }}kwh</div>
+                <div class="message-data">{{ viewMes.waterUnitArea }}t/m²</div>
                 <div>面积水耗</div>
               </div>
               <div class="message-li">
@@ -171,7 +171,7 @@
                   src="../../assets/images/message-img8.png"
                   alt=""
                 />
-                <div class="message-data">{{ viewMes.coldUnitArea }}kw/lm³</div>
+                <div class="message-data">{{ viewMes.coldUnitArea }}kw/m²</div>
                 <div>面积冷耗</div>
               </div>
               <div class="message-li">
@@ -180,9 +180,9 @@
                   src="../../assets/images/message-img9.png"
                   alt=""
                 />
-                <div class="message-data">{{ viewMes.gasUnitArea }}kw/lm³</div>
+                <div class="message-data">{{ viewMes.gasUnitArea }}t/m²</div>
                 <div>面积汽耗</div>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="special-div">
@@ -394,8 +394,9 @@ export default {
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
+    cursor: pointer;
   }
-  .day{
+  .day {
     position: absolute;
     top: 0.43rem;
     left: 5rem;
@@ -489,7 +490,7 @@ export default {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: flex-start;
-        margin-top: 29px;
+        margin: 30px 0;
         font-family: SourceHanSansCN-Regular;
         font-size: 16px;
         font-weight: normal;
@@ -502,7 +503,7 @@ export default {
           align-items: center;
           justify-content: center;
           width: calc(33.33% - 32px);
-          margin: 0 16px;
+          margin: 16px;
           //   margin-bottom: 22px;
           .message-data {
             font-family: DIN-Bold;
@@ -581,4 +582,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: 0.3rem 0 !important;
+          font-size: 0.16rem !important;
+          .message-li {
+            width: calc(33.33% - 0.32rem) !important;
+            margin: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,16 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" },
+                {
+                  value: this.energyMes.waterStandardCoal,
+                  name: "用水量(kgce)",
+                },
+                {
+                  value: this.energyMes.coldStandardCoal,
+                  name: "产冷量(kgce)",
+                },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -140,10 +146,16 @@ export default {
             },
             {
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" },
+                {
+                  value: this.energyMes.waterStandardCoal,
+                  name: "用水量(kgce)",
+                },
+                {
+                  value: this.energyMes.coldStandardCoal,
+                  name: "产冷量(kgce)",
+                },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" },
               ],
             },
           ],
@@ -227,10 +239,10 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: 0, name: "耗电量标准煤" },
-                { value: 0, name: "用水量标准煤" },
-                { value: 0, name: "产冷量标准煤" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "耗电量(kgce)" },
+                { value: 0, name: "用水量(kgce)" },
+                { value: 0, name: "产冷量(kgce)" },
+                { value: 0, name: "蒸汽量(kgce)" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -243,10 +255,10 @@ export default {
             },
             {
               data: [
-                { value: 0, name: "耗电量标准煤" },
-                { value: 0, name: "用水量标准煤" },
-                { value: 0, name: "产冷量标准煤" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "耗电量(kgce)" },
+                { value: 0, name: "用水量(kgce)" },
+                { value: 0, name: "产冷量(kgce)" },
+                { value: 0, name: "蒸汽量(kgce)" },
               ],
             },
           ],
@@ -278,7 +290,7 @@ export default {
       this.option = {
         //环形图中间文字
         title: {
-          subtext: "总标准煤",
+          subtext: "标准煤",
           textStyle: {
             color: "#ffffff",
           },
@@ -286,7 +298,7 @@ export default {
             color: "#ffffff",
           },
           textAlign: "center",
-          x: "27%",
+          x: "23%",
           y: "36%", //距离上边的距离
         },
         tooltip: {
@@ -310,7 +322,7 @@ export default {
             name: "数据详情:",
             type: "pie",
             radius: ["60%", "72%"],
-            center: ["28%", "44%"],
+            center: ["24%", "44%"],
             avoidLabelOverlap: false,
             label: {
               show: false,
@@ -333,7 +345,7 @@ export default {
           {
             type: "pie",
             radius: ["50%", "62%"],
-            center: ["28%", "44%"],
+            center: ["24%", "44%"],
             avoidLabelOverlap: false,
             label: {
               show: false,
@@ -363,7 +375,7 @@ export default {
             // 这里开启silent: true, 就达到效果了
             // center与非内圈一致
             radius: ["38%", "39%"],
-            center: ["28%", "44%"],
+            center: ["24%", "44%"],
             label: {
               show: false,
             },
@@ -385,7 +397,7 @@ export default {
             // 这里开启silent: true, 就达到效果了
             // center与非内圈一致
             radius: ["0%", "38%"],
-            center: ["28%", "44%"],
+            center: ["24%", "44%"],
             label: {
               show: false,
             },
@@ -426,4 +438,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

@@ -2,8 +2,8 @@
   <div class="energy_content">
     <div class="sys_charts" ref="sys_charts"></div>
     <div class="eer">
-      <div>用电量:{{energyMes.totalEle}}kw/h</div>
-      <div>产冷量:{{energyMes.totalCold}}kwh</div>
+      <div>产冷量:{{ energyMes.totalCold }}kwh</div>
+      <div>用电量:{{ energyMes.totalEle }}kw/h</div>
     </div>
   </div>
 </template>
@@ -460,14 +460,25 @@ export default {
         console.log("两个系统参数返回", res);
         if (res.code == 200) {
           this.energyMes = res.rows[0];
-          this.useForm.maxData = 10;
-          this.useForm.useData = res.rows[0].eer;
+          this.useForm.maxData = 10; //最大值
+          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,16 +509,21 @@ export default {
                 label: {
                   show: true,
                   position: "center", // 文字显示在中心位置
-                  offset: [0, -5], // 向上偏移 10 个单位
+                  offset: [0, -25], // 向上偏移 10 个单位
                   formatter: function () {
                     // 返回 HTML 标签，使用 rich 里定义的样式
-                    return `{line|${that.useForm.useData}}`;
+                    return `{line1|${that.useForm.useData}}\n{line2| EER}`;
                   },
                   rich: {
-                    line: {
+                    line1: {
+                      color: "#39dd4f", // 第一行文字颜色
+                      fontSize: 20, // 第一行文字大小
+                      lineHeight: 34, // 行高，实现间距
+                    },
+                    line2: {
                       color: "#fff", // 第二行文字颜色
-                      fontSize: 20, // 第二行文字大小
-                      lineHeight: 0, // 行高，实现间距
+                      fontSize: 14, // 第二行文字大小
+                      lineHeight: 24, // 行高，实现间距
                     },
                   },
                 },
@@ -579,10 +595,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 +612,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/timeData.vue

@@ -19,7 +19,7 @@ export default {
   props: ["currentIndex"],
   data() {
     return {
-      timeData2: [{ title: "日" }, { title: "月" }, { title: "年" }],
+      timeData2: [{ title: "当日" }, { title: "当月" }, { title: "当年" }],
       timeIndex2: 0,
     };
   },

src/views/bigScreen/components/useElect.vue

@@ -127,6 +127,7 @@ export default {
         },
         series: [
           {
+            name: "用电趋势",
             type: "line",
             // 拐点大小
             symbolSize: 8,
@@ -180,6 +181,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 = {
@@ -202,13 +204,22 @@ export default {
                     ":" +
                     '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                     value +
-                    "</span><br>";
+                    "kwh";
+                  ("</span><br>");
                 }
                 return res;
               },
             },
             xAxis: {
               data: res.rows[0].timeStr,
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
+            },
+            yAxis: {
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
             },
             series: [
               {
@@ -255,11 +266,23 @@ export default {
 
   .sys_charts {
     width: 100%;
-    height: 2rem;
+    height: 280px;
   }
   .eer {
     font-size: 18px;
     margin-top: 25px;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .energy_content {
+    .sys_charts {
+      height: 2.8rem !important;
+    }
+    .eer {
+      font-size: 0.18rem !important;
+      margin-top: 0.25rem !important;
+    }
+  }
+}
 </style>