生活热水-控制界面，去掉供水温度设定、温度偏差值设置；水箱添加最低液位设置值功能

2.一些页面select添加可输入搜索

.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

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/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/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/styles/bigScreen.scss

@@ -679,10 +679,6 @@
   .el-card__header {
     padding: 0.14rem 0.15rem 0.07rem !important;
     min-height: 0.4rem !important;
-  }
-  .el-form-item__error {
-    font-size: 0.12rem !important;
-    padding-top: 0.04rem !important;
 }
 }
 @media (min-width: 2000px) {

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

src/assets/styles/index.scss

@@ -775,3 +775,10 @@ table th {
     }
   }
 }
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+  .app-main {
+    height: 100% !important;
+    overflow-y: hidden !important;
+  }
+}

src/store/modules/permission.js

@@ -90,6 +90,35 @@ 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("不满足条件");
+          }
+
           commit("SET_ROUTES", rewriteRoutes);
           commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
           commit("SET_DEFAULT_ROUTES", sidebarRoutes);

src/views/alarm/alarmCode/index.vue

@@ -21,6 +21,7 @@
               v-model="queryParams.status"
               placeholder="选择采集类别"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_collection_type"
@@ -35,6 +36,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -49,6 +51,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -226,6 +229,7 @@
                 v-model="form.collectionType"
                 placeholder="请选择采集类别"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_collection_type"
@@ -244,6 +248,7 @@
                 v-model="form.eventType"
                 placeholder="请选择事件类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_event_type"
@@ -259,6 +264,7 @@
                 v-model="form.alarmLevel"
                 placeholder="请选择报警等级"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_level"

src/views/alarm/alarmRecord/index.vue

@@ -21,6 +21,7 @@
               v-model="queryParams.alarmType"
               placeholder="选择报警类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_type"
@@ -35,6 +36,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -49,6 +51,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -71,6 +74,7 @@
               v-model="queryParams.status"
               placeholder="选择处理状态"
               clearable
+              filterable
             >
               <el-option label="未处理" value="0" />
               <el-option label="已处理" value="1" />

src/views/alarm/alarmRule/index.vue

@@ -13,6 +13,7 @@
               v-model="queryParams.alarmType"
               placeholder="选择报警类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_type"
@@ -27,6 +28,7 @@
               v-model="queryParams.eventType"
               placeholder="选择事件类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_event_type"
@@ -41,6 +43,7 @@
               v-model="queryParams.alarmLevel"
               placeholder="选择报警等级"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.alarm_level"
@@ -252,6 +255,7 @@
                 placeholder="请选择设备类型"
                 clearable
                 @change="handleDevice"
+                filterable
               >
                 <el-option
                   v-for="item in devices"
@@ -269,6 +273,7 @@
                 placeholder="请选择设备类型"
                 clearable
                 @change="handleMeter"
+                filterable
               >
                 <el-option
                   v-for="item in cpmList"
@@ -287,6 +292,7 @@
                 v-model="form.alarmType"
                 placeholder="请选择报警类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_type"
@@ -314,6 +320,7 @@
                 v-model="form.eventType"
                 placeholder="请选择事件类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_event_type"
@@ -329,6 +336,7 @@
                 v-model="form.alarmLevel"
                 placeholder="请选择报警等级"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_level"
@@ -346,6 +354,7 @@
                 v-model="form.triggerEvent"
                 placeholder="请选择"
                 clearable
+                filterable
               >
                 <el-option label="开" value="0" />
                 <el-option label="关" value="1" />
@@ -358,6 +367,7 @@
                 v-model="form.timePeriodSet"
                 placeholder="请选择"
                 clearable
+                filterable
               >
                 <el-option label="全时段" value="0" />
                 <el-option label="自定义时段" value="1" />
@@ -432,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>

src/views/bigScreen/bigScreen.vue

@@ -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>

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.totalEle }}kw/h</div>
     </div>
   </div>
 </template>

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

@@ -425,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();
@@ -500,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

@@ -560,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/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%"
@@ -991,7 +991,7 @@ export default {
   align-items: center;
   width: 16rem;
 }
