From 2b78ecf97aea37d474c78a110f110270d90ce8eb Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Fri, 22 May 2026 16:49:24 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E4=B8=BB=E6=9C=BA=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=E5=86=85=E5=AE=B9=202.=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D=203.=E9=A6=96=E9=A1=B5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=A9=BA=E8=B0=83=E5=86=B7=E6=BA=90=E7=B3=BB=E7=BB=9FEER?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .env.production                               |   2 +-
 package.json                                  |   2 +-
 src/api/index.js                              |   7 +
 src/assets/styles/bigScreen.scss              |  20 +
 src/store/modules/permission.js               |   6 +-
 .../centerairC/sysMonitor/hostDetails.vue     | 556 +++++-------
 .../centerairC/sysMonitor/monitorCenter.vue   |  10 +-
 src/views/components/sysEnergy.vue            | 798 ++++++++++++++++++
 ...{monitorCenter.vue => hrMonitorCenter.vue} |   0
 .../heatRecoverySys/deviceMonitor/index.vue   |   2 +-
 src/views/index.vue                           | 440 +++++-----
 src/views/login.vue                           |   2 +-
 vue.config.js                                 |   2 +-
 14 files changed, 1273 insertions(+), 576 deletions(-)
 create mode 100644 src/views/components/sysEnergy.vue
 rename src/views/heatRecoverySys/deviceMonitor/{monitorCenter.vue => hrMonitorCenter.vue} (100%)

diff --git a/.env.development b/.env.development
index 9579ac2..5a51382 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 铭汉空压热回收系统
+VUE_APP_TITLE = 铭汉节能岛系统
 
 # 开发环境配置
 ENV = 'development'
diff --git a/.env.production b/.env.production
index 87530e2..c1927c5 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 铭汉空压热回收系统
+VUE_APP_TITLE = 铭汉节能岛系统
 
 # 生产环境配置
 ENV = 'production'
diff --git a/package.json b/package.json
index b229024..7b20fa1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mh",
   "version": "3.8.8",
-  "description": "铭汉空压热回收系统",
+  "description": "铭汉节能岛系统",
   "author": "铭汉",
   "license": "MIT",
   "scripts": {
diff --git a/src/api/index.js b/src/api/index.js
index 8d33f89..c35f435 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -53,3 +53,10 @@ export function ersDatas(query) {
     params: query,
   });
 }
