From 027e4d6d7f8a2c84515acdf5f9d8236411709488 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 10 Jun 2025 14:04:05 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/components/allEnergy.vue  |   34 +-
 .../bigScreen/components/coldSysEnergy.vue    |   18 +-
 .../bigScreen/components/waterSysEnergy.vue   | 1132 +++++++++--------
 3 files changed, 602 insertions(+), 582 deletions(-)

diff --git a/src/views/bigScreen/components/allEnergy.vue b/src/views/bigScreen/components/allEnergy.vue
index 2fd4fc2..d2f5e12 100644
--- a/src/views/bigScreen/components/allEnergy.vue
+++ b/src/views/bigScreen/components/allEnergy.vue
@@ -124,10 +124,10 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量" },
+                { value: this.energyMes.waterStandardCoal, name: "用水量" },
+                { value: this.energyMes.coldStandardCoal, name: "产冷量" },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -140,10 +140,10 @@ export default {
             },
             {
               data: [
-                { value: this.energyMes.totalEle, name: "耗电量标准煤" },
-                { value: this.energyMes.totalEle, name: "用水量标准煤" },
-                { value: this.energyMes.totalEle, name: "产冷量标准煤" },
-                { value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
+                { value: this.energyMes.eleStandardCoal, name: "耗电量" },
+                { value: this.energyMes.waterStandardCoal, name: "用水量" },
+                { value: this.energyMes.coldStandardCoal, name: "产冷量" },
+                { value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
               ],
             },
           ],
@@ -227,10 +227,10 @@ export default {
             {
               name: "数据详情:",
               data: [
-                { value: 0, name: "耗电量标准煤" },
-                { value: 0, name: "用水量标准煤" },
-                { value: 0, name: "产冷量标准煤" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "耗电量" },
+                { value: 0, name: "用水量" },
+                { value: 0, name: "产冷量" },
+                { value: 0, name: "蒸汽量" },
               ],
               itemStyle: {
                 color: function (params) {
@@ -243,10 +243,10 @@ export default {
             },
             {
               data: [
-                { value: 0, name: "耗电量标准煤" },
-                { value: 0, name: "用水量标准煤" },
-                { value: 0, name: "产冷量标准煤" },
-                { value: 0, name: "蒸汽量标准煤" },
+                { value: 0, name: "耗电量" },
+                { value: 0, name: "用水量" },
+                { value: 0, name: "产冷量" },
+                { value: 0, name: "蒸汽量" },
               ],
             },
           ],
@@ -278,7 +278,7 @@ export default {
       this.option = {
         //环形图中间文字
         title: {
-          subtext: "总标准煤",
+          subtext: "标准煤",
           textStyle: {
             color: "#ffffff",
           },
diff --git a/src/views/bigScreen/components/coldSysEnergy.vue b/src/views/bigScreen/components/coldSysEnergy.vue
index 6dbdd70..ea9b5df 100644
--- a/src/views/bigScreen/components/coldSysEnergy.vue
+++ b/src/views/bigScreen/components/coldSysEnergy.vue
@@ -2,8 +2,8 @@
   <div class="energy_content">
     <div class="sys_charts" ref="sys_charts"></div>
     <div class="eer">
-      <div>用电量:{{energyMes.totalEle}}kw/h</div>
-      <div>产冷量:{{energyMes.totalCold}}kwh</div>
+      <div>用电量:{{ energyMes.totalEle }}kw/h</div>
+      <div>产冷量:{{ energyMes.totalCold }}kwh</div>
     </div>
   </div>
 </template>
@@ -460,8 +460,18 @@ export default {
         console.log("两个系统参数返回", res);
         if (res.code == 200) {
           this.energyMes = res.rows[0];
-          this.useForm.maxData = 10;
-          this.useForm.useData = res.rows[0].eer;
+          this.useForm.maxData = 10; //最大值
+          const { totalEle, totalCold } = res.rows[0];
+          if (totalEle === 0 || totalCold === 0) {
+            this.useForm.useData = 0;
+          } else {
+            const result = totalCold / totalEle;
+            if (Number.isInteger(result)) {
+              this.useForm.useData = result;
+            } else {
+              this.useForm.useData = parseFloat(result.toFixed(2));
+            }
+          }
           let that = this;
           // 使用配置函数
           const axisLineColor = this.getAxisLineColor(
diff --git a/src/views/bigScreen/components/waterSysEnergy.vue b/src/views/bigScreen/components/waterSysEnergy.vue
index 7f067ae..face20c 100644
--- a/src/views/bigScreen/components/waterSysEnergy.vue
+++ b/src/views/bigScreen/components/waterSysEnergy.vue
@@ -1,599 +1,609 @@
 <template>
-    <div class="energy_content">
-      <div class="sys_charts" ref="sys_charts"></div>
-      <div class="eer">
-        <div>用电量:{{energyMes.totalEle}}kw/h</div>
-        <div>用水量:{{energyMes.totalWater}}吨</div>
-      </div>
+  <div class="energy_content">
+    <div class="sys_charts" ref="sys_charts"></div>
+    <div class="eer">
+      <div>用电量:{{ energyMes.totalEle }}kw/h</div>
+      <div>用水量:{{ energyMes.totalWater }}吨</div>
     </div>
-  </template>
-  
-  <script>
-  import * as echarts from "echarts";
-  import { eventBus } from "@/utils/evenBus";
-  import { overView } from "@/api/bigScreen";
-  import { getDay, getMonth, getYear } from "@/utils/datetime";
-  export default {
-    data() {
-      return {
-        chartInstance: null,
-        option: {},
-        isShowModule: false,
-        energyCostText: "eer数据",
-        dateUse: "",
-        useForm: {
-          useData: 5,
-          maxData: 10, //最大的刻度值
-        },
-        queryType: "day", //默认页面为day
-        dataTime: "",
-        energyMes: {},
-      };
-    },
-    created() {
-      eventBus.$on("data-sent-queryType", (data) => {
-        this.queryType = data;
-        console.log("得到的queryType为", this.queryType);
-        this.getChartsData();
-      });
-    },
-    mounted() {
-      this.initChart();
-      this.screenAdapter();
-      window.addEventListener("resize", this.screenAdapter);
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { eventBus } from "@/utils/evenBus";
+import { overView } from "@/api/bigScreen";
+import { getDay, getMonth, getYear } from "@/utils/datetime";
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      isShowModule: false,
+      energyCostText: "eer数据",
+      dateUse: "",
+      useForm: {
+        useData: 5,
+        maxData: 10, //最大的刻度值
+      },
+      queryType: "day", //默认页面为day
+      dataTime: "",
+      energyMes: {},
+    };
+  },
+  created() {
+    eventBus.$on("data-sent-queryType", (data) => {
+      this.queryType = data;
+      console.log("得到的queryType为", this.queryType);
       this.getChartsData();
+    });
+  },
+  mounted() {
+    this.initChart();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+    this.getChartsData();
+  },
+  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)"],
+        ];
+      }
     },
-    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() {
-        // 使用配置函数
-        const axisLineColor = this.getAxisLineColor(
-          this.useForm.useData,
-          this.useForm.maxData
-        );
-        this.chartInstance = echarts.init(this.$refs.sys_charts);
-        // var dataArr = 80;
-        this.option = {
-          backgroundColor: "transparent",
-          tooltip: {
-            formatter: "{a} <br/>{b} : {c}",
-          },
-          series: [
-            {
-              name: "内部动态阴影",
-              type: "gauge",
-              center: ["50%", "100%"],
-              startAngle: 180,
-              endAngle: -0,
-              radius: "155%",
-              z: 1,
-              splitNumber: 10,
-              axisLine: {
-                lineStyle: {
-                  color: axisLineColor,
-                  // 相当于阴影部分的直径
-                  // width: 80,
-                },
-              },
-              axisLabel: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              splitLine: {
-                show: false,
-              },
-              itemStyle: {
-                show: false,
-              },
-              textStyle: {
-                formatter: function (value) {
-                  if (value !== 0) {
-                    return parseInt(value);
-                  } else {
-                    return 0;
-                  }
-                },
-                offsetCenter: [0, 5],
-                detail: {
-                  padding: [0, 0, 0, 0],
-                  // fontSize: titleFontSize * 1.2,
-                  color: "#EDFFFD",
-                },
-              },
-              title: {
-                //标题
-                show: false,
-              },
-              pointer: {
-                show: false,
+    //初始化chartInstance2对象 折线图
+    initChart() {
+      // 使用配置函数
+      const axisLineColor = this.getAxisLineColor(
+        this.useForm.useData,
+        this.useForm.maxData
+      );
+      this.chartInstance = echarts.init(this.$refs.sys_charts);
+      // var dataArr = 80;
+      this.option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}",
+        },
+        series: [
+          {
+            name: "内部动态阴影",
+            type: "gauge",
+            center: ["50%", "100%"],
+            startAngle: 180,
+            endAngle: -0,
+            radius: "155%",
+            z: 1,
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: axisLineColor,
+                // 相当于阴影部分的直径
+                // width: 80,
               },
             },
-            {
-              // 新增的蓝色背景
-              name: "蓝色背景",
-              type: "gauge",
-              center: ["50%", "100%"],
-              // 自定义起始角度
-              startAngle: 200,
-              // 自定义结束角度
-              endAngle: -20,
-              radius: "155%",
-              z: 0, // 确保它在最底层
-              splitNumber: 10,
-              axisLine: {
-                lineStyle: {
-                  color: [
-                    [1, "#01366d"], // 设置背景颜色为蓝色
-                  ],
-                },
-              },
-              axisLabel: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              splitLine: {
-                show: false,
-              },
-              itemStyle: {
-                show: false,
-              },
-              textStyle: {
-                show: false,
-              },
-              title: {
-                show: false,
-              },
-              pointer: {
-                show: false,
-              },
+            axisLabel: {
+              show: false,
             },
-            {
-              name: "内部大边框",
-              type: "gauge",
-              z: 2,
-              min: 0,
-              max: this.useForm.maxData,
-              splitNumber: 10,
-              radius: "180%",
-              center: ["50%", "100%"],
-              startAngle: 180,
-              endAngle: -0,
-              axisLine: {
-                lineStyle: {
-                  color: [[1, "#023B80"]],
-                  width: 3,
-                  // 阴影
-                  shadowColor: "rgba(14,31,73)",
-                  shadowBlur: 6,
-                  shadowOffsetX: 0,
-                },
-              },
-              tooltip: {
-                show: false,
-              },
-              axisLabel: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              splitLine: {
-                show: false,
-              },
-              itemStyle: {
-                show: false,
-              },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            textStyle: {
+              formatter: function (value) {
+                if (value !== 0) {
+                  return parseInt(value);
+                } else {
+                  return 0;
+                }
+              },
+              offsetCenter: [0, 5],
               detail: {
-                show: false,
-              },
-              title: {
-                //标题
-                show: false,
-              },
-              pointer: {
-                show: false,
+                padding: [0, 0, 0, 0],
+                // fontSize: titleFontSize * 1.2,
+                color: "#EDFFFD",
               },
             },
-            {
-              name: "指针上的圆",
-              //指针上的圆
-              type: "pie",
-              tooltip: {
-                show: false,
-              },
-              emphasis: {
-                scale: false, // 新版的配置
-              },
-              legendHoverLink: false,
-              radius: ["0%", "70%"],
-              center: ["50%", "100%"],
-              startAngle: 120,
-              endAngle: -0,
-              labelLine: {
-                show: false,
-              },
-              axisLine: {
-                lineStyle: {
-                  color: [[1, "#F2BF59"]],
-                  width: 3,
-                  // 阴影
-                  shadowColor: "rgba(14,31,73)",
-                  shadowBlur: 60,
-                  shadowOffsetX: 0,
-                },
-              },
-              label: {
-                show: false,
-              },
-              data: [
-                {
-                  value: 120,
-                  itemStyle: {
-                    color: "#00223a",
-                  },
-                },
-              ],
-              z: 4,
-            },
-            {
-              name: "指针上的渐变圆",
-              //指针上的圆-渐变
-              type: "pie",
-              tooltip: {
-                show: false,
-              },
-              emphasis: {
-                scale: false, // 新版的配置
+            title: {
+              //标题
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            // 新增的蓝色背景
+            name: "蓝色背景",
+            type: "gauge",
+            center: ["50%", "100%"],
+            // 自定义起始角度
+            startAngle: 200,
+            // 自定义结束角度
+            endAngle: -20,
+            radius: "155%",
+            z: 0, // 确保它在最底层
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [1, "#01366d"], // 设置背景颜色为蓝色
+                ],
               },
-              legendHoverLink: false,
-              radius: ["0%", "70%"],
-              center: ["50%", "100%"],
-              startAngle: 120,
-              endAngle: 0,
-              labelLine: {
-                show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            textStyle: {
+              show: false,
+            },
+            title: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            name: "内部大边框",
+            type: "gauge",
+            z: 2,
+            min: 0,
+            max: this.useForm.maxData,
+            splitNumber: 10,
+            radius: "180%",
+            center: ["50%", "100%"],
+            startAngle: 180,
+            endAngle: -0,
+            axisLine: {
+              lineStyle: {
+                color: [[1, "#023B80"]],
+                width: 3,
+                // 阴影
+                shadowColor: "rgba(14,31,73)",
+                shadowBlur: 6,
+                shadowOffsetX: 0,
               },
-              axisLine: {
-                lineStyle: {
-                  color: [[1, "#F2BF59"]],
-                  width: 3,
-                  // 阴影
-                  shadowColor: "rgba(14,31,73)",
-                  shadowBlur: 60,
-                  shadowOffsetX: 0,
-                },
+            },
+            tooltip: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              //标题
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            name: "指针上的圆",
+            //指针上的圆
+            type: "pie",
+            tooltip: {
+              show: false,
+            },
+            emphasis: {
+              scale: false, // 新版的配置
+            },
+            legendHoverLink: false,
+            radius: ["0%", "70%"],
+            center: ["50%", "100%"],
+            startAngle: 120,
+            endAngle: -0,
+            labelLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: [[1, "#F2BF59"]],
+                width: 3,
+                // 阴影
+                shadowColor: "rgba(14,31,73)",
+                shadowBlur: 60,
+                shadowOffsetX: 0,
               },
-              z: 5,
-            },
-            {
-              // 指针 数据
-              name: this.energyCostText,
-              type: "gauge",
-              radius: "175%",
-              center: ["50%", "100%"],
-              min: 0, //最小刻度
-              max: this.useForm.maxData, //最大刻度
-              splitNumber: 0, //刻度数量
-              startAngle: 180,
-              endAngle: -0,
-              axisLine: {
-                show: false,
-              }, //仪表盘轴线
-              axisLabel: {
-                show: true,
-                color: "rgba(4,112,212,1)",
-                // distance: 16,
-                // fontSize: 12,
-                formatter: (value) => {
-                  // 仅显示 0 和最大值
-                  if (value === 0 || value == this.useForm.maxData) {
-                    // 替换 100 为你的最大值
-                    return value;
-                  }
-                  return "";
-                },
-              }, //刻度标签-数字。
-              axisTick: {
-                show: true,
-                // splitNumber: 5,
-                lineStyle: {
-                  color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用
-                  // width: 3,
-                },
-                // length: 6,
-              }, //刻度样式
-              splitLine: {
-                show: true,
-                // length: 6,
-                lineStyle: {
-                  color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用
+            },
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 120,
+                itemStyle: {
+                  color: "#00223a",
                 },
-              }, //分隔线样式
-              itemStyle: {
-                show: false,
               },
-              detail: {
-                show: false,
+            ],
+            z: 4,
+          },
+          {
+            name: "指针上的渐变圆",
+            //指针上的圆-渐变
+            type: "pie",
+            tooltip: {
+              show: false,
+            },
+            emphasis: {
+              scale: false, // 新版的配置
+            },
+            legendHoverLink: false,
+            radius: ["0%", "70%"],
+            center: ["50%", "100%"],
+            startAngle: 120,
+            endAngle: 0,
+            labelLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: [[1, "#F2BF59"]],
+                width: 3,
+                // 阴影
+                shadowColor: "rgba(14,31,73)",
+                shadowBlur: 60,
+                shadowOffsetX: 0,
               },
-              title: {
-                //标题
-                show: false,
+            },
+            z: 5,
+          },
+          {
+            // 指针 数据
+            name: this.energyCostText,
+            type: "gauge",
+            radius: "175%",
+            center: ["50%", "100%"],
+            min: 0, //最小刻度
+            max: this.useForm.maxData, //最大刻度
+            splitNumber: 0, //刻度数量
+            startAngle: 180,
+            endAngle: -0,
+            axisLine: {
+              show: false,
+            }, //仪表盘轴线
+            axisLabel: {
+              show: true,
+              color: "rgba(4,112,212,1)",
+              // distance: 16,
+              // fontSize: 12,
+              formatter: (value) => {
+                // 仅显示 0 和最大值
+                if (value === 0 || value == this.useForm.maxData) {
+                  // 替换 100 为你的最大值
+                  return value;
+                }
+                return "";
+              },
+            }, //刻度标签-数字。
+            axisTick: {
+              show: true,
+              // splitNumber: 5,
+              lineStyle: {
+                color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用
+                // width: 3,
+              },
+              // length: 6,
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              // length: 6,
+              lineStyle: {
+                color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用
+              },
+            }, //分隔线样式
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              //标题
+              show: false,
+            },
+            data: [
+              {
+                name: this.dateUse,
+                value: this.useForm.useData,
               },
-              data: [
-                {
-                  name: this.dateUse,
-                  value: this.useForm.useData,
-                },
-              ],
+            ],
+            itemStyle: {
+              color: "#EDF85B",
+            },
+            pointer: {
+              show: true,
+              length: "60%",
+              radius: "30%",
+              shape: "triangle", // 使用内置的箭头形状
+              //   width: 15, //指针粗细
               itemStyle: {
-                color: "#EDF85B",
+                color: "rgb(3, 105, 206,0.5)", // 指针的颜色
+                // shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色
+                shadowBlur: 20, // 朦胧光的模糊度
               },
-              pointer: {
-                show: true,
-                length: "60%",
-                radius: "30%",
-                shape: "triangle", // 使用内置的箭头形状
-                //   width: 15, //指针粗细
-                itemStyle: {
-                  color: "rgb(3, 105, 206,0.5)", // 指针的颜色
-                  // shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色
-                  shadowBlur: 20, // 朦胧光的模糊度
-                },
-              },
-              animationDuration: 4000,
-              z: 2,
             },
-          ],
-        };
-        //把配置项给实例对象
-        this.chartInstance.setOption(this.option, true);
-      },
-      screenAdapter() {
-        const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
-        const adapterOption = {
-          series: [
-            {
-              name: "内部动态阴影",
-              type: "gauge",
-              axisLine: {
-                lineStyle: {
-                  width: titleFontSize * 1,
-                },
+            animationDuration: 4000,
+            z: 2,
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+    screenAdapter() {
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
+      const adapterOption = {
+        series: [
+          {
+            name: "内部动态阴影",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: titleFontSize * 1,
               },
             },
-            {
-              name: "蓝色背景",
-              type: "gauge",
-              axisLine: {
-                lineStyle: {
-                  width: titleFontSize * 1,
-                },
+          },
+          {
+            name: "蓝色背景",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: titleFontSize * 1,
               },
             },
-            {
-              // 指针 数据
-              name: this.energyCostText,
-              axisLabel: {
-                distance: titleFontSize,
-                fontSize: titleFontSize / 4,
-              },
-              axisTick: {
-                distance: -(titleFontSize / 70),
-                lineStyle: {
-                  width: titleFontSize / 20,
-                },
-                length: titleFontSize / 5,
-              }, //刻度样式
-              splitLine: {
-                distance: -(titleFontSize / 70),
-                lineStyle: {
-                  width: titleFontSize / 20,
-                },
-                length: titleFontSize / 3.6,
-              }, //分隔线样式
-              pointer: {
-                width: titleFontSize / 2, //指针粗细
-              },
+          },
+          {
+            // 指针 数据
+            name: this.energyCostText,
+            axisLabel: {
+              distance: titleFontSize,
+              fontSize: titleFontSize / 4,
             },
-          ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        this.chartInstance.resize();
-      },
-      // 请求的数据
-      getChartsData() {
-        if (this.queryType === "day") {
-          this.dataTime = getDay(0);
-        } else if (this.queryType === "month") {
-          this.dataTime = getMonth(0);
-        } else if (this.queryType === "year") {
-          this.dataTime = getYear(0);
-        }
-        let data = {
-          timeType: this.queryType,
-          startTime: this.dataTime,
-          endTime: this.dataTime,
-          systemType: "1",
-        };
-        overView(data).then((res) => {
-          console.log("两个系统参数返回", res);
-          if (res.code == 200) {
-            this.energyMes = res.rows[0];
-            this.useForm.maxData = 10;
-            this.useForm.useData = res.rows[0].eer;
-            let that = this;
-            // 使用配置函数
-            const axisLineColor = this.getAxisLineColor(
-              this.useForm.useData,
-              this.useForm.maxData
-            );
-            const adapterOption = {
-              series: [
-                {
-                  name: "内部动态阴影",
-                  axisLine: {
-                    lineStyle: {
-                      color: axisLineColor,
-                      // 相当于阴影部分的直径
-                      // width: 80,
-                    },
+            axisTick: {
+              distance: -(titleFontSize / 70),
+              lineStyle: {
+                width: titleFontSize / 20,
+              },
+              length: titleFontSize / 5,
+            }, //刻度样式
+            splitLine: {
+              distance: -(titleFontSize / 70),
+              lineStyle: {
+                width: titleFontSize / 20,
+              },
+              length: titleFontSize / 3.6,
+            }, //分隔线样式
+            pointer: {
+              width: titleFontSize / 2, //指针粗细
+            },
+          },
+        ],
+      };
+      this.chartInstance.setOption(adapterOption);
+      this.chartInstance.resize();
+    },
+    // 请求的数据
+    getChartsData() {
+      if (this.queryType === "day") {
+        this.dataTime = getDay(0);
+      } else if (this.queryType === "month") {
+        this.dataTime = getMonth(0);
+      } else if (this.queryType === "year") {
+        this.dataTime = getYear(0);
+      }
+      let data = {
+        timeType: this.queryType,
+        startTime: this.dataTime,
+        endTime: this.dataTime,
+        systemType: "1",
+      };
+      overView(data).then((res) => {
+        console.log("两个系统参数返回", res);
+        if (res.code == 200) {
+          this.energyMes = res.rows[0];
+          this.useForm.maxData = 50;  //最大值
+          const { totalEle, totalWater } = res.rows[0];
+          if (totalEle === 0 || totalWater === 0) {
+            this.useForm.useData = 0;
+          } else {
+            const result = totalEle / totalWater;
+            if (Number.isInteger(result)) {
+              this.useForm.useData = result;
+            } else {
+              this.useForm.useData = parseFloat(result.toFixed(2));
+            }
+          }
+          console.log("热水的eer", this.useForm.useData);
+          let that = this;
+          // 使用配置函数
+          const axisLineColor = this.getAxisLineColor(
+            this.useForm.useData,
+            this.useForm.maxData
+          );
+          const adapterOption = {
+            series: [
+              {
+                name: "内部动态阴影",
+                axisLine: {
+                  lineStyle: {
+                    color: axisLineColor,
+                    // 相当于阴影部分的直径
+                    // width: 80,
                   },
                 },
-                {
-                  name: "内部大边框",
-                  min: 0,
-                  max: this.useForm.maxData,
-                },
-                {
-                  name: "指针上的圆",
-                  data: [
-                    {
-                      value: 5,
+              },
+              {
+                name: "内部大边框",
+                min: 0,
+                max: this.useForm.maxData,
+              },
+              {
+                name: "指针上的圆",
+                data: [
+                  {
+                    value: 5,
+                  },
+                ],
+              },
+              {
+                name: "指针上的渐变圆",
+                label: {
+                  show: true,
+                  position: "center", // 文字显示在中心位置
+                  offset: [0, -5], // 向上偏移 10 个单位
+                  formatter: function () {
+                    // 返回 HTML 标签，使用 rich 里定义的样式
+                    return `{line|${that.useForm.useData}}`;
+                  },
+                  rich: {
+                    line: {
+                      color: "#fff", // 第二行文字颜色
+                      fontSize: 20, // 第二行文字大小
+                      lineHeight: 0, // 行高，实现间距
                     },
-                  ],
+                  },
                 },
-                {
-                  name: "指针上的渐变圆",
-                  label: {
-                    show: true,
-                    position: "center", // 文字显示在中心位置
-                    offset: [0, -5], // 向上偏移 10 个单位
-                    formatter: function () {
-                      // 返回 HTML 标签，使用 rich 里定义的样式
-                      return `{line|${that.useForm.useData}}`;
-                    },
-                    rich: {
-                      line: {
-                        color: "#fff", // 第二行文字颜色
-                        fontSize: 20, // 第二行文字大小
-                        lineHeight: 0, // 行高，实现间距
+                data: [
+                  {
+                    value: 0,
+                    itemStyle: {
+                      // 设置渐变颜色
+                      color: {
+                        type: "linear",
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                          {
+                            offset: 0,
+                            color: "rgb(4,112,212)", // 顶部颜色
+                          },
+                          {
+                            offset: 0.3,
+                            color: "rgba(0, 46, 93)", // 底部透明
+                          },
+                        ],
+                        global: false, // 缺省为 false
                       },
                     },
                   },
-                  data: [
-                    {
-                      value: 0,
-                      itemStyle: {
-                        // 设置渐变颜色
-                        color: {
-                          type: "linear",
-                          x: 0,
-                          y: 0,
-                          x2: 0,
-                          y2: 1,
-                          colorStops: [
-                            {
-                              offset: 0,
-                              color: "rgb(4,112,212)", // 顶部颜色
-                            },
-                            {
-                              offset: 0.3,
-                              color: "rgba(0, 46, 93)", // 底部透明
-                            },
-                          ],
-                          global: false, // 缺省为 false
-                        },
-                      },
-                    },
-                  ],
-                },
-                {
-                  // 指针 数据
-                  name: this.energyCostText,
-                  max: this.useForm.maxData, //最大刻度
-                  axisLabel: {
-                    formatter: (value) => {
-                      // 仅显示 0 和最大值
-                      if (value === 0 || value == this.useForm.maxData) {
-                        // 替换 100 为你的最大值
-                        return value;
-                      }
-                      return "";
-                    },
+                ],
+              },
+              {
+                // 指针 数据
+                name: this.energyCostText,
+                max: this.useForm.maxData, //最大刻度
+                axisLabel: {
+                  formatter: (value) => {
+                    // 仅显示 0 和最大值
+                    if (value === 0 || value == this.useForm.maxData) {
+                      // 替换 100 为你的最大值
+                      return value;
+                    }
+                    return "";
                   },
-                  data: [
-                    {
-                      name: this.dateUse,
-                      value: this.useForm.useData,
-                    },
-                  ],
                 },
-              ],
-            };
-            this.chartInstance.setOption(adapterOption);
-            //手动的调用图标对象的resize才能产生效果
-            this.chartInstance.resize();
-          }
-        });
-      },
+                data: [
+                  {
+                    name: this.dateUse,
+                    value: this.useForm.useData,
+                  },
+                ],
+              },
+            ],
+          };
+          this.chartInstance.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance.resize();
+        }
+      });
     },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .energy_content {
+  },
+};
+</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: 1.6rem;
+  }
+  .eer {
+    width: 80%;
+    color: #fff;
+    font-size: 18px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
-    width: 100% !important;
-    height: 100%;
-  
-    .sys_charts {
-      width: 100%;
-      height: 1.6rem;
-    }
-    .eer {
-      width: 80%;
-      color: #fff;
-      font-size: 18px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      margin: 10px 0;
-    }
+    justify-content: space-between;
+    margin: 10px 0;
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>