diff --git a/.env.development b/.env.development
index 5a51382..c37acf6 100644
--- a/.env.development
+++ b/.env.development
@@ -8,8 +8,7 @@ ENV = 'development'
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
 VUE_APP_BASE_API = 'http://192.168.1.222:8080'
-# 梅州云端
-# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
+
 # 广合
 # VUE_APP_BASE_API = 'http://106.55.173.225:8092'
 
diff --git a/src/api/index.js b/src/api/index.js
index c35f435..52cbb5d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -59,4 +59,40 @@ export function getCoeData() {
     url: "/pro/overview/getCoe",
     method: "get",
   });
-}
\ No newline at end of file
+}
+
+// 图表
+export function homeCharts() {
+  return request({
+    url: "/home/charts",
+    method: "get",
+  });
+}
+// 运行天数
+export function homeRunTime() {
+  return request({
+    url: "/home/runTime",
+    method: "get",
+  });
+}
+// 实时总功率、总冷量
+export function getCurrentRate() {
+  return request({
+    url: "/home/getCurrentRate",
+    method: "get",
+  });
+}
+// 实时能耗系数
+export function getCoe() {
+  return request({
+    url: "/home/getCoe",
+    method: "get",
+  });
+}
+// 日月年供冷量、日月年EER
+export function homeStatical() {
+  return request({
+    url: "/home/statical",
+    method: "get",
+  });
+}
diff --git a/src/assets/images/cold-bg.png b/src/assets/images/cold-bg.png
new file mode 100644
index 0000000..e72f13a
Binary files /dev/null and b/src/assets/images/cold-bg.png differ
diff --git a/src/assets/images/home-icon1.png b/src/assets/images/home-icon1.png
new file mode 100644
index 0000000..543f90d
Binary files /dev/null and b/src/assets/images/home-icon1.png differ
diff --git a/src/assets/images/home-icon2.png b/src/assets/images/home-icon2.png
new file mode 100644
index 0000000..b742781
Binary files /dev/null and b/src/assets/images/home-icon2.png differ
diff --git a/src/assets/images/home-icon3.png b/src/assets/images/home-icon3.png
new file mode 100644
index 0000000..71fc2fe
Binary files /dev/null and b/src/assets/images/home-icon3.png differ
diff --git a/src/assets/images/home-icon4.png b/src/assets/images/home-icon4.png
new file mode 100644
index 0000000..74f2805
Binary files /dev/null and b/src/assets/images/home-icon4.png differ
diff --git a/src/assets/images/home-icon5.png b/src/assets/images/home-icon5.png
new file mode 100644
index 0000000..3a91ab0
Binary files /dev/null and b/src/assets/images/home-icon5.png differ
diff --git a/src/assets/images/home-icon6.png b/src/assets/images/home-icon6.png
new file mode 100644
index 0000000..596bec8
Binary files /dev/null and b/src/assets/images/home-icon6.png differ
diff --git a/src/assets/images/home-icon7.png b/src/assets/images/home-icon7.png
new file mode 100644
index 0000000..e87a5ff
Binary files /dev/null and b/src/assets/images/home-icon7.png differ
diff --git a/src/assets/images/noactive-0.png b/src/assets/images/noactive-0.png
new file mode 100644
index 0000000..5162dea
Binary files /dev/null and b/src/assets/images/noactive-0.png differ
diff --git a/src/assets/images/noactive-1.png b/src/assets/images/noactive-1.png
new file mode 100644
index 0000000..88f1fca
Binary files /dev/null and b/src/assets/images/noactive-1.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4a96aed..aaae049 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -218,6 +218,43 @@ aside {
   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
   border-radius: 14px;
 }