+// 空调系统eer
+export function getCoeData() {
+  return request({
+    url: "/pro/overview/getCoe",
+    method: "get",
+  });
+}
\ No newline at end of file
diff --git a/src/assets/styles/bigScreen.scss b/src/assets/styles/bigScreen.scss
index db29366..f7edabe 100644
--- a/src/assets/styles/bigScreen.scss
+++ b/src/assets/styles/bigScreen.scss
@@ -749,6 +749,26 @@
   // 首页
   .project-data {
     margin: 0.16rem 0 !important;
+
+    .sysBg {
+      border-radius: 0.08rem !important;
+
+      .sysBg-title {
+        padding: 0.12rem 0.16rem !important;
+        font-size: 0.16rem !important;
+        letter-spacing: 0.02rem !important;
+
+        &::before {
+          width: 0.03rem !important;
+        }
+
+        &::after {
+          right: 0.12rem !important;
+          width: 0.08rem !important;
+          height: 0.08rem !important;
+        }
+      }
+    }
   }
   .form-header {
     font-size: 0.15rem !important;
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 1e63170..06336dc 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -102,11 +102,11 @@ const permission = {
             // 定义要添加的多个路由对象数组
             const additionalRoutes2 = [
               {
-                path: "/monitorCenter",
-                name: "monitorCenter",
+                path: "/hrMonitorCenter",
+                name: "hrMonitorCenter",
                 hidden: true,
                 component: () =>
-                  import("@/views/heatRecoverySys/deviceMonitor/monitorCenter"),
+                  import("@/views/heatRecoverySys/deviceMonitor/hrMonitorCenter"),
                 meta: { title: "系统监测", icon: "screen" },
               },
               // 可以继续添加更多路由对象
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index bb6dbdc..3c60bdf 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -1,102 +1,37 @@
 <template>
   <div class="monitor" v-loading="loading">
     <div class="monitor-top">
-      <img
-        class="title-left"
-        src="../../../assets/images/title-left.png"
-        alt=""
-      />
-      <img
-        class="title-center"
-        @click="goSys"
-        src="../../../assets/images/title-center.png"
-        alt=""
-      />
-      <img
-        class="title-right"
-        src="../../../assets/images/title-right.png"
-        alt=""
-      />
+      <img class="title-left" src="../../../assets/images/title-left.png" alt="" />
+      <img class="title-center" @click="goSys" src="../../../assets/images/title-center.png" alt="" />
+      <img class="title-right" src="../../../assets/images/title-right.png" alt="" />
       <div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
       <!-- logo -->
       <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
       <div class="nowTime">{{ formattedDate }}</div>
       <div class="monitor-time">已监测时长:{{ dayData }}天</div>
-      <img
-        class="icon_warning"
-        src="../../../assets/images/warning.png"
-        title="报警记录"
-        @click="goWarning"
-        v-if="isShowWarning"
-        alt=""
-      />
-      <img
-        class="icon_home"
-        src="../../../assets/images/icon_home.png"
-        title="首页"
-        @click="goSys"
-        alt=""
-      />
-      <img
-        class="back-icon"
-        src="../../../assets/images/back-icon.png"
-        title="返回"
-        @click="goBack"
-        alt=""
-      />
+      <img class="icon_warning" src="../../../assets/images/warning.png" title="报警记录" @click="goWarning"
+        v-if="isShowWarning" alt="" />
+      <img class="icon_home" src="../../../assets/images/icon_home.png" title="首页" @click="goSys" alt="" />
+      <img class="back-icon" src="../../../assets/images/back-icon.png" title="返回" @click="goBack" alt="" />
     </div>
     <div class="host-detail">
       <div class="detail-top">
         <div class="detail-top-left">
-          <img
-            class="host-img1"
-            src="../../../assets/images/host-img3.png"
-            alt=""
-            v-if="isMagnetic === 'true'"
-          />
-          <img
-            class="host-img1"
-            src="../../../assets/images/host-img6.png"
-            alt=""
-            v-if="deviceName === '1号螺杆机'"
-          />
-          <img
-            class="host-img1"
-            src="../../../assets/images/host-img4.png"
-            alt=""
-            v-if="deviceName === '2号离心机'"
-          />
+          <img class="host-img1" src="../../../assets/images/host-img3.png" alt="" v-if="isMagnetic === 'true'" />
+          <img class="host-img1" src="../../../assets/images/host-img6.png" alt="" v-if="deviceName === '1号螺杆机'" />
+          <img class="host-img1" src="../../../assets/images/host-img4.png" alt="" v-if="deviceName === '2号离心机'" />
           <div class="host-name">{{ deviceName }}</div>
           <!-- 冷凝器蒸发器压力-->
           <div class="outIn">
-            <!-- <div class="outIn-li in1">
-              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
-              <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
-            </div>
-            <div class="outIn-li out1">
-              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
-              <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
-            </div> -->
-            <!-- <div class="outIn-li in2">
-              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
-              <div class="kpa">566.6kpa</div>
-            </div>
-            <div class="outIn-li out2">
-              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
-              <div class="kpa">566.6kpa</div>
-            </div> -->
+
           </div>
           <!-- 运行状态 -->
-          <img
-            src="../../../assets/images/fan-img.png"
-            :class="{
-              moveClass: hostListClass('1'),
-              fanBlade: isMagnetic === 'true',
-              rightFan1: deviceName === '1号螺杆机',
-              rightFan2: deviceName === '2号离心机',
-            }"
-            alt=""
-          />
+          <img src="../../../assets/images/fan-img.png" :class="{
+            moveClass: hostListClass('1'),
+            fanBlade: isMagnetic === 'true',
+            rightFan1: deviceName === '1号螺杆机',
+            rightFan2: deviceName === '2号离心机',
+          }" alt="" />
           <!-- 启停状态 -->
           <div class="startClass" v-if="hostListClass('2')"></div>
           <!-- 冷冻冷却水流信号 -->
@@ -105,63 +40,34 @@
               <span>冷却水流:</span>
               <span v-if="hostListClass('21')">接通</span>
               <span v-else>断开</span>
-              <span
-                class="break"
-                :class="{ connect: hostListClass('21') }"
-              ></span>
+              <span class="break" :class="{ connect: hostListClass('21') }"></span>
             </div>
             <div class="water-flow-li">
               <span>冷冻水流:</span>
               <span v-if="hostListClass('20')">接通</span>
               <span v-else>断开</span>
-              <span
-                class="break"
-                :class="{ connect: hostListClass('20') }"
-              ></span>
+              <span class="break" :class="{ connect: hostListClass('20') }"></span>
             </div>
           </div>
           <div class="hostStatus">
             <div class="hostStatus-li">
-              <span>远程启动信号:</span>
-              <span class="automaticData">{{ onOffObj.curValue }}</span>
+              <span>本地远程信号:</span>
+              <span class="automaticData" :class="onOffObj.curValue === '远程' ? 'remoteData' : 'localData'">{{
+                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" v-if="isMagnetic === 'true'">
-              <span>用户冷冻水控制点:</span>
-              <span class="goodData">{{ coldWaterControlObj.curValue }}℃</span>
-              <!-- <span class="badData" v-else>{{ coldWaterControlObj.curValue }}</span> -->
-            </div>
+
             <div class="hostStatus-li" v-if="isMagnetic === 'true'">
-              <span>冷水设定值偏移:</span>
-              <!-- <span class="goodData">{{ offsetValuerControlObj.curValue }}℃</span> -->
+              <span>蒸发器出水温度:</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
-              >
+                <el-input v-model="evaporatorOutletWaterObj.curValue" size="mini" @keyup.enter.native="
+                  handleEnter(evaporatorOutletWaterObj, $event)
+                  " @input="handleInput(evaporatorOutletWaterObj.curValue)" @blur="handleBlur()">
+                  <template #suffix>℃</template></el-input></span>
             </div>
-            <div class="hostStatus-li" v-if="isMagnetic === 'true'">
-              <span>最终冷冻水温度设定值:</span>
-              <span class="goodData">{{ finalColdWaterTemp }}℃</span>
-            </div>
-            <!-- <div class="hostStatus-li2" @click="openTimeSwitch">
-              偏移值定时设置
-            </div> -->
           </div>
           <!-- 负载 -->
           <LoadData class="loadData" :hostData="hostData"></LoadData>
@@ -179,22 +85,15 @@
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
-            <div
-              class="detail-data-li"
-              v-for="(item, index) in rightHostData"
-              :key="index"
-            >
+            <div class="detail-data-li" v-for="(item, index) in rightHostData" :key="index">
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ item.otherName }}:</span>
-                  <span
-                    :class="{
-                      dotData: !isSpecialValue(item.curValue),
-                      goodData: isSpecialValue(item.curValue),
-                      badData: item.curValue === '故障',
-                    }"
-                    >{{ 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>
@@ -210,22 +109,15 @@
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
-            <div
-              class="detail-data-li"
-              v-for="(subItem, subIndex) in compressorData1.list"
-              :key="subIndex"
-            >
+            <div class="detail-data-li" v-for="(subItem, subIndex) in compressorData1.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 :class="{
+                    dotData: !isSpecialValue(subItem.curValue),
+                    goodData: isSpecialValue(subItem.curValue),
+                    badData: subItem.curValue === '故障',
+                  }">{{ subItem.curValue }}</span>
                   <span>{{ subItem.unit }}</span>
                 </div>
               </div>
@@ -241,29 +133,22 @@
             <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="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 :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 compressor">
           <div class="detail-data-top">
             <title-img></title-img>
             <div class="choice">
@@ -272,38 +157,25 @@
             <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="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 :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> -->
       </div>
     </div>
     <!-- 定时开关内容 -->
-    <el-dialog
-      title="偏移值定时设置"
-      :visible.sync="isOpenTimeSwitch"
-      append-to-body
-      width="800px"
-      class="custom-dialog"
-    >
+    <el-dialog title="偏移值定时设置" :visible.sync="isOpenTimeSwitch" append-to-body width="800px" class="custom-dialog">
       <div class="dialog-content">
         <div class="device-container" v-loading="loading">
           <div class="device-li">
@@ -315,93 +187,52 @@
             <div class="device-name">最终设定值</div>
             <div class="device-name">启动状态</div>
           </div>
-          <div
-            class="device-li"
-            v-for="(item, index) in delayList"
-            :key="index"
-            :class="{ highlight: item.name.includes(currentWeekday) }"
-          >
+          <div class="device-li" v-for="(item, index) in delayList" :key="index"
+            :class="{ highlight: item.name.includes(currentWeekday) }">
             <div class="device-name">{{ item.name }}</div>
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayOpenHour"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'openHour', $event)
-                    "
-                    @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
-                  ></el-input> </el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.delayOpenHour" @keyup.enter.native="
+                    handleSwitchEnter(item, 'openHour', $event)
+                    " @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"></el-input> </el-form-item></el-form>
               <div class="slip">:</div>
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayOpenMinute"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'openMinute', $event)
-                    "
-                    @input="
+                  <el-input size="mini" v-model="item.delayOpenMinute" @keyup.enter.native="
+                    handleSwitchEnter(item, 'openMinute', $event)
+                    " @input="
                       handleSwitchInput(item, 'delayOpenMinute', 'minute')
-                    "
-                  ></el-input> </el-form-item
-              ></el-form>
+                      "></el-input> </el-form-item></el-form>
             </div>
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayCloseHour"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'closeHour', $event)
-                    "
-                    @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
-                  ></el-input></el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.delayCloseHour" @keyup.enter.native="
+                    handleSwitchEnter(item, 'closeHour', $event)
+                    " @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"></el-input></el-form-item></el-form>
               <div class="slip">:</div>
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayCloseMinute"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'closeMinute', $event)
-                    "
-                    @input="
+                  <el-input size="mini" v-model="item.delayCloseMinute" @keyup.enter.native="
+                    handleSwitchEnter(item, 'closeMinute', $event)
+                    " @input="
                       handleSwitchInput(item, 'delayCloseMinute', 'minute')
-                    "
-                  ></el-input></el-form-item
-              ></el-form>
+                      "></el-input></el-form-item></el-form>
             </div>
             <!-- 三个值，偏移值可输入 -->
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.offsetValue"
-                    @keyup.enter.native="
-                      handleOffsetValueEnter(item, 'offset', $event)
-                    "
-                    @input="handleSwitchInput(item, 'offsetValue', 'offset')"
-                  ></el-input></el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.offsetValue" @keyup.enter.native="
+                    handleOffsetValueEnter(item, 'offset', $event)
+                    " @input="handleSwitchInput(item, 'offsetValue', 'offset')"></el-input></el-form-item></el-form>
             </div>
             <div class="device-name">{{ item.curValue }}</div>
             <div class="device-name">{{ item.finalOutWaterTemp }}</div>
             <div class="device-name">
-              <el-switch
-                style="display: block"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
-                active-text="开启"
-                inactive-text="停用"
-                v-model="item.delayStatus"
-                @change="handleSwitchStatus(item)"
-              >
+              <el-switch style="display: block" active-color="#13ce66" inactive-color="#ff4949" active-text="开启"
+                inactive-text="停用" v-model="item.delayStatus" @change="handleSwitchStatus(item)">
               </el-switch>
             </div>
           </div>
@@ -438,15 +269,16 @@ export default {
       currentDate: new Date(),
       nowTimer: null,
       deviceName: "", //主机名称
-      hostData: [], //主机参数
+      hostData: [], //过滤后主机参数
+      allHostData: [], //所有主机参数
       condenserPre: "", //冷凝器压力
       evaporatorPre: "", //蒸发器压力
       rightHostData: [], //右
-      onOffObj: {}, //远程开关机
+      onOffObj: {}, //本地远程
       timeObj: {}, //累计运行时间
-      coldWaterSetObj: {}, //本地出水温度设定值
-      coldWaterControlObj: {}, //远程出水温度设定值
-      offsetValuerControlObj: {}, //偏移值设定
+
+
+      evaporatorOutletWaterObj: {}, //蒸发器出水温度设置
       compressorData1: [], //压缩机1参数
       compressorData2: [],
       compressorData3: [],
@@ -482,19 +314,8 @@ export default {
       const weekDay = weekDays[this.currentDate.getDay()];
       return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
     },
-    finalColdWaterTemp() {
-      const coldWaterValue =
-        this.coldWaterControlObj.curValue === ""
-          ? 0
-          : parseFloat(this.coldWaterControlObj.curValue);
-      const offsetValue =
-        this.offsetValuerControlObj.curValue === ""
-          ? 0
-          : parseFloat(this.offsetValuerControlObj.curValue);
-      return coldWaterValue + offsetValue;
-    },
   },
-  created() {},
+  created() { },
   mounted() {
     this.getHostDetailsData();
     this.getAlarnStatus();
@@ -626,13 +447,29 @@ export default {
                 const isCombinedCondition3 =
                   Number(item.paramType) === 12 &&
                   item.otherName.includes("冷冻水偏移值设置");
+                const isCombinedCondition4 =
+                  Number(item.paramType) === 22 &&
+                  item.otherName.includes("本地远程");
+                const isCombinedCondition5 =
+                  Number(item.paramType) === 20 &&
+                  item.otherName.includes("蒸发器水流信号");
+                const isCombinedCondition6 =
+                  Number(item.paramType) === 21 &&
+                  item.otherName.includes("冷凝器水流信号");
+                const isCombinedCondition7 =
+                  Number(item.paramType) === 14 &&
+                  item.otherName.includes("蒸发器出水温度设置");
                 // 返回 false 表示要排除该元素
                 return (
                   !isSpecificParamType &&
                   !isCombinedCondition0 &&
                   !isCombinedCondition1 &&
                   !isCombinedCondition2 &&
-                  !isCombinedCondition3
+                  !isCombinedCondition3 &&
+                  !isCombinedCondition4 &&
+                  !isCombinedCondition5 &&
+                  !isCombinedCondition6 &&
+                  !isCombinedCondition7
                 );
               });
               // 根据 ordernum 进行排序
@@ -643,42 +480,19 @@ export default {
                 //左边主机参数 根据不同的 paramType 处理 showValue
                 if (
                   item.paramType === "22" &&
-                  item.otherName.includes("远程启动信号")
+                  item.otherName.includes("本地远程")
                 ) {
-                  // 远程开关机-手动启停
-                  // item.showValue =
-                  //   Number(item.curValue) === 0 ? "自动" : "手动";
                   this.onOffObj = item;
                 } else if (item.paramType === "26") {
                   // 累计运行时间
                   this.timeObj = item;
                 } else if (
-                  item.paramType === "12" &&
-                  item.otherName.includes("冷水控制设定值")
-                ) {
-                  // 本地出水温度设定值
-                  this.coldWaterSetObj = item;
-                } else if (
-                  item.paramType === "12" &&
-                  item.otherName.includes("用户冷水设定值")
-                ) {
-                  // 远程出水温度设定值
-                  this.coldWaterControlObj = item;
-                } else if (
-                  item.paramType === "12" &&
-                  item.otherName.includes("冷冻水偏移值设置")
+                  item.paramType === "14" &&
+                  item.otherName.includes("蒸发器出水温度设置")
                 ) {
-                  // 远程出水温度设定值
-                  this.offsetValuerControlObj = item;
-                  // 检查 curValue 属性是否存在且为有效的数字
-                  if (
-                    this.offsetValuerControlObj.curValue !== undefined &&
-                    !isNaN(parseFloat(this.offsetValuerControlObj.curValue))
-                  ) {
-                    // 将 curValue 转换为整数并除以 10
-                    this.offsetValuerControlObj.curValue =
-                      parseInt(this.offsetValuerControlObj.curValue, 10) / 10;
-                  }
+                  // 蒸发器出水温度设置
+                  this.evaporatorOutletWaterObj = item;
+
                 }
               });
             }