-.page{
+.page {
   margin-top: 0.22rem;
 }
 

src/views/centerairC/sysControl/index.vue

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

src/views/centerairC/sysControl/listHeader.vue

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

src/views/centerairC/sysControl/vavleheader.vue

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

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

@@ -3,6 +3,7 @@
     <div class="historyCharts" ref="chart_ref"></div>
   </div>
 </template>
+
 <script>
 import * as echarts from "echarts";
 export default {
@@ -40,6 +41,7 @@ export default {
             const titleStr = data[1].titleStr;
             // 获取 dataList 数组
             const dataList = data[3].dataList;
+
             // 遍历 dataList 数组
             dataList.forEach((item) => {
               // 查找 name 在 title 数组中的索引
@@ -55,15 +57,18 @@ export default {
             let name3 = "";
             let name4 = "";
             let name5 = "";
+
             data.forEach((item) => {
               if (item.timeStr) {
                 this.bottomData = item.timeStr;
               }
+
               if (item.dataList) {
                 // 用于存储 name 的数组
                 const names = [];
                 // 用于存储 chartData 的数组
                 const chartData = [];
+
                 // 查找包含“负载”的数据
                 let loadDataIndex = -1;
                 for (let i = 0; i < item.dataList.length; i++) {
@@ -77,10 +82,12 @@ export default {
                     break;
                   }
                 }
+
                 // 剔除包含“负载”的数据
                 if (loadDataIndex !== -1) {
                   item.dataList.splice(loadDataIndex, 1);
                 }
+
                 // 处理剩下的数据
                 item.dataList.slice(0, 4).forEach((val, index) => {
                   if (val.name) {
@@ -88,11 +95,13 @@ export default {
                     names[index] = val.name;
                   }
                 });
+
                 // 将 chartData 数组的值赋值给 this.chartDataX
                 this.chartData1 = chartData[0] || "";
                 this.chartData2 = chartData[1] || "";
                 this.chartData3 = chartData[2] || "";
                 this.chartData4 = chartData[3] || "";
+
                 // 将 names 数组的值赋值给外部作用域的变量
                 name1 = names[0] || "";
                 name2 = names[1] || "";
@@ -273,7 +282,7 @@ export default {
               for (var i = 0, l = params.length; i < l; i++) {
                 var seriesName = params[i].seriesName;
                 var value = params[i].value;
-                console.log("打印颜色", params[i].color)
+                // console.log("打印颜色", params[i].color)
                 var marker =
                   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                   params[i].color +
@@ -503,9 +512,10 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .historyCharts {
   width: 100%;
-  height: 4rem;
+  height: 4.4rem;
 }
-</style>
+</style>

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -112,6 +112,41 @@
               ></span>
             </div>
           </div>
+          <div class="hostStatus">
+            <div class="hostStatus-li">
+              <span>远程开关机:</span>
+              <span class="automaticData">{{ onOffObj.curValue }}</span>
+            </div>
+            <div class="hostStatus-li">
+              <span>运行累计时间:</span>
+              <span class="timeData">{{ timeObj.curValue }}小时</span>
+            </div>
+            <div class="hostStatus-li">
+              <span>本地出水温度设定值:</span>
+              <span class="dotData">{{ coldWaterSetObj.curValue }}℃</span>
+            </div>
+            <div class="hostStatus-li">
+              <span>远程出水温度设定值:</span>
+              <span class="goodData">{{ coldWaterControlObj.curValue }}℃</span>
+              <!-- <span class="badData" v-else>{{ coldWaterControlObj.curValue }}</span> -->
+            </div>
+            <div class="hostStatus-li">
+              <span>冷水设定值偏移:</span>
+              <!-- <span class="goodData">{{ offsetValuerControlObj.curValue }}℃</span> -->
+              <span class="goodData">
+                <el-input
+                  v-model="offsetValuerControlObj.curValue"
+                  size="mini"
+                  @keyup.enter.native="
+                    handleEnter(offsetValuerControlObj, $event)
+                  "
+                  @input="handleInput(offsetValuerControlObj.curValue)"
+                  @blur="handleBlur()"
+                > <template #suffix>℃</template></el-input
+                ></span
+              >
+            </div>
+          </div>
           <!-- 负载 -->
           <LoadData class="loadData" :hostData="hostData"></LoadData>
         </div>
@@ -121,61 +156,6 @@
         </div>
       </div>
       <div class="detail-bottom">
-        <div class="hostStatus">
-          <div class="hostStatus-li">
-            <span style="">冷冻供水温度:</span>
-            <el-input
-              size="mini"
-              style="width: 40%"
-              v-model="frozenupply"
-              @keyup.enter.native="
-                handleEnter(
-                  '冷冻供水温度',
-                  '℃',
-                  frozenupply,
-                  frozenupplIdy,
-                  $event
-                )
-              "
-              @input="handleInput(children)"
-              @blur="handleBlur()"
-            ></el-input>
-            <span>℃</span>
-          </div>
-          <div class="hostStatus-li">
-            <span>需求设定值:</span>
-            <el-input
-              size="mini"
-              style="width: 40%"
-              v-model="requireSet"
-              @keyup.enter.native="
-                handleEnter('需求设定值', '%', requireSet, requireSetId, $event)
-              "
-              @input="handleInput(children)"
-              @blur="handleBlur()"
-            ></el-input>
-            <span>%</span>
-          </div>
-          <div class="hostStatus-li">
-            <span>手自动切换:</span>
-            <span class="automaticData">{{ automaticObj.showValue }}</span>
-          </div>
-          <div class="hostStatus-li">
-            <span>本地远程状态:</span>
-            <span class="dotData">{{ localObj.showValue }}</span>
-          </div>
-          <div class="hostStatus-li">
-            <span>故障状态:</span>
-            <span class="goodData" v-if="badObj.showValue === '未故障'">{{
-              badObj.showValue
-            }}</span>
-            <span class="badData" v-else>{{ badObj.showValue }}</span>
-          </div>
-          <div class="hostStatus-li">
-            <span>运行累计时间:</span>
-            <span class="timeData">{{ timeObj.showValue }}小时</span>
-          </div>
-        </div>
         <div class="detail-data hostparams">
           <div class="detail-data-top">
             <title-img></title-img>
@@ -191,7 +171,14 @@
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ item.otherName }}:</span>
-                  <span class="dotData">{{ item.curValue }}</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(item.curValue),
+                      goodData: isSpecialValue(item.curValue),
+                      badData: item.curValue === '故障',
+                    }"
+                    >{{ item.curValue }}</span
+                  >
                   <span>{{ item.unit }}</span>
                 </div>
               </div>
@@ -201,20 +188,91 @@
         <div class="detail-data compressor">
           <div class="detail-data-top">
             <title-img></title-img>
-            <div class="details-title">压缩机参数</div>
+            <div class="choice">
+              <div>{{ compressorData1.mtTypeName }}</div>
+            </div>
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
             <div
               class="detail-data-li"
-              v-for="(item, index) in compressorData"
-              :key="index + 1"
+              v-for="(subItem, subIndex) in compressorData1.list"
+              :key="subIndex"
             >
               <div class="rightDot">
                 <div class="leftDot">
-                  <span>{{ item.otherName }}:</span>
-                  <span class="dotData">{{ item.curValue }}</span>
-                  <span>{{ item.unit }}</span>
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData2.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData2.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData3.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData3.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
                 </div>
               </div>
             </div>
@@ -224,11 +282,13 @@
     </div>
   </div>
 </template>
+
 <script>
 import {
   hostDetailsData,
   hostTemData,
   runTime,
+  operationConrol,
 } from "@/api/centerairC/sysMonitor";
 import { alarmRecordList } from "@/api/alarm/alarmRecord";
 import { cpmList } from "@/api/device/gather";
@@ -238,13 +298,13 @@ import titleImg from "./components/titleImg.vue";
 import lineSquare from "./components/lineSquare.vue";
 import { format } from "@/utils/datetime";
 import { getDay } from "@/utils/datetime";
-import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
   name: "sysControl",
   components: { LoadData, hostChart, titleImg, lineSquare },
   data() {
     return {
       loading: false,
+
       currentDate: new Date(),
       nowTimer: null,
       deviceName: "", //主机名称
@@ -252,19 +312,19 @@ export default {
       condenserPre: "", //冷凝器压力
       evaporatorPre: "", //蒸发器压力
       rightHostData: [], //右
-      frozenupply: "", //冷冻供水温度
-      frozenupplyId: "",
-      requireSet: "", //需求设定值
-      requireSetId: "",
-      automaticObj: {}, //手自动状态
-      localObj: {}, //本地远程状态
-      badObj: {}, //故障状态
+      onOffObj: {}, //远程开关机
       timeObj: {}, //累计运行时间
-      compressorData: [], //压缩机参数
+      coldWaterSetObj: {}, //本地出水温度设定值
+      coldWaterControlObj: {}, //远程出水温度设定值
+      offsetValuerControlObj: {}, //偏移值设定
+      compressorData1: [], //压缩机1参数
+      compressorData2: [],
+      compressorData3: [],
       temArray: [], //冷冻冷却水温度
       isMagnetic: false,
       isShowWarning: false, //是否有报警
       dayData: "", //监测天数
+      sharedIndex: 0,
     };
   },
   computed: {
@@ -396,88 +456,118 @@ export default {
               this.leftHostData = [];
               this.rightHostData = [];
               // 筛选去掉特定 paramType 的数据
+              // this.rightHostData = this.hostData.filter((item) => {
+              //   return !["2", "21", "20", "6", "5", "22", "26"].includes(
+              //     Number(item.paramType)
+              //   );
+              // });
               this.rightHostData = this.hostData.filter((item) => {
-                const specificParamTypes = [6, 5, 22, 26];
-                // const specificParamTypes = [];
+                const specificParamTypes = [26];
                 // 检查是否属于需要排除的特定 paramType
                 const isSpecificParamType = specificParamTypes.includes(
                   Number(item.paramType)
                 );
-                // const isCombinedCondition0 =
-                //   Number(item.paramType) === 2 &&
-                //   item.otherName.includes("手动启停");
+                const isCombinedCondition0 =
+                  Number(item.paramType) === 2 &&
+                  item.otherName.includes("手动启停");
+                // 检查是否满足 item.paramType 为 12 且 otherName 包含 "冷水控制设定值"
+                const isCombinedCondition1 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("冷水控制设定值");
+                const isCombinedCondition2 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("用户冷水设定值");
+                const isCombinedCondition3 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("冷水设定值偏移");
                 // 返回 false 表示要排除该元素
-                return !isSpecificParamType;
+                return (
+                  !isSpecificParamType &&
+                  !isCombinedCondition0 &&
+                  !isCombinedCondition1 &&
+                  !isCombinedCondition2 &&
+                  !isCombinedCondition3
+                );
               });
               // 根据 ordernum 进行排序
               this.rightHostData.sort((a, b) => {
-                return Number(a.ordernum) - Number(b.ordernum);
+                return Number(a.orderNum) - Number(b.orderNum);
               });
               this.hostData.forEach((item) => {
                 //左边主机参数 根据不同的 paramType 处理 showValue
                 if (
-                  item.paramType === "6" &&
-                  item.otherName.includes("手自动切换")
-                ) {
-                  // 运行状态
-                  item.showValue =
-                    Number(item.curValue) === 0 ? "自动" : "手动";
-                  this.automaticObj = item;
-                } else if (
-                  item.paramType === "5" &&
-                  item.otherName.includes("故障")
-                ) {
-                  // 故障状态
-                  item.showValue =
-                    Number(item.curValue) === 0 ? "未故障" : "故障";
-                  this.badObj = item;
-                } else if (
-                  item.paramType === "22" &&
-                  item.otherName === "本地_远程"
-                ) {
-                  // 本地远程
-                  item.showValue =
-                    Number(item.curValue) === 0 ? "本地" : "远程";
-                  this.localObj = item;
-                } else if (
-                  item.paramType === "26" &&
-                  item.otherName.includes("运行累计时间")
+                  item.paramType === "2" &&
+                  item.otherName.includes("手动启停")
                 ) {
+                  // 远程开关机-手动启停
+                  // item.showValue =
+                  //   Number(item.curValue) === 0 ? "自动" : "手动";
+                  this.onOffObj = item;
+                } else if (item.paramType === "26") {
                   // 累计运行时间
-                  item.showValue = item.curValue;
                   this.timeObj = item;
                 } else if (
                   item.paramType === "12" &&
-                  item.otherName.includes("冷冻供水温度")
+                  item.otherName.includes("冷水控制设定值")
+                ) {
+                  // 本地出水温度设定值
+                  this.coldWaterSetObj = item;
+                } else if (
+                  item.paramType === "12" &&
+                  item.otherName.includes("用户冷水设定值")
                 ) {
-                  // 冷冻供水温度
-                  this.frozenupply = item.curValue;
-                  this.frozenupplyId = item.id;
+                  // 远程出水温度设定值
+                  this.coldWaterControlObj = item;
                 } else if (
-                  item.paramType === "0" &&
-                  item.otherName.includes("需求设定值")
+                  item.paramType === "12" &&
+                  item.otherName.includes("冷水设定值偏移")
                 ) {
-                  // 需求设定值
-                  this.requireSet = item.curValue;
-                  this.requireSetId = id;
+                  // 远程出水温度设定值
+                  this.offsetValuerControlObj = item;
                 }
               });
             }
+          });
+          // 使用 filter 方法过滤掉 item 为 '0' 的对象
+          let compressorData = data.filter((obj) => obj.mtType !== "0");
+          console.log("压缩机数组", this.compressorData);
+          compressorData.forEach((item) => {
             if (item.mtType === "9") {
-              // 压缩机参数
-              this.compressorData = item.list;
-              // 遍历数组
-              for (let i = 0; i < this.compressorData.length; i++) {
-                const item = this.compressorData[i];
-                if (item.paramType === "1" && Number(item.curValue) === 0) {
-                  item.curValue = "停止";
-                  console.log("压缩机停止了啊是0···················");
-                } else if (
-                  item.paramType === "1" &&
-                  Number(item.curValue) === 1
-                ) {
-                  item.curValue = "运行";
-                }
+              // 压缩机1
+              this.compressorData1 = item;
+              // 根据 ordernum 进行排序
+              if (
+                this.compressorData1.list &&
+                Array.isArray(this.compressorData1.list)
+              ) {
+                this.compressorData1.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
+              }
+            }
+            if (item.mtType === "10") {
+              // 压缩机2
+              this.compressorData2 = item;
+              // 对 this.compressorData2 对象中的 list 数组进行排序
+              if (
+                this.compressorData2.list &&
+                Array.isArray(this.compressorData2.list)
+              ) {
+                this.compressorData2.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
+              }
+            }
+            if (item.mtType === "11") {
+              // 压缩机3
+              this.compressorData3 = item;
+              if (
+                this.compressorData3.list &&
+                Array.isArray(this.compressorData3.list)
+              ) {
+                this.compressorData3.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
               }
             }
           });
@@ -541,8 +631,45 @@ export default {
     hostListClass(paramType) {
       for (let i = 0; i < this.hostData.length; i++) {
         const item = this.hostData[i];
-        if (item.paramType === paramType && Number(item.curValue) !== 0) {
-          return true;
+        if (
+          item.paramType === paramType &&
+          typeof item.curValue === "string" &&
+          /[\u4e00-\u9fa5]/.test(item.curValue)
+        ) {
+          switch (item.paramType) {
+            case "1": // 运行状态
+              if (item.curValue === "运行") {
+                return true;
+              }
+              break;
+            case "2": // 启停
+              if (item.curValue === "启动" && item.otherName.includes("启停")) {
+                return true;
+              }
+              break;
+            case "5": // 故障
+              if (item.curValue === "正常") {
+                return true;
+              }
+              break;
+            case "6": // 手自动切换
+              if (item.curValue === "自动") {
+                return true;
+              }
+              break;
+            case "22": // 本地远程切换
+              if (item.curValue === "远程") {
+                return true;
+              }
+              break;
+            default:
+              return false;
+              break;
+          }
+        } else {
+          if (item.paramType === paramType && Number(item.curValue) !== 0) {
+            return true;
+          }
         }
       }
       // 否则
@@ -568,32 +695,37 @@ export default {
       this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
+    // 判断 curValue 是否为特定值
+    isSpecialValue(value) {
+      const specialValues = ["运行", "启动", "正常"];
+      return specialValues.includes(value);
+    },
     // 处理输入事件，过滤非数字字符
-    handleInput(children) {
+    handleInput(item) {
       console.log("校验");
       // 实时校验并过滤非数字和非小数点字符
-      children.curValue = String(children.curValue).replace(/[^\d.]/g, "");
-      // 确保只有一个小数点
-      const parts = children.curValue.split(".");
-      if (parts.length > 2) {
-        // 如果有多个小数点，只保留第一个小数点及之前的部分和第一个小数点之后的部分
-        children.curValue = parts[0] + "." + parts[1];
-      }
-      // 确保小数点后最多两位
-      if (parts.length === 2) {
-        children.curValue = parts[0] + "." + parts[1].slice(0, 2);
+      let input = String(item).replace(/[^\d.]/g, "");
+      // 检查输入是否以小数点开头
+      if (input.startsWith(".")) {
+        // 如果以小数点开头，去除小数点
+        input = input.slice(1);
       }
+      this.offsetValuerControlObj.curValue = input;
     },
     // 失去焦点
     handleBlur() {
       // this.currentFocusIndex = "";
     },
-    handleEnter(title, unit, value, id, event) {
-      console.log("请求后端", value);
+    handleEnter(item, event) {
+      console.log("请求后端", item);
+      if (!item) {
+        this.$modal.msgError("请输入偏移值");
+        return;
+      }
       // 失去焦点
       event.target.blur();
       this.$confirm(
-        `确定要修改"${title}"的数据为:${value} ${unit}吗?`,
+        `确定要修改冷水设定值偏移10V的温度为:${item.curValue} ℃吗?`,
         "提示",
         {
           confirmButtonText: "确定",
@@ -602,13 +734,14 @@ export default {
         }
       )
         .then(() => {
-          this.hadleOperationConrol(id, value);
+          this.hadleOperationConrol(item.id, item.curValue);
         })
         .catch(() => {
           // 用户取消操作，需要更新原来的频率
-          // this.getOperationList();
+          // this.$emit("upList");
         });
     },
+    // 操作
     hadleOperationConrol(id, param) {
       let data = {
         id: id,
@@ -623,27 +756,26 @@ export default {
             this.loading = true;
             // 更新所有设备状态;
             setTimeout(() => {
-              this.getPolicyList().finally(() => {
-                // 关闭 loading 效果
-                this.loading = false;
-              });
+              this.getHostDetailsData();
+              this.loading = false;
             }, 5000);
           } else {
             // this.$modal.msgError("操作失败");
             console.log("应该更新状态的");
             // 更新所有设备状态;
-            this.getPolicyList();
+            this.getHostDetailsData();
           }
         })
         .catch((error) => {
           console.log("请求发生错误，更新设备状态", error);
           // 更新所有设备状态;
-          this.getPolicyList();
+          this.getHostDetailsData();
         });
     },
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .monitor {
   width: 100%;
@@ -759,13 +891,12 @@ export default {
       align-items: center;
       justify-content: space-between;
       .detail-top-left {
-        width: 7rem;
         height: 4.4rem;
         // background-color: aquamarine;
         position: relative;
         .host-img1 {
-          width: 4.88rem;
-          height: 3.97rem;
+          width: 4.48rem;
+          height: 3.57rem;
           margin: 0.2rem 0 0 0.2rem;
         }
         .outIn {
@@ -837,18 +968,44 @@ export default {
         .startClass {
           z-index: 10;
           position: absolute;
-          top: 2.9rem;
-          left: 3.4rem;
+          top: 2.2rem;
+          left: 2.7rem;
           width: 0.18rem;
           height: 0.18rem;
           border-radius: 50%;
           animation: blink 1s infinite;
           background-color: #38fc52 !important;
         }
+        .hostStatus {
+          z-index: 10;
+          position: absolute;
+          top: 0.6rem;
+          left: 4.9rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          width: 2.8rem !important;
+          margin-top: 1.5rem;
+          .hostStatus-li {
+            background-color: #25455a;
+            color: #c0dffc;
+            font-size: 0.16rem;
+            margin-bottom: 0.1rem;
+            padding: 0.1rem;
+            letter-spacing: 0.02rem;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+            span {
+              white-space: nowrap;
+            }
+          }
+        }
         .water-flow3 {
           z-index: 10;
           position: absolute;
-          top: 3.6rem;
+          top: 3.5rem;
           left: 1.2rem;
           .water-flow-li {
             margin-bottom: 0.04rem;
@@ -891,9 +1048,9 @@ export default {
         .fanBlade {
           z-index: 10;
           position: absolute;
-          top: 2.75rem;
-          left: 4.4rem;
-          width: 0.6rem;
+          top: 2.5rem;
+          left: 4.1rem;
+          width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
           transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
@@ -902,7 +1059,7 @@ export default {
         .leftFan {
           z-index: 10;
           position: absolute;
-          top: 2.55rem;
+          top: 2.29rem;
           left: 0.53rem;
           width: 0.5rem;
           height: 0.5rem;
@@ -915,21 +1072,21 @@ export default {
         .host-name {
           z-index: 10;
           position: absolute;
-          top: 1.55rem;
-          left: 1.8rem;
-          color: #3520f8;
+          top: 1.6rem;
+          left: 1.44rem;
+          color: #2925f8;
           font-weight: bold;
           font-size: 0.18rem;
         }
         .loadData {
           z-index: 10;
           position: absolute;
-          top: 0.2rem;
-          right: 0rem;
+          top: 0rem;
+          left: 5rem;
         }
       }
       .detail-top-right {
-        width: calc(100% - 7.25rem);
+        width: calc(100% - 7.6rem);
         height: 4.4rem;
         // background-color: rgb(127, 172, 255);
       }
@@ -941,31 +1098,6 @@ export default {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      .hostStatus {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        width: 3rem !important;
-        margin-top: 1.5rem;
-        .hostStatus-li {
-          background-color: #25455a;
-          color: #c0dffc;
-          font-size: 0.18rem;
-          margin-bottom: 0.1rem;
-          padding: 0.1rem;
-          letter-spacing: 0.02rem;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          align-items: center;
-          span {
-            white-space: nowrap;
-          }
-          .el-input {
-            margin: 0 0.05rem;
-          }
-        }
-      }
       .detail-data {
         display: flex;
         flex-direction: column;
@@ -987,7 +1119,7 @@ export default {
           }
         }
         .detail-data-bottom {
-          // width: 100%;
+          width: 100%;
           // padding: 0.1rem 0.3rem;
           z-index: 0;
           display: flex;
@@ -1045,6 +1177,7 @@ export default {
               #217df5 100%
             );
           }
+
           .detail-data-li::before {
             top: 0;
           }
@@ -1066,6 +1199,7 @@ export default {
             align-items: center;
             justify-content: space-between;
           }
+
           .rightDot::before {
             content: "";
             position: absolute;
@@ -1083,6 +1217,7 @@ export default {
             border-radius: 50%;
             z-index: 10;
           }
+
           .rightDot::after {
             content: "";
             position: absolute;
@@ -1117,6 +1252,7 @@ export default {
               rgba(255, 255, 255, 0) 70%
             );
           }
+
           .leftDot::after {
             content: "";
             position: absolute;
@@ -1141,7 +1277,6 @@ export default {
         }
       }
       .hostparams {
-        // width: 7.7rem;
         width: 7rem;
         .detail-data-bottom {
           // padding-left: 0.5rem;
@@ -1153,45 +1288,89 @@ export default {
         }
       }
       .compressor {
-        width: 7.6rem;
+        width: 3.5rem;
         .detail-data-bottom {
           // padding-left: 0.75rem;
-          //  width: 10rem;
           .detail-data-li {
             // width: 3.4rem;
-            width: calc(50% - 0.2rem) !important;
+            width: calc(100%) !important;
             margin: 0 0.1rem;
           }
         }
       }
-      .dotData {
-        font-weight: bold;
-        margin: 0 0.06rem;
-        color: #3b80ff;
-        display: flex;
-        align-items: center;
-      }
-      .goodData {
-        font-weight: bold;
-        margin: 0 0.06rem;
-        color: #3df574;
-      }
-      .badData {
-        font-weight: bold;
-        margin: 0 0.06rem;
-        color: #cf3607;
-      }
-      .automaticData {
-        font-weight: bold;
-        margin: 0 0.06rem;
-        color: #da7b10;
-      }
-      .timeData {
-        font-weight: bold;
-        margin: 0 0.06rem;
-        color: #1df3e8;
-      }
     }
   }
 }
+.choice {
+  margin-left: 0 !important;
+}
+.choice .mr20 {
+  width: 1rem !important;
+  color: #c0dffc;
+  font-weight: bold !important;
+  font-size: 0.18rem !important;
+  text-align: center !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+.timeStyle {
+  color: #ffffff !important;
+}
+.dotData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #3b80ff;
+  display: flex;
+  align-items: center;
+}
+.goodData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #3df574;
+}
+.badData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #cf3607;
+}
+.automaticData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #da7b10;
+}
+.timeData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #1df3e8;
+}
+</style>
+<style scoped>
+.goodData >>> .el-input--mini {
+  font-size: 0.16rem !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.goodData >>> .el-input {
+  width: 0.5rem !important;
+}
+.goodData >>> .el-input--mini .el-input__inner {
+  height: 0.28rem !important;
+  line-height: 20.28rem !important;
+  padding: 0 !important;
+}
+.goodData >>> .el-input__inner {
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  color: #3df574 !important;
+  font-weight: bold;
+  box-shadow: none !important;
+}
+.goodData >>> .el-input__suffix {
+  color: #3df574 !important;
+  font-weight: bold;
+  right: -0.02rem !important;
+  height: 100% !important;
+  top: -0.01rem !important;
+}
 </style>

src/views/centerairC/sysMonitor/performance.vue

@@ -714,153 +714,6 @@ export default {
           flex-wrap: wrap;
           align-items: flex-start;
           justify-content: center;
-          .detail-data-li {
-            width: 80%;
-            margin-right: 0.1rem;
-            position: relative;
-            color: #89acc4;
-            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%;
-          }
         }
         .line1 {
           position: absolute;

src/views/centerairC/temHistoryQuery/index.vue

@@ -0,0 +1,430 @@
+<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="msgCode">
+            <el-date-picker
+              style="width: auto"
+              v-model="monthValue"
+              type="month"
+              placeholder="选择月"
+              value-format="yyyy-MM"
+            >
+            </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="warning-btn">
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            >导出</el-button
+          >
+        </div>
+        <div class="cancel-btn">
+          <el-button
+            type="cancel"
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetQuery"
+            >重置</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="charts" ref="chart_ref"></div>
+    <el-table
+      v-loading="loading"
+      :data="postList"
+      stripe
+      :cell-style="tableRowStyle"
+    >
+      <el-table-column label="日期" align="center" prop="dateAndWeek" />
+      <el-table-column label="最高气温" align="center" prop="maxTemp" />
+      <el-table-column label="最低气温" align="center" prop="minTemp" />
+      <el-table-column label="天气" align="center" prop="weatherConditions" />
+      <el-table-column label="风向" align="center" prop="windDirection" />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { weatherTempData } from "@/api/centerairC/temHistory";
+import * as echarts from "echarts";
+export default {
+  name: "temHistoryQuery",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: "",
+        endTime: "",
+      },
+      monthValue: "",
+      chartInstance: null,
+      option: {},
+    };
+  },
+  created() {
+    // 获取当前日期
+    const currentDate = new Date();
+    // 获取当前年份
+    const year = currentDate.getFullYear();
+    // 获取当前月份，注意月份是从 0 开始的，所以要加 1
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    // 格式化日期为 yyyy-MM 格式
+    this.monthValue = `${year}-${month}`;
+  },
+  mounted() {
+    this.getList();
+    this.initChart();
+    window.addEventListener("resize", this.screenAdapter);
+    this.screenAdapter();
+    this.getChartData();
+  },
+  methods: {
+    tableRowStyle({ row, column, rowIndex, columnIndex }) {
+      // 修改颜色
+      if (columnIndex === 1) {
+        return "color: #fd1e00;!important;text-align:center";
+      }
+      if (columnIndex === 2) {
+        return "color: #3390ff;!important;text-align:center";
+      }
+      if (columnIndex === 4) {
+        return "color: #75d148;!important;text-align:center";
+      }
+      // return "text-align:center";
+    },
+    /** 查询报警编码列表 */
+    getList() {
+      this.loading = true;
+      this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
+      console.log("参数", this.queryParams);
+      weatherTempData(this.queryParams).then((response) => {
+        this.postList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    getChartData() {
+      this.loading = true;
+      this.queryParams.pageNum = 0;
+      this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
+      console.log("图表参数", this.queryParams);
+      weatherTempData(this.queryParams).then((response) => {
+        console.log("处理值然后渲染");
+        if (response.rows.length > 0) {
+          let data = response.rows;
+          let timeValue = [];
+          let hightValue = [];
+          let lowValue = [];
+          data.forEach((element) => {
+            timeValue.push(element.weatherDate);
+            hightValue.push(element.maxTemp);
+            lowValue.push(element.minTemp);
+          });
+          let adapterOption = {};
+          adapterOption = {
+            xAxis: {
+              data: timeValue,
+            },
+            yAxis: {
+              name: "℃",
+              nameTextStyle: {
+                color: "rgba(255, 255, 255, 1)",
+                fontSize: 12,
+              },
+            },
+            series: [
+              {
+                data: hightValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(18, 126, 226)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(18, 126, 226)", //折线点的颜色
+                },
+              },
+              {
+                data: lowValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(250, 169, 19)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(250, 169, 19)", //折线点的颜色
+                },
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance.resize();
+        } else {
+          let adapterOption = {};
+          adapterOption = {
+            xAxis: {
+              data: [],
+            },
+            series: [
+              {
+                data: [],
+              },
+              {
+                data: [],
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance.resize();
+        }
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+      this.getChartData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 32;
+      this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
+      console.log("参数", this.queryParams);
+      weatherTempData(this.queryParams).then((response) => {
+        if (response.code == 200) {
+          import("@/assets/excel/Export2Excel").then((excel) => {
+            var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数
+            var filterVal = [
+              "dateAndWeek",
+              "maxTemp",
+              "minTemp",
+              "weatherConditions",
+              "windDirection",
+            ];
+            const data = this.formatJson(filterVal, response.rows);
+            const autoWidth = true;
+            excel.export_json_to_excel({
+              header: tHeader, //表头
+              data, //数据
+              filename: "历史天气报表", //名称
+              autoWidth: true, //宽度自适应
+            });
+            this.$message({
+              type: "success",
+              message: "导出成功!",
+            });
+          });
+        } else {
+          this.$message.error("导出失败!");
+        }
+      });
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      this.chartInstance = echarts.init(this.$refs.chart_ref);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
+      this.option = {
+        tooltip: {
+          // 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发
+          trigger: "axis",
+          textStyle: {
+            // 设置提示框内文字的大小
+            fontSize: titleFontSize,
+          },
+        },
+        legend: {
+          show: false,
+          // textStyle: {
+          //   // 设置图例文字的大小
+          //   fontSize: 14
+          // }
+        },
+        grid: {
+          top: "10%",
+          left: "4%",
+          right: "6%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: titleFontSize, //x轴文字大小
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: {
+          min: 0,
+          // max:20,
+          // name: "kwh", // 第一个 y 轴的单位描述
+          // 设置 name 的样式
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12, //y轴单位文字大小
+          },
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: titleFontSize, //x轴文字大小
+          },
+          // 显示y坐标轴
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576", // 设置 y 轴线的颜色
+            },
+          },
+          //y轴分割线段数
+          // splitNumber: 10,
+          // 修改y轴分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62", // 设置分割线的颜色
+              type: "dashed", // 设置分割线为虚线
+            },
+          },
+        },
+        series: [
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
+            symbol: "circle",
+            name: "最高气温",
+          },
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
+            symbol: "circle",
+            name: "最低气温",
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.charts {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 0.1rem;
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .charts {
+    height: 3rem !important;
+  }
+}
+</style>

src/views/centerairC/timeSwitch/index.vue

@@ -102,7 +102,7 @@ export default {
                     // console.log("child.pointName", child.pointName);
                     if (child.pointName) {
                       // 定时开机-小时
-                      if (child.pointName.includes(`开_时`)) {
+                      if (child.pointName.includes(`开_分`)) {
                         // console.log("定时开机-时·························");
                         delayItem.delayOpenHour = child.curValue;
                         delayItem.delayOpenHourId = child.cpmId;

src/views/components/viewColdSys.vue

@@ -9,6 +9,12 @@
 import * as echarts from "echarts";
 import { viewMainParams } from "@/api/index";
 export default {
+  props: {
+    subData: {
+      type: Array,
+      required: true,
+    },
+  },
   data() {
     return {
       chartInstance: null,
@@ -36,11 +42,24 @@ export default {
       },
     };
   },
+  watch: {
+    subData: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal) {
+        // console.log("检测到传功来的数据", this.subData);
+        if (Object.keys(newVal).length > 0) {
+          console.log("newval", newVal);
+          this.$nextTick(() => {
+            this.echartsData();
+          });
+        }
+      },
+    },
+  },
   mounted() {
     this.initChart();
     this.screenAdapter();
     window.addEventListener("resize", this.screenAdapter);
-    this.getChartsData();
   },
   destroyed() {
     //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
@@ -441,118 +460,114 @@ export default {
       this.chartInstance.resize();
     },
     // 请求的数据
-    getChartsData() {
-      viewMainParams().then((res) => {
-        console.log("系统参数返回", res);
-        console.log("冷源监控返回", res.rows[0]);
-        if (res.code == 200) {
-          this.useForm.maxData = 10;
-          this.useForm.useData = res.rows[0].values[0].value;
-          let that = this;
-          // 使用配置函数
-          const axisLineColor = this.getAxisLineColor(
-            this.useForm.useData,
-            this.useForm.maxData
-          );
-          const titleFontSize = this.$refs.sys_charts.offsetWidth / 30;
-          const adapterOption = {
-            series: [
-              {
-                name: "内部动态阴影",
-                axisLine: {
-                  lineStyle: {
-                    color: axisLineColor,
-                    // 相当于阴影部分的直径
-                    // width: 80,
-                  },
+    echartsData() {
+      if (this.subData.length > 0) {
+        this.useForm.maxData = 10;
+        this.useForm.useData = this.subData[0].value;
+        let that = this;
+        // 使用配置函数
+        const axisLineColor = this.getAxisLineColor(
+          this.useForm.useData,
+          this.useForm.maxData
+        );
+        const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
+        const adapterOption = {
+          series: [
+            {
+              name: "内部动态阴影",
+              axisLine: {
+                lineStyle: {
+                  color: axisLineColor,
+                  // 相当于阴影部分的直径
+                  // width: 80,
                 },
               },
-              {
-                name: "内部大边框",
-                min: 0,
-                max: this.useForm.maxData,
-              },
-              {
-                name: "指针上的圆",
-                data: [
-                  {
-                    value: 5,
+            },
+            {
+              name: "内部大边框",
+              min: 0,
+              max: this.useForm.maxData,
+            },
+            {
+              name: "指针上的圆",
+              data: [
+                {
+                  value: 5,
+                },
+              ],
+            },
+            {
+              name: "指针上的渐变圆",
+              label: {
+                show: true,
+                position: "center", // 文字显示在中心位置
+                offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
+                formatter: function () {
+                  // 返回 HTML 标签，使用 rich 里定义的样式
+                  return `{line|${that.useForm.useData}}`;
+                },
+                rich: {
+                  line: {
+                    color: "#fff", // 第二行文字颜色
+                    fontSize: titleFontSize, // 第二行文字大小
+                    lineHeight: 5, // 行高，实现间距
                   },
-                ],
+                },
               },
-              {
-                name: "指针上的渐变圆",
-                label: {
-                  show: true,
-                  position: "center", // 文字显示在中心位置
-                  offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
-                  formatter: function () {
-                    // 返回 HTML 标签，使用 rich 里定义的样式
-                    return `{line|${that.useForm.useData}}`;
-                  },
-                  rich: {
-                    line: {
-                      color: "#fff", // 第二行文字颜色
-                      fontSize: titleFontSize, // 第二行文字大小
-                      lineHeight: 5, // 行高，实现间距
+              data: [
+                {
+                  value: 0,
+                  itemStyle: {
+                    // 设置渐变颜色
+                    color: {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "rgb(4,112,212)", // 顶部颜色
+                        },
+                        {
+                          offset: 0.3,
+                          color: "rgba(0, 46, 93)", // 底部透明
+                        },
+                      ],
+                      global: false, // 缺省为 false
                     },
                   },
                 },
-                data: [
-                  {
-                    value: 0,
-                    itemStyle: {
-                      // 设置渐变颜色
-                      color: {
-                        type: "linear",
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                          {
-                            offset: 0,
-                            color: "rgb(4,112,212)", // 顶部颜色
-                          },
-                          {
-                            offset: 0.3,
-                            color: "rgba(0, 46, 93)", // 底部透明
-                          },
-                        ],
-                        global: false, // 缺省为 false
-                      },
-                    },
-                  },
-                ],
-              },
-              {
-                // 指针 数据
-                name: this.energyCostText,
-                max: this.useForm.maxData, //最大刻度
-                axisLabel: {
-                  formatter: (value) => {
-                    // 仅显示 0 和最大值
-                    if (value === 0 || value == this.useForm.maxData) {
-                      // 替换 100 为你的最大值
-                      return value;
-                    }
-                    return "";
-                  },
+              ],
+            },
+            {
+              // 指针 数据
+              name: this.energyCostText,
+              max: this.useForm.maxData, //最大刻度
+              axisLabel: {
+                formatter: (value) => {
+                  // 仅显示 0 和最大值
+                  if (value === 0 || value == this.useForm.maxData) {
+                    // 替换 100 为你的最大值
+                    return value;
+                  }
+                  return "";
                 },
-                data: [
-                  {
-                    name: this.dateUse,
-                    value: this.useForm.useData,
-                  },
-                ],
               },
-            ],
-          };
-          this.chartInstance.setOption(adapterOption);
-          //手动的调用图标对象的resize才能产生效果
-          this.chartInstance.resize();
-        }
-      });
+              data: [
+                {
+                  name: this.dateUse,
+                  value: this.useForm.useData,
+                },
+              ],
+            },
+          ],
+        };
+        this.chartInstance.setOption(adapterOption);
+        //手动的调用图标对象的resize才能产生效果
+        this.chartInstance.resize();
+      }
     },
   },
 };
@@ -569,7 +584,7 @@ export default {
 
   .sys_charts {
     width: 100%;
-    height: 1.6rem;
+    height: 150px;
   }
   .eer {
     font-size: 18px;
@@ -578,6 +593,9 @@ export default {
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {
+  .sys_charts {
+    height: 1.5rem !important;
+  }
   .eer {
     font-size: 0.18rem !important;
     margin-top: 0.25rem !important;

src/views/components/viewEnergy.vue

@@ -81,16 +81,12 @@ export default {
       );
       console.log("当前要渲染的数据对象", chartsObj);
       console.log("当前要渲染的颜色对象", colorObj);
-      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
       let adapterOption = {};
       // 添加折线的配置
       adapterOption = {
         tooltip: {
           trigger: "axis",
-          textStyle: {
-            // 设置提示框内文字的大小
-            fontSize: titleFontSize,
-          },
           // 自定义 tooltip 内容
           formatter: function (params) {
             var res = params[0].name + "<br/>";
@@ -143,13 +139,9 @@ export default {
           {
             data: chartsObj.data,
             name: event,
-            // 拐点大小
-            symbolSize: titleFontSize * 0.5,
             //折线颜色
             itemStyle: {
               color: colorObj.color, //折线的颜色
-              // 设置折线的厚度
-              width: titleFontSize * 0.1,
             },
             lineStyle: {
               color: colorObj.color, //折线点的颜色

src/views/device/comm/index.vue

@@ -13,6 +13,7 @@
               v-model="queryParams.mtType"
               placeholder="请选择仪表类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_mt_type"
@@ -176,6 +177,7 @@
                 v-model="form.mtType"
                 placeholder="请选择仪表类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_mt_type"
@@ -190,6 +192,7 @@
             <el-form-item label="波特率" prop="baudRate">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择波特率"
                 v-model="form.baudRate"
               >
@@ -207,6 +210,7 @@
             <el-form-item label="数据位" prop="dataBit">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择数据位"
                 v-model="form.dataBit"
               >
@@ -219,6 +223,7 @@
             <el-form-item label="停止位" prop="stopBit">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择停止位"
                 v-model="form.stopBit"
               >
@@ -235,6 +240,7 @@
             <el-form-item label="校验位" prop="parity">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择校验位"
                 v-model="form.parity"
               >

src/views/device/gateway/index.vue

@@ -21,6 +21,7 @@
               v-model="queryParams.status"
               placeholder="网关状态"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.gateway_status"
@@ -255,6 +256,7 @@
                 v-model="form.operatorType"
                 placeholder="选择运营商"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.operator_type"
@@ -270,6 +272,7 @@
                 v-model="form.communicationType"
                 placeholder="选择通信方式"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.communication_type"

src/views/device/gather/index.vue

@@ -13,6 +13,7 @@
               v-model="queryParams.mtType"
               placeholder="请选择仪表类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_mt_type"
@@ -27,6 +28,7 @@
               v-model="queryParams.systemType"
               placeholder="请选择系统类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_type"
@@ -41,6 +43,7 @@
               v-model="queryParams.paramType"
               placeholder="请选择采集参数类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_param_type"
@@ -313,6 +316,7 @@
                 v-model="form.mtType"
                 placeholder="请选择仪表类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_mt_type"
@@ -398,6 +402,7 @@
                 v-model="form.dataType"
                 placeholder="请选择数据类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_data_type"
@@ -414,6 +419,7 @@
             <el-form-item label="是否累计" prop="mtIsSum">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择是否"
                 v-model="form.mtIsSum"
               >
@@ -466,6 +472,7 @@
                 v-model="form.protocolType"
                 placeholder="请选择协议类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_protocol_type"
@@ -482,6 +489,7 @@
                 v-model="form.communicationType"
                 placeholder="请选择通信类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_communication_type"
@@ -497,6 +505,7 @@
             <el-form-item label="是否使用" prop="isUse">
               <el-select
                 clearable
+                filterable
                 placeholder="请选择是否"
                 v-model="form.isUse"
               >
@@ -524,6 +533,7 @@
                 v-model="form.systemType"
                 placeholder="请选择系统类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_type"
@@ -541,6 +551,7 @@
                 v-model="form.paramType"
                 placeholder="请选择参数类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_param_type"
@@ -556,6 +567,7 @@
                 v-model="form.collectionType"
                 placeholder="请选择采集类别"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.alarm_collection_type"
@@ -574,6 +586,7 @@
                 v-model="form.terminalDeviceType"
                 placeholder="请选择采集设备"
                 clearable
+                filterable
                 @change="handleDeviceType"
               >
                 <el-option
@@ -590,6 +603,7 @@
                 v-model="form.deviceLedgerId"
                 placeholder="请选择设备名称"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="item in ledgerList"

src/views/device/ledger/index.vue

@@ -29,6 +29,7 @@
               v-model="queryParams.deviceType"
               placeholder="请选择设备类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_device_type"
@@ -232,6 +233,7 @@
                 v-model="form.deviceType"
                 placeholder="请选择设备类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_device_type"
@@ -304,7 +306,12 @@
         <el-row type="flex" justify="center">
           <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></el-form-item
           ></el-col>
@@ -314,6 +321,7 @@
                 v-model="form.isCollection"
                 placeholder="请选择是否"
                 clearable
+                filterable
               >
                 <el-option label="是" value="0" />
                 <el-option label="否" value="1" />
@@ -328,6 +336,7 @@
                 v-model="form.isCalcEnergy"
                 placeholder="请选择是否"
                 clearable
+                filterable
               >
                 <el-option label="是" value="0" />
                 <el-option label="否" value="1" />
@@ -339,6 +348,7 @@
                 v-model="form.systemType"
                 placeholder="请选择系统类型"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.sys_type"

src/views/device/maintenance/index.vue

@@ -87,6 +87,7 @@
               v-model="queryParams.deviceType"
               placeholder="请选择设备类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="item in devices"
@@ -102,6 +103,7 @@
               v-model="queryParams.maintainType"
               placeholder="请选择维保类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.maintain_type"
@@ -295,6 +297,7 @@
                 v-model="form.maintainType"
                 placeholder="请选择维保类型"
                 clearable
+                filterable
                 :disabled="shouldDis"
               >
                 <el-option
@@ -312,6 +315,7 @@
                 v-model="form.deviceType"
                 placeholder="请选择设备类型"
                 clearable
+                filterable
                 :disabled="shouldDis"
               >
                 <el-option

src/views/device/qrCode/index.vue

@@ -13,6 +13,7 @@
               v-model="queryParams.status"
               placeholder="请选择状态"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.qrcode_status"
@@ -222,6 +223,7 @@
                 v-model="form.deviceLedgerId"
                 placeholder="请选择设备名称"
                 clearable
+                filterable
                 @change="handleDeviceChange"
               >
                 <el-option
@@ -237,6 +239,7 @@
                 v-model="form.status"
                 placeholder="请选择状态"
                 clearable
+                filterable
               >
                 <el-option
                   v-for="dict in dict.type.qrcode_status"
@@ -255,11 +258,7 @@
       </div>
     </el-dialog>
     <!-- 二维码预览弹框 -->
-    <el-dialog
-      title="二维码预览"
-      :visible.sync="isCodePreview"
-      append-to-body
-    >
+    <el-dialog title="二维码预览" :visible.sync="isCodePreview" append-to-body>
       <div class="dialog-img">
         <img class="qrCodeImg" :src="codePreViewUrl" alt="Base64 Image" />
       </div>
@@ -270,11 +269,7 @@
       :visible.sync="isMoreqrCode"
       append-to-body
     >
-      <el-form
-        ref="qrCodeForm"
-        :model="qrCodeForm"
-        :rules="qrCodeForms"
-      >
+      <el-form ref="qrCodeForm" :model="qrCodeForm" :rules="qrCodeForms">
         <el-row type="flex" justify="center">
           <el-col :span="24">
             <el-form-item label="二维码个数" prop="qrNum">

src/views/device/spareInOut/index.vue

@@ -29,6 +29,7 @@
               v-model="queryParams.operaType"
               placeholder="请选择操作类型"
               clearable
+              filterable
             >
               <el-option
                 v-for="dict in dict.type.sys_inout_type"
@@ -154,6 +155,8 @@
               <el-select
                 v-model="scope.row.sparePartsId"
                 @change="handleSpare(scope.row, scope.row.sparePartsId)"
+                filterable
+                clearable
               >
                 <el-option
                   v-for="item in spares"
@@ -175,7 +178,11 @@
               ></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="当前库存" min-width="150" prop="inventoryLevels">
+          <el-table-column
+            label="当前库存"
+            min-width="150"
+            prop="inventoryLevels"
+          >
           </el-table-column>
           <el-table-column prop="data1" label="操作" min-width="130">
             <template slot-scope="scope">

src/views/hotWater/dataAnalysis/components/analyzeMonth.vue

@@ -153,8 +153,10 @@ export default {
   },
   methods: {
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
+      // console.log("row",row)
+      // console.log("column",column)
       // 如果第1列，修改颜色
-      if (columnIndex === 0) {
+      if (columnIndex === 0 || column.label === '合计') {
         return "background-color:rgb(11 ,100, 201) !important;";
       }
     },
@@ -293,6 +295,15 @@ export default {
           // console.log("Min2", Min2);
           // console.log("Max1", Max1);
           // console.log("Max2", Max2);
+          // 处理y轴文字+单位
+          var yAxisUnit = "";
+          if (this.chType === 1) {
+            yAxisUnit = "吨";
+          } else if (this.chType === 2) {
+            yAxisUnit = "度";
+          } else if (this.chType === 3) {
+            yAxisUnit = "度/吨";
+          }
           this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
           const adapterOption = {
             legend: {
@@ -308,12 +319,24 @@ export default {
                 max: Max1,
                 splitNumber: 10,
                 interval: (Max1 - Min1) / 10,
+                name: yAxisUnit,
+                // 设置 name 的样式
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
               },
               {
                 min: Min2,
                 max: Max2,
                 splitNumber: 10,
                 interval: (Max2 - Min2) / 10,
+                name: "%",
+                // 设置 name 的样式
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
               },
             ],
             series: [
@@ -522,6 +545,62 @@ export default {
               width: "1",
             },
           },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              // console.log("打印颜色", params[i].color.colorStops[0].color)
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color.colorStops[0].color +
+                '"></span>';
+              // 根据不同的seriesName 返回不同的单位
+              if (seriesName.includes("用水量")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "吨" +
+                  "</span><br>";
+              } else if (seriesName.includes("用电量")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "度" +
+                  "</span><br>";
+              } else if (seriesName.includes("单耗")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "度/吨" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "%" +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
         },
         legend: {
           // 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同
@@ -531,7 +610,7 @@ export default {
             color: "#ffff",
             fontSize: 12, //这里改字体大小
           },
-          left: "56%",
+          left: "center",
           top: "5%",
           //图例距离饼图的距离
           itemGap: 5,
@@ -638,10 +717,27 @@ export default {
             // },
             //折线颜色
             itemStyle: {
-              color: "#db9215",
-              lineStyle: {
-                color: "#db9215", //折线的颜色
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(1, 102, 251, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(1, 102, 251, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
             },
           },
           {
@@ -654,10 +750,27 @@ export default {
             barWidth: 10, // 柱子宽度
             //折线颜色
             itemStyle: {
-              color: "#1ab395",
-              lineStyle: {
-                color: "#1ab395", //折线的颜色
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 224, 225, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 224, 225, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0],
             },
           },
           {
@@ -677,10 +790,27 @@ export default {
             // data: this.data3,
             //折线颜色
             itemStyle: {
-              color: "#e23131",
-              lineStyle: {
-                color: "#e23131", //折线的颜色
+              color: "#db9215",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#db9215", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#db9215", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
             },
           },
           {
@@ -701,9 +831,27 @@ export default {
             // data: this.data4,
             //折线颜色
             itemStyle: {
-              color: "#4a98ff",
+              color: "#EE5217", //折线点的颜色
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE5217", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#EE5217", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
               lineStyle: {
-                color: "#4a98ff", //折线的颜色
+                color: "#EE5217", //折线的颜色
               },
             },
           },

src/views/hotWater/dataAnalysis/components/analyzeYear.vue

@@ -120,7 +120,7 @@ export default {
   methods: {
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
       // 如果第1列，修改颜色
-      if (columnIndex === 0) {
+      if (columnIndex === 0 || column.label === "合计") {
         return "background-color:rgb(11 ,100, 201) !important;";
       }
     },
@@ -240,6 +240,15 @@ export default {
           // console.log("Min2", Min2);
           // console.log("Max1", Max1);
           // console.log("Max2", Max2);
+          // 处理y轴文字+单位
+          var yAxisUnit = "";
+          if (this.chType === 1) {
+            yAxisUnit = "吨";
+          } else if (this.chType === 2) {
+            yAxisUnit = "度";
+          } else if (this.chType === 3) {
+            yAxisUnit = "度/吨";
+          }
           this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
           const adapterOption = {
             legend: {
@@ -255,12 +264,24 @@ export default {
                 max: Max1,
                 splitNumber: 10,
                 interval: (Max1 - Min1) / 10,
+                name: yAxisUnit,
+                // 设置 name 的样式
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
               },
               {
                 min: Min2,
                 max: Max2,
                 splitNumber: 10,
                 interval: (Max2 - Min2) / 10,
+                name: "%",
+                // 设置 name 的样式
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
               },
             ],
             series: [
@@ -431,6 +452,62 @@ export default {
               width: "1",
             },
           },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              // console.log("打印颜色", params[i].color.colorStops[0].color)
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color.colorStops[0].color +
+                '"></span>';
+              // 根据不同的seriesName 返回不同的单位
+              if (seriesName.includes("用水量")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "吨" +
+                  "</span><br>";
+              } else if (seriesName.includes("用电量")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "度" +
+                  "</span><br>";
+              } else if (seriesName.includes("单耗")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "度/吨" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "%" +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
         },
         legend: {
           // 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同
@@ -440,7 +517,7 @@ export default {
             color: "#ffff",
             fontSize: 12, //这里改字体大小
           },
-          left: "56%",
+          left: "center",
           top: "5%",
           //图例距离饼图的距离
           itemGap: 5,
@@ -542,67 +619,55 @@ export default {
             barWidth: 10, // 柱子宽度
             //折线颜色
             itemStyle: {
-              color: "#db9215",
-              lineStyle: {
-                color: "#db9215", //折线的颜色
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(1, 102, 251, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(1, 102, 251, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
             },
           },
           {
             type: "bar",
-            // tooltip: {
-            //   valueFormatter: function (value) {
-            //     return value + "吨";
-            //   },
-            // },
-            tooltip: {
-              trigger: "axis",
-              formatter: function (params) {
-                //数据单位格式化
-                var relVal = params[0].name; //x轴名称
-                if (params[0].seriesName == "2022年用水量") {
-                  relVal =
-                    params[0].name +
-                    "<br/>" +
-                    params[0].seriesName +
-                    " : " +
-                    params[0].value +
-                    " 吨";
-                } else if (params[0].seriesName == "用电量") {
-                  relVal =
-                    params[0].name +
-                    "<br/>" +
-                    params[0].seriesName +
-                    " : " +
-                    params[0].value +
-                    " 度";
-                } else if (params[0].seriesName == "耗能") {
-                  relVal =
-                    params[0].name +
-                    "<br/>" +
-                    params[0].seriesName +
-                    " : " +
-                    params[0].value +
-                    " 度/吨";
-                } else {
-                  relVal =
-                    params[0].name +
-                    "<br/>" +
-                    params[0].seriesName +
-                    " : " +
-                    params[0].value +
-                    " 次";
-                }
-                return relVal;
-              },
-            },
             barWidth: 10, // 柱子宽度
             //折线颜色
             itemStyle: {
-              color: "#1ab395",
-              lineStyle: {
-                color: "#1ab395", //折线的颜色
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 224, 225, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 224, 225, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0],
             },
           },
           {
@@ -622,10 +687,27 @@ export default {
             // data: this.data3,
             //折线颜色
             itemStyle: {
-              color: "#e23131",
-              lineStyle: {
-                color: "#e23131", //折线的颜色
+              color: "#db9215",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#db9215", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#db9215", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
             },
           },
           {
@@ -646,9 +728,27 @@ export default {
             // data: this.data4,
             //折线颜色
             itemStyle: {
-              color: "#4a98ff",
+              color: "#EE5217", //折线点的颜色
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE5217", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#EE5217", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
               lineStyle: {
-                color: "#4a98ff", //折线的颜色
+                color: "#EE5217", //折线的颜色
               },
             },
           },

src/views/hotWater/energyAnalysis/components/energyReport.vue

@@ -11,13 +11,13 @@
           <div v-if="dateType === 'day'">与昨日相比</div>
           <div v-if="dateType === 'month'">与上月相比</div>
           <div v-if="dateType === 'year'">与上年相比</div>
-          <div class="upText" v-if="useWaterRadio > 0">
-            <i class="el-icon-bottom"></i>
-            <span>+{{ useWaterRadio }}</span>
+          <div class="upText" v-if="isPositive(useWaterRadio)">
+            <i class="el-icon-top"></i>
+            <span>{{ useWaterRadio }}</span>
           </div>
           <div class="downText" v-else>
             <i class="el-icon-bottom"></i>
-            <span>-{{ useWaterRadio }}</span>
+            <span>{{ useWaterRadio }}</span>
           </div>
         </div>
         <img
@@ -36,13 +36,13 @@
           <div v-if="dateType === 'day'">与昨日相比</div>
           <div v-if="dateType === 'month'">与上月相比</div>
           <div v-if="dateType === 'year'">与上年相比</div>
-          <div class="upText" v-if="useElectRadio > 0">
-            <i class="el-icon-bottom"></i>
-            <span>+{{ useElectRadio }}</span>
+          <div class="upText" v-if="isPositive(useElectRadio)">
+            <i class="el-icon-top"></i>
+            <span>{{ useElectRadio }}</span>
           </div>
           <div class="downText" v-else>
             <i class="el-icon-bottom"></i>
-            <span>-{{ useElectRadio }}</span>
+            <span>{{ useElectRadio }}</span>
           </div>
         </div>
         <img
@@ -61,13 +61,13 @@
           <div v-if="dateType === 'day'">与昨日相比</div>
           <div v-if="dateType === 'month'">与上月相比</div>
           <div v-if="dateType === 'year'">与上年相比</div>
-          <div class="upText" v-if="useUnitRadio > 0">
-            <i class="el-icon-bottom"></i>
-            <span>+{{ useUnitRadio }}</span>
+          <div class="upText" v-if="isPositive(useUnitRadio)">
+            <i class="el-icon-top"></i>
+            <span>{{ useUnitRadio }}</span>
           </div>
           <div class="downText" v-else>
             <i class="el-icon-bottom"></i>
-            <span>-{{ useUnitRadio }}</span>
+            <span>{{ useUnitRadio }}</span>
           </div>
         </div>
         <img
@@ -250,6 +250,20 @@ export default {
     window.removeEventListener("resize", this.screenAdapter);
   },
   methods: {
+    isPositive(value) {
+      // 检查 value 是否为字符串
+      if (typeof value === "string") {
+        // 提取数字部分并去除百分号
+        const numberPart = value.replace("%", "");
+        // 将提取的字符串转换为数字类型
+        const num = parseFloat(numberPart);
+        return num > 0;
+      } else {
+        // 处理非字符串类型的情况
+        // console.error("传入的值不是字符串类型:", value);
+        return false;
+      }
+    },
     handleEnter(index) {
       this.currentIndex = index;
       this.renderingBroken();
@@ -520,6 +534,11 @@ export default {
     },
     renderingBroken() {
       if (this.currentIndex === 0) {
+        this.brokenOption.yAxis.name = "吨";
+        this.brokenOption.yAxis.nameTextStyle = {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12,
+        };
         this.brokenOption.series[0].data = this.brokenData1;
         this.brokenOption.series[0].itemStyle.color = "#d48e17";
         this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -533,6 +552,11 @@ export default {
           },
         ];
       } else if (this.currentIndex === 1) {
+        this.brokenOption.yAxis.name = "度";
+        this.brokenOption.yAxis.nameTextStyle = {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12,
+        };
         this.brokenOption.series[0].data = this.brokenData2;
         this.brokenOption.series[0].itemStyle.color = "#1ab395";
         this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -546,6 +570,11 @@ export default {
           },
         ];
       } else if (this.currentIndex === 2) {
+        this.brokenOption.yAxis.name = "度/吨";
+        this.brokenOption.yAxis.nameTextStyle = {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12,
+        };
         this.brokenOption.series[0].data = this.brokenData3;
         this.brokenOption.series[0].itemStyle.color = "#1f8dee";
         this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -620,12 +649,7 @@ export default {
         import("@/assets/excel/Export2Excel").then((excel) => {
           // 导出的excel表头字段名，需要导出表格字段名
           if (this.building == "所有") {
-            var tHeader = [
-              "日期",
-              "用水量(吨)",
-              "用电量(度)",
-              "单耗(度/吨)",
-            ]; // 导出的excel表头名信息 改参数
+            var tHeader = ["日期", "用水量(吨)", "用电量(度)", "单耗(度/吨)"]; // 导出的excel表头名信息 改参数
             var filterVal = [
               "curDate",
               "useHotWater",
@@ -714,7 +738,7 @@ export default {
         },
 
         grid: {
-          top: "4%",
+          top: "10%",
           left: "3%",
           right: "4%",
           bottom: "5%",

src/views/hotWater/energyAnalysis/components/temReport.vue

@@ -224,6 +224,11 @@ export default {
     },
     //渲染
     renderingBroken() {
+      this.brokenOption.yAxis.name = "℃";
+      this.brokenOption.yAxis.nameTextStyle = {
+        color: "rgba(255, 255, 255, 1)",
+        fontSize: 12,
+      };
       this.brokenOption.series[0].data = this.brokenData1;
       this.brokenOption.series[0].itemStyle.color = "#1f8dee";
       this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -432,7 +437,7 @@ export default {
         },
 
         grid: {
-          top: "4%",
+          top: "10%",
           left: "3%",
           right: "4%",
           bottom: "5%",

src/views/hotWater/energyAnalysis/components/waterReport.vue

@@ -223,6 +223,11 @@ export default {
     },
     //渲染
     renderingBroken() {
+      this.brokenOption.yAxis.name = "%";
+      this.brokenOption.yAxis.nameTextStyle = {
+        color: "rgba(255, 255, 255, 1)",
+        fontSize: 12,
+      };
       this.brokenOption.series[0].data = this.brokenData1;
       this.brokenOption.series[0].itemStyle.color = "#1f8dee";
       this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -432,7 +437,7 @@ export default {
         },
 
         grid: {
-          top: "4%",
+          top: "10%",
           left: "3%",
           right: "4%",
           bottom: "5%",

src/views/hotWater/energyQuery/components/energy.vue

@@ -160,6 +160,11 @@ export default {
     //
     getChartData() {
       if (this.currentIndex === 0) {
+        this.brokenOption.yAxis.name = "吨";
+        this.brokenOption.yAxis.nameTextStyle = {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12,
+        };
         this.brokenOption.series[0].data = this.brokenData1;
         this.brokenOption.series[0].itemStyle.color = "#1f8dee";
         this.brokenOption.series[0].areaStyle.color.colorStops = [
@@ -173,6 +178,11 @@ export default {
           },
         ];
       } else if (this.currentIndex === 1) {
+        this.brokenOption.yAxis.name = "度";
+        this.brokenOption.yAxis.nameTextStyle = {
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 12,
+        };
         this.brokenOption.series[0].data = this.brokenData2;
         this.brokenOption.series[0].itemStyle.color = "#1ab395";
         this.brokenOption.series[0].areaStyle.color.colorStops = [

src/views/hotWater/waterControl/index.vue

@@ -67,59 +67,64 @@
                 />
                 <div class="monitor-words">
                   <div class="words-li">
-                    <div class="ash">运行状态模式:</div>
+                    <div class="ash">开关控制:</div>
                     <div class="white">
-                      <el-select
+                      <el-switch
+                        style="display: block"
                         v-model="item.hotPumpStatus"
-                        placeholder="请选择"
+                        active-color="#13ce66"
+                        active-text="开机"
+                        inactive-text="关机"
                         @change="handleHotPump(item)"
                       >
-                        <el-option
-                          v-for="item in hotPumpOptions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        >
-                        </el-option>
-                      </el-select>
+                      </el-switch>
                     </div>
                   </div>
-                  <div class="words-li">
-                    <div class="ash">故障信息:</div>
-                    <el-tag
+                </div>
+              </div>
+              <div class="control-bottom">
+                <div class="words-li">
+                  <div class="ash">故障信息:</div>
+                  <el-tag
+                    size="mini"
+                    v-if="item.alarmStatus === '无故障'"
+                    type="success"
+                    >{{ item.alarmStatus }}</el-tag
+                  >
+                  <el-tag size="mini" v-else type="danger">{{
+                    item.alarmStatus
+                  }}</el-tag>
+                </div>
+                <div class="words-li">
+                  <div class="ash">运行状态:</div>
+                  <el-tag size="mini" v-if="item.hotPumpStatus" type="success"
+                    >开机</el-tag
+                  >
+                  <el-tag size="mini" v-else type="danger">关机</el-tag>
+                </div>
+                <div class="words-li">
+                  <div class="ash">实际温度:</div>
+                  <div class="white">{{ item.temp }}℃</div>
+                </div>
+                <div class="words-li">
+                  <div class="ash">设定温度:</div>
+                  <div class="white">
+                    <el-input
                       size="mini"
-                      v-if="item.alarmStatus === '无故障'"
-                      type="success"
-                      >{{ item.alarmStatus }}</el-tag
-                    >
-                    <el-tag size="mini" v-else type="danger">{{
-                      item.alarmStatus
-                    }}</el-tag>
-                  </div>
-                  <div class="words-li">
-                    <div class="ash">实际温度:</div>
-                    <div class="white">{{ item.temp }}℃</div>
-                  </div>
-                  <div class="words-li">
-                    <div class="ash">设定温度:</div>
-                    <div class="white">
-                      <el-input
-                        size="mini"
-                        v-model="item.tempSet"
-                        placeholder="请输入"
-                        @keyup.enter.native="
-                          handleEnter(
-                            item,
-                            item.tempSet,
-                            item.tempSetId,
-                            '设定温度',
-                            '℃'
-                          )
-                        "
-                        @input="handleInput(item)"
-                        @blur="handleBlur()"
-                      ></el-input>
-                    </div>
+                      v-model="item.tempSet"
+                      placeholder="请输入"
+                      @keyup.enter.native="
+                        handleEnter(
+                          item,
+                          item.tempSet,
+                          item.tempSetId,
+                          '设定温度',
+                          '℃'
+                        )
+                      "
+                      @input="handleInput(item)"
+                      @blur="handleBlur()"
+                    ></el-input>
                   </div>
                 </div>
               </div>
@@ -336,7 +341,7 @@
                           item.delayTimeSet,
                           item.delayTimeSetId,
                           '回水温度设定延时时间',
-                          'S'
+                          'min'
                         )
                       "
                       @input="handleInput(item)"
@@ -367,6 +372,25 @@
                       </el-switch>
                     </div>
                   </div>
+                  <div class="words-li words-li4">
+                    <div class="ash">最低液位设置值:</div>
+                    <el-input
+                      v-model="item.minSet"
+                      size="mini"
+                      @keyup.enter.native="
+                        handleEnter(
+                          item,
+                          item.minSet,
+                          item.minSetId,
+                          '最低液位设置值',
+                          '%'
+                        )
+                      "
+                      @input="handleInput(item)"
+                      @blur="handleBlur()"
+                    ></el-input>
+                    <div class="white">%</div>
+                  </div>
                 </div>
               </div>
               <div class="control-bottom">
@@ -488,7 +512,7 @@
                   <div class="ash">供水温度:</div>
                   <div class="white">{{ item.temp }}℃</div>
                 </div>
-                <div class="words-li words-li4">
+                <!-- <div class="words-li words-li4">
                   <div class="ash">供水温度设定:</div>
                   <el-input
                     v-model="item.tempSet"
@@ -506,12 +530,12 @@
                     @blur="handleBlur()"
                   ></el-input>
                   <div class="white">℃</div>
-                </div>
+                </div> -->
                 <div class="words-li words-li3">
                   <div class="ash">供水压力</div>
                   <div class="white">{{ item.pressure }}bar</div>
                 </div>
-                <div class="words-li words-li4">
+                <!-- <div class="words-li words-li4">
                   <div class="ash">温度偏差值:</div>
                   <el-input
                     v-model="item.diffValueSet"
@@ -529,7 +553,7 @@
                     size="mini"
                   ></el-input>
                   <div class="white">℃</div>
-                </div>
+                </div> -->
                 <div class="words-li words-li3">
                   <div class="ash">故障信息:</div>
                   <el-tag
@@ -593,15 +617,7 @@ export default {
           value: 0,
         },
         {
-          label: "制冷",
-          value: 2,
-        },
-        {
-          label: "制热",
-          value: 3,
-        },
-        {
-          label: "热水",
+          label: "开机",
           value: 4,
         },
       ],
@@ -768,7 +784,12 @@ export default {
               ...item,
               waterLevel: Number(item.waterLevel),
               runningStatus: Number(item.runningStatus) == 0 ? "停止" : "运行", //运行状态
-              hotPumpStatus: item.switchStatus, //热泵开关状态
+              hotPumpStatus:
+                Number(item.switchStatus) === 0
+                  ? false
+                  : Number(item.switchStatus) === 4
+                  ? true
+                  : "", // 热泵开关状态
               switchStatus: Number(item.switchStatus) == 0 ? false : true, //启停控制
               alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态
               handAutomaticSwitch:
@@ -829,7 +850,12 @@ export default {
                       waterLevel: Number(item.waterLevel),
                       runningStatus:
                         Number(item.runningStatus) == 0 ? "运行" : "停止", //运行状态
-                      hotPumpStatus: item.switchStatus, //热泵开关状态
+                      hotPumpStatus:
+                        Number(item.switchStatus) === 0
+                          ? false
+                          : Number(item.switchStatus) === 4
+                          ? true
+                          : "未知状态", // 热泵开关状态
                       switchStatus:
                         Number(item.switchStatus) == 0 ? false : true, //启停控制
                       alarmStatus:
@@ -933,26 +959,10 @@ export default {
     },
     // 设置热泵开关状态
     handleHotPump(item) {
-      // 记录原始状态
-      const originalStatus = item.hotPumpStatus;
-      // 根据 value 值获取对应的 label
-      let statusLabel = "";
-      switch (item.hotPumpStatus) {
-        case 0:
-          statusLabel = "关机";
-          break;
-        case 2:
-          statusLabel = "制冷";
-          break;
-        case 3:
-          statusLabel = "制热";
-          break;
-        case 4:
-          statusLabel = "热水";
-          break;
-      }
       this.$confirm(
-        `确定要切换设备"${item.name}"的状态为:${statusLabel} 吗?"`,
+        `确定要切换设备"${item.name}"的状态为:${
+          item.hotPumpStatus ? "开机" : "关机 吗?"
+        }`,
         "提示",
         {
           confirmButtonText: "确定",
@@ -961,11 +971,20 @@ export default {
         }
       )
         .then(() => {
-          this.hadleOperationConrol(item.switchStatusId, item.hotPumpStatus);
+          // 这里调用请求函数，示例中只是简单打印信息
+          console.log("请求后台", item.hotPumpStatus);
+          let param = null;
+          if (item.hotPumpStatus) {
+            param = 4;
+          } else {
+            param = 0;
+          }
+          console.log("参数", param);
+          this.hadleOperationConrol(item.switchStatusId, param);
         })
         .catch(() => {
-          // 用户取消操作，恢复状态
-          item.hotPumpStatus = originalStatus;
+          // 用户取消操作，恢复开关状态
+          item.switchStatus = !item.switchStatus;
         });
     },
     // 设置供水泵手自动状态

src/views/hotWater/waterMonitor/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="left-tree">
       <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
-      <div style="height: 5.08rem; overflow-y: auto">
+      <div style="height: 4.5rem; overflow-y: auto">
         <el-tree
           ref="tree"
           :data="treeData"
@@ -155,7 +155,144 @@
               alt=""
             />
             <!-- 热泵定位 -->
-            <img
+            <div :class="getHotPumPositionClass">
+              <div
+                class="hotPump-li"
+                v-for="(item, index) in tableData"
+                :key="index"
+              >
+                <template v-if="tableData.length === 2">
+                  <template v-if="index === 0">
+                    <div class="hotPump-name">{{ item.pumpName }}</div>
+                    <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
+                    <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                    <img
+                      class="tem2"
+                      src="../../../assets/flowimg/thermometer.png"
+                      alt=""
+                    />
+                    <div class="temContainer2">
+                      <div
+                        class="temprogress"
+                        :style="{ height: item.waterTemp + '%' }"
+                      ></div>
+                    </div>
+                    <b class="temdiv2">{{ item.waterTemp }}℃</b>
+                  </template>
+                  <template v-else>
+                    <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
+                    <div class="hotPump-name">{{ item.pumpName }}</div>
+                    <img
+                      class="tem2"
+                      src="../../../assets/flowimg/thermometer.png"
+                      alt=""
+                    />
+                    <div class="temContainer2">
+                      <div
+                        class="temprogress"
+                        :style="{ height: item.waterTemp + '%' }"
+                      ></div>
+                    </div>
+                    <b class="temdiv2">{{ item.waterTemp }}℃</b>
+                  </template>
+                </template>
+                <template v-else-if="tableData.length === 4">
+                  <template v-if="index < 2">
+                    <template v-if="index === 0">
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <img
+                        class="hotPump-img"
+                        :src="getImageSrc(item)"
+                        alt=""
+                      />
+                      <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                      <img
+                        class="tem2"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer2">
+                        <div
+                          class="temprogress"
+                          :style="{ height: item.waterTemp + '%' }"
+                        ></div>
+                      </div>
+                      <b class="temdiv2">{{ item.waterTemp }}℃</b>
+                    </template>
+                    <template v-else>
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <img
+                        class="hotPump-img"
+                        :src="getImageSrc(item)"
+                        alt=""
+                      />
+                      <img
+                        class="tem1"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer1">
+                        <div
+                          class="temprogress"
+                          :style="{ height: item.waterTemp + '%' }"
+                        ></div>
+                      </div>
+                      <b class="temdiv1">{{ item.waterTemp }}℃</b>
+                    </template>
+                  </template>
+                  <template v-else>
+                    <template v-if="index === 2">
+                      <img
+                        class="hotPump-img"
+                        :src="getImageSrc(item)"
+                        alt=""
+                      />
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                      <img
+                        class="tem2"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer2">
+                        <div
+                          class="temprogress"
+                          :style="{ height: item.waterTemp + '%' }"
+                        ></div>
+                      </div>
+                      <b class="temdiv2">{{ item.waterTemp }}℃</b>
+                    </template>
+                    <template v-else>
+                      <img
+                        class="hotPump-img"
+                        :src="getImageSrc(item)"
+                        alt=""
+                      />
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <img
+                        class="tem1"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer1">
+                        <div
+                          class="temprogress"
+                          :style="{ height: item.waterTemp + '%' }"
+                        ></div>
+                      </div>
+                      <b class="temdiv1">{{ item.waterTemp }}℃</b>
+                    </template>
+                  </template>
+                </template>
+              </div>
+            </div>
+            <!-- 热泵名称定位 -->
+            <!-- <div class="pumname">{{ this.pumname }}</div> -->
+            <!-- 热泵定位 -->
+            <!-- <img
               class="hotpum"
               v-if="this.hotPumState === '1' && this.isBad !== '1'"
               src="../../../assets/flowimg/starthotpum.png"
@@ -172,7 +309,7 @@
               v-else
               src="../../../assets/flowimg/closehotpum.png"
               alt=""
-            />
+            /> -->
             <!-- 无线网关定位 无状态。-->
             <img
               class="web"
@@ -189,30 +326,46 @@
               src="../../../assets/flowimg/waterBox.png"
               alt=""
             />
-            <!-- 热泵名称定位 -->
-            <div class="pumname">{{ this.pumname }}</div>
-            <!-- 温度定位 -->
-            <img
-              class="tem"
+            <!-- 温度定位1 -->
+            <!-- <img
+              class="tem1"
               src="../../../assets/flowimg/thermometer.png"
               alt=""
             />
-            <div class="temContainer">
+            <div class="temContainer1">
               <div class="temprogress" :style="{ height: temdata + '%' }"></div>
             </div>
-            <b class="temdiv">{{ temdata }}℃</b>
-            <!-- 水位定位 -->
-            <div class="progressContainer1" v-if="progress > 50">
-              <div class="progress" :style="{ height: progress + '%' }">
-                <!-- <b class="propo">{{ progress }}%</b> -->
-              </div>
-              <!-- 水位定位 -->
-              <b class="propo">{{ progress }}%</b>
+            <b class="temdiv1">{{ temdata }}℃</b> -->
+            <!-- 温度定位2 -->
+            <!-- <img
+              class="tem2"
+              src="../../../assets/flowimg/thermometer.png"
+              alt=""
+            />
+            <div class="temContainer2">
+              <div class="temprogress" :style="{ height: temdata + '%' }"></div>
+            </div>
+            <b class="temdiv2">{{ temdata }}℃</b> -->
+            <!-- 水位定位1 -->
+            <div class="progressContainer1" v-if="progress1 > 50">
+              <div class="progress" :style="{ height: progress1 + '%' }"></div>
+              <b class="propo">{{ progress1 }}%</b>
             </div>
             <div class="progressContainer2" v-else>
-              <div class="progress" :style="{ height: progress + '%' }"></div>
-              <b class="propo">{{ progress }}%</b>
+              <div class="progress" :style="{ height: progress1 + '%' }"></div>
+              <b class="propo">{{ progress1 }}%</b>
+            </div>
+            <div class="progressName1">{{ progressName1 }}</div>
+            <!-- 水位定位2 -->
+            <div class="progressContainer3" v-if="progress2 > 50">
+              <div class="progress" :style="{ height: progress2 + '%' }"></div>
+              <b class="propo">{{ progress2 }}%</b>
             </div>
+            <div class="progressContainer4" v-else>
+              <div class="progress" :style="{ height: progress2 + '%' }"></div>
+              <b class="propo">{{ progress2 }}%</b>
+            </div>
+            <div class="progressName2">{{ progressName2 }}</div>
           </div>
         </div>
         <div class="changecontent">
@@ -251,22 +404,42 @@
                 <span>{{ row.waterTemp }} </span>
               </template>
             </el-table-column>
+            <!-- 裙楼、高区 -->
+            <el-table-column
+              prop="levelSet1"
+              label="设置水位1(%)"
+              min-width="100"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.levelSet1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="waterLevel1"
+              label="实际水位1(%)"
+              min-width="100"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.waterLevel1 }} </span>
+              </template>
+            </el-table-column>
+            <!-- 中厨、中区 -->
             <el-table-column
-              prop="levelSet"
-              label="设置水位(%)"
+              prop="levelSet2"
+              label="设置水位2(%)"
               min-width="100"
             >
               <template slot-scope="{ row }">
-                <span>{{ row.levelSet }}</span>
+                <span>{{ row.levelSet2 }}</span>
               </template>
             </el-table-column>
             <el-table-column
-              prop="waterLevel"
-              label="实际水位(%)"
+              prop="waterLevel2"
+              label="实际水位2(%)"
               min-width="100"
             >
               <template slot-scope="{ row }">
-                <span>{{ row.waterLevel }} </span>
+                <span>{{ row.waterLevel2 }} </span>
               </template>
             </el-table-column>
             <el-table-column prop="upWaterState1" label="供水泵1状态">
@@ -313,7 +486,7 @@
 </template>
 
 <script>
-import { spaceTree } from "@/api/region";
+import { floorTree } from "@/api/region";
 import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor";
 export default {
   data() {
@@ -345,19 +518,43 @@ export default {
       // 网关在线状态 0表示离线 1表示在线
       webstate: 1,
       // 水位变化数值
-      progress: 0,
+      progress1: 0,
+      progress2: 0,
+      progressName1: "",
+      progressName2: "",
       // 温度变化数值
       temdata: 0,
       // 热泵名称
       pumname: "",
     };
   },
+  computed: {
+    getHotPumPositionClass() {
+      if (this.tableData.length === 4) {
+        return "hotPumPosition-four";
+      } else if (this.tableData.length === 2) {
+        return "hotPumPosition-two";
+      }
+      return "";
+    },
+  },
   mounted() {
     this.getSysBuild();
   },
   methods: {
+    getImageSrc(item) {
+      console.log("item", item);
+      if (item.runState === "1" && item.isFault !== "1") {
+        // 使用 require 函数导入图片
+        return require("@/assets/flowimg/starthotpum.png");
+      } else if (item.isFault === "1") {
+        return require("@/assets/flowimg/badhotpum.png");
+      } else {
+        return require("@/assets/flowimg/closehotpum.png");
+      }
+    },
     getSysBuild() {
-      spaceTree().then((res) => {
+      floorTree().then((res) => {
         if (res.code == 200) {
           // 只需要保留热水的系统
           console.log("楼栋返回值", res);
@@ -397,6 +594,13 @@ export default {
               console.log("当前选中节点ID", this.currentId);
               console.log("当前选中节点层级", this.currentLevel);
               console.log("当前选中节点名称", this.currentName);
+              if (this.currentName === "-1楼") {
+                this.progressName1 = "裙楼";
+                this.progressName2 = "中厨";
+              } else if (this.currentName === "3楼") {
+                this.progressName1 = "高区";
+                this.progressName2 = "中区";
+              }
               this.baseMessgae();
               this.sysStatus();
             }
@@ -488,6 +692,13 @@ export default {
         this.baseMessgae();
         this.sysStatus();
       }
+      if (this.currentName === "-1楼") {
+        this.progressName1 = "裙楼";
+        this.progressName2 = "中厨";
+      } else if (this.currentName === "3楼") {
+        this.progressName1 = "高区";
+        this.progressName2 = "中区";
+      }
     },
     handleClick(tab, event) {
       console.log(tab, event);
@@ -497,7 +708,8 @@ export default {
     handlerow(row, event, column) {
       console.log("row", row);
       //水位 温度 热泵名称
-      this.progress = row.waterLevel;
+      this.progress1 = row.waterLevel1;
+      this.progress2 = row.waterLevel2;
       this.temdata = row.waterTemp;
       this.pumname = row.pumpName;
       // 热泵状态 是否故障
@@ -690,7 +902,7 @@ export default {
         margin-bottom: 20px;
       }
       .base-height {
-        height: 2.02rem;
+        height: 2.6rem;
         overflow-y: auto;
         .base-li {
           margin-bottom: 20px;
@@ -787,8 +999,8 @@ export default {
 
           .text7 {
             position: absolute;
-            top: 2.6rem;
-            left: 5.6rem;
+            top: 3.1rem;
+            left: 5.75rem;
             z-index: 1;
           }
           .text8 {
@@ -802,7 +1014,7 @@ export default {
             position: absolute;
             top: 0.7rem;
             left: 0rem;
-            width:2.55rem;
+            width: 2.55rem;
             height: 0.34rem;
             z-index: 1;
           }
@@ -821,7 +1033,7 @@ export default {
             top: 1.5rem;
             left: 4.8rem;
             width: 3.5rem;
-            height: 0.7rem;
+            height: 1.2rem;
           }
 
           .coolpum {
@@ -861,7 +1073,7 @@ export default {
             width: 1rem;
             height: 0.78rem;
             position: absolute;
-            top: 1.68rem;
+            top: 2.15rem;
             left: 5.64rem;
           }
 
@@ -881,23 +1093,50 @@ export default {
             right: 0.36rem;
           }
 
-          .tem {
-            width: 0.8rem;
-            height: 1.5rem;
+          .tem1 {
+            width: 0.6rem;
+            height: 1.15rem;
             position: absolute;
-            top: 1.68rem;
-            left: 4rem;
+            top: 2.25rem;
+            left: 3.2rem;
             z-index: 3;
           }
 
-          .temContainer {
-            width: 0.076rem;
-            height: 0.84rem;
+          .tem2 {
+            width: 0.6rem;
+            height: 1.15rem;
+            position: absolute;
+            top: 2.25rem;
+            left: 4.51rem;
+            z-index: 3;
+          }
+
+          .temContainer1 {
+            width: 0.06rem;
+            height: 0.65rem;
+            background-color: #02072d;
+            // background-color: #11aaea;
+            position: absolute;
+            top: 2.63rem;
+            left: 3.46rem;
+            z-index: 3;
+
+            .temprogress {
+              background-color: #d22727;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+          }
+          .temContainer2 {
+            width: 0.06rem;
+            height: 0.65rem;
             background-color: #02072d;
             // background-color: #11aaea;
             position: absolute;
-            top: 2.17rem;
-            left: 4.36rem;
+            top: 2.63rem;
+            left: 4.77rem;
             z-index: 3;
 
             .temprogress {
@@ -918,30 +1157,40 @@ export default {
             z-index: 2;
           }
 
-          .temdiv {
+          .temdiv1 {
             font-size: 0.15rem;
             line-height: 0.18rem;
             letter-spacing: 0.01rem;
             color: #d22727;
             position: absolute;
-            top: 3.26rem;
-            left: 4.3rem;
+            top: 2.15rem;
+            left: 3.2rem;
+            z-index: 3;
+          }
+          .temdiv2 {
+            font-size: 0.15rem;
+            line-height: 0.18rem;
+            letter-spacing: 0.01rem;
+            color: #d22727;
+            position: absolute;
+            top: 2.15rem;
+            left: 4.5rem;
             z-index: 3;
           }
 
           .progressContainer1 {
-            width: 0.42rem;
-            height: 2.03rem;
+            width: 0.3rem;
+            height: 1.7rem;
             background-color: #dff1fa;
             margin-left: 2%;
             position: absolute;
-            top: 1.47rem;
-            left: 2.6rem;
+            top: 1.8rem;
+            left: 2.8rem;
             border: solid 0.01rem #11aaea;
             z-index: 3;
 
             .progress {
-              background-color: #1c89ee;
+              background-color: #1167db;
               width: 100%;
               position: absolute;
               bottom: 0;
@@ -961,13 +1210,73 @@ export default {
           }
 
           .progressContainer2 {
-            width: 0.42rem;
-            height: 2.03rem;
+            width: 0.3rem;
+            height: 1.7rem;
             background-color: #dff1fa;
             margin-left: 2%;
             position: absolute;
-            top: 1.45rem;
-            left: 2.6rem;
+            top: 1.8rem;
+            left: 2.8rem;
+            border: solid 0.01rem red;
+            z-index: 3;
+
+            .progress {
+              background-color: red;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+          .progressContainer3 {
+            width: 0.3rem;
+            height: 1.7rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.8rem;
+            left: 4.2rem;
+            border: solid 0.01rem #11aaea;
+            z-index: 3;
+
+            .progress {
+              background-color: #1167db;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+          .progressContainer4 {
+            width: 0.3rem;
+            height: 1.7rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.8rem;
+            left: 4.2rem;
             border: solid 0.01rem red;
             z-index: 3;
 
@@ -990,6 +1299,30 @@ export default {
               z-index: 3;
             }
           }
+          .progressName1 {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #0a3797;
+            position: absolute;
+            top: 2rem;
+            left: 2.6rem;
+            z-index: 3;
+          }
+          .progressName2 {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #0a3797;
+            position: absolute;
+            top: 2rem;
+            left: 4rem;
+            z-index: 3;
+          }
 
           .pumname {
             font-size: 0.17rem;
@@ -1003,14 +1336,240 @@ export default {
             left: 8.8rem;
             z-index: 1;
           }
+          /* 四个元素时的样式 */
+          .hotPumPosition-four {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+            position: absolute;
+            top: 0.7rem;
+            left: 7.8rem;
+            z-index: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            width: 2.3rem !important;
+            .hotPump-li {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              width: 50% !important;
+              position: relative;
+              // margin-bottom: 0.2rem;
+              .hotPump-img {
+                width: 1rem;
+                height: 1rem;
+                margin: 0.1rem 0;
+              }
+              .hotPump-tem1 {
+                position: absolute;
+                bottom: 0.2rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .hotPump-tem2 {
+                position: absolute;
+                bottom: 0.4rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .tem1 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: 1rem;
+                z-index: 3;
+              }
+              .tem2 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: -0.3rem;
+                z-index: 3;
+              }
+              .temContainer2 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv2 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+              .temContainer1 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: 1.18rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv1 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: 1.1rem;
+                z-index: 3;
+              }
+            }
+          }
+          /* 两个元素时的样式 */
+          .hotPumPosition-two {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+            position: absolute;
+            top: 0.7rem;
+            left: 7.8rem;
+            z-index: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            width: 1.2rem !important;
+            .hotPump-li {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              width: 100% !important;
+              position: relative;
+              // margin-bottom: 0.2rem;
+              .hotPump-img {
+                width: 1rem;
+                height: 1rem;
+                margin: 0.1rem 0;
+              }
+              .hotPump-tem1 {
+                position: absolute;
+                bottom: 0.2rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .hotPump-tem2 {
+                position: absolute;
+                bottom: 0.4rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .tem2 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: -0.3rem;
+                z-index: 3;
+              }
+              .temContainer2 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv2 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+              .temContainer1 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv1 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+            }
+          }
         }
       }
 
       .changecontent {
         background: #142c4e;
         border-radius: 6px;
-        height: 300px;
-        padding: 15px 10px 0 10px;
+        height: 310px;
+        padding: 15px 10px 10px 10px;
         overflow: hidden;
         margin-top: 30px;
 
@@ -1076,7 +1635,7 @@ export default {
       margin-bottom: 0.2rem !important;
     }
     .base-height {
-      height: 2.02rem !important;
+      height: 2.6rem !important;
       .base-li {
         margin-bottom: 0.2rem !important;
         .deepColor {
@@ -1088,8 +1647,8 @@ export default {
   }
   .changecontent {
     border-radius: 0.06rem !important;
-    height: 3rem !important;
-    padding: 0.15rem 0.1rem 0 0.1rem !important;
+    height: 3.1rem !important;
+    padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
     margin-top: 0.3rem !important;
 
     .tablemaeta {

src/views/index.vue

@@ -119,15 +119,33 @@
         <div class="special-top">
           <div class="special-title">冷源系统</div>
         </div>
-        <view-cold-sys></view-cold-sys>
+        <view-energy></view-energy>
       </div>
     </div>
     <div class="project-bie">
       <div class="special-div">
         <div class="special-top">
-          <div class="special-title">能耗分析</div>
+          <div class="special-title">冷源能耗</div>
         </div>
-        <view-energy></view-energy>
+        <view-cold-sys :subData="coldSys"></view-cold-sys>
+      </div>
+      <div class="special-div">
+        <div class="special-top">
+          <div class="special-title">热水系统</div>
+        </div>
+        <hot-water :subData="hotWaterSys"></hot-water>
+      </div>
+      <div class="special-div">
+        <div class="special-top">
+          <div class="special-title">风柜系统</div>
+        </div>
+        <airc-and-windc-meter :subData="airAndWindSys"></airc-and-windc-meter>
+      </div>
+      <div class="special-div">
+        <div class="special-top">
+          <div class="special-title">温度系统</div>
+        </div>
+        <tem-meter :subData="temSys"></tem-meter>
       </div>
     </div>
     <el-dialog
@@ -166,12 +184,26 @@
 <script>
 import * as echarts from "echarts";
 import { imgUrl } from "@/utils/global";
-import { introduction, changeLogo, viewProfile } from "@/api/index";
+import {
+  introduction,
+  changeLogo,
+  viewProfile,
+  viewMainParams,
+} from "@/api/index";
 import viewEnergy from "./components/viewEnergy.vue";
 import ViewColdSys from "./components/viewColdSys.vue";
+import HotWater from "./components/hotWater.vue";
+import AircAndWindcMeter from "./components/aircAndWindcMeter.vue";
+import TemMeter from "./components/temMeter.vue";
 
 export default {
-  components: { viewEnergy, ViewColdSys },
+  components: {
+    viewEnergy,
+    ViewColdSys,
+    HotWater,
+    AircAndWindcMeter,
+    TemMeter,
+  },
   data() {
     return {
       imgUrl: "",
@@ -203,11 +235,18 @@ export default {
       chartsData1: null,
       chartsData2: null,
       isShowHome: true,
+
+      //传给子组件的数据
+      coldSys: [],
+      hotWaterSys: [],
+      airAndWindSys: [],
+      temSys: [],
     };
   },
   mounted() {
     this.getProject();
     this.getHomeData();
+    this.getSubData();
     // this.initChart();
     // window.addEventListener("resize", this.screenAdapter);
     // this.screenAdapter();
@@ -474,7 +513,7 @@ export default {
       //手动的调用图标对象的resize才能产生效果
       this.chartInstance.resize();
     },
-    // 近30天楼栋用水
+    //
     getChartsData() {
       const now = new Date();
       const startDate = new Date(
@@ -547,6 +586,34 @@ export default {
         }
       });
     },
+    // 请求的数据
+    getSubData() {
+      viewMainParams().then((res) => {
+        console.log("系统参数返回", res);
+        console.log("冷源监控返回", res.rows[0]);
+        this.coldSys = [];
+        this.hotWaterSys = [];
+        this.airAndWindSys = [];
+        this.temSys = [];
+        if (res.code == 200 && res.rows) {
+          res.rows.forEach((val) => {
+            if (val.name.includes("冷源")) {
+              this.coldSys = val.values;
+              console.log("this.coldSys111111111111", this.coldSys);
+            }
+            if (val.name.includes("热水")) {
+              this.hotWaterSys = val.values;
+            }
+            if (val.name.includes("风柜")) {
+              this.airAndWindSys = val.values;
+            }
+            if (val.name.includes("温度")) {
+              this.temSys = val.values;
+            }
+          });
+        }
+      });
+    },
   },
 };
 </script>
@@ -653,7 +720,28 @@ export default {
   align-items: stretch;
   justify-content: space-between;
   .special-div {
-    width: 100%;
+    width: 24.5%;
+  }
+}
+@media (max-width: 1485px) {
+  .overview-li {
+      width: calc(33.33%) !important;
+      height: 2rem !important;
+      background-size: 2rem 2rem !important;
+      margin-bottom: 0.3rem;
+      font-size: 0.22rem !important;
+      .overview-details {
+        font-size: 0.27rem !important;
+      }
+    }
+  .project-bie {
+    flex-wrap: wrap !important;
+    .special-div {
+      width: 49.5% !important;
+      margin-bottom: 0.25rem;
+    }
   }
 }
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {}
 </style>

src/views/region/index.vue

@@ -241,6 +241,7 @@
                   v-model="dialogForm.systemType"
                   placeholder="选择系统类型"
                   clearable
+                  filterable
                 >
                   <el-option
                     v-for="dict in dict.type.sys_type"
@@ -467,6 +468,7 @@
                   v-model="dialogForm.status"
                   placeholder="请选择状态"
                   clearable
+                  filterable
                 >
                   <el-option label="正常" value="0" />
                   <el-option

src/views/system/menu/index.vue

@@ -570,14 +570,14 @@ export default {
 /* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
 @media (max-width: 2000px) {
   ::v-deep .el-dialog {
-    width: 680px !important;
+    width: 700px !important;
   }
   ::v-deep .el-form-item--medium .el-form-item__content {
     width: 100%;
   }
 
   ::v-deep .el-dialog .el-form-item__label {
-    width: 120px !important;
+    width: 140px !important;
   }
   ::v-deep .el-dialog .el-form-item {
     display: flex;
@@ -591,7 +591,7 @@ export default {
   }
 
   ::v-deep .el-dialog .el-form-item__label {
-    width: 1.2rem !important;
+    width: 1.4rem !important;
   }
   ::v-deep .el-dialog .el-form-item {
     display: flex;