+/** 科技感面板标题 - 左侧竖线 + 渐变底线 */
+.panel-title {
+  position: relative;
+  padding: 0.1rem 0 0.1rem 0.18rem;
+  margin-bottom: 0.1rem;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0.06rem;
+    height: 0.24rem;
+    background: linear-gradient(180deg, #00d7e9, #0078d7);
+    border-radius: 0.03rem;
+    box-shadow: 0 0 0.08rem rgba(0, 215, 233, 0.5);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(0, 215, 233, 0.4), transparent);
+  }
+
+  .panel-title-text {
+    font-size: 0.2rem;
+    font-weight: bold;
+    color: #e3fff9;
+    letter-spacing: 0.04rem;
+    text-shadow: 0 0 0.06rem rgba(0, 215, 233, 0.3);
+  }
+}
 
 .special-div {
   display: flex;
diff --git a/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue b/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue
index cc84ed1..3052be7 100644
--- a/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue
+++ b/src/views/centerairC/energyAnalysis/components/ynyQnqAnalysis.vue
@@ -100,9 +100,9 @@
             <div class="success-btn" style="margin-left: 0.24rem">
               <el-button type="success" @click="findData">查询</el-button>
             </div>
-            <!-- <div class="warning-bnt" style="margin-left: 0.24rem">
+            <div class="warning-bnt" style="margin-left: 0.24rem">
               <el-button type="warning" @click="exportData">导出</el-button>
-            </div> -->
+            </div>
           </div>
         </div>
         <div class="charts-table" v-loading="listLoading">
@@ -891,20 +891,20 @@ export default {
         this.exportArr.push(newData);
       }
 
-      //   // console.log("导出的数据", this.exportArr);
-      //   import("@/assets/excel/Export2Excel").then((excel) => {
-      //     let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名
-      //     let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息
-      //     const data = this.formatJson(filterVal, this.exportArr);
-      //     const autoWidth = true;
-      //     excel.export_json_to_excel({
-      //       header: tHeader, //表头
-      //       data, //数据
-      //       filename: `${this.checkList}同比环比分析报表`, //名称
-      //       autoWidth: true, //宽度自适应
-      //     });
-      //     this.$message.success("导出成功!");
-      //   });
+        // console.log("导出的数据", this.exportArr);
+        import("@/assets/excel/Export2Excel").then((excel) => {
+          let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名
+          let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息
+          const data = this.formatJson(filterVal, this.exportArr);
+          const autoWidth = true;
+          excel.export_json_to_excel({
+            header: tHeader, //表头
+            data, //数据
+            filename: `${this.checkList}同比环比分析报表`, //名称
+            autoWidth: true, //宽度自适应
+          });
+          this.$message.success("导出成功!");
+        });
     },
     //格式转换,不需要改动
     formatJson(filterVal, jsonData) {
diff --git a/src/views/components/chartsData.vue b/src/views/components/chartsData.vue
new file mode 100644
index 0000000..afbd237
--- /dev/null
+++ b/src/views/components/chartsData.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="chart-content">
+    <div class="home-chart">
+      <div
+        class="legend-li"
+        v-for="(item, index) in timeData2"
+        :key="index"
+        @click="handleEnter(index)"
+        :class="{ timeStyle: timeIndex2 == index }"
+      >
+        {{ item.title }}
+      </div>
+      <div class="home-chart-right">
+        <div
+          class="imgDiv"
+          v-for="(item, index) in imgData"
+          :key="index"
+          @click="handleImg(index)"
+          :class="{ imgStyle: imgIndex == index }"
+        >
+          <img
+            :src="item.imgSrc"
+            class="choice-icon"
+            id="svgImg "
+            alt=""
+            :title="item.title"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="charts-div" ref="analyse_ref"></div>
+  </div>
+</template>
+
+<script>
+import { homeCharts } from "@/api/index";
+export default {
+  data() {
+    return {
+      timeData2: [
+        { title: "系统EER" },
+        { title: "瞬时冷量(kwr)" },
+        { title: "瞬时电量(kwh)" },
+        // { title: "总用电量(kwh)" },
+        { title: "冷冻水供回水温度(℃)" },
+        // { title: "趋近度(℃)" },
+      ],
+      timeIndex2: 0, //瞬时冷量
+      imgData: [
+        {
+          title: "轮播",
+          imgSrc: require("../../assets/images/noactive-0.png"),
+        },
+        {
+          title: "手动",
+          imgSrc: require("../../assets/images/noactive-1.png"),
+        },
+      ],
+      imgIndex: 0, //轮播
+      chartInstance2: null,
+      option2: {},
+      xTimeData: [], // 折线图x轴时间
+      //折线图模拟数据
+      electData: [],
+      electTime: [],
+      waterData: [],
+      waterTime: [],
+      EERData: [],
+      EERTime: [],
+      proximityData: [],
+      proximityTime: [],
+
+      chartInstance2: null,
+      option2: {},
+      allDataObj: {}, //接受返回的所有数据
+      xData: [],
+      chartsAeries: [],
+    };
+  },
+  mounted() {
+    this.initChart2();
+    this.screenAdapter2();
+    window.addEventListener("resize", this.screenAdapter2);
+    this.getChartsData();
+    this.move();
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter2);
+    // 消除定时器
+    clearInterval(this.timer);
+  },
+
+  methods: {
+    // 图表 or 表格
+    handleImg(index) {
+      this.imgIndex = index;
+      // console.log("this.timeData2[index].imgSrc", this.timeData2[index].title)
+      // 排他，渲染图片
+      for (let i = 0; i < this.imgData.length; i++) {
+        const imgSrc =
+          i === index ? `active-${index}.png` : `noactive-${i}.png`;
+        this.imgData[i].imgSrc = require(`../../assets/images/${imgSrc}`);
+      }
+      if (index == 0) {
+        this.move();
+      } else {
+        clearInterval(this.timer);
+      }
+    },
+    handleEnter(index) {
+      this.timeIndex2 = index;
+      console.log("有打印瞬时冷量的index吗", this.allDataObj);
+      this.chartInstance2.dispose();
+      this.initChart2();
+      this.xData = [];
+      this.chartsAeries = [];
+      if (index == 1) {
+        // 添加折线的配置
+        var singleSeries = {
+          smooth: true,
+          symbol: "circle",
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          itemStyle: {
+            color: "#44a2ff", // 折线点的颜色
+            lineStyle: {
+              color: "#44a2ff", // 折线的颜色
+            },
+          },
+          areaStyle: {
+            color: {
+              type: "linear", // 线性渐变
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(11, 117, 211, 1)", // 0% 处的颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(11, 117, 211, 0.2)", // 100% 处的颜色
+                },
+              ],
+            },
+          },
+        };
+        this.allDataObj.cloudChart.series[0] = {
+          ...this.allDataObj.cloudChart.series[0],
+          ...singleSeries,
+        };
+        this.chartsAeries = this.allDataObj.cloudChart.series;
+        this.xData = this.allDataObj.cloudChart.xaxis.data;
+        this.option2.xAxis.data = this.xData;
+        this.option2.series = this.chartsAeries;
+      } else if (index == 2) {
+        // 添加折线的配置
+        var singleSeries = {
+          smooth: true,
+          symbol: "circle",
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          itemStyle: {
+            color: "#01c29b", // 折线点的颜色
+            lineStyle: {
+              color: "#01c29b", // 折线的颜色
+            },
+          },
+          areaStyle: {
+            color: {
+              type: "linear", // 线性渐变
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(1, 194, 155, 1)", // 0% 处的颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(1, 194, 155, 0.2)", // 100% 处的颜色
+                },
+              ],
+            },
+          },
+        };
+        this.allDataObj.eleRateChart.series[0] = {
+          ...this.allDataObj.eleRateChart.series[0],
+          ...singleSeries,
+        };
+        this.chartsAeries = this.allDataObj.eleRateChart.series;
+        this.xData = this.allDataObj.eleRateChart.xaxis.data;
+        this.option2.xAxis.data = this.xData;
+        this.option2.series = this.chartsAeries;
+      } else if (index == 3) {
+        // 添加图例的配置
+        let legendData = [];
+        this.allDataObj.tempChart.series.forEach((element) => {
+          legendData.push(element.name);
+        });
+        console.log("图例数组", legendData);
+        this.chartsAeries = this.allDataObj.tempChart.series;
+        this.xData = this.allDataObj.tempChart.xaxis.data;
+        this.option2.legend.show = true;
+        this.option2.legend.data = legendData;
+        this.option2.xAxis.data = this.xData;
+        // 给每个series对象添加showSymbol = false;  //一开始时不显示原点,鼠标点击才显示
+        for (var i = 0; i < this.chartsAeries.length; i++) {
+          this.chartsAeries[i].showSymbol = false;
+        }
+        this.option2.series = this.chartsAeries;
+      } else if (index == 0) {
+        // 添加折线的配置
+        var singleSeries = {
+          smooth: true,
+          symbol: "circle",
+          // 开始不显示拐点， 鼠标经过显示
+          showSymbol: false,
+          itemStyle: {
+            color: "#ffb219", // 折线点的颜色
+            lineStyle: {
+              color: "#ffb219", // 折线的颜色
+            },
+          },
+          areaStyle: {
+            color: {
+              type: "linear", // 线性渐变
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(255, 178,25 , 0.8)", // 0% 处的颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(255, 178,25 , 0.2)", // 100% 处的颜色
+                },
+              ],
+            },
+          },
+        };
+        this.allDataObj.copChart.series[0] = {
+          ...this.allDataObj.copChart.series[0],
+          ...singleSeries,
+        };
+        this.chartsAeries = this.allDataObj.copChart.series;
+        this.xData = this.allDataObj.copChart.xaxis.data;
+        this.option2.xAxis.data = this.xData;
+        this.option2.series = this.chartsAeries;
+      } else if (index == 4) {
+        // 添加图例的配置
+        let legendData = [];
+        this.allDataObj.appChart.series.forEach((element) => {
+          legendData.push(element.name);
+        });
+        console.log("图例数组", legendData);
+        this.chartsAeries = this.allDataObj.appChart.series;
+        this.xData = this.allDataObj.appChart.xaxis.data;
+        this.option2.legend.show = true;
+        this.option2.legend.data = legendData;
+        this.option2.xAxis.data = this.xData;
+        // 给每个series对象添加showSymbol = false;  //一开始时不显示原点,鼠标点击才显示
+        for (var i = 0; i < this.chartsAeries.length; i++) {
+          this.chartsAeries[i].showSymbol = false;
+        }
+        this.option2.series = this.chartsAeries;
+      }
+      console.log("折线图的xAxis详情", this.xData);
+      console.log("折线图的series详情", this.chartsAeries);
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance2.setOption(this.option2);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance2.resize();
+    },
+    //初始化chartInstance2对象 折线图
+    initChart2() {
+      this.chartInstance2 = this.$echarts.init(this.$refs.analyse_ref);
+      this.option2 = {
+        tooltip: {
+          trigger: "axis",
+          // 使用 formatter 设定 tooltip 内容格式
+          // formatter: function (params) {
+          //     let seriesHTML = "";
+          //     params.forEach(function (item) {
+          //         seriesHTML +=
+          //             "<div>" +
+          //             item.seriesName +
+          //             ': <span style="color: #000000; font-weight: bold;">' +
+          //             item.value +
+          //             "</span></div>";
+          //     });
+          //     return "<div>" + params[0].name + "</div>" + seriesHTML;
+          // },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color +
+                '"></span>';
+              // 根据不同德seriesName 返回不同的单位
+              if (seriesName.indexOf("瞬时冷量") !== -1) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "kwr" +
+                  "</span><br>";
+              } else if (seriesName.indexOf("用电量") !== -1) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "kwh" +
+                  "</span><br>";
+              } else if (
+                seriesName.indexOf("温度") !== -1 ||
+                seriesName.indexOf("趋近度") !== -1
+              ) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "℃" +
+                  "</span><br>";
+              } else if (seriesName.indexOf("瞬时功率") !== -1) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "kwh" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        legend: {
+          show: false, // 不显示图例
+          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+          textStyle: { color: "#ffffff" },
+          // left: "0%",
+          top: "-1%",
+        },
+
+        grid: {
+          top: "9%",
+          left: "3%",
+          right: "2%",
+          bottom: "25%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          // data: ["2021", "2022", "2023"],
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            color: "rgba(255,255,255,1)",
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          min: 0,
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255,255,255,1)",
+          },
+          // 显示y坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              // X 轴颜色配置
+              color: "#7b918c",
+            },
+          },
+          // 修改y轴分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: "#7b918c",
+            },
+          },
+        },
+        // 拖拽X轴
+        dataZoom: [
+          {
+            type: "slider", //inside鼠标缩放
+            show: this.showZoom,
+            height: 15, // 设置控制区域的高度为 20 像素
+            // fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色
+            // backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色
+            start: 0,
+            end: 100,
+            xAxisIndex: [0],
+            handleSize: "120%", // 设置滑块大小为默认大小的 120%
+          },
+        ],
+        series: [
+          // {
+          //     name: "设备总用电量",
+          //     type: "line",
+          //     smooth: true,
+          //     // data: ["1", "2", "3"],
+          //     symbol: "circle",
+          //     // 拐点大小
+          //     symbolSize: 8,
+          //     // 设置拐点颜色以及边框
+          //     // itemStyle: {
+          //     //   color: "#0184d5",
+          //     //   borderColor: "rgba(221, 220, 107, .1)",
+          //     //   borderWidth: 12
+          //     //  },
+          //     // 开始不显示拐点， 鼠标经过显示
+          //     showSymbol: false,
+          //     sampling: 'lttb',//降采样策略
+          // //折线颜色
+          // itemStyle: {
+          //     color: "#44a2ff", //折线点的颜色
+          //     lineStyle: {
+          //         color: "#44a2ff", //折线的颜色
+          //     },
+          // },
+          // areaStyle: {
+          //     color: {
+          //         //线性渐变
+          //         type: "linear",
+          //         x: 0,
+          //         y: 0,
+          //         x2: 0,
+          //         y2: 1,
+          //         colorStops: [
+          //             {
+          //                 offset: 0,
+          //                 color: "rgba(11, 117, 211, 1)", // 0% 处的颜色
+          //             },
+          //             {
+          //                 offset: 0.8,
+          //                 color: "rgba(11, 117, 211,0.2)", // 100% 处的颜色
+          //             },
+          //         ],
+          //         // global: false, // 缺省为 false
+          //     },
+          // },
+          // },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance2.setOption(this.option2, true);
+    },
+    screenAdapter2() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.analyse_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {
+        // x轴坐标字体大小
+        xAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance2.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance2.resize();
+    },
+    // 请求数据
+    getChartsData() {
+      this.chartInstance2.dispose();
+      this.initChart2();
+      homeCharts().then((res) => {
+        console.log("图表数据查询返回", res);
+        if (res.code == 200) {
+          this.allDataObj = res.rows;
+          console.log("全部的数据", this.allDataObj);
+          // 首次加载页面时，显示瞬时冷量
+          this.handleEnter(this.timeIndex2);
+        } else {
+          this.chartsAeries = [];
+          const adapterOption = {
+            xAxis: {
+              data: [],
+            },
+            series: [],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance2.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance2.resize();
+        }
+      });
+    },
+    // 定时器
+    move() {
+      // 定时器
+      this.timer = setInterval(() => {
+        this.handleEnter((this.timeIndex2 + 1) % 4);
+      }, 1000 * 5 * 60);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.home-chart {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
+
+  .legend-li {
+    text-align: center;
+    font-size: 0.2rem;
+    color: #95adc8;
+    padding: 0.08rem 0.2rem;  
+    white-space: nowrap;
+    margin-right: 0.3rem;
+    border: 1px solid #0076c1;
+    border-radius: 0.06rem;
+  }
+
+  .home-chart-right {
+    position: absolute;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+
+    .imgDiv {
+      width: 0.35rem;
+      height: 0.35rem;
+      margin: 0.05rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .choice-icon {
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+
+    .imgStyle {
+      background-color: #0076c1;
+      border-radius: 50%;
+    }
+  }
+}
+
+.charts-div {
+  margin-top: 0.3rem;
+  width: 100%;
+  height: 3.6rem;
+}
+</style>
diff --git a/src/views/components/hotWater.vue b/src/views/components/hotWater.vue
deleted file mode 100644
index 13c461d..0000000
--- a/src/views/components/hotWater.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div class="card-div">
-    <!-- 二通阀 -->
-    <div class="card-li">
-      <div class="card-header">
-        <h2 class="card-title">二通阀开度:</h2>
-      </div>
-      <div class="thermometer">
-        <div class="temprogress" :style="{ width: twoValveValue + '%' }"></div>
-      </div>
-      <div class="temperature">
-        <span
-          v-if="twoValveItem && twoValveItem.status === 1"
-          class="error-text"
-          >异常</span
-        >
-        <span v-else>{{ twoValveValue }}%</span>
-      </div>
-    </div>
-
-    <!-- 三通阀 -->
-    <div class="card-li">
-      <div class="card-header">
-        <h2 class="card-title">三通阀开度:</h2>
-      </div>
-      <div class="thermometer">
-        <div
-          class="temprogress"
-          :style="{ width: threeValveValue + '%' }"
-        ></div>
-      </div>
-      <div class="temperature">
-        <span
-          v-if="threeValveItem && threeValveItem.status === 1"
-          class="error-text"
-          >异常</span
-        >
-        <span v-else>{{ threeValveValue }}%</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    subData: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      temData1: "",
-      temData2: "",
-      temData: [],
-    };
-  },
-  computed: {
-    // 获取二通阀数据
-    twoValveItem() {
-      return this.subData.find(
-        (item) => item.deviceTypeName === "二通阀阀门开度"
-      );
-    },
-
-    // 获取三通阀数据
-    threeValveItem() {
-      return this.subData.find(
-        (item) => item.deviceTypeName === "三通阀阀门开度"
-      );
-    },
-
-    // 二通阀开度值
-    twoValveValue() {
-      if (!this.twoValveItem || this.twoValveItem.status === 1) return 0;
-      // 确保值在 0-100 范围内
-      const value = parseFloat(this.twoValveItem.curValue) || 0;
-      return Math.min(Math.max(value, 0), 100);
-    },
-
-    // 三通阀开度值
-    threeValveValue() {
-      if (!this.threeValveItem || this.threeValveItem.status === 1) return 0;
-      // 确保值在 0-100 范围内
-      const value = parseFloat(this.threeValveItem.curValue) || 0;
-      return Math.min(Math.max(value, 0), 100);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.card-div {
-  width: 100%;
-  padding: 20px;
-  .card-li {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin: 10px;
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .card-title {
-        font-size: 15px;
-        font-weight: 600;
-        color: #ffffff;
-      }
-    }
-    .temperature {
-      font-size: 20px;
-      font-weight: 700;
-      color: #2ecc71;
-      position: relative;
-      display: inline-block;
-    }
-    .thermometer {
-      width: calc(100% - 250px);
-      min-width: 200px;
-      height: 15px;
-      background: #3d5581;
-      border-radius: 20px;
-      margin: 0 0.1rem;
-      overflow: hidden;
-      box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1);
-      position: relative;
-    }
-    .temprogress {
-      position: absolute;
-      left: 0;
-      height: 100%;
-      border-top-right-radius: 15px;
-      border-bottom-right-radius: 15px;
-      background: linear-gradient(to right, #3498db, #2ecc71) !important;
-    }
-  }
-}
-@media (min-width: 2000px) {
-}
-</style>
diff --git a/src/views/components/sysEnergy.vue b/src/views/components/sysEnergy.vue
index a7d92f0..403d153 100644
--- a/src/views/components/sysEnergy.vue
+++ b/src/views/components/sysEnergy.vue
@@ -1,798 +1,919 @@
 <template>
+  <div>
+    <div class="panel-title">
+      <span class="panel-title-text">实时EER系数</span>
+    </div>
     <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 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>
+  </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: {},
+  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];
     },
-    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);
+    //初始化chartInstance2对象 折线图
+    initChart2() {
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 130;
+      this.chartInstance2 = echarts.init(this.$refs.sys_charts);
+      this.option2 = {
+        tooltip: {
+          //弹窗组件
+          formatter: "{a} <br/>{b} : {c}",
         },
-        // 定时器
-        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);
+        // 设置仪表盘的背景颜色  整个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']]);
+      // 根据值动态设置 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;
+      // 使用 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 / 130;
+      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 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;
+          // 冷却塔
+          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;
+          // 系统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 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;
+          // 冷却泵
+          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: '冷却泵' }] },
-                        ]
-                    });
-                }
-            })
-        },
-    }
-}
+          // 使用 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;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  height: 2.7rem;
+  padding: 20px;
 