@@ -862,7 +676,7 @@ export default {
       let input = String(item);
       // 如果输入为空，直接设置并返回
       if (input === "") {
-        this.offsetValuerControlObj.curValue = "";
+        this.evaporatorOutletWaterObj.curValue = "";
         return;
       }
 
@@ -900,7 +714,7 @@ export default {
 
       // 如果过滤后为空，设置空值并返回
       if (filteredInput === "") {
-        this.offsetValuerControlObj.curValue = "";
+        this.evaporatorOutletWaterObj.curValue = "";
         return;
       }
 
@@ -910,12 +724,12 @@ export default {
       // 检查输入是否在 0 到 10 之间（包含小数）
       if (!isNaN(numInput) && numInput >= 0 && numInput <= 10) {
         // 在范围内，设置过滤后的值
-        this.offsetValuerControlObj.curValue = filteredInput;
+        this.evaporatorOutletWaterObj.curValue = filteredInput;
       } else {
         // 如果输入不在有效范围内，给出警告并恢复上一次的有效值
         this.$modal.msgWarning("只能输入0-10之间且最多一位小数的数值");
         // 恢复为上一次的有效值或清空
-        this.offsetValuerControlObj.curValue = "";
+        this.evaporatorOutletWaterObj.curValue = "";
       }
     },
     // 失去焦点
@@ -931,7 +745,7 @@ export default {
       // 失去焦点
       event.target.blur();
       this.$confirm(
-        `确定要修改冷水设定值偏移的温度为:${item.curValue} ℃吗?`,
+        `确定要修改蒸发器出水温度设置为:${item.curValue} ℃吗?`,
         "提示",
         {
           confirmButtonText: "确定",
@@ -1070,7 +884,7 @@ export default {
                   // 计算最终出水温度设置值
                   const offsetValue =
                     delayItem.offsetValue !== null &&
-                    delayItem.offsetValue !== ""
+                      delayItem.offsetValue !== ""
                       ? parseFloat(delayItem.offsetValue)
                       : NaN;
                   const curValue =
@@ -1285,8 +1099,7 @@ export default {
     // 启用状态
     handleSwitchStatus(item) {
       this.$confirm(
-        `确定要切换"${item.name}"的状态为:${
-          item.delayStatus ? "开启" : "停用 吗?"
+        `确定要切换"${item.name}"的状态为:${item.delayStatus ? "开启" : "停用 吗?"
         }`,
         "提示",
         {
@@ -1552,7 +1365,7 @@ export default {
         .hostStatus {
           z-index: 10;
           position: absolute;
-          top: 0.6rem;
+          top: 1rem;
           left: 4.9rem;
           display: flex;
           flex-direction: column;
@@ -1655,8 +1468,7 @@ export default {
           width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
-          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
-            rotateY(40deg);
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg) rotateY(40deg);
         }
 
         .rightFan1 {
@@ -1667,19 +1479,18 @@ export default {
           width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
-          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
-            rotateY(40deg);
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg) rotateY(40deg);
         }
+
         .rightFan2 {
-         z-index: 10;
+          z-index: 10;
           position: absolute;
           top: 2.4rem;
           left: 4.2rem;
           width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
-          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
-            rotateY(40deg);
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg) rotateY(40deg);
         }
 
         .moveClass {
@@ -1713,7 +1524,7 @@ export default {
 
     .detail-bottom {
       // height: 5rem;
-      margin-top: 0.3rem;
+      // margin-top: 0.3rem;
       margin-left: 0.25rem;
       display: flex;
       flex-direction: row;
@@ -1763,28 +1574,20 @@ export default {
             font-size: 0.18rem;
             position: relative;
             margin-bottom: 0.2rem;
-            border-left: 0.01rem solid #217df5;
-            border-right: 0.01rem solid #217df5;
-            background-image: radial-gradient(
-                circle at left top,
+            border-left: 1px solid #217df5;
+            border-right: 1px solid #217df5;
+            background-image: radial-gradient(circle at left top,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at right top,
+                transparent 0.01rem),
+              radial-gradient(circle at right top,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at left bottom,
+                transparent 0.01rem),
+              radial-gradient(circle at left bottom,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at right bottom,
+                transparent 0.01rem),
+              radial-gradient(circle at right bottom,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              );
+                transparent 0.01rem);
             background-repeat: no-repeat;
             background-position: left top, right top, left bottom, right bottom;
           }
@@ -1795,21 +1598,21 @@ export default {
             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%
-            );
+            height: 1px;
+            background-image: linear-gradient(to right,
+                #217df5 0%,
+                rgba(41, 128, 185, 0) 50%,
+                #217df5 100%);
           }
 
           .detail-data-li::before {
             top: 0;
+            transform: scaleY(0.5);
           }
 
           .detail-data-li::after {
             bottom: 0;
+            transform: scaleY(0.5);
           }
 
           .rightDot {
@@ -1827,6 +1630,24 @@ export default {
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
+
+            span {
+              text-align: center;
+
+              &:first-child {
+                flex: 2;
+                text-align: left;
+              }
+
+              &:nth-child(2) {
+                flex: 1;
+              }
+
+              &:last-child {
+                flex: 0.6;
+                text-align: right;
+              }
+            }
           }
 
           .rightDot::before {
@@ -1838,11 +1659,9 @@ export default {
             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%
-            );
+            background-image: radial-gradient(circle at 30% 30%,
+                rgba(255, 255, 255, 0.8) 0%,
+                rgba(255, 255, 255, 0) 70%);
             border-radius: 50%;
             z-index: 10;
           }
@@ -1856,11 +1675,9 @@ export default {
             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%
-            );
+            background-image: radial-gradient(circle at 30% 30%,
+                rgba(255, 255, 255, 0.8) 0%,
+                rgba(255, 255, 255, 0) 70%);
             border-radius: 50%;
             z-index: 10;
           }
@@ -1876,11 +1693,9 @@ export default {
             border-radius: 50%;
             z-index: 10;
             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%
-            );
+            background-image: radial-gradient(circle at 30% 30%,
+                rgba(255, 255, 255, 0.8) 0%,
+                rgba(255, 255, 255, 0) 70%);
           }
 
           .leftDot::after {
@@ -1893,11 +1708,9 @@ export default {
             background-color: #217df5;
             z-index: 10;
             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%
-            );
+            background-image: radial-gradient(circle at 30% 30%,
+                rgba(255, 255, 255, 0.8) 0%,
+                rgba(255, 255, 255, 0) 70%);
             border-radius: 50%;
           }
         }
@@ -1909,9 +1722,10 @@ export default {
       }
 
       .hostparams {
-        width: 7rem;
+        width: 10rem;
 
         .detail-data-bottom {
+
           // padding-left: 0.5rem;
           .detail-data-li {
             // width: 3.2rem;
@@ -1922,9 +1736,10 @@ export default {
       }
 
       .compressor {
-        width: 3.5rem;
+        width: 4.5rem;
 
         .detail-data-bottom {
+
           // padding-left: 0.75rem;
           .detail-data-li {
             // width: 3.4rem;
@@ -1981,6 +1796,16 @@ export default {
   color: #da7b10;
 }
 
+/** 本地信号颜色（橙色） */
+.localData {
+  color: #da7b10;
+}
+
+/** 远程信号颜色（青蓝色） */
+.remoteData {
+  color: #68ff5a;
+}
+
 .timeData {
   font-weight: bold;
   margin: 0 0.06rem;
@@ -1988,31 +1813,32 @@ export default {
 }
 </style>
 <style scoped>
-.goodData >>> .el-input--mini {
+.goodData>>>.el-input--mini {
   font-size: 0.16rem !important;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
-.goodData >>> .el-input {
+.goodData>>>.el-input {
   width: 1rem !important;
 }
-.goodData >>> .el-input--suffix .el-input__inner {
+
+.goodData>>>.el-input--suffix .el-input__inner {
   padding-right: 0.3rem !important;
 }
 
-.goodData >>> .el-input--mini .el-input__inner {
+.goodData>>>.el-input--mini .el-input__inner {
   height: 0.28rem !important;
   line-height: 20.28rem !important;
 }
 
-.goodData >>> .el-input__inner {
+.goodData>>>.el-input__inner {
   font-weight: bold;
   box-shadow: none !important;
 }
 
-.goodData >>> .el-input__suffix {
+.goodData>>>.el-input__suffix {
   font-weight: bold;
   right: 0.05rem !important;
   height: 100% !important;
@@ -2032,7 +1858,7 @@ export default {
   margin: 0 5px;
 }
 
-.device-name >>> .el-form {
+.device-name>>>.el-form {
   width: 50px !important;
   display: flex;
   flex-direction: row;
@@ -2041,11 +1867,11 @@ export default {
   flex-wrap: nowrap;
 }
 
-.device-name >>> .el-form-item {
+.device-name>>>.el-form-item {
   margin-bottom: 0 !important;
 }
 
-.device-name >>> .el-input {
+.device-name>>>.el-input {
   width: 50px !important;
 }
 
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
index 7699513..33aea14 100644
--- a/src/views/centerairC/sysMonitor/monitorCenter.vue
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -70,17 +70,17 @@
           <div class="weather-li">
             <span>全年EER：</span>
             <span class="deepColor">{{ performanceObj.yearEER }}</span>
-            <span>kw</span>
+            <span>kwh/kwh</span>
           </div>
           <div class="weather-li">
             <span>全年用电：</span>
             <span class="deepColor">{{ performanceObj.yearPower }}</span>
-            <span>kw/h</span>
+            <span>kwh</span>
           </div>
           <div class="weather-li">
             <span>全年产冷：</span>
             <span class="deepColor">{{ performanceObj.yearCold }}</span>
-            <span>kw</span>
+            <span>kwh</span>
           </div>
         </div>
       </div>
@@ -3709,7 +3709,7 @@ export default {
   .performance {
     position: absolute;
     top: 6.4rem !important;
-    right: -1rem !important;
+    right: -1.3rem !important;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -3718,7 +3718,7 @@ export default {
   }
 
   .perdformance-bg {
-    width: 2.9rem;
+    width: 3.2rem;
     z-index: 10;
     display: flex;
     flex-direction: column;
diff --git a/src/views/components/sysEnergy.vue b/src/views/components/sysEnergy.vue
new file mode 100644
index 0000000..a7d92f0
--- /dev/null
+++ b/src/views/components/sysEnergy.vue
@@ -0,0 +1,798 @@
+<template>
+    <div class="sys_content">
+        <div class="sys_charts" ref="sys_charts"></div>
+        <div class="score">
+            <div class="excellent">优秀</div>
+            <div class="good">良好</div>
+            <div class="bad">差</div>
+            <div class="improve">需要改进</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getCoeData } from "@/api/index";
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            data1: "0",
+            data2: "0",
+            data3: "0",
+            data4: "0",
+            data5: "0",
+            chartInstance2: null,
+            option2: {},
+        }
+    },
+    mounted() {
+        this.getCoe()
+        this.initChart2();
+        this.screenAdapter2();
+        window.addEventListener("resize", this.screenAdapter2);
+        // this.nowData()
+    },
+    destroyed() {
+        //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+        window.removeEventListener("resize", this.screenAdapter2);
+    },
+    methods: {
+        // 根据值和仪表盘颜色区间获取对应颜色
+        getGaugeColor(value, min, max, colorRanges) {
+            // 确保value为数字类型
+            const numValue = Number(value);
+            if (isNaN(numValue) || numValue <= min) {
+                // 值为0或无效时，返回第一个区间的颜色
+                return colorRanges[0][1];
+            }
+            // 将实际值转为百分比 [0, 1]
+            const percent = (numValue - min) / (max - min);
+            // 遍历颜色区间，找到当前值所在的区间
+            for (let i = 0; i < colorRanges.length; i++) {
+                if (percent <= colorRanges[i][0]) {
+                    return colorRanges[i][1];
+                }
+            }
+            // 超出范围返回最后一个颜色
+            return colorRanges[colorRanges.length - 1][1];
+        },
+        //初始化chartInstance2对象 折线图
+        initChart2() {
+            const titleFontSize = this.$refs.sys_charts.offsetWidth / 180;
+            this.chartInstance2 = echarts.init(this.$refs.sys_charts);
+            this.option2 = {
+                tooltip: { //弹窗组件
+                    formatter: "{a} <br/>{b} : {c}"
+                },
+                // 设置仪表盘的背景颜色  整个cavas
+                // backgroundColor: "#f5f5f5",
+                series: [
+                    {  //主机
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        radius: "65%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
+                        center: ["48%", "40%"],
+                        startAngle: 180,
+                        endAngle: 0,
+                        clockWise: true,
+                        min: 0,
+                        max: 15,
+                        splitNumber: 4,        // 仪表盘刻度的分割段数,默认 10。
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.2,
+                            length: titleFontSize,
+                            show: true,             // 是否显示刻度(线),默认 true。
+                            splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
+                            lineStyle: {            // 刻度线样式。
+                                color: "auto",              //线的颜色,默认 #eee。
+                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
+                                width: titleFontSize * 0.1,
+                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
+                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
+                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
+                            },
+                        },
+                        pointer: {
+                            length: '40%', // 指针长度
+                            width: titleFontSize * 0.4,
+                            offsetCenter: ['0', '-20%'], // 详情位置的偏移量
+                            itemStyle: {
+                                color: 'auto'// 指针颜色自动匹配轴线颜色
+                            }
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize,
+                                color: [ // 轴线颜色区间，可以设置不同的颜色渐变区间
+                                    [0.35, '#ffb219'],
+                                    [0.38, '#00be97'],
+                                    [1, '#208fff'],
+                                ]
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,
+                            show: true,             // 是否显示分隔线,默认 true。
+                            length: titleFontSize,
+                            lineStyle: {            // 分隔线样式。
+                                color: "auto",              //线的颜色,默认 #eee。
+                                opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
+                                width: titleFontSize * 0.2,
+                                type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
+                                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
+                                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
+                            },
+                        },
+                        axisLabel: {
+                            show: true,             // 是否显示标签,默认 true。
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,
+                            color: 'inherit',
+                        },
+                        title: {
+                            color: '#ffffff',
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['-30%', '20%'],//设置文字位置
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            animationDuration: 2000,
+                            color: '#c5fff3',
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['28%', '20%'], // 设置数字位置
+                        },
+                        data: [{
+                            value: 0,
+                            name: '主机'
+                        }]
+                    },
+                    {//冷却塔
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        radius: "65%",
+                        center: ["48%", "90%"],
+                        startAngle: 180,
+                        endAngle: 0,
+                        clockWise: true,
+                        min: 0,
+                        max: 120,
+                        splitNumber: 4,
+                        axisTick: {
+                            distance: titleFontSize * 0.2,
+                            show: true,
+                            splitNumber: 5,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.1,
+                                type: "solid",
+                            },
+                        },
+                        pointer: {
+                            length: '40%',
+                            width: titleFontSize * 0.4, // 指针宽度
+                            offsetCenter: [0, '-25%'],
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                width: titleFontSize,
+                                color: [
+                                    [0.407, '#ffb219'],
+                                    [0.446, '#00be97'],
+                                    [1, '#208fff'],
+                                ]
+                            }
+                        },
+                        splitLine: {
+                            distance: titleFontSize * 0.35,
+                            show: true,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.2,
+                                type: "solid",
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            fontSize: titleFontSize * 1.5, //刻度线数字字体大小
+                            distance: titleFontSize * 1.5,
+                            color: 'inherit',
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['-33%', '20%'],
+                            color: '#ffffff'
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            animationDuration: 2000,
+                            color: '#c5fff3',
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['28%', '20%'], // 设置数字位置
+                        },
+                        data: [{
+                            value: 0,
+                            name: "冷却塔"
+                        }]
+                    },
+                    {//系统能效
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        detail: { formatter: '{value}' },
+                        radius: "90%",
+                        center: ["15%", "55%"],
+                        startAngle: 225,
+                        endAngle: -45,
+                        clockWise: true,
+                        min: 0,
+                        max: 10,
+                        splitNumber: 4,
+                        axisTick: {
+                            distance: titleFontSize * 0.4,
+                            show: true,
+                            splitNumber: 5,
+                            length: titleFontSize * 1.2,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.2,
+                                type: "solid",
+                            },
+                        },
+                        axisLabel: {
+                            color: 'inherit',
+                            fontSize: titleFontSize * 1.8,
+                            distance: titleFontSize * 3,
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.6,
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                width: titleFontSize * 1.6,
+                                color: [
+                                    [0.35, '#ee5e5e'],
+                                    [0.415, '#ffb219'],
+                                    [0.5, '#00be97'],
+                                    [1, '#208fff'],
+                                ],
+                            }
+                        },
+                        splitLine: {
+                            distance: titleFontSize * 0.35,
+                            show: true,
+                            length: titleFontSize * 2,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.2,
+                                type: "solid",
+                            }
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2.6,
+                            color: '#ffffff',
+                            offsetCenter: ['-25%', '90%'],//设置文字位置
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            animationDuration: 2000,
+                            color: '#c5fff3',
+                            fontSize: titleFontSize * 2.6,
+                            offsetCenter: ['35%', '90%'], // 设置数字位置
+                        },
+                        data: [{
+                            value: 0,
+                            name: '系统EER',
+                        }]
+                    },
+                    {//冷冻泵
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        radius: "65%",
+                        center: ["75%", "40%"],
+                        startAngle: 180,
+                        endAngle: 0,
+                        clockWise: true,
+                        min: 0,
+                        max: 100,
+                        splitNumber: 4,
+                        axisTick: {
+                            distance: titleFontSize * 0.2,
+                            show: true,
+                            splitNumber: 5,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.1,
+                                type: "solid",
+                            },
+                        },
+                        pointer: {
+                            length: '40%',
+                            width: titleFontSize * 0.4, // 指针宽度
+                            offsetCenter: [0, '-20%'],
+                            // width: 3.5, // 指针宽度
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                width: titleFontSize,
+                                color: [
+                                    [0.417, '#ffb219'],
+                                    [0.459, '#00be97'],
+                                    [1, '#208fff'],
+                                ]
+                            }
+                        },
+                        splitLine: {
+                            show: true,
+                            distance: titleFontSize * 0.35,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.2,
+                                type: "solid",
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,
+                            color: 'inherit',
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['-33%', '20%'],
+                            color: '#ffffff'
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            animationDuration: 2000,
+                            color: '#c5fff3',
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['28%', '20%'], // 设置数字位置
+                        },
+                        data: [{
+                            value: 0,
+                            name: '冷冻泵'
+                        }]
+                    },
+                    {//冷却泵
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        radius: "65%",
+                        center: ["75%", "90%"],
+                        startAngle: 180,
+                        endAngle: 0,
+                        clockWise: true,
+                        min: 0,
+                        max: 100,
+                        splitNumber: 4,
+                        axisTick: {
+                            distance: titleFontSize * 0.2,
+                            show: true,
+                            splitNumber: 5,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.1,
+                                type: "solid",
+                            },
+                        },
+                        pointer: {
+                            length: '40%',
+                            width: titleFontSize * 0.4,// 指针宽度
+                            offsetCenter: [0, '-20%'],
+                            itemStyle: {
+                                color: 'auto'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                width: titleFontSize,
+                                color: [
+                                    [0.417, '#ffb219'],
+                                    [0.459, '#00be97'],
+                                    [1, '#208fff'],
+                                ]
+                            }
+                        },
+                        splitLine: {
+                            distance: titleFontSize * 0.35,
+                            show: true,
+                            length: titleFontSize,
+                            lineStyle: {
+                                color: "auto",
+                                opacity: 1,
+                                width: titleFontSize * 0.2,
+                                type: "solid",
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,
+                            color: 'inherit',
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['-33%', '20%'],
+                            color: '#ffffff'
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            animationDuration: 2000,
+                            color: '#c5fff3',
+                            fontSize: titleFontSize * 2,
+                            offsetCenter: ['28%', '20%'], // 设置数字位置
+                        },
+                        data: [{
+                            value: 0,
+                            name: "冷却泵"
+                        }]
+
+                    }
+                ]
+            };
+            //把配置项给实例对象
+            this.chartInstance2.setOption(this.option2, true);
+        },
+        // 定时器
+        nowData() {//把option.series[0].data[0].value的值使用random()方法获取一个随机数
+            const v0 = (Math.random() * 7).toFixed(2);
+            const v1 = (Math.random() * 10).toFixed(2);
+            const v2 = (Math.random() * 2).toFixed(2);
+            const v3 = (Math.random() * 2).toFixed(2);
+            const v4 = (Math.random() * 10).toFixed(2);
+
+            // 根据值动态设置 detail 颜色
+            const color0 = this.getGaugeColor(v0, 0, 15, [[0.35, '#ffb219'], [0.38, '#00be97'], [1, '#208fff']]);
+            const color1 = this.getGaugeColor(v1, 0, 120, [[0.407, '#ffb219'], [0.446, '#00be97'], [1, '#208fff']]);
+            const color2 = this.getGaugeColor(v2, 0, 10, [[0.35, '#ee5e5e'], [0.415, '#ffb219'], [0.5, '#00be97'], [1, '#208fff']]);
+            const color3 = this.getGaugeColor(v3, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]);
+            const color4 = this.getGaugeColor(v4, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]);
+
+            // 使用 merge 模式更新，确保 detail.color 生效
+            this.chartInstance2.setOption({
+                series: [
+                    { detail: { color: color0 }, data: [{ value: v0 }] },
+                    { detail: { color: color1 }, data: [{ value: v1 }] },
+                    { detail: { color: color2 }, data: [{ value: v2 }] },
+                    { detail: { color: color3 }, data: [{ value: v3 }] },
+                    { detail: { color: color4 }, data: [{ value: v4 }] },
+                ]
+            });
+            setInterval(this.nowData, 100000);
+            this.clear();
+        },
+        clear() {
+            clearInterval(this.nowData);
+            this.nowData = null;
+        },
+        screenAdapter2() {
+            const titleFontSize = this.$refs.sys_charts.offsetWidth / 180;
+            const adapterOption = {
+                series: [
+                    {  //主机
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.2,         //刻度线离边缘的距离
+                            length: titleFontSize,              // 刻度线长。支持相对半径的百分比,默认 8。
+                            lineStyle: {            // 刻度线样式。
+                                width: titleFontSize * 0.1,                   //线度,默认 1。
+                            },
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.4, // 指针宽度
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize,                  //轴线宽度,默认 30。
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,     //分割线离边缘的距离
+                            length: titleFontSize,             // 分隔线线长。支持相对半径的百分比,默认 30。
+                            lineStyle: {            // 分隔线样式。
+                                width: titleFontSize * 0.2,                 //线度,默认 2。
+                            },
+                        },
+                        axisLabel: {
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,            // 标签与刻度线的距离,默认 5。
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                        },
+                        detail: {
+                            fontSize: titleFontSize * 2,
+                        },
+                    },
+                    {  //冷却塔
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.2,         //刻度线离边缘的距离
+                            length: titleFontSize,              // 刻度线长。支持相对半径的百分比,默认 8。
+                            lineStyle: {            // 刻度线样式。
+                                width: titleFontSize * 0.1,                   //线度,默认 1。
+                            },
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.4, // 指针宽度
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize,                  //轴线宽度,默认 30。
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,     //分割线离边缘的距离
+                            length: titleFontSize,             // 分隔线线长。支持相对半径的百分比,默认 30。
+                            lineStyle: {            // 分隔线样式。
+                                width: titleFontSize * 0.2,                 //线度,默认 2。
+                            },
+                        },
+                        axisLabel: {
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,            // 标签与刻度线的距离,默认 5。
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                        },
+                        detail: {
+                            fontSize: titleFontSize * 2,
+                        },
+                    },
+                    {  //系统能效
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.4,         //刻度线离边缘的距离
+                            length: titleFontSize * 1.2,              // 刻度线长。支持相对半径的百分比,默认 8。
+                            lineStyle: {            // 刻度线样式。
+                                width: titleFontSize * 0.2,                   //线度,默认 1。
+                            },
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.6, // 指针宽度
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize * 1.6,                  //轴线宽度,默认 30。
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,     //分割线离边缘的距离
+                            length: titleFontSize * 2,             // 分隔线线长。支持相对半径的百分比,默认 30。
+                            lineStyle: {            // 分隔线样式。
+                                width: titleFontSize * 0.2,                 //线度,默认 2。
+                            },
+                        },
+                        axisLabel: {
+                            fontSize: titleFontSize * 1.8,
+                            distance: titleFontSize * 3,           // 标签与刻度线的距离,默认 5。
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2.6,
+                        },
+                        detail: {
+                            fontSize: titleFontSize * 2.6,
+                        },
+                    },
+                    {  //冷冻泵
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.2,         //刻度线离边缘的距离
+                            length: titleFontSize,              // 刻度线长。支持相对半径的百分比,默认 8。
+                            lineStyle: {            // 刻度线样式。
+                                width: titleFontSize * 0.1,                   //线度,默认 1。
+                            },
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.4, // 指针宽度
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize,                  //轴线宽度,默认 30。
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,     //分割线离边缘的距离
+                            length: titleFontSize,             // 分隔线线长。支持相对半径的百分比,默认 30。
+                            lineStyle: {            // 分隔线样式。
+                                width: titleFontSize * 0.2,                 //线度,默认 2。
+                            },
+                        },
+                        axisLabel: {
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,            // 标签与刻度线的距离,默认 5。
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                        },
+                        detail: {
+                            fontSize: titleFontSize * 2,
+                        },
+                    },
+                    {  //冷却泵
+                        name: '实时EER系数',
+                        type: 'gauge',
+                        axisTick: {             // 刻度(线)样式。
+                            distance: titleFontSize * 0.2,         //刻度线离边缘的距离
+                            length: titleFontSize,              // 刻度线长。支持相对半径的百分比,默认 8。
+                            lineStyle: {            // 刻度线样式。
+                                width: titleFontSize * 0.1,                   //线度,默认 1。
+                            },
+                        },
+                        pointer: {
+                            width: titleFontSize * 0.4, // 指针宽度
+                        },
+                        axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
+                            lineStyle: {            // 仪表盘轴线样式。
+                                width: titleFontSize,                  //轴线宽度,默认 30。
+                            }
+                        },
+                        splitLine: {            // 分隔线样式。
+                            distance: titleFontSize * 0.35,     //分割线离边缘的距离
+                            length: titleFontSize,             // 分隔线线长。支持相对半径的百分比,默认 30。
+                            lineStyle: {            // 分隔线样式。
+                                width: titleFontSize * 0.2,                 //线度,默认 2。
+                            },
+                        },
+                        axisLabel: {
+                            fontSize: titleFontSize * 1.5,
+                            distance: titleFontSize * 1.5,            // 标签与刻度线的距离,默认 5。
+                        },
+                        title: {
+                            fontSize: titleFontSize * 2,
+                        },
+                        detail: {
+                            fontSize: titleFontSize * 2,
+                        },
+                    },]
+            };
+            this.chartInstance2.setOption(adapterOption);
+            this.chartInstance2.resize();
+        },
+        // 系统系数
+        getCoe() {
+            getCoeData().then((res) => {
+                console.log("系统系数返回", res)
+                if (res.code == 200) {
+                    this.data1 = res.rows[0].sysCoe || this.data1;
+                    this.data2 = res.rows[0].chillerCoe || this.data2;
+                    this.data3 = res.rows[0].chillPumpCoe || this.data3;
+                    this.data4 = res.rows[0].coolPumpCoe || this.data4;
+                    this.data5 = res.rows[0].towerCoe || this.data5;
+
+                    // 主机
+                    const color0 = this.getGaugeColor(this.data2, 0, 15, [[0.35, '#ffb219'], [0.38, '#00be97'], [1, '#208fff']]);
+                    this.option2.series[0].data[0].value = this.data2;
+                    this.option2.series[0].detail.color = color0;
+
+                    // 冷却塔
+                    const color1 = this.getGaugeColor(this.data5, 0, 120, [[0.407, '#ffb219'], [0.446, '#00be97'], [1, '#208fff']]);
+                    this.option2.series[1].data[0].value = this.data5;
+                    this.option2.series[1].detail.color = color1;
+
+                    // 系统EER
+                    const color2 = this.getGaugeColor(this.data1, 0, 10, [[0.35, '#ee5e5e'], [0.415, '#ffb219'], [0.5, '#00be97'], [1, '#208fff']]);
+                    this.option2.series[2].data[0].value = this.data1;
+                    this.option2.series[2].detail.color = color2;
+
+                    // 冷冻泵
+                    const color3 = this.getGaugeColor(this.data3, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]);
+                    this.option2.series[3].data[0].value = this.data3;
+                    this.option2.series[3].detail.color = color3;
+
+                    // 冷却泵
+                    const color4 = this.getGaugeColor(this.data4, 0, 100, [[0.417, '#ffb219'], [0.459, '#00be97'], [1, '#208fff']]);
+                    this.option2.series[4].data[0].value = this.data4;
+                    this.option2.series[4].detail.color = color4;
+
+                    // 使用 merge 模式更新，确保 detail.color 生效
+                    this.chartInstance2.setOption({
+                        series: [
+                            { detail: { color: color0 }, data: [{ value: this.data2, name: '主机' }] },
+                            { detail: { color: color1 }, data: [{ value: this.data5, name: '冷却塔' }] },
+                            { detail: { color: color2 }, data: [{ value: this.data1, name: '系统EER' }] },
+                            { detail: { color: color3 }, data: [{ value: this.data3, name: '冷冻泵' }] },
+                            { detail: { color: color4 }, data: [{ value: this.data4, name: '冷却泵' }] },
+                        ]
+                    });
+                }
+            })
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.sys_content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+    height:3rem;
+    padding: 20px;
+
+    .sys_charts {
+        width: 90%;
+        height: 2.5rem;
+        margin-bottom: -0.9rem;
+    }
+
+    .score {
+        width: 10%;
+        height: 100%;   
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 0.18rem;
+        color: #ffffff;
+        margin: 10px;
+
+        .excellent,
+        .good,
+        .bad,
+        .improve {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-bottom: 0.1rem;
+            white-space: nowrap;
+        }
+
+        .excellent::before,
+        .good::before,
+        .bad::before,
+        .improve::before {
+            display: block;
+            content: '';
+            width: 0.15rem;
+            height: 0.14rem;
+            margin-right: 0.16rem;
+        }
+
+        .excellent::before {
+            background-color: #208fff;
+        }
+
+        .good::before {
+            background-color: #00be97;
+        }
+
+        .bad::before {
+            background-color: #ffb219;
+        }
+
+        .improve::before {
+            background-color: #ee5e5e;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue b/src/views/heatRecoverySys/deviceMonitor/hrMonitorCenter.vue
similarity index 100%
rename from src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
rename to src/views/heatRecoverySys/deviceMonitor/hrMonitorCenter.vue
diff --git a/src/views/heatRecoverySys/deviceMonitor/index.vue b/src/views/heatRecoverySys/deviceMonitor/index.vue
index 8177448..054d015 100644
--- a/src/views/heatRecoverySys/deviceMonitor/index.vue
+++ b/src/views/heatRecoverySys/deviceMonitor/index.vue
@@ -11,7 +11,7 @@ export default {
     toPage() {
       console.log("需要跳转的");
       // 跳转到高校导航大屏展示
-      this.$router.push("/monitorCenter");
+      this.$router.push("/hrMonitorCenter");
     },
   },
 };
diff --git a/src/views/index.vue b/src/views/index.vue
index 78e5186..c1cdf50 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -5,42 +5,25 @@
         <div class="special-title">项目简介</div>
       </div>
       <div class="project-all">
-        <img
-          class="project-img"
-          :src="imgUrl + projectObj.logo"
-          @click="showDialog"
-          alt="Base64 Image"
-        />
+        <img class="project-img" :src="imgUrl + projectObj.logo" @click="showDialog" alt="Base64 Image" />
         <div class="project-li">
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon1.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon1.png" alt="" />
               <div class="project-name">项目名称</div>
             </div>
             <div class="project-right">{{ projectObj.proName }}</div>
           </div>
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon2.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon2.png" alt="" />
               <div class="project-name">建筑面积</div>
             </div>
             <div class="project-right">{{ projectObj.buildingArea }}m³</div>
           </div>
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon3.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
               <div class="project-name">运营地址</div>
             </div>
             <div class="project-right">{{ projectObj.proAddr }}</div>
@@ -49,11 +32,7 @@
         <div class="project-li">
           <div class="list-con">
             <div class="project-left">
-              <img
-                class="left-icon"
-                src="../assets/images/project-icon3.png"
-                alt=""
-              />
+              <img class="left-icon" src="../assets/images/project-icon3.png" alt="" />
               <div class="project-name">项目运行开始时间</div>
             </div>
             <div class="project-right">{{ projectObj.operateStartTime }}</div>
@@ -61,185 +40,139 @@
         </div>
       </div>
     </div>
-    <div class="project-data">
-      <div class="special-div" style="width: 49.4%">
-        <div class="special-top">
-          <div class="special-title">出水温度</div>
-        </div>
-        <div class="overview">
-          <div class="overview-li" @click="goEnergy">
-            <div>离心机高温出水温度</div>
-            <div
-              class="overview-details"
-              v-html="getTempDisplay('离心机高温出水温度', outWaterTemperature)"
-            ></div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>中温换热出水温度</div>
-            <div
-              class="overview-details"
-              v-html="getTempDisplay('中温换热出水温度', outWaterTemperature)"
-            ></div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>低温1换热出水温度</div>
-            <div
-              class="overview-details"
-              v-html="getTempDisplay('低温1换热出水温度', outWaterTemperature)"
-            ></div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>低温2换热出水温度</div>
-            <div
-              class="overview-details"
-              v-html="getTempDisplay('低温2换热出水温度', outWaterTemperature)"
-            ></div>
-          </div>
-        </div>
+    <div class=" special-div" style="width: 100%;margin-top: 20px;">
+      <div class="special-top">
+        <div class="special-title">中央空调冷源系统(实时EER系数)</div>
       </div>
-      <div class="special-div" style="width: 49.4%">
-        <div class="special-top">
-          <div class="special-title">热量数据</div>
-        </div>
-        <div class="overview">
-          <div class="overview-li" @click="goEnergy">
-            <div>生产累计热量</div>
-            <div class="overview-details">
-              {{ heatData.productionHeatSum }}kwh
+      <sys-energy ref="sysEnergy"></sys-energy>
+    </div>
+    <div class=" special-div" style="width: 100%;margin-top: 20px;">
+      <div class="special-top">
+        <div class="special-title">空压热回收系统</div>
+      </div>
+      <div class="project-data">
+        <div class="sysBg" style="width: 49.4%">
+          <div class="sysBg-title">出水温度</div>
+          <div class="overview">
+            <div class="overview-li" @click="goEnergy">
+              <div>离心机高温出水温度</div>
+              <div class="overview-details" v-html="getTempDisplay('离心机高温出水温度', outWaterTemperature)"></div>
             </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>散热累计热量</div>
-            <div class="overview-details">
-              {{ heatData.dissipationHeatSum }}kwh
+            <div class="overview-li" @click="goEnergy">
+              <div>中温换热出水温度</div>
+              <div class="overview-details" v-html="getTempDisplay('中温换热出水温度', outWaterTemperature)"></div>
             </div>
-          </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>总热量回收</div>
-            <div class="overview-details">
-              {{ heatData.totalHeatRecoverySum }}kwh
+            <div class="overview-li" @click="goEnergy">
+              <div>低温1换热出水温度</div>
+              <div class="overview-details" v-html="getTempDisplay('低温1换热出水温度', outWaterTemperature)"></div>
+            </div>
+            <div class="overview-li" @click="goEnergy">
+              <div>低温2换热出水温度</div>
+              <div class="overview-details" v-html="getTempDisplay('低温2换热出水温度', outWaterTemperature)"></div>
             </div>
           </div>
-          <div class="overview-li" @click="goEnergy">
-            <div>热利用率</div>
-            <div class="overview-details">{{ heatData.heatUtilization }}%</div>
+        </div>
+        <div class="sysBg" style="width: 49.4%">
+          <div class="sysBg-title">热量数据</div>
+          <div class="overview">
+            <div class="overview-li" @click="goEnergy">
+              <div>生产累计热量</div>
+              <div class="overview-details">
+                {{ heatData.productionHeatSum }}kwh
+              </div>
+            </div>
+            <div class="overview-li" @click="goEnergy">
+              <div>散热累计热量</div>
+              <div class="overview-details">
+                {{ heatData.dissipationHeatSum }}kwh
+              </div>
+            </div>
+            <div class="overview-li" @click="goEnergy">
+              <div>总热量回收</div>
+              <div class="overview-details">
+                {{ heatData.totalHeatRecoverySum }}kwh
+              </div>
+            </div>
+            <div class="overview-li" @click="goEnergy">
+              <div>热利用率</div>
+              <div class="overview-details">{{ heatData.heatUtilization }}%</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="project-bie">
-      <div class="special-div" style="width: 49.4%">
-        <div class="special-top">
-          <div class="special-title">系统数据</div>
-        </div>
-        <div class="hot-tem">
-          <div class="tem-li">
-            <div class="tem-title">离心机入口温度</div>
-            <div
-              class="tem-detail"
-              v-html="getTempDisplay('离心机入口温度', systemData)"
-            ></div>
-          </div>
-          <div class="tem-li">
-            <div class="tem-title">离心机出水温度</div>
-            <div
-              class="tem-detail"
-              v-html="getTempDisplay('离心机出水温度', systemData)"
-            ></div>
+      <div class="project-bie">
+        <div class="sysBg" style="width: 49.4%">
+          <div class="sysBg-title">系统数据</div>
+          <div class="hot-tem">
+            <div class="tem-li">
+              <div class="tem-title">离心机入口温度</div>
+              <div class="tem-detail" v-html="getTempDisplay('离心机入口温度', systemData)"></div>
+            </div>
+            <div class="tem-li">
+              <div class="tem-title">离心机出水温度</div>
+              <div class="tem-detail" v-html="getTempDisplay('离心机出水温度', systemData)"></div>
+            </div>
+            <div class="tem-li">
+              <div class="tem-title">保障进水温度</div>
+              <div class="tem-detail" v-html="getTempDisplay('保障进水温度', systemData)"></div>
+            </div>
           </div>
-          <div class="tem-li">
-            <div class="tem-title">保障进水温度</div>
-            <div
-              class="tem-detail"
-              v-html="getTempDisplay('保障进水温度', systemData)"
-            ></div>
+          <div class="pressure">
+            <view-cold-sys :subData="getDeviceData('离心机进水压力')" :title="'离心机进水压力'"></view-cold-sys>
+            <view-cold-sys :subData="getDeviceData('离心机出水压力')" :title="'离心机出水压力'"></view-cold-sys>
+            <view-cold-sys :subData="getDeviceData('离心机压差')" :title="'离心机压差'"></view-cold-sys>
           </div>
         </div>
-        <div class="pressure">
-          <view-cold-sys
-            :subData="getDeviceData('离心机进水压力')"
-            :title="'离心机进水压力'"
-          ></view-cold-sys>
-          <view-cold-sys
-            :subData="getDeviceData('离心机出水压力')"
-            :title="'离心机出水压力'"
-          ></view-cold-sys>
-          <view-cold-sys
-            :subData="getDeviceData('离心机压差')"
-            :title="'离心机压差'"
-          ></view-cold-sys>
-        </div>
-      </div>
-      <div class="bir-right">
-        <div class="special-div">
-          <div class="special-top">
-            <div class="special-title">阀门开度</div>
+        <div class="bir-right">
+          <div class="sysBg">
+            <div class="sysBg-title">阀门开度</div>
+            <hot-water :subData="valveData"></hot-water>
           </div>
-          <hot-water :subData="valveData"></hot-water>
-        </div>
-        <div class="later-data">
-          <div class="special-div">
-            <div class="special-top">
-              <div class="special-title">热回收数据</div>
-            </div>
-            <div class="hot-data">
-              <div class="hot-li">
-                <div class="hot-title">瞬时热量:</div>
-                <div class="hot-detail">{{heatRecoveryData.instantaneousHeatSum}}kw</div>
-              </div>
-              <div class="hot-li">
-                <div class="hot-title">日累计热量:</div>
-                <div class="hot-detail">{{heatRecoveryData.dailyAccumulatedHeat}}kwh</div>
+          <div class="later-data">
+            <div class="sysBg" style="width:49%">
+              <div class="sysBg-title">热回收数据</div>
+              <div class="hot-data">
+                <div class="hot-li">
+                  <div class="hot-title">瞬时热量:</div>
+                  <div class="hot-detail">{{ heatRecoveryData.instantaneousHeatSum }}kw</div>
+                </div>
+                <div class="hot-li">
+                  <div class="hot-title">日累计热量:</div>
+                  <div class="hot-detail">{{ heatRecoveryData.dailyAccumulatedHeat }}kwh</div>
+                </div>
+                <div class="hot-li">
+                  <div class="hot-title">累计热量:</div>
+                  <div class="hot-detail">{{ heatRecoveryData.accumulatedHeatSum }}kwh</div>
+                </div>
               </div>
-              <div class="hot-li">
-                <div class="hot-title">累计热量:</div>
-                <div class="hot-detail">{{heatRecoveryData.accumulatedHeatSum}}kwh</div>
-              </div>
-            </div>
-          </div>
-          <div class="special-div">
-            <div class="special-top">
-              <div class="special-title">应用测数据</div>
             </div>
-            <div class="hot-data">
-              <div class="hot-li">
-                <div class="hot-title">瞬时热量:</div>
-                <div class="hot-detail">{{applicationData.instantaneousHeatSum}}kw</div>
-              </div>
-              <div class="hot-li">
-                <div class="hot-title">日累计热量:</div>
-                <div class="hot-detail">{{applicationData.dailyAccumulatedHeat}}kwh</div>
-              </div>
-              <div class="hot-li">
-                <div class="hot-title">累计热量:</div>
-                <div class="hot-detail">{{applicationData.accumulatedHeatSum}}kwh</div>
+            <div class="sysBg" style="width:49%">
+              <div class="sysBg-title">应用测数据</div>
+              <div class="hot-data">
+                <div class="hot-li">
+                  <div class="hot-title">瞬时热量:</div>
+                  <div class="hot-detail">{{ applicationData.instantaneousHeatSum }}kw</div>
+                </div>
+                <div class="hot-li">
+                  <div class="hot-title">日累计热量:</div>
+                  <div class="hot-detail">{{ applicationData.dailyAccumulatedHeat }}kwh</div>
+                </div>
+                <div class="hot-li">
+                  <div class="hot-title">累计热量:</div>
+                  <div class="hot-detail">{{ applicationData.accumulatedHeatSum }}kwh</div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="上传图片"
-      width="500px"
-      @close="addExpenseClose"
-    >
+    <el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
       <!-- 使用 el-upload 组件 -->
-      <el-upload
-        class="upload-demo"
-        ref="uploadComponent"
-        action="#"
-        list-type="picture-card"
-        :on-preview="handlePictureCardPreview"
-        :on-remove="handleRemove"
-        :before-upload="beforeUpload"
-        :limit="1"
-        :on-exceed="handleExceed"
-        :on-change="handleFileChange"
-        accept="image/png, image/jpeg"
-        :http-request="customHttpRequest"
-      >
+      <el-upload class="upload-demo" ref="uploadComponent" action="#" list-type="picture-card"
+        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeUpload" :limit="1"
+        :on-exceed="handleExceed" :on-change="handleFileChange" accept="image/png, image/jpeg"
+        :http-request="customHttpRequest">
         <i class="el-icon-plus"></i>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -257,11 +190,13 @@ import { imgUrl } from "@/utils/global";
 import { introduction, changeLogo, ersDatas } from "@/api/index";
 import ViewColdSys from "./components/viewColdSys.vue";
 import HotWater from "./components/hotWater.vue";
+import SysEnergy from "./components/sysEnergy.vue";
 
 export default {
   components: {
     ViewColdSys,
     HotWater,
+    SysEnergy
   },
   data() {
     return {
@@ -350,7 +285,7 @@ export default {
       this.viewImageUrl = file.url;
     },
     // 上传成功
-    handleUploadSuccess(response, file, fileList) {},
+    handleUploadSuccess(response, file, fileList) { },
     // 处理文件
     handleFileChange(file, fileList) {
       console.log("file", file);
@@ -500,6 +435,7 @@ export default {
   flex-direction: row;
   align-items: flex-start;
   padding: 0.35rem;
+
   .project-img {
     width: 1.4rem;
     height: 1.4rem;
@@ -508,24 +444,29 @@ export default {
     margin-right: 0.4rem;
     cursor: pointer;
   }
+
   .project-li {
     width: calc((100% - 0.7rem) / 2);
     display: flex;
     flex-direction: column;
+
     .list-con {
       width: 100%;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
+
       .project-left {
         display: flex;
         flex-direction: row;
         align-items: center;
+
         .left-icon {
           width: 0.2rem;
           height: 0.2rem;
         }
+
         .project-name {
           font-family: SourceHanSansCN-Regular;
           font-size: 0.18rem;
@@ -535,6 +476,7 @@ export default {
           margin-left: 0.15rem;
         }
       }
+
       .project-right {
         font-family: SourceHanSansCN-Regular;
         font-size: 0.18rem;
@@ -543,16 +485,104 @@ export default {
       }
     }
   }
+
   .project-li:nth-last-child(1) {
     margin-left: 1.5rem;
   }
 }
+
+.sysBg {
+  background: linear-gradient(180deg,
+      rgba(0, 68, 126, 0.45) 0%,
+      rgba(0, 40, 80, 0.2) 100%);
+  border: 1px solid rgba(0, 136, 240, 0.25);
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+
+  // 左上角装饰光点
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    background: radial-gradient(circle at top left,
+        rgba(0, 180, 255, 0.15) 0%,
+        transparent 70%);
+    pointer-events: none;
+  }
+
+  // 右下角装饰光点
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    background: radial-gradient(circle at bottom right,
+        rgba(0, 136, 240, 0.1) 0%,
+        transparent 70%);
+    pointer-events: none;
+  }
+
+  .sysBg-title {
+    padding: 12px 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+    letter-spacing: 2px;
+    position: relative;
+    background: linear-gradient(90deg,
+        rgba(0, 121, 206, 0.5) 0%,
+        rgba(0, 121, 206, 0.08) 100%);
+    border-bottom: 1px solid rgba(0, 136, 240, 0.2);
+
+    // 标题左侧装饰竖条
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 60%;
+      background: linear-gradient(180deg,
+          #00b4ff 0%,
+          #0079ce 100%);
+      border-radius: 2px;
+      box-shadow: 0 0 6px rgba(0, 180, 255, 0.6);
+    }
+
+    // 标题右侧装饰光晕
+    &::after {
+      content: "";
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8px;
+      height: 8px;
+      background: rgba(0, 180, 255, 0.6);
+      border-radius: 50%;
+      box-shadow: 0 0 8px rgba(0, 180, 255, 0.4);
+    }
+
+    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+  }
+}
+
 .project-data {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: space-between;
-  margin: 16px 0;
+  margin: 20px;
+
+
   .overview {
     width: 100%;
     padding: 30px 20px 5px 20px;
@@ -561,6 +591,7 @@ export default {
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
+
     .overview-li {
       cursor: pointer;
       width: 49%;
@@ -574,16 +605,15 @@ export default {
       font-size: 15px;
       color: #ffffff;
       /* 从 rgba(41, 128, 185, 0.8) 渐变到透明 */
-      background: linear-gradient(
-        to bottom,
-        rgba(31, 100, 146, 0.6) 0%,
-        rgba(33, 65, 87, 0.3) 50%,
-        rgba(40, 62, 77, 0) 100%
-      );
+      background: linear-gradient(to bottom,
+          rgba(31, 100, 146, 0.6) 0%,
+          rgba(33, 65, 87, 0.3) 50%,
+          rgba(40, 62, 77, 0) 100%);
       border-radius: 8px;
       padding: 5px;
       color: white;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
       .overview-details {
         font-family: DIN-Bold;
         font-size: 20px;
@@ -593,16 +623,19 @@ export default {
     }
   }
 }
+
 .chartsDiv {
   width: 100%;
   height: 4rem;
 }
+
 .project-bie {
-  width: 100%;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: space-between;
+  margin: 10px 20px 20px 20px;
+
   .pressure {
     width: 100%;
     display: flex;
@@ -610,6 +643,7 @@ export default {
     align-items: center;
     margin-top: 25px;
   }
+
   .hot-tem {
     width: 100%;
     padding: 0 20px;
@@ -619,6 +653,7 @@ export default {
     align-items: stretch;
     flex-wrap: wrap;
     margin-top: 25px;
+
     .tem-li {
       background-color: rgba(93, 125, 143, 0.5);
       width: 32%;
@@ -628,11 +663,13 @@ export default {
       flex-direction: column;
       justify-content: space-between;
       margin-bottom: 20px;
+
       .tem-title {
         font-size: 15px;
         font-weight: 600;
         color: #ffffff;
       }
+
       .tem-detail {
         margin-top: 8px;
         font-size: 20px;
@@ -642,27 +679,34 @@ export default {
       }
     }
   }
+
   .bir-right {
     width: 49.4%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
     .special-div {
       width: 100%;
       margin-bottom: 20px;
     }
+
     .later-data {
       width: 100%;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      margin-top: 20px;
+
       .special-div {
         width: 49%;
         margin-bottom: 0;
       }
+
       .hot-data {
         width: 100%;
         padding: 25px 25px 5px 25px;
+
         .hot-li {
           width: 100%;
           display: flex;
@@ -670,11 +714,13 @@ export default {
           align-items: center;
           justify-content: space-between;
           margin-bottom: 20px;
+
           .hot-title {
             font-size: 15px;
             font-weight: 600;
             color: #ffffff;
           }
+
           .hot-detail {
             font-size: 20px;
             font-weight: 600;
@@ -685,9 +731,9 @@ export default {
     }
   }
 }
-@media (max-width: 1485px) {
-}
+
+@media (max-width: 1485px) {}
+
 // 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-}
+@media (min-width: 2000px) {}
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index a4201e6..bd25466 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -10,7 +10,7 @@
       class="login_img_down"
       alt=""
     />
-    <div class="sys-title">铭汉空压热回收系统</div>
+    <div class="sys-title">铭汉节能岛系统</div>
     <el-form
       ref="loginForm"
       :model="loginForm"
diff --git a/vue.config.js b/vue.config.js
index bcfc47b..8a1cdab 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || "铭汉空压热回收系统"; // 网页标题
+const name = process.env.VUE_APP_TITLE || "铭汉节能岛系统"; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口