修改风柜监测-风阀手动调节的状态

2.风柜监测系统新增三个风阀的远程手自动状态和手动调节频率
3.中央空调-监控详情，添加偏移值定时设置功能

.env.development

@@ -7,9 +7,9 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
-# 云端
-VUE_APP_BASE_API = 'http://106.55.173.225:8090'
+VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+# 梅州云端
+# 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/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/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/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/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,17 @@
   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;
 }

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/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,133 @@ 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" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            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/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue

@@ -0,0 +1,714 @@
+<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=""
+      />
+      <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.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.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.69rem;
+    }
+    .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"
@@ -153,7 +153,7 @@
                   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,7 +180,7 @@
                   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>
@@ -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;
@@ -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-top: 0.29rem !important;
+          font-size: 0.16rem !important;
+          .message-li {
+            width: calc(33.33% - 0.32rem) !important;
+            margin: 0 0.16rem !important;
+            .message-data {
+              font-size: 0.2rem !important;
+              margin-bottom: 0.3rem !important;
+            }
+            .message-img {
+              width: 1rem !important;
+              height: 0.99rem !important;
+            }
+          }
+        }
+        .right-Indicator {
+          position: absolute;
+          left: -0.9rem !important;
+          width: 0.6rem !important;
+          height: 0.4rem !important;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/bigScreen/components/allEnergy.vue

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

src/views/bigScreen/components/coldSysEnergy.vue

@@ -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,7 +509,7 @@ export default {
                 label: {
                   show: true,
                   position: "center", // 文字显示在中心位置
-                  offset: [0, -5], // 向上偏移 10 个单位
+                  offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
                   formatter: function () {
                     // 返回 HTML 标签，使用 rich 里定义的样式
                     return `{line|${that.useForm.useData}}`;
@@ -506,7 +517,7 @@ export default {
                   rich: {
                     line: {
                       color: "#fff", // 第二行文字颜色
-                      fontSize: 20, // 第二行文字大小
+                      fontSize: titleFontSize, // 第二行文字大小
                       lineHeight: 0, // 行高，实现间距
                     },
                   },
@@ -579,10 +590,11 @@ export default {
   justify-content: center;
   width: 100% !important;
   height: 100%;
+  padding: 10px 0;
 
   .sys_charts {
     width: 100%;
-    height: 1.6rem;
+    height: 160px;
   }
   .eer {
     width: 80%;
@@ -595,4 +607,17 @@ export default {
     margin: 10px 0;
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .energy_content {
+    padding: 0.1rem 0 !important;
+    .sys_charts {
+      height: 1.6rem !important;
+    }
+    .eer {
+      font-size: 0.18rem !important;
+      margin: 0.2rem 0 !important;
+    }
+  }
+}
 </style>

src/views/bigScreen/components/useElect.vue

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

src/views/boilerSys/boilerMonitor/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.toPage();
+  },
+  methods: {
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到展示
+      this.$router.push("/boilerMonitorDetails")
+    },
+  },
+};
+</script>
+
+<style></style>

src/views/boilerSys/heatingPump/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.toPage();
+  },
+  methods: {
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到展示
+      this.$router.push("/heatingPumpDetails")
+    },
+  },
+};
+</script>
+
+<style></style>

src/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails.vue

@@ -0,0 +1,702 @@
+<template>
+  <div class="monitor" v-loading="loading">
+    <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=""
+      />
+      <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="hotWater-div">
+      <div
+        class="hotWater-li"
+        v-for="(boiler, index) in hotWaterBoilerData"
+        :key="index"
+      >
+        <div class="special-div one">
+          <div class="special-top">
+            <div class="special-title">
+              <div class="title-left">
+                <div>{{ boiler.name }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="hotWater">
+            <img
+              class="hotWater-img"
+              src="../../../assets/images/hotWater.png"
+              alt=""
+            />
+          </div>
+          <div class="info">
+            <div class="hotWater-tem">
+              <div class="pump-data-li">
+                <div>出水温度:</div>
+                <div class="pump-data-text">
+                  {{ getTemperatureData(boiler, "出水温度") }}℃
+                </div>
+              </div>
+              <div class="pump-data-li">
+                <div>回水温度:</div>
+                <div class="pump-data-text">
+                  {{ getTemperatureData(boiler, "回水温度") }}℃
+                </div>
+              </div>
+              <div class="pump-data-li">
+                <div>炉水温度:</div>
+                <div class="pump-data-text">
+                  {{ getTemperatureData(boiler, "炉水温度") }}℃
+                </div>
+              </div>
+              <div class="pump-data-li">
+                <div>烟道温度:</div>
+                <div class="pump-data-text">
+                  {{ getTemperatureData(boiler, "烟道温度") }}℃
+                </div>
+              </div>
+            </div>
+            <div class="port-right">
+              <div class="port">
+                <div :class="['port-li', getFireSignalClass(boiler, '大火')]">
+                  大火控制信号发出
+                </div>
+                <div :class="['port-li', getFireSignalClass(boiler, '小火')]">
+                  小火控制信号发出
+                </div>
+                <div class="port-li port-close">燃烧机电源</div>
+              </div>
+              <div class="bad-div">
+                故障信息:<span class="bad-text">{{
+                  getFaultInfo(boiler)
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="hotWater-div">
+      <div class="hotWater-li">
+        <div class="special-div one">
+          <div class="special-top">
+            <div class="special-title">
+              <div class="title-left">
+                <div>1号热水锅炉</div>
+              </div>
+            </div>
+          </div>
+          <div class="hotWater">
+            <img
+              class="hotWater-img"
+              src="../../../assets/images/hotWater.png"
+              alt=""
+            />
+          </div>
+          <div class="info">
+            <div class="hotWater-tem">
+              <div class="pump-data-li">
+                <div>出水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>回水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>炉水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>烟道温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+            </div>
+            <div class="port-right">
+              <div class="port">
+                <div class="port-li port-open">大火控制信号发出</div>
+                <div class="port-li port-close">小伙控制信号发出</div>
+                <div class="port-li port-close">燃烧机电源</div>
+              </div>
+              <div class="bad-div">
+                故障信息:<span class="bad-text">炉水温度传感器故障</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="hotWater-li">
+        <div class="special-div one">
+          <div class="special-top">
+            <div class="special-title">
+              <div class="title-left">
+                <div>2号热水锅炉</div>
+              </div>
+            </div>
+          </div>
+          <div class="hotWater">
+            <img
+              class="hotWater-img"
+              src="../../../assets/images/hotWater.png"
+              alt=""
+            />
+          </div>
+          <div class="info">
+            <div class="hotWater-tem">
+              <div class="pump-data-li">
+                <div>出水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>回水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>炉水温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+              <div class="pump-data-li">
+                <div>烟道温度:</div>
+                <div class="pump-data-text">29.7℃</div>
+              </div>
+            </div>
+            <div class="port-right">
+              <div class="port">
+                <div class="port-li port-open">大火控制信号发出</div>
+                <div class="port-li port-close">小伙控制信号发出</div>
+                <div class="port-li port-close">燃烧机电源</div>
+              </div>
+              <div class="bad-div">
+                故障信息:<span class="bad-text">炉水温度传感器故障</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { runTime } from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { hotWaterBoiler } from "@/api/boiler/hotwaterBoiler";
+import { getDay } from "@/utils/datetime";
+export default {
+  name: "boilerMonitorDetails",
+  data() {
+    return {
+      loading: false,
+      currentDate: new Date(),
+      nowTimer: null,
+      timer: null, // 用于存储定时器 ID
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+      currentWeekday: "",
+      // 热水锅炉数据
+      hotWaterBoilerData: [],
+    };
+  },
+  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}`;
+    },
+  },
+  created() {
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    const date = new Date();
+    const dayIndex = date.getDay();
+    this.currentWeekday = weekdays[dayIndex];
+    console.log("今天是星期几", this.currentWeekday);
+  },
+  mounted() {
+    this.getAlarnStatus();
+    this.getDayData();
+    // 获取当前热水锅炉数据
+    this.getHotWaterBoiler();
+    // 设置定时器，每 10 秒执行一次
+    this.timer = setInterval(() => {
+      this.getAlarnStatus();
+      this.getDayData();
+      // 获取当前热水锅炉数据
+      this.getHotWaterBoiler();
+    }, 10000);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // Get temperature data by type (keep as is)
+    getTemperatureData(boiler, type) {
+      if (!boiler || !boiler.values) return "--";
+
+      const item = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes(type)
+      );
+      return item && item.curValue !== null ? item.curValue : "--";
+    },
+
+    // Get fire signal class for individual signals
+    getFireSignalClass(boiler, signalType) {
+      if (!boiler || !boiler.values) return "port-close";
+
+      // Get fire signal values
+      const fire1Item = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes("火力1")
+      );
+      const fire2Item = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes("火力2")
+      );
+
+      const fire1Value =
+        fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0;
+      const fire2Value =
+        fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0;
+
+      // Determine which signal should be open based on the logic:
+      // 大火: fire1=1 and fire2=1
+      // 小火: fire1=1 and fire2=0
+      if (signalType === "大火" && fire1Value == 1 && fire2Value == 1) {
+        return "port-open";
+      } else if (signalType === "小火" && fire1Value == 1 && fire2Value == 0) {
+        return "port-open";
+      } else {
+        return "port-close";
+      }
+    },
+
+    // Get fire status text based on both fire signals (for other uses if needed)
+    getFireStatusText(boiler) {
+      if (!boiler || !boiler.values) return "未开机";
+
+      const fire1Item = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes("火力1")
+      );
+      const fire2Item = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes("火力2")
+      );
+
+      const fire1Value =
+        fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0;
+      const fire2Value =
+        fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0;
+
+      // If both are 0, boiler is off
+      if (fire1Value == 0 && fire2Value == 0) {
+        return "无火信号";
+      }
+      // If fire1 is 1 and fire2 is 0, small fire
+      else if (fire1Value == 1 && fire2Value == 0) {
+        return "小火控制信号发出";
+      }
+      // If both fire1 and fire2 are 1, big fire
+      else if (fire1Value == 1 && fire2Value == 1) {
+        return "大火控制信号发出";
+      }
+      // Any other case
+      else {
+        return "未开机";
+      }
+    },
+
+    // Get fault information (placeholder implementation)
+    // Get fault information based on fault code
+    getFaultInfo(boiler) {
+      if (!boiler || !boiler.values) return "无故障";
+
+      // Find the fault item - you might need to adjust this based on actual data structure
+      const faultItem = boiler.values.find(
+        (v) => v.otherName && v.otherName.includes("故障")
+      );
+
+      if (!faultItem || faultItem.curValue === null) {
+        return "无故障";
+      }
+
+      // Convert fault code to descriptive text
+      const faultCode = parseInt(faultItem.curValue);
+
+      switch (faultCode) {
+        case 0:
+          return "无故障";
+        case 1:
+          return "炉水温度传感器故障";
+        case 2:
+          return "出水温度传感器故障";
+        case 3:
+          return "回水温度传感器故障";
+        case 4:
+          return "锅炉水位极低";
+        case 5:
+          return "燃烧机故障";
+        case 6:
+          return "炉水超温";
+        case 7:
+          return "循环水流故障";
+        case 9:
+          return "定时时间到关机（正常关机模式）";
+        case 11:
+          return "烟道传感器故障";
+        case 12:
+          return "烟道超温故障";
+        case 13:
+          return "检漏故障";
+        default:
+          return "未知故障";
+      }
+    },
+    // 获取热水锅炉数据
+    getHotWaterBoiler() {
+      let queryParams = {
+        systemType: "3",
+        type: "0",
+      };
+      hotWaterBoiler(queryParams).then((res) => {
+        if (res.code == 200) {
+          console.log("热水锅炉数据", res.rows);
+          if (res.rows.length > 0) {
+            this.hotWaterBoilerData = res.rows;
+          } else {
+            this.hotWaterBoilerData = [];
+          }
+        }
+      });
+    },
+    // 进入系统首页
+    goSys() {
+      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.$router.push("/alarm/alarmRecord");
+    },
+  },
+};
+</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.69rem;
+    }
+    .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;
+    }
+  }
+  .hotWater-div {
+    width: 100%;
+    padding: 0.2rem;
+    display: flex;
+    flex-direction: row;
+    align-content: stretch;
+    justify-content: space-between;
+    .hotWater-li {
+      width: 49%;
+      .hotWater {
+        width: 100%;
+        padding: 0.25rem 0.2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        .hotWater-img {
+          width: 6.4rem;
+          height: 3.5rem;
+        }
+      }
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: center; /* Center content horizontally */
+        align-items: flex-start; /* Align to top */
+        width: 100%;
+        padding: 0 0.25rem 0.15rem 0.7rem;
+        gap: 0.5rem; /* Add space between elements */
+
+        .hotWater-tem {
+          flex: 1; /* Allow to grow */
+          min-width: 35%; /* Minimum width */
+          background: #262f58;
+          border-radius: 0.1rem;
+          font-size: 0.16rem;
+          display: flex;
+          flex-direction: column;
+          padding: 0.25rem 0;
+          .pump-data-li {
+            width: 100%;
+            padding: 0 0.4rem; /* Increase horizontal padding */
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0.25rem 0;
+            .pump-data-text {
+              color: #05d120;
+              font-weight: bold;
+            }
+          }
+        }
+
+        .port-right {
+          flex: 1; /* Allow to grow */
+          display: flex;
+          flex-direction: column;
+          padding: 0.25rem 0.6rem; /* Increase horizontal padding */
+          min-width: 35%; /* Minimum width */
+          .port {
+            display: flex;
+            flex-direction: column;
+            gap: 0.3rem; /* Increase spacing between elements */
+            .port-li {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              justify-content: center;
+              width: 100%;
+              font-size: 0.16rem;
+              color: #c9c6c6;
+              position: relative;
+              padding-left: 0.3rem; /* Increase left padding for indicator */
+            }
+            .port-open::before,
+            .port-close::before {
+              content: "";
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 0.18rem; /* Slightly larger indicator */
+              height: 0.18rem;
+              border-radius: 50%;
+              border: 0.02rem solid white;
+            }
+
+            .port-open::before {
+              background-color: #00ff00; /* Brighter green for active */
+            }
+
+            .port-close::before {
+              background-color: #666; /* Darker gray for inactive */
+            }
+          }
+          .bad-div {
+            margin-top: 0.35rem; /* Increase spacing */
+            font-size: 0.16rem;
+            color: #db4d4d;
+            .bad-text {
+              margin-left: 0.15rem;
+              background: #5581c4;
+              border-radius: 0.15rem; /* Slightly larger radius */
+              padding: 0.15rem 0.2rem; /* More padding */
+              color: #fff;
+              display: inline-block; /* Better text wrapping */
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped>
+.special-div .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-div .special-top {
+  padding: 0.04rem 0.26rem 0.04rem 0px;
+  min-height: 0.37rem;
+}
+</style>

src/views/boilerSys/hotWaterBoiler/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.toPage();
+  },
+  methods: {
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到展示
+      this.$router.push("/hotWaterBoilerDetails")
+    },
+  },
+};
+</script>
+
+<style></style>

src/views/centerairC/deviceStrategy/index.vue

@@ -370,7 +370,7 @@ export default {
     position: relative;
     width: calc(33.33% - 40px);
     margin: 0 20px;
-    min-height: 300px;
+    min-height: 350px;
     background-image: url(../../../assets/images/strategy-border.png);
     background-size: 100% 100%;
     border-bottom: 1px solid #1587cc;

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

@@ -60,7 +60,6 @@
                 v-model="startYear"
                 type="year"
                 placeholder="选择开始年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -69,7 +68,6 @@
                 v-model="endYear"
                 type="year"
                 placeholder="选择结束年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -427,6 +425,11 @@ export default {
 
           this.option2.series[0].data = this.electData2;
           this.option2.xAxis.data = this.dateList2;
+          this.option2.yAxis.name = "kwh";
+          this.option2.yAxis.nameTextStyle = {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          };
           console.log("x轴", this.dateList2);
           console.log("折线图数据", this.electData2);
           this.screenAdapter();
@@ -502,7 +505,7 @@ export default {
           show: false, // 不显示图例
         },
         grid: {
-          top: "5%",
+          top: "6%",
           left: "3%",
           right: "4.4%",
           bottom: "20%",

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

@@ -59,7 +59,6 @@
                 v-model="startYear"
                 type="year"
                 placeholder="选择开始年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -68,7 +67,6 @@
                 v-model="endYear"
                 type="year"
                 placeholder="选择结束年份"
-                style="width: 180px"
                 value-format="yyyy"
               >
               </el-date-picker>
@@ -562,6 +560,11 @@ export default {
           console.log("图表数据", this.dataArr);
           this.option1.series = this.dataArr;
           this.option1.xAxis.data = this.timeData;
+          this.option1.yAxis.name = "kwh";
+          this.option1.yAxis.nameTextStyle = {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          };
           // 清空图表
           this.chartInstance1.clear();
           this.screenAdapter();

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

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

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

@@ -487,7 +487,7 @@ export default {
         },
 
         grid: {
-          top: "5%",
+          top: "9%",
           left: "3%",
           right: "4.4%",
           bottom: "20%",
@@ -696,6 +696,17 @@ export default {
     // 控制图例
     screenAdapter2() {
       // console.log("checkList:", this.checkList);
+      //写法一
+      // const selected = {
+      //   瞬时系统EER: false,
+      //   瞬时冷量: false,
+      //   瞬时功率: false,
+      // };
+      // const updatedSelected = {
+      //   ...selected,
+      //   [this.checkList]: true,
+      // };
+      // 写法二，添加不同的单位
       const selected = {
         瞬时系统EER: false,
         瞬时冷量: false,
@@ -705,6 +716,26 @@ export default {
         ...selected,
         [this.checkList]: true,
       };
+      let unit;
+      // 遍历 selected 对象
+      for (const key in updatedSelected) {
+        if (updatedSelected[key]) {
+          switch (key) {
+            case "瞬时系统EER":
+              unit = "";
+              break;
+            case "瞬时冷量":
+              unit = "kwr";
+              break;
+            case "瞬时功率":
+              unit = "kw";
+              break;
+            default:
+              unit = "";
+          }
+          break;
+        }
+      }
       // console.log(updatedSelected);
       //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
       const titleFontSize = this.$refs.charts_refs.offsetWidth / 130;
@@ -717,6 +748,9 @@ export default {
           // data: ["2021", "2022", "2023"],
           data: this.dateList2,
         },
+        yAxis: {
+          name: unit,
+        },
         series: [
           {
             name: "瞬时系统EER",
@@ -756,6 +790,10 @@ export default {
           axisLabel: {
             fontSize: titleFontSize * 1.5,
           },
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: titleFontSize * 1.3,
+          },
         },
       };
       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关

src/views/centerairC/hostRunReport/index.vue

@@ -0,0 +1,911 @@
+<template>
+  <div class="app-container">
+    <div class="btn-condition">
+      <div class="condition-left" v-show="showSearch">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+        >
+          <el-form-item label="主机编号" prop="deviceNum">
+            <el-select
+              v-model="queryParams.deviceNum"
+              placeholder="请选择主机编号"
+              clearable
+            >
+              <el-option label="1号主机" value="1" />
+              <el-option label="2号主机" value="2" />
+              <el-option label="3号主机" value="3" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" prop="timeArr">
+            <el-date-picker
+              style="width: 220px"
+              v-model="timeArr"
+              type="daterange"
+              unlink-panels
+              range-separator="~"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="dateChange"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <div class="primary-btn">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+        </div>
+        <div class="cancel-btn">
+          <el-button
+            type="cancel"
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetQuery"
+            >重置</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <div class="success-btn">
+          <el-button
+            type="success"
+            @click="leadingPrint"
+            icon="el-icon-printer"
+            size="mini"
+            >打印</el-button
+          >
+        </div>
+      </el-col> -->
+      <el-col :span="1.5">
+        <div class="warning-btn">
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            >导出</el-button
+          >
+        </div>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList" stripe>
+      <!-- <el-table-column label="主机id" align="center" prop="deviceNum" /> -->
+      <el-table-column label="时间" align="center" prop="curTime" />
+      <el-table-column label="蒸发器">
+        <el-table-column
+          label="冷冻水进水温度(℃)"
+          align="center"
+          prop="tempInChillerWater" />
+        <el-table-column
+          label="冷冻水出水温度(℃)"
+          align="center"
+          prop="tempOutChillerWater" />
+        <el-table-column label="设计流量(%)" align="center" prop="designFlow" />
+        <el-table-column
+          label="蒸发器压力(kpa)"
+          align="center"
+          prop="pressEvapSaturation" />
+        <el-table-column
+          label="蒸发器饱和温度(℃)"
+          align="center"
+          prop="tempEvapSaturation" />
+        <el-table-column
+          label="蒸发器趋近温度(℃)"
+          align="center"
+          prop="tempEvapApproaching"
+      /></el-table-column>
+      <el-table-column label="冷凝器">
+        <el-table-column
+          label="冷却水进水温度(℃)"
+          align="center"
+          prop="tempInCoolingWater"
+        />
+        <el-table-column
+          label="冷却水出水温度(℃)"
+          align="center"
+          prop="tempOutCoolingWater"
+        />
+        <el-table-column
+          label="冷凝器压力(kpa)"
+          align="center"
+          prop="pressCondenserSaturation"
+        />
+        <el-table-column
+          label="冷凝器饱和温度(℃)"
+          align="center"
+          prop="tempCondenserSaturation"
+        />
+        <el-table-column
+          label="冷凝器趋近温度(℃)"
+          align="center"
+          prop="tempCondenserApproaching"
+        />
+      </el-table-column>
+      <el-table-column label="系统">
+        <el-table-column
+          label="冷冻水设定值(℃)"
+          align="center"
+          prop="setChillerWater"
+        />
+        <el-table-column label="冷水机需求(%)" align="center" prop="setLoad" />
+        <el-table-column label="总电流(%)" align="center" prop="currentTotal" />
+        <el-table-column
+          label="总输入功率(kw)"
+          align="center"
+          prop="inputPowerTotal"
+        />
+        <el-table-column
+          label="压缩机1_压缩比"
+          align="center"
+          prop="ratioCompOne"
+        />
+        <el-table-column
+          label="压缩机2_压缩比"
+          align="center"
+          prop="ratioCompTwo"
+        />
+        <el-table-column
+          label="压缩机3_压缩比"
+          align="center"
+          prop="ratioCompThree"
+        />
+        <el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" />
+        <el-table-column
+          label="运行中的压缩机数量"
+          align="center"
+          prop="runCompNum"
+        />
+      </el-table-column>
+      <el-table-column label="冷冻泵">
+        <el-table-column
+          label="冷冻水泵频率(hz)"
+          align="center"
+          prop="frequencyChiller"
+        />
+        <el-table-column
+          label="冷冻水出水压力(kpa)"
+          align="center"
+          prop="pressOutChillerWater"
+        />
+        <el-table-column
+          label="冷冻水进水压力(kpa)"
+          align="center"
+          prop="pressInChillerWater"
+        />
+      </el-table-column>
+      <el-table-column label="冷却泵">
+        <el-table-column
+          label="冷却水泵频率(hz)"
+          align="center"
+          prop="frequencyCooling"
+        />
+        <el-table-column
+          label="冷却水出水压力(kpa)"
+          align="center"
+          prop="pressOutCoolingWater"
+        />
+        <el-table-column
+          label="冷却水进水压力(kpa)"
+          align="center"
+          prop="pressInCoolingWater"
+        />
+      </el-table-column>
+      <el-table-column label="冷却塔">
+        <el-table-column
+          label="冷却塔水泵频率(hz)"
+          align="center"
+          prop="frequencyCoolingTower"
+        />
+        <el-table-column
+          label="冷却塔运行数量"
+          align="center"
+          prop="runCoolingTower"
+        />
+      </el-table-column>
+      <el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" />
+      <el-table-column
+        label="室外湿度(%)"
+        align="center"
+        prop="humidityOutdoor"
+      />
+      <el-table-column
+        label="恒压补水罐压力(Mpa)"
+        align="center"
+        prop="pressConstantWaterTank"
+      />
+      <el-table-column label="巡查记录人" align="center" prop="recorder" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['device:ledger:edit']"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改设备台账对话框 -->
+    <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="deviceNum">
+              <el-select
+                v-model="form.deviceNum"
+                placeholder="请选择主机编号"
+                disabled
+              >
+                <el-option label="1号主机" value="1" />
+                <el-option label="2号主机" value="2" />
+                <el-option label="3号主机" value="3" />
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="设计流量(%)" prop="designFlow">
+              <el-input v-model="form.designFlow" placeholder="请输入流量(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater">
+              <el-input
+                v-model="form.tempInChillerWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater">
+              <el-input
+                v-model="form.tempOutChillerWater"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation">
+              <el-input
+                v-model="form.tempEvapSaturation"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching">
+              <el-input
+                v-model="form.tempEvapApproaching"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation">
+              <el-input
+                v-model="form.pressEvapSaturation"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器压力(kpa)"
+              prop="pressCondenserSaturation"
+            >
+              <el-input
+                v-model="form.pressCondenserSaturation"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater">
+              <el-input
+                v-model="form.tempInCoolingWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater">
+              <el-input
+                v-model="form.tempOutCoolingWater"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器饱和温度(℃)"
+              prop="tempCondenserSaturation"
+            >
+              <el-input
+                v-model="form.tempCondenserSaturation"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器趋近温度(℃)"
+              prop="tempCondenserApproaching"
+            >
+              <el-input
+                v-model="form.tempCondenserApproaching"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷冻水设定值(℃)" prop="setChillerWater">
+              <el-input
+                v-model="form.setChillerWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷水机需求(%)" prop="setLoad">
+              <el-input v-model="form.setLoad" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="总输入功率(kw)" prop="inputPowerTotal">
+              <el-input
+                v-model="form.inputPowerTotal"
+                placeholder="请输入功率(kw)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="总电流(%)" prop="currentTotal">
+              <el-input v-model="form.currentTotal" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="压缩机1_压缩比" prop="ratioCompOne">
+              <el-input
+                v-model="form.ratioCompOne"
+                placeholder="请输入压缩比"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="压缩机2_压缩比" prop="ratioCompTwo">
+              <el-input
+                v-model="form.ratioCompTwo"
+                placeholder="请输入压缩比"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="压缩机3_压缩比" prop="ratioCompThree">
+              <el-input
+                v-model="form.ratioCompThree"
+                placeholder="请输入压缩比"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="膨胀阀开度(%)" prop="openExv">
+              <el-input v-model="form.openExv" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="运行中的压缩机数量" prop="runCompNum">
+              <el-input
+                v-model="form.runCompNum"
+                placeholder="请输入数量"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller">
+              <el-input v-model="form.openExv" placeholder="请输入频率(hz)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷冻水出水压力(kpa)"
+              prop="pressOutChillerWater"
+            >
+              <el-input
+                v-model="form.pressOutChillerWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷冻水进水压力(kpa)"
+              prop="pressInChillerWater"
+            >
+              <el-input
+                v-model="form.pressInChillerWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷却水出水压力(kpa)"
+              prop="pressOutCoolingWater"
+            >
+              <el-input
+                v-model="form.pressOutCoolingWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷却水进水压力(kpa)"
+              prop="pressInCoolingWater"
+            >
+              <el-input
+                v-model="form.pressInCoolingWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling">
+              <el-input
+                v-model="form.frequencyCooling"
+                placeholder="请输入频率(hz)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷却塔水泵频率(hz)"
+              prop="frequencyCoolingTower"
+            >
+              <el-input
+                v-model="form.frequencyCoolingTower"
+                placeholder="请输入频率(hz)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却塔运行数量" prop="runCoolingTower">
+              <el-input
+                v-model="form.runCoolingTower"
+                placeholder="请输入数量"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="恒压补水罐压力(Mpa)"
+              prop="pressConstantWaterTank"
+            >
+              <el-input
+                v-model="form.pressConstantWaterTank"
+                placeholder="请输入压力(Mpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="室外温度" prop="tempOutdoor">
+              <el-input
+                v-model="form.tempOutdoor"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="室外湿度(%)" prop="humidityOutdoor">
+              <el-input
+                v-model="form.humidityOutdoor"
+                placeholder="请输入湿度(%)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="巡查记录人" prop="recorder">
+              <el-input
+                v-model="form.recorder"
+                placeholder="请输入巡查记录人"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="form.remark"
+                placeholder="请输入备注"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      class="print-dialog"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th>
+            </tr>
+            <tr>
+              <th>主机id</th>
+              <th>时间</th>
+              <th colspan="6">蒸发器</th>
+              <th colspan="5">冷凝器</th>
+              <th colspan="7">系统</th>
+              <th colspan="3">冷冻泵</th>
+              <th colspan="3">冷却泵</th>
+              <th colspan="2">冷却塔</th>
+              <th>室外温度(℃)</th>
+              <th>室外湿度(%)</th>
+              <th>恒压补水罐压力(Mpa)</th>
+              <th>巡查记录人</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th>冷冻水进水温度(℃)</th>
+              <th>冷冻水出水温度(℃)</th>
+              <th>设计流量(%)</th>
+              <th>蒸发器压力(kpa)</th>
+              <th>蒸发器饱和温度(℃)</th>
+              <th>蒸发器趋近温度(℃)</th>
+              <th>冷却水进水温度(℃)</th>
+              <th>冷却水出水温度(℃)</th>
+              <th>冷凝器压力(kpa)</th>
+              <th>冷凝器饱和温度(℃)</th>
+              <th>冷凝器趋近温度(℃)</th>
+              <th>冷冻水设定值(℃)</th>
+              <th>冷水机需求(%)</th>
+              <th>总电流(%)</th>
+              <th>总输入功率(kw)</th>
+              <th>压缩机1_压缩比</th>
+              <th>膨胀阀开度(%)</th>
+              <th>运行中的压缩机数量</th>
+              <th>冷冻水泵频率(hz)</th>
+              <th>冷冻水出水压力(kpa)</th>
+              <th>冷冻水进水压力(kpa)</th>
+              <th>冷却水泵频率(hz)</th>
+              <th>冷却水出水压力(kpa)</th>
+              <th>冷却水进水压力(kpa)</th>
+              <th>冷却塔水泵频率(hz)</th>
+              <th>冷却塔运行数量</th>
+              <th></th>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in postList" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <el-button type="info" @click="dialogPrintVisible = false"
+            >取消</el-button
+          >
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <el-button type="success" @click="surePrint">确认</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  reportSysList,
+  reportSysEdit,
+  reportSysExport,
+} from "@/api/centerairC/hostRunReport";
+import { format2, getDay } from "@/utils/datetime";
+export default {
+  name: "ledger",
+  data() {
+    return {
+      timeArr: [],
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceNum: "",
+        params: {
+          startTime: "",
+          endTime: "",
+        },
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deviceName: [
+          { required: true, message: "设备名称不能为空", trigger: "blur" },
+        ],
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      titleDate: "",
+    };
+  },
+  created() {
+    this.userName = sessionStorage.getItem("userName");
+    this.queryParams.deviceNum = "1";
+    this.getList();
+  },
+  methods: {
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeArr);
+      if (!this.timeArr) {
+        this.$nextTick(() => {
+          this.timeArr = [];
+          this.queryParams.params.startTime = "";
+          this.queryParams.params.endTime = "";
+        });
+      } else {
+        this.queryParams.params.startTime = this.timeArr[0];
+        this.queryParams.params.endTime = this.timeArr[1];
+      }
+    },
+    /** 查询设备台账列表 */
+    getList() {
+      this.loading = true;
+      reportSysList(this.queryParams).then((response) => {
+        if (response.code == 200) {
+          this.postList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        } else {
+          this.postList = [];
+          this.total = 0;
+          this.loading = false;
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+      this.form.id = "";
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: "",
+        deviceNum: "",
+        curTime: "",
+        tempInChillerWater: "",
+        tempOutChillerWater: "",
+        designFlow: "",
+        pressEvapSaturation: "",
+        tempEvapSaturation: "",
+        tempEvapApproaching: "",
+        tempInCoolingWater: "",
+        tempOutCoolingWater: "",
+        pressCondenserSaturation: "",
+        tempCondenserSaturation: "",
+        tempCondenserApproaching: "",
+        setChillerWater: "",
+        setLoad: "",
+        currentTotal: "",
+        inputPowerTotal: "",
+        ratioCompOne: "",
+        openExv: "",
+        runCompNum: "",
+        frequencyChiller: "",
+        pressOutChillerWater: "",
+        pressInChillerWater: "",
+        frequencyCooling: "",
+        pressOutCoolingWater: "",
+        pressInCoolingWater: "",
+        frequencyCoolingTower: "",
+        runCoolingTower: "",
+        pressConstantWaterTank: "",
+        tempOutdoor: "",
+        humidityOutdoor: "",
+        recorder: "",
+        remark: "",
+        ratioCompTwo: "",
+        ratioCompThree: "",
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.form = Object.assign({}, row);
+      this.open = true;
+      this.title = "修改主机运行记录";
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            reportSysEdit(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            console.log("新增参数", this.form);
+          }
+        }
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      reportSysExport(this.queryParams).then((res) => {
+        console.log("导出返回", res);
+        // 请求的结果就是文件
+        // 创建一个blob URL，用于生成下载链接
+        const url = window.URL.createObjectURL(new Blob([res]));
+        // 创建一个<a>元素，并设置其href和download属性
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名
+        // 模拟点击下载链接
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        // 释放blob URL资源
+        window.URL.revokeObjectURL(url);
+        this.$message({
+          type: "success",
+          message: "导出成功!",
+        });
+      });
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .print-dialog .el-dialog {
+    width: 1200px !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: 8rem !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/centerairC/overview/index.vue

@@ -115,7 +115,7 @@
                 </el-table-column>
                 <el-table-column prop="copData" label="EER"> </el-table-column>
               </el-table>
-              <div class="page" >
+              <div class="page">
                 <el-pagination
                   background
                   style="width: 100%; height: 20%"
@@ -455,6 +455,7 @@ export default {
         endTime: this.endTime,
         pageNum: 0,
         pageSize: 10,
+        systemType: this.systemType,
       };
       console.log("查询数据参数", data);
       energyInquiry(data).then((res) => {
@@ -990,7 +991,7 @@ export default {
   align-items: center;
   width: 16rem;
 }
-.page{
+.page {
   margin-top: 0.22rem;
 }