-    .sys_charts {
-        width: 90%;
-        height: 2.5rem;
-        margin-bottom: -0.9rem;
-    }
+  .sys_charts {
+    width: 85%;
+    height: 2rem;
+    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;
+  .score {
+    width: 15%;
+    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,
+    .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,
+    .good::before,
+    .bad::before,
+    .improve::before {
+      display: block;
+      content: "";
+      width: 0.15rem;
+      height: 0.14rem;
+      margin-right: 0.16rem;
+    }
 
-        .excellent::before {
-            background-color: #208fff;
-        }
+    .excellent::before {
+      background-color: #208fff;
+    }
 
-        .good::before {
-            background-color: #00be97;
-        }
+    .good::before {
+      background-color: #00be97;
+    }
 
-        .bad::before {
-            background-color: #ffb219;
-        }
+    .bad::before {
+      background-color: #ffb219;
+    }
 
-        .improve::before {
-            background-color: #ee5e5e;
-        }
+    .improve::before {
+      background-color: #ee5e5e;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/components/viewColdSys.vue b/src/views/components/viewColdSys.vue
deleted file mode 100644
index d38b60a..0000000
--- a/src/views/components/viewColdSys.vue
+++ /dev/null
@@ -1,514 +0,0 @@
-<template>
-  <div class="energy_content">
-    <div class="sys_charts" ref="sys_charts"></div>
-    <div class="eer">{{ title }}</div>
-    <div class="bad" v-if="subData.status === 1">异常</div>
-  </div>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  props: {
-    subData: {
-      type: Object,
-      required: true,
-    },
-    title: "",
-  },
-  data() {
-    return {
-      chartInstance: null,
-      option: {},
-      useForm: {
-        useData: 5,
-        maxData: 10, //最大的刻度值
-      },
-    };
-  },
-  watch: {
-    subData: {
-      immediate: true, // 页面加载时立即触发一次监听
-      handler(newVal) {
-        // console.log("检测到传功来的数据", this.subData);
-        if (Object.keys(newVal).length > 0) {
-          console.log("newval", newVal);
-          this.$nextTick(() => {
-            this.initChart();
-          });
-        }
-      },
-    },
-  },
-  mounted() {
-    this.initChart();
-    this.screenAdapter();
-    window.addEventListener("resize", this.screenAdapter);
-  },
-  destroyed() {
-    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
-    window.removeEventListener("resize", this.screenAdapter);
-  },
-  methods: {
-    // 计算颜色设置的函数
-    getAxisLineColor(useData, maxData) {
-      // 计算阈值
-      // 真实值大于最大值的0.75才使用颜色渐变
-      const threshold = maxData * 0.75;
-
-      // 判断实际值是否超过阈值
-      if (useData > threshold) {
-        return [
-          [
-            useData / maxData,
-            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-              { offset: 0, color: "rgba(0,127,208,1)" },
-              { offset: 0.6, color: "rgba(0,127,208,1)" },
-              { offset: 1, color: "rgba(69, 235, 167,0.5)" },
-            ]),
-          ],
-          [1, "rgba(28,128,245,.0)"],
-        ];
-      } else {
-        return [
-          [
-            useData / maxData,
-            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-              { offset: 0, color: "rgba(0,127,208,1)" },
-              { offset: 0.5, color: "rgba(0,127,208,1)" },
-              { offset: 1, color: "rgba(0,127,208,1)" },
-            ]),
-          ],
-          [1, "rgba(28,128,245,.0)"],
-        ];
-      }
-    },
-    //初始化chartInstance2对象 折线图
-    initChart() {
-      this.chartInstance = echarts.init(this.$refs.sys_charts);
-      var dataArr = this.subData.curValue; //值
-      var maxData = 10; //最大值
-      this.option = {
-        // backgroundColor: "#0E1327",
-        tooltip: {
-          formatter: "{a} <br/>{b} : {c}%",
-        },
-
-        series: [
-          {
-            name: "外部线",
-            type: "gauge",
-            radius: "100%", // 动态
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [1, "#31F3FF"], // 动态
-                ],
-                width: 1,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            detail: {
-              show: false,
-            },
-            title: {
-              //标题
-              show: false,
-            },
-          },
-          {
-            name: "外部刻度",
-            type: "gauge",
-            radius: "100%",
-            min: 0, //最小刻度
-            max: maxData, //最大刻度
-            splitNumber: 10, //刻度数量
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: [[1, "rgba(0,0,0,0)"]],
-              },
-            }, //仪表盘轴线
-            axisLabel: {
-              show: true,
-              color: "#31F3FF",
-              fontSize: 9, // 动态
-              distance: -15, // 动态
-            }, //刻度标签。
-            axisTick: {
-              show: false,
-            }, //刻度样式
-            splitLine: {
-              show: false,
-            },
-          },
-          {
-            name: "内部宽线条",
-            type: "gauge",
-            radius: "77%",
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              lineStyle: {
-                color: [[1, "#122B3C"]],
-                width: 20,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            detail: {
-              show: false,
-            },
-            title: {
-              show: false,
-            },
-          },
-          {
-            name: "内部细线条",
-            type: "gauge",
-            radius: "43%",
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              lineStyle: {
-                color: [[1, "#385264"]],
-                width: 1,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            detail: {
-              show: false,
-            },
-            title: {
-              show: false,
-            },
-          },
-          {
-            name: "间隔条形",
-            type: "gauge",
-            radius: "98%",
-            z: 4,
-            splitNumber: 20, //多少段间隔
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              lineStyle: {
-                opacity: 0,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: true,
-              length: 10,
-              splitNumber: 1,
-              lineStyle: {
-                color: "#122B3C",
-                width: 0.5,
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            detail: {
-              show: false,
-            },
-            title: {
-              show: false,
-            },
-          },
-          {
-            name: "数据",
-            type: "gauge",
-            radius: "70.5%",
-            z: 3,
-            startAngle: 225,
-            max: maxData,
-            endAngle: -45,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [dataArr / maxData, "#31F3FF"], // 动态
-                  [1, "#16414D"], //未达到区域颜色-变暗
-                ],
-                width: 10,
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            detail: {
-              show: true,
-              fontWeight: "bold",
-              fontSize: 18,
-              offsetCenter: [0, "60%"], // 文字位置偏移
-              color: "#31F3FF",
-            },
-            pointer: {
-              show: true,
-              length: "75%", // 指针长度，可以是百分比或像素值
-              width: 2, // 指针宽度
-              itemStyle: {
-                color: "#31F3FF", // 指针颜色
-                borderWidth: 0,
-                shadowColor: "rgba(255, 107, 53, 0.5)", // 阴影颜色
-                shadowBlur: 10, // 阴影模糊大小
-              },
-            },
-            data: [
-              {
-                name: "",
-                value: dataArr,
-              },
-            ],
-          },
-          // 内圆-指针外圈阴影
-          {
-            name: "内圆环",
-            type: "pie",
-            radius: "10%",
-            hoverAnimation: false,
-            tooltip: {
-              show: false,
-            },
-            cursor: "default",
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              color: "#08ACDF",
-            },
-            animation: false,
-            data: [1],
-          },
-          // 内圆-指针圆圈
-          {
-            name: "内圆环2",
-            type: "pie",
-            radius: "5%",
-            hoverAnimation: false,
-            cursor: "default",
-            tooltip: {
-              show: false,
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              color: "#31F3FF",
-            },
-            animation: false,
-            data: [1],
-          },
-        ],
-      };
-      //把配置项给实例对象
-      this.chartInstance.setOption(this.option, true);
-    },
-    screenAdapter() {
-      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
-      const adapterOption = {
-        series: [],
-      };
-      this.chartInstance.setOption(adapterOption);
-      this.chartInstance.resize();
-    },
-    // 请求的数据
-    echartsData() {
-      if (this.subData.length > 0) {
-        this.useForm.maxData = 10;
-        this.useForm.useData = this.subData[0].value;
-        let that = this;
-        // 使用配置函数
-        const axisLineColor = this.getAxisLineColor(
-          this.useForm.useData,
-          this.useForm.maxData
-        );
-        const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
-        const adapterOption = {
-          // series: [
-          //   {
-          //     name: "内部动态阴影",
-          //     axisLine: {
-          //       lineStyle: {
-          //         color: axisLineColor,
-          //         // 相当于阴影部分的直径
-          //         // width: 80,
-          //       },
-          //     },
-          //   },
-          //   {
-          //     name: "内部大边框",
-          //     min: 0,
-          //     max: this.useForm.maxData,
-          //   },
-          //   {
-          //     name: "指针上的圆",
-          //     data: [
-          //       {
-          //         value: 5,
-          //       },
-          //     ],
-          //   },
-          //   {
-          //     name: "指针上的渐变圆",
-          //     label: {
-          //       show: true,
-          //       position: "center", // 文字显示在中心位置
-          //       offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位
-          //       formatter: function () {
-          //         // 返回 HTML 标签，使用 rich 里定义的样式
-          //         return `{line|${that.useForm.useData}}`;
-          //       },
-          //       rich: {
-          //         line: {
-          //           color: "#fff", // 第二行文字颜色
-          //           fontSize: titleFontSize, // 第二行文字大小
-          //           lineHeight: 5, // 行高，实现间距
-          //         },
-          //       },
-          //     },
-          //     data: [
-          //       {
-          //         value: 0,
-          //         itemStyle: {
-          //           // 设置渐变颜色
-          //           color: {
-          //             type: "linear",
-          //             x: 0,
-          //             y: 0,
-          //             x2: 0,
-          //             y2: 1,
-          //             colorStops: [
-          //               {
-          //                 offset: 0,
-          //                 color: "rgb(4,112,212)", // 顶部颜色
-          //               },
-          //               {
-          //                 offset: 0.3,
-          //                 color: "rgba(0, 46, 93)", // 底部透明
-          //               },
-          //             ],
-          //             global: false, // 缺省为 false
-          //           },
-          //         },
-          //       },
-          //     ],
-          //   },
-          //   {
-          //     // 指针 数据
-          //     name: this.energyCostText,
-          //     max: this.useForm.maxData, //最大刻度
-          //     axisLabel: {
-          //       formatter: (value) => {
-          //         // 仅显示 0 和最大值
-          //         if (value === 0 || value == this.useForm.maxData) {
-          //           // 替换 100 为你的最大值
-          //           return value;
-          //         }
-          //         return "";
-          //       },
-          //     },
-          //     data: [
-          //       {
-          //         name: this.dateUse,
-          //         value: this.useForm.useData,
-          //       },
-          //     ],
-          //   },
-          // ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        //手动的调用图标对象的resize才能产生效果
-        this.chartInstance.resize();
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.energy_content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100% !important;
-  height: 100%;
-
-  .sys_charts {
-    width: 100%;
-    height: 150px;
-  }
-  .eer {
-    font-size: 18px;
-  }
-}
-.bad {
-  font-size: 18px;
-  margin-top: 5px;
-  color: red;
-  // animation: colorBlink 1s infinite;
-}
-
-@keyframes colorBlink {
-  0%,
-  100% {
-    color: #ff0000;
-  } /* 亮红 */
-  50% {
-    color: #cc0000;
-  } /* 暗红 */
-}
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .sys_charts {
-    height: 1.5rem !important;
-  }
-  .eer {
-    font-size: 0.18rem !important;
-    margin-top: 0.25rem !important;
-  }
-}
-</style>
diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue
index fe1d66e..922e641 100644
--- a/src/views/components/viewEnergy.vue
+++ b/src/views/components/viewEnergy.vue
@@ -81,7 +81,7 @@ export default {
       );
       console.log("当前要渲染的数据对象", chartsObj);
       console.log("当前要渲染的颜色对象", colorObj);
-      const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
       let adapterOption = {};
       // 添加折线的配置
       adapterOption = {
diff --git a/src/views/index.vue b/src/views/index.vue
index c1cdf50..9d5b306 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -5,25 +5,42 @@
         <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>
@@ -32,7 +49,11 @@
         <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>
@@ -40,139 +61,222 @@
         </div>
       </div>
     </div>
-    <div class=" special-div" style="width: 100%;margin-top: 20px;">
+    <div class="special-div" style="width: 100%; margin-top: 20px">
       <div class="special-top">
-        <div class="special-title">中央空调冷源系统(实时EER系数)</div>
+        <div class="special-title">中央空调能耗总览</div>
       </div>
-      <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 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 class="home">
+        <div class="home-top">
+          <div class="home-top-left cool-border">
+            <div class="none-div">
+              <div class="panel-title">
+                <span class="panel-title-text">瞬时能耗</span>
+              </div>
+              <div class="now-data">
+                <div class="data-content">
+                  <img
+                    class="img-One"
+                    src="../assets/images/home-icon1.png"
+                    alt=""
+                  />
+                  <div class="img-word">
+                    <div>瞬时电量(kwh)</div>
+                    <div class="word-color1">{{ this.totalEle }}22222</div>
+                  </div>
+                </div>
+                <div class="data-content">
+                  <img
+                    class="img-One"
+                    src="../assets/images/home-icon2.png"
+                    alt=""
+                  />
+                  <div class="img-word">
+                    <div>瞬时冷量(kwr)</div>
+                    <div class="word-color2">{{ this.totalCap }}3333333</div>
+                  </div>
+                </div>
+              </div>
             </div>
           </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 class="home-top-right">
+            <div class="data-content">
+              <img
+                class="img-One"
+                src="../assets/images/home-icon3.png"
+                alt=""
+              />
+              <div class="img-word">
+                <div>运行天数</div>
+                <div class="word-color3">{{ this.runTime }}322天</div>
               </div>
             </div>
-            <div class="overview-li" @click="goEnergy">
-              <div>散热累计热量</div>
-              <div class="overview-details">
-                {{ heatData.dissipationHeatSum }}kwh
+            <div class="data-content">
+              <img
+                class="img-One"
+                src="../assets/images/home-icon4.png"
+                alt=""
+              />
+              <div class="img-word">
+                <div>湿球温度</div>
+                <div class="word-color4">{{ this.wetBulbTem }}32℃</div>
               </div>
             </div>
-            <div class="overview-li" @click="goEnergy">
-              <div>总热量回收</div>
-              <div class="overview-details">
-                {{ heatData.totalHeatRecoverySum }}kwh
+            <div class="data-content">
+              <img
+                class="img-One"
+                src="../assets/images/home-icon5.png"
+                alt=""
+              />
+              <div class="img-word">
+                <div>室外湿度</div>
+                <div class="word-color5">{{ this.humidity }}22%</div>
               </div>
             </div>
-            <div class="overview-li" @click="goEnergy">
-              <div>热利用率</div>
-              <div class="overview-details">{{ heatData.heatUtilization }}%</div>
-            </div>
-          </div>
-        </div>
-      </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 class="data-content">
+              <img
+                class="img-One"
+                src="../assets/images/home-icon6.png"
+                alt=""
+              />
+              <div class="img-word">
+                <div>室外温度</div>
+                <div class="word-color6">{{ this.temperature }}33℃</div>
+              </div>
             </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="sysBg">
-            <div class="sysBg-title">阀门开度</div>
-            <hot-water :subData="valveData"></hot-water>
-          </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 class="home-bottom">
+          <div class="home-bottom-left cool-border">
+            <div class="none-div">
+              <div class="eep-content">
+                <div class="clod-right">
+                  <div class="eep-li">
+                    <img
+                      class="eep-icon"
+                      src="../assets/images/home-icon7.png"
+                      alt=""
+                    />
+                    <div>日EER</div>
+                    <div class="eep-data">{{ this.homeStatical.dayEER }}20</div>
+                  </div>
+                  <div class="eep-li">
+                    <img
+                      class="eep-icon"
+                      src="../assets/images/home-icon7.png"
+                      alt=""
+                    />
+                    <div>月EER</div>
+                    <div class="eep-data">
+                      {{ this.homeStatical.monthEER }}24
+                    </div>
+                  </div>
+                  <div class="eep-li">
+                    <img
+                      class="eep-icon"
+                      src="../assets/images/home-icon7.png"
+                      alt=""
+                    />
+                    <div>年EER</div>
+                    <div class="eep-data">
+                      {{ this.homeStatical.yearEER }}12
+                    </div>
+                  </div>
+                  <div class="eep-li">
+                    <img
+                      class="eep-icon"
+                      src="../assets/images/home-icon7.png"
+                      alt=""
+                    />
+                    <div>累计EER</div>
+                    <div class="eep-data">
+                      {{ this.homeStatical.totalEER }}12
+                    </div>
+                  </div>
                 </div>
-                <div class="hot-li">
-                  <div class="hot-title">累计热量:</div>
-                  <div class="hot-detail">{{ heatRecoveryData.accumulatedHeatSum }}kwh</div>
+              </div>
+              <div class="clod-content">
+                <div class="clod-left">
+                  <div class="cold-li">
+                    <div class="cold-data">
+                      {{ this.homeStatical.dayColdCap }}32
+                    </div>
+                    <div class="cold-number">日供冷量(kwr)</div>
+                  </div>
+                  <div class="cold-li">
+                    <div class="cold-data">
+                      {{ this.homeStatical.monthColdCap }}232
+                    </div>
+                    <div class="cold-number">当月供冷量(kwr)</div>
+                  </div>
+                  <div class="cold-li">
+                    <div class="cold-data">{{ yearColdCapValue }}3211</div>
+                    <div class="cold-number">
+                      {{
+                        this.homeStatical.yearColdCap > 100000
+                          ? "年供冷量(Mwr)"
+                          : "年供冷量(kwr)"
+                      }}
+                    </div>
+                  </div>
+                  <div class="cold-li">
+                    <div class="cold-data">{{ totalColdCapValue }}324443</div>
+                    <div class="cold-number">
+                      {{
+                        this.homeStatical.totalColdCap > 100000
+                          ? "累计供冷量(Mwr)"
+                          : "累计供冷量(kwr)"
+                      }}
+                    </div>
+                  </div>
                 </div>
               </div>
             </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 class="home-bottom-right">
+            <div class="home-bottom-right-top">
+              <div class="sys-content cool-border">
+                <div class="none-div">
+                  <sys-energy ref="sysEnergy"></sys-energy>
                 </div>
               </div>
             </div>
+            <div class="home-bottom-right-bottom cool-border">
+              <div class="none-div">
+                <charts-data ref="chartsData"></charts-data>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <el-dialog :visible.sync="dialogVisible" title="上传图片" width="500px" @close="addExpenseClose">
+    <div class="special-div" style="width: 100%; margin-top: 20px">
+      <div class="special-top">
+        <div class="special-title">能耗分析</div>
+      </div>
+      <view-energy></view-energy>
+    </div>
+    <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">
@@ -187,16 +291,23 @@
 
 <script>
 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 {
+  introduction,
+  changeLogo,
+  ersDatas,
+  homeRunTime,
+  getCurrentRate,
+  getCoe,
+  homeStatical,
+} from "@/api/index";
 import SysEnergy from "./components/sysEnergy.vue";
-
+import ChartsData from "./components/chartsData.vue";
+import viewEnergy from "./components/viewEnergy.vue";
 export default {
   components: {
-    ViewColdSys,
-    HotWater,
-    SysEnergy
+    SysEnergy,
+    ChartsData,
+    viewEnergy
   },
   data() {
     return {
@@ -219,11 +330,55 @@ export default {
       dialogVisible: false,
       selectedFile: null,
       viewImageUrl: "",
+
+      wetBulbTem: "", //湿球温度
+      humidity: null, //湿度
+      temperature: null, //温度（干球温度）
+      minHumidity: "", //缩小两位小数的相对湿度
+      runTime: "", //运行天数
+      totalEle: "", //实时总功率
+      totalCap: "", //实时总冷量
+      homeStatical: {}, //日月年供冷量、EER
     };
   },
+  computed: {
+    yearColdCapValue: function () {
+      var value = 0;
+      if (this.homeStatical && this.homeStatical.yearColdCap) {
+        value =
+          this.homeStatical.yearColdCap > 100000
+            ? this.homeStatical.yearColdCap / 1000
+            : this.homeStatical.yearColdCap;
+      }
+      return value.toFixed(2);
+    },
+    totalColdCapValue: function () {
+      var value = 0;
+      if (this.homeStatical && this.homeStatical.totalColdCap) {
+        value =
+          this.homeStatical.totalColdCap > 100000
+            ? this.homeStatical.totalColdCap / 1000
+            : this.homeStatical.totalColdCap;
+      }
+      return value.toFixed(2);
+    },
+  },
   mounted() {
     this.getProject();
     this.getErsData();
+
+    this.getRunTime();
+    this.getCurrentRate();
+    this.getHomeStatical();
+    // 调用天气API获取数据
+    // this.getWeatherData();
+    // 调用本地的天气数据
+    this.getLocalWeather();
+    this.move();
+  },
+  destroyed() {
+    // 消除定时器
+    clearInterval(this.timer);
   },
   methods: {
     // 全屏操作
@@ -285,7 +440,7 @@ export default {
       this.viewImageUrl = file.url;
     },
     // 上传成功
-    handleUploadSuccess(response, file, fileList) { },
+    handleUploadSuccess(response, file, fileList) {},
     // 处理文件
     handleFileChange(file, fileList) {
       console.log("file", file);
@@ -424,6 +579,220 @@ export default {
     goEnergy() {
       // this.$router.push("/comprehensiveEnergy/systemEnergy");
     },
+
+    // 获取运行天数
+    getRunTime() {
+      homeRunTime().then((res) => {
+        console.log("运行天数返回", res);
+        if (res.code == 200) {
+          this.runTime = res.rows;
+        }
+      });
+    },
+    // 实时总功率、总冷量
+    getCurrentRate() {
+      getCurrentRate().then((res) => {
+        console.log("实时总功率总冷量返回", res);
+        if (res.code == 200) {
+          this.totalEle = res.rows.totalEle;
+          this.totalCap = res.rows.totalCap;
+        }
+      });
+    },
+    // 日、月、年供冷量、日、月、年EER
+    getHomeStatical() {
+      homeStatical().then((res) => {
+        console.log("处理前日月年供冷量、日月年EER返回", res);
+        if (res.code == 200) {
+          this.homeStatical = this.formatObjectProperties(res.rows);
+          console.log("处理后日月年供冷量、日月年EER返回", this.homeStatical);
+        }
+      });
+    },
+    // 格式化数据
+    formatObjectProperties(obj) {
+      // 遍历对象的每个属性
+      for (var prop in obj) {
+        // 检查属性值是否为字符串
+        if (typeof obj[prop] === "string") {
+          var floatValue = parseFloat(obj[prop]);
+          // 使用 toFixed() 方法将属性值保留两位小数
+          obj[prop] = parseFloat(floatValue.toFixed(2));
+        }
+      }
+      return obj;
+    },
+    getLocalWeather() {
+      getLocalWeatherData().then((res) => {
+        console.log("返回本地的温湿度 <== ", res);
+        debugger;
+        if (res.code == 200) {
+          this.humidity = res.rows.humidity;
+          this.temperature = res.rows.temperature;
+          this.minHumidity = (parseFloat(this.humidity) / 100).toFixed(3);
+          // 以下代码计算湿球温度
+          class z_ambient {
+            constructor() {
+              this.p = 101325; // unit Pa
+            }
+            E(t) {
+              // 饱和水汽压：E(t)=611.2exp(17.67t/(243.5+t))
+              return 611.2 * Math.exp((17.67 * t) / (243.5 + t));
+            }
+            g(t) {
+              // 干空气比焓：g(t)=1.01t    1.01为干空气的定压比热，kJ/(kg℃)。
+              return 1.01 * t;
+            }
+            v(t) {
+              // 水蒸气比焓：v(t)=2501+1.85t   2501是水在0℃时变成水蒸气的汽化潜热，kJ/kg；1.85是水蒸气的定压比热，kJ/(kg℃)
+              return 2501 + 1.85 * t;
+            }
+            d(t, ψ) {
+              // 湿空气的含湿量：d(t,ψ)=0.622ψE(t)/(p-ψE(t))     ψ为相对湿度；p为标准大气压101325，单位为Pa
+              return (0.622 * ψ * this.E(t)) / (this.p - ψ * this.E(t));
+            }
+            h(t, ψ) {
+              // 湿空气的比焓：h(t,ψ)=g(t)+d(t,ψ)v(t)
+              return this.g(t) + this.d(t, ψ) * this.v(t);
+            }
+            ψ(tg, ts) {
+              // ψ为相对湿度, tg为干球温度，ts为湿球温度
+              return (
+                (this.p *
+                  (this.g(ts) - this.g(tg) + this.d(ts, 1) * this.v(ts))) /
+                (this.E(tg) *
+                  (this.g(ts) -
+                    this.g(tg) +
+                    this.d(ts, 1) * this.v(ts) +
+                    0.622 * this.v(tg)))
+              );
+            }
+          }
+          const z = new z_ambient();
+          // const i_tg = 17.8; // 已知干球温度
+          // const i_d = 0.594; // 已知相对湿度
+          const i_tg = Number(this.temperature); // 已知干球温度
+          const i_d = Number(this.minHumidity); // 已知相对湿度
+          console.log("本地相对湿度缩小两倍值", this.minHumidity);
+          console.log("本地干球温度", this.temperature);
+          let o_ts = 0;
+          let o_d = 0;
+          // 计算10000次是因为计算精准的湿球温度
+          for (let i = 0; i < 10000; i++) {
+            o_ts += 0 + i * 0.00001;
+            console.log("o_ts循环值==>", o_ts);
+            o_d = z.ψ(i_tg, o_ts);
+            console.log("o_d值==>", o_d);
+            // console.log("iter: ", i, "o_ts: ", o_ts, "a: ", o_d);
+            const gap = i_d - o_d;
+            console.log("gap值==>", gap);
+            if (gap <= 0.001) {
+              break;
+            }
+          }
+          console.log("target ts: ", o_ts);
+          this.wetBulbTem = parseFloat(o_ts).toFixed(1);
+        }
+      });
+    },
+    // 天气数据
+    getWeatherData() {
+      // 使用合适的方式调用天气API，并获取当前城市的湿度和温度数据
+      const apiKey = "ce464fbc13b3222c568f618f9b536a29"; // 访问密钥
+      const city = "440100"; // 城市编码
+
+      const apiUrl = `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${apiKey}&extensions=base`;
+      // 发起Ajax请求获取天气数据
+      axios
+        .get(apiUrl)
+        .then((response) => {
+          console.log("天气返回值", response);
+          this.humidity = response.data.lives[0].humidity;
+          this.temperature = response.data.lives[0].temperature;
+          this.minHumidity = (parseFloat(this.humidity) / 100).toFixed(3);
+          // 以下代码计算湿球温度
+          class z_ambient {
+            constructor() {
+              this.p = 101325; // unit Pa
+            }
+            E(t) {
+              // 饱和水汽压：E(t)=611.2exp(17.67t/(243.5+t))
+              return 611.2 * Math.exp((17.67 * t) / (243.5 + t));
+            }
+            g(t) {
+              // 干空气比焓：g(t)=1.01t    1.01为干空气的定压比热，kJ/(kg℃)。
+              return 1.01 * t;
+            }
+            v(t) {
+              // 水蒸气比焓：v(t)=2501+1.85t   2501是水在0℃时变成水蒸气的汽化潜热，kJ/kg；1.85是水蒸气的定压比热，kJ/(kg℃)
+              return 2501 + 1.85 * t;
+            }
+            d(t, ψ) {
+              // 湿空气的含湿量：d(t,ψ)=0.622ψE(t)/(p-ψE(t))     ψ为相对湿度；p为标准大气压101325，单位为Pa
+              return (0.622 * ψ * this.E(t)) / (this.p - ψ * this.E(t));
+            }
+            h(t, ψ) {
+              // 湿空气的比焓：h(t,ψ)=g(t)+d(t,ψ)v(t)
+              return this.g(t) + this.d(t, ψ) * this.v(t);
+            }
+            ψ(tg, ts) {
+              // ψ为相对湿度, tg为干球温度，ts为湿球温度
+              return (
+                (this.p *
+                  (this.g(ts) - this.g(tg) + this.d(ts, 1) * this.v(ts))) /
+                (this.E(tg) *
+                  (this.g(ts) -
+                    this.g(tg) +
+                    this.d(ts, 1) * this.v(ts) +
+                    0.622 * this.v(tg)))
+              );
+            }
+          }
+          const z = new z_ambient();
+          console.log("z值", z);
+          // const i_tg = 32; // 已知干球温度
+          // const i_d = 0.331; // 已知相对湿度
+          const i_tg = Number(this.temperature); // 已知干球温度
+          const i_d = Number(this.minHumidity); // 已知相对湿度
+          console.log("干球温度", this.temperature);
+          console.log("相对湿度", this.minHumidity);
+          let o_ts = 0;
+          let o_d = 0;
+          // 计算10000次是因为计算精准的湿球温度
+          for (let i = 0; i < 10000; i++) {
+            o_ts += 0 + i * 0.00001;
+            o_d = z.ψ(i_tg, o_ts);
+            // console.log("iter: ", i, "o_ts: ", o_ts, "a: ", o_d);
+            const gap = i_d - o_d;
+            if (gap <= 0.001) {
+              break;
+            }
+            // console.log("o_ts值", o_ts)
+            // console.log("o_d值", o_d)
+            // console.log("gap值", gap)
+          }
+          console.log("target ts: ", o_ts);
+          this.wetBulbTem = parseFloat(o_ts).toFixed(1);
+          console.log("湿球温度: ", this.wetBulbTem);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    // 定时器
+    move() {
+      // 定时器 20秒请求一次
+      this.timer = setInterval(() => {
+        this.$refs.chartsData.getChartsData();
+        this.$refs.sysEnergy.getCoe();
+        this.getRunTime();
+        this.getCurrentRate();
+        this.getHomeStatical();
+        // 调用天气API获取数据
+        // this.getWeatherData();
+        this.getLocalWeather();
+      }, 1000 * 5 * 60);
+    },
   },
 };
 </script>
@@ -490,250 +859,425 @@ export default {
     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;
+/** 科技感边框容器 - 渐变边框 + 角标装饰 */
+.cool-border {
   position: relative;
+  border: 1px solid rgba(0, 136, 240, 0.35);
+  background: linear-gradient(
+    135deg,
+    rgba(0, 68, 126, 0.25) 0%,
+    rgba(0, 40, 80, 0.1) 100%
+  );
+  border-radius: 0.06rem;
 
-  // 左上角装饰光点
+  /** 四角装饰 - 左上 */
   &::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;
+    top: -1px;
+    left: -1px;
+    width: 0.22rem;
+    height: 0.22rem;
+    border-top: 2px solid #00d7e9;
+    border-left: 2px solid #00d7e9;
+    border-radius: 0.02rem 0 0 0;
+    z-index: 1;
   }
 
-  // 右下角装饰光点
+  /** 四角装饰 - 右下 */
   &::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;
+    bottom: -1px;
+    right: -1px;
+    width: 0.22rem;
+    height: 0.22rem;
+    border-bottom: 2px solid #00d7e9;
+    border-right: 2px solid #00d7e9;
+    border-radius: 0 0 0.02rem 0;
+    z-index: 1;
   }
+}
 
-  .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);
-    }
+/** 内容区域 - 内边距 */
+.none-div {
+  width: 100%;
+  height: 100%;
+  padding: 0.15rem;
+  overflow: hidden;
+  position: relative;
 
-    // 标题右侧装饰光晕
-    &::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);
-    }
+  /** 左下角装饰 */
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: -1px;
+    width: 0.22rem;
+    height: 0.22rem;
+    border-bottom: 2px solid #00d7e9;
+    border-left: 2px solid #00d7e9;
+    border-radius: 0 0 0 0.02rem;
+    z-index: 1;
+  }
 
-    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+  /** 右上角装饰 */
+  &::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 0.22rem;
+    height: 0.22rem;
+    border-top: 2px solid #00d7e9;
+    border-right: 2px solid #00d7e9;
+    border-radius: 0 0.02rem 0 0;
+    z-index: 1;
   }
 }
 
-.project-data {
+.home {
   display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  margin: 20px;
-
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  padding: 0.3rem;
 
-  .overview {
-    width: 100%;
-    padding: 30px 20px 5px 20px;
+  .home-top {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
     justify-content: space-between;
-    flex-wrap: wrap;
+    gap: 0.15rem;
+    // width: 100%;
 
-    .overview-li {
-      cursor: pointer;
-      width: 49%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      background-position: center center;
-      margin-bottom: 15px;
-      font-family: SourceHanSansCN-Regular;
-      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%);
-      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;
-        color: #15e1fd;
-        margin-top: 5px;
+    .home-top-left {
+      width: 5.1rem;
+      flex-shrink: 0;
+
+      .now-data {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0.15rem 0.15rem 0;
+
+        .data-content {
+          width: 46%;
+          padding: 0.25rem 0.15rem;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid rgba(0, 180, 240, 0.2);
+          border-radius: 0.06rem;
+          background: linear-gradient(
+            180deg,
+            rgba(0, 100, 180, 0.15) 0%,
+            rgba(0, 50, 100, 0.05) 100%
+          );
+          position: relative;
+          transition: all 0.3s ease;
+
+          /** 顶部高光线条 */
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 15%;
+            right: 15%;
+            height: 1px;
+            background: linear-gradient(
+              90deg,
+              transparent,
+              rgba(0, 215, 233, 0.5),
+              transparent
+            );
+          }
+
+          &:hover {
+            border-color: rgba(0, 215, 233, 0.45);
+            background: linear-gradient(
+              180deg,
+              rgba(0, 120, 200, 0.25) 0%,
+              rgba(0, 60, 120, 0.1) 100%
+            );
+            box-shadow: 0 0 0.12rem rgba(0, 215, 233, 0.12),
+              inset 0 0 0.12rem rgba(0, 215, 233, 0.04);
+          }
+
+          .img-One {
+            width: 0.43rem;
+            height: 0.43rem;
+            margin-right: 0.17rem;
+            filter: drop-shadow(0 0 0.05rem rgba(0, 215, 233, 0.3));
+          }
+
+          .img-word {
+            font-size: 0.16rem;
+            display: flex;
+            flex-direction: column;
+            color: #e3fff9;
+          }
+
+          .word-color1 {
+            font-size: 0.24rem;
+            color: #ffb219;
+            margin-top: 0.1rem;
+            text-shadow: 0 0 0.06rem rgba(255, 178, 25, 0.35);
+          }
+
+          .word-color2 {
+            font-size: 0.24rem;
+            color: #209eff;
+            margin-top: 0.1rem;
+            text-shadow: 0 0 0.06rem rgba(32, 158, 255, 0.35);
+          }
+        }
       }
     }
-  }
-}
 
-.chartsDiv {
-  width: 100%;
-  height: 4rem;
-}
+    .home-top-right {
+      display: flex;
+      flex-direction: row;
+      /** 自适应剩余空间，4个卡片一行排列 */
+      flex: 1;
+      min-width: 0;
+      gap: 0.12rem;
 
-.project-bie {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  margin: 10px 20px 20px 20px;
+      .data-content {
+        /** 等分宽度，不换行 */
+        flex: 1;
+        min-width: 0;
+        padding: 0.35rem 0.15rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid rgba(0, 180, 240, 0.25);
+        border-radius: 0.06rem;
+        background: linear-gradient(
+          180deg,
+          rgba(0, 100, 180, 0.2) 0%,
+          rgba(0, 50, 100, 0.08) 100%
+        );
+        position: relative;
+        transition: all 0.3s ease;
+        box-sizing: border-box;
 
-  .pressure {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-top: 25px;
+        /** 顶部高光线条 */
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 15%;
+          right: 15%;
+          height: 1px;
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(0, 215, 233, 0.6),
+            transparent
+          );
+        }
+
+        &:hover {
+          border-color: rgba(0, 215, 233, 0.5);
+          background: linear-gradient(
+            180deg,
+            rgba(0, 120, 200, 0.3) 0%,
+            rgba(0, 60, 120, 0.12) 100%
+          );
+          box-shadow: 0 0 0.15rem rgba(0, 215, 233, 0.15),
+            inset 0 0 0.15rem rgba(0, 215, 233, 0.05);
+        }
+      }
+
+      .img-One {
+        width: 0.45rem;
+        height: 0.45rem;
+        margin-right: 0.12rem;
+        flex-shrink: 0;
+        filter: drop-shadow(0 0 0.06rem rgba(0, 215, 233, 0.3));
+      }
+
+      .img-word {
+        font-size: 0.16rem;
+        color: rgba(200, 235, 255, 0.9);
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .word-color3 {
+        font-size: 0.28rem;
+        color: #00be97;
+        margin-top: 0.12rem;
+        text-shadow: 0 0 0.08rem rgba(0, 190, 151, 0.4);
+      }
+
+      .word-color4 {
+        font-size: 0.28rem;
+        color: #ffb219;
+        margin-top: 0.12rem;
+        text-shadow: 0 0 0.08rem rgba(255, 178, 25, 0.4);
+      }
+
+      .word-color5 {
+        font-size: 0.28rem;
+        color: #409efc;
+        margin-top: 0.12rem;
+        text-shadow: 0 0 0.08rem rgba(64, 158, 252, 0.4);
+      }
+
+      .word-color6 {
+        font-size: 0.28rem;
+        color: #c144ff;
+        margin-top: 0.12rem;
+        text-shadow: 0 0 0.08rem rgba(193, 68, 255, 0.4);
+      }
+    }
   }
 
-  .hot-tem {
-    width: 100%;
-    padding: 0 20px;
+  .home-bottom {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: stretch;
-    flex-wrap: wrap;
-    margin-top: 25px;
-
-    .tem-li {
-      background-color: rgba(93, 125, 143, 0.5);
-      width: 32%;
-      padding: 10px;
-      border-radius: 10px;
+    margin-top: 0.29rem;
+    gap: 0.15rem;
+
+    .home-bottom-left {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      margin-bottom: 20px;
+      width: 5.1rem;
+      flex-shrink: 0;
 
-      .tem-title {
-        font-size: 15px;
-        font-weight: 600;
-        color: #ffffff;
-      }
+      .clod-content {
+        // width: 5.1rem;
+        // margin-top: 0.2rem;
+
+        .clod-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          flex-flow: wrap;
+          padding: 0.3rem 0.3rem 0 0.3rem;
+          // width: 100%;
+
+          .cold-li {
+            width: 1.9rem;
+            height: 1.78rem;
+            padding-bottom: 0.27rem;
+            margin-bottom: 0.2rem;
+            background-image: url(../assets/images/cold-bg.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-end;
+            font-size: 0.18rem;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0rem;
+            color: #a9c0f2;
+
+            .cold-data {
+              font-size: 0.26rem;
+              color: #ffffff;
+              margin-bottom: 0.19rem;
+            }
 
-      .tem-detail {
-        margin-top: 8px;
-        font-size: 20px;
-        font-weight: 600;
-        color: #f89615;
-        text-align: center;
+            .cold-number {
+              width: 100%;
+              text-align: center;
+            }
+          }
+        }
       }
-    }
-  }
 
-  .bir-right {
-    width: 49.4%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+      .eep-content {
+        width: 4.8rem;
 
-    .special-div {
-      width: 100%;
-      margin-bottom: 20px;
+        .clod-right {
+          display: flex;
+          flex-direction: column;
+          padding: 0.37rem 0.34rem 0.05rem 0.34rem;
+          width: 100%;
+
+          .eep-li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 0.11rem 0 0.07rem 0.3rem;
+            font-size: 0.17rem;
+            position: relative;
+
+            .eep-icon {
+              width: 0.23rem;
+              height: 0.27rem;
+              margin-right: 0.48rem;
+            }
+
+            .eep-data {
+              color: #4595f1;
+              position: absolute;
+              top: 0.13rem;
+              left: 3.44rem;
+              font-weight: bold;
+            }
+          }
+
+          .eep-li:nth-child(2n-1) {
+            background-color: #042f61;
+            font-size: 0.17rem;
+            border: 1px solid #08406e;
+            border-radius: 0 0 0.2rem 0;
+            background: linear-gradient(to right, #16417a, #0a2a53, #081553);
+          }
+        }
+      }
     }
 
-    .later-data {
-      width: 100%;
+    .home-bottom-right {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       justify-content: space-between;
-      margin-top: 20px;
-
-      .special-div {
-        width: 49%;
-        margin-bottom: 0;
-      }
+      /** 与home-top-right保持一致，自适应剩余空间 */
+      flex: 1;
+      min-width: 0;
 
-      .hot-data {
+      .home-bottom-right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: stretch;
         width: 100%;
-        padding: 25px 25px 5px 25px;
 
-        .hot-li {
+        .sys-content {
           width: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 20px;
+          // padding: 0.34rem 0.19rem 0.2rem 0.19rem;
+          margin-bottom: 0.2rem;
+          // height: 2.6rem;
+        }
+      }
 
-          .hot-title {
-            font-size: 15px;
-            font-weight: 600;
-            color: #ffffff;
-          }
+      .home-bottom-right-bottom {
+        width: 100%;
+        height: 3.5rem;
 
-          .hot-detail {
-            font-size: 20px;
-            font-weight: 600;
-            color: #f5f127;
-          }
+        .sys_title {
+          width: 15%;
+          font-size: 0.2rem;
+          margin: 0.1rem 0 0 0.2rem;
+          display: flex;
+          flex-direction: column;
+          color: #c5fff3;
         }
       }
     }
   }
 }
-
-@media (max-width: 1485px) {}
-
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {}
 </style>