From 28b49f5f80d11186ab26f6e26eae5f9d90222800 Mon Sep 17 00:00:00 2001
From: "3067418132@qq.com" <ljf25604@163.com>
Date: Tue, 31 Mar 2026 17:19:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=BF=E5=90=88=E4=B8=AD=E5=A4=AE=E7=A9=BA?=
 =?UTF-8?q?=E8=B0=83=E7=BE=A4=E6=8E=A7=E7=B3=BB=E7=BB=9F=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/store/modules/permission.js               |  51 ++
 .../enSourceAnalysis/components/equipment.vue |   2 +-
 .../components/machineChart.vue               | 218 ++++++
 .../components/machineRoom.vue                | 672 ++++++++++++++++++
 .../centerairC/enSourceAnalysis/index.vue     |  26 +-
 src/views/centerairC/energyAnalysis/index.vue |   2 +-
 src/views/centerairC/overview/index.vue       |   2 +-
 8 files changed, 968 insertions(+), 9 deletions(-)
 create mode 100644 src/views/centerairC/enSourceAnalysis/components/machineChart.vue
 create mode 100644 src/views/centerairC/enSourceAnalysis/components/machineRoom.vue

diff --git a/.env.development b/.env.development
index 91a0a56..9579ac2 100644
--- a/.env.development
+++ b/.env.development
@@ -7,11 +7,11 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+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'
+# VUE_APP_BASE_API = 'http://106.55.173.225:8092'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 73babbd..1e63170 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -43,6 +43,57 @@ const permission = {
 
           router.addRoutes(asyncRoutes);
 
+          // 有中央空调
+          // 如果动态的路由有中央空调-系统监控-系统监测页面，那就添加一个hidden为true非Layout的大屏页面
+          const result = checkRouteArray(
+            sidebarRoutes,
+            "centerairC",
+            "monitorControl",
+            "sysMonitor"
+          );
+          router.addRoutes(asyncRoutes);
+          if (result) {
+            // console.log(
+            //   "满足条件,添加中央空调-系统监控-系统监测相关的大屏页面路由"
+            // );
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes = [
+              {
+                path: "/monitorCenter",
+                name: "monitorCenter",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/monitorCenter"),
+                meta: { title: "系统监测", icon: "screen" },
+              },
+              {
+                path: "/hostDetails",
+                name: "hostDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/hostDetails"),
+                meta: { title: "主机性能", icon: "new2" },
+              },
+              {
+                path: "/performance",
+                name: "performance",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/performance"),
+                meta: { title: "冷机性能性能", icon: "new2" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // console.log("不满足条件");
+          }
+
           // 空压热回收
           const result2 = sidebarRoutes.find(
             (item) => item.name === "HeatRecoverySys"
diff --git a/src/views/centerairC/enSourceAnalysis/components/equipment.vue b/src/views/centerairC/enSourceAnalysis/components/equipment.vue
index 2947695..184c3e1 100644
--- a/src/views/centerairC/enSourceAnalysis/components/equipment.vue
+++ b/src/views/centerairC/enSourceAnalysis/components/equipment.vue
@@ -512,7 +512,7 @@ export default {
               };
             }),
           ];
-          this.pageParm.total = res.data.totalSize;
+          this.pageParm.total = res.data[3].total;
           console.log("header", this.headers);
         } else {
           this.tableData = [];
diff --git a/src/views/centerairC/enSourceAnalysis/components/machineChart.vue b/src/views/centerairC/enSourceAnalysis/components/machineChart.vue
new file mode 100644
index 0000000..f775aec
--- /dev/null
+++ b/src/views/centerairC/enSourceAnalysis/components/machineChart.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="prop-content">
+    <div class="elect" ref="elect"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    chartsData: {
+      type: Array, // 明确指定为数组类型
+      required: true, // 如果该属性是必需的，可以设置为 true
+    },
+    // chartInstance1: "",
+    // option1: {},
+    deviceStatus: [], //饼图数据
+  },
+  data() {
+    return {
+      chartInstance1: null,
+      option1: {},
+      // legendData: ["冷水机组", "冷冻水泵", "冷却水泵", "冷却塔"],
+    };
+  },
+  watch: {
+    chartsData: {
+      handler(newDataA, oldDataA) {
+        if (newDataA) {
+          // this.chartInstance1.dispose(); // 销毁实例
+          this.screenAdapter(); // 数据变化时更新图表
+          // console.log("做出了改变")
+        }
+      },
+      deep: true, // 深度监听
+    },
+  },
+  mounted() {
+    this.initChart1();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    initChart1() {
+      this.chartInstance1 = echarts.init(this.$refs.elect);
+      this.option1 = {
+        // backgroundColor: '#031a40',
+        // 提示框组件
+        tooltip: {
+          trigger: "item", //触发类型
+          backgroundColor: "rgba(50,50,50,0.7)", //提示框浮层的背景颜色
+          // borderColor: '#0ac1c7',//提示框浮层的边框颜色
+          textStyle: {
+            color: "#fff",
+            fontSize: "15",
+          },
+          // formatter: '{a0}：<br />{b0}：{c0} kwh'//1.字符串模板
+          formatter: "{b0}：{c0} kwh", //1.字符串模板
+          // formatter:function(params){  //2.回调函数,可return dom 自定义样式
+          //     console.log('params',params)
+          //     return params[0].name
+          // }
+        },
+        //图表背景色
+        // backgroundColor: '#081736',
+        series: [
+          {
+            name: "详情",
+            type: "pie",
+            minAngle: 2, //最小的扇区角度（0 ~ 360）
+            radius: ["30%", "50%"],
+            center: ["50%", "50%"],
+            emphasis: {
+              scale: true, // 启用鼠标悬停时的缩放效果
+            },
+            color: [
+              "#0ac1c7",
+              "#deb140",
+              "#49dff0",
+              "#034079",
+              "#6f81da",
+              "#00ffb4",
+              ,
+              "#FFE900",
+              "#F5B157",
+              "#1DA7FF",
+              "#2967EA",
+            ],
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance1.setOption(this.option1);
+    },
+    //饼状图自适应
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = (this.$refs.elect.offsetWidth / 100) * 2.4;
+      // console.log("chartsData", this.chartsData)
+      // 将父组件得来的value值从字符串转换为数字
+      for (let i = 0; i < this.chartsData.length; i++) {
+        this.chartsData[i].value = parseFloat(this.chartsData[i].value);
+      }
+      var scale = 1;
+      var echartData = this.chartsData;
+      var rich = {
+        yellow: {
+          color: "#ffc72b",
+          fontSize: titleFontSize * 1.5,
+          padding: [5, 4],
+          align: "center",
+        },
+        total: {
+          color: "#ffc72b",
+          fontSize: titleFontSize * 1.4,
+          align: "center",
+        },
+        white: {
+          color: "#fff",
+          align: "center",
+          fontSize: titleFontSize * 1.4,
+          padding: [5, 0],
+        },
+        blue: {
+          color: "#49dff0",
+          fontSize: titleFontSize * 1.09,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#eee",
+          width: "100%",
+          borderWidth: titleFontSize * 0.1,
+          height: 0,
+        },
+      };
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const option1 = {
+        tooltip: {
+          textStyle: {
+            fontSize: titleFontSize * 1.3,
+          },
+        },
+        series: [
+          {
+            label: {
+              formatter: function (params, ticket, callback) {
+                var total = 0;
+                var percent = 0;
+
+                echartData.forEach(function (value, index, array) {
+                  total += value.value;
+                });
+
+                if (total !== 0) {
+                  percent = ((params.value / total) * 100).toFixed(2);
+                }
+
+                return (
+                  "{white|" +
+                  params.name +
+                  "}\n" +
+                  "{hr|}\n" +
+                  "{yellow|" +
+                  params.value +
+                  "}" +
+                  "{blue| (" +
+                  (total !== 0 ? percent : 0) +
+                  "%)}"
+                );
+              },
+              rich: rich,
+            },
+            data: echartData,
+            labelLine: {
+              //标签的视觉引导线配置
+              length: titleFontSize * 2,
+              length2: 0,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            itemStyle: {
+              // color: "#052f37"
+              borderRadius: 5,
+              borderColor: "#052f37",
+              borderWidth: 2,
+            },
+          },
+        ],
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance1.setOption(option1);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance1.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.prop-content {
+  color: rgb(243, 223, 106);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  .elect {
+    width: 100%;
+    height: 3.3rem;
+  }
+}
+</style>
diff --git a/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue b/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue
new file mode 100644
index 0000000..4bb259f
--- /dev/null
+++ b/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue
@@ -0,0 +1,672 @@
+<template>
+  <div class="big-machine" v-loading="listLoading">
+    <div class="condition">
+      <div class="condition-left">
+        <div class="time-label">时间类型:</div>
+        <el-radio-group
+          v-model="dateType"
+          style="margin-right: 0.24rem"
+          @change="updateDateType"
+        >
+          <el-radio label="hour">小时</el-radio>
+          <el-radio label="day">日</el-radio>
+          <el-radio label="month">月</el-radio>
+          <el-radio label="year">年</el-radio>
+        </el-radio-group>
+        <el-date-picker
+          v-model="timeDate"
+          :default-time="['00:00:00', '23:59:59']"
+          type="datetimerange"
+          range-separator="至"
+          v-if="dateType == 'hour'"
+          placeholder="选择日期"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+        <el-date-picker
+          v-model="dayDate"
+          type="daterange"
+          v-if="dateType == 'day'"
+          :key="this.dateType"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="dateChange"
+        >
+        </el-date-picker>
+        <el-date-picker
+          v-model="monthDate"
+          type="monthrange"
+          v-if="dateType == 'month'"
+          :key="this.dateType"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          value-format="yyyy-MM"
+          @change="dateChange"
+        >
+        </el-date-picker>
+        <div class="years-div" v-if="dateType == 'year'" :key="this.dateType">
+          <el-date-picker
+            v-model="startYear"
+            type="year"
+            placeholder="选择开始年份"
+            value-format="yyyy"
+          >
+          </el-date-picker>
+          <div class="years-word">至</div>
+          <el-date-picker
+            v-model="endYear"
+            type="year"
+            placeholder="选择结束年份"
+            value-format="yyyy"
+          >
+          </el-date-picker>
+        </div>
+        <!-- <el-select
+          style="margin-left: 0.1rem"
+          v-model="systemType"
+          placeholder="请选择系统类型"
+          clearable
+        >
+          <el-option
+            v-for="dict in systemTypes"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select> -->
+        <div class="success-btn" style="margin: 0 0.12rem">
+          <el-button type="success" @click="findData">查询</el-button>
+        </div>
+        <div class="warning-btn">
+          <el-button type="warning" @click="exportData">导出</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="machine">
+      <div class="machine-left">
+        <div class="machine-li">
+          <div class="tit">冷水机组</div>
+          <div class="machine-center-li">
+            <div class="machine-context">
+              <div class="chart">
+                <machine-chart :chartsData="chiller"></machine-chart>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="machine-li">
+          <div class="tit">冷冻水泵</div>
+          <div class="machine-center-li">
+            <div class="machine-context">
+              <div class="chart">
+                <machine-chart :chartsData="chillerPump"></machine-chart>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="machine-center">
+        <div class="total">
+          <div class="data1">
+            <span>冷水机组</span>
+            <div class="p-class">
+              <countTo
+                class="p-class2"
+                :startVal="startVal"
+                :endVal="allDataArr[0].value"
+                :duration="duration"
+                :separator="separator"
+                :decimals="2"
+                ref="CountToPower"
+              ></countTo
+              >kwh
+            </div>
+          </div>
+          <div class="data2">
+            <span>冷冻水泵</span>
+            <div class="p-class">
+              <countTo
+                class="p-class2"
+                :startVal="startVal"
+                :endVal="allDataArr[1].value"
+                :duration="duration"
+                :separator="separator"
+                :decimals="2"
+                ref="CountToPower"
+              ></countTo
+              >kwh
+            </div>
+          </div>
+          <div class="data3">
+            <span>冷却水泵</span>
+            <div class="p-class">
+              <countTo
+                class="p-class2"
+                :startVal="startVal"
+                :endVal="allDataArr[2].value"
+                :duration="duration"
+                :separator="separator"
+                :decimals="2"
+                ref="CountToPower"
+              ></countTo
+              >kwh
+            </div>
+          </div>
+          <div class="data4">
+            <span>冷却塔</span>
+            <div class="p-class">
+              <countTo
+                class="p-class2"
+                :startVal="startVal"
+                :endVal="allDataArr[3].value"
+                :duration="duration"
+                :separator="separator"
+                :decimals="2"
+                ref="CountToPower"
+              ></countTo
+              >kwh
+            </div>
+          </div>
+          <canvas class="rain"></canvas>
+          <canvas class="dashed"></canvas>
+          <div class="sphere">
+            <div class="sphere-bg"></div>
+            <div class="sum">
+              <div class="sum-title">总耗电量</div>
+              <div class="p-all">
+                <countTo
+                  :startVal="startVal"
+                  :endVal="allElect"
+                  :duration="duration"
+                  :separator="separator"
+                  :decimals="2"
+                  ref="CountToPower"
+                ></countTo
+                >kwh
+              </div>
+            </div>
+          </div>
+          <div class="cicle3"></div>
+          <div class="cicle4"></div>
+          <div class="cicle5"></div>
+          <div class="cicle6"></div>
+          <div class="cicle7"></div>
+          <div class="cicle8">
+            <span>{{ electProp[0] }}%</span>
+            <p>冷水机组</p>
+          </div>
+          <div class="cicle9">
+            <span>{{ electProp[1] }}%</span>
+            <p>冷冻水泵</p>
+          </div>
+          <div class="cicle10">
+            <span>{{ electProp[2] }}%</span>
+            <p>冷却水泵</p>
+          </div>
+          <div class="cicle11">
+            <span>{{ electProp[3] }}%</span>
+            <p>冷却塔</p>
+          </div>
+        </div>
+      </div>
+      <div class="machine-right">
+        <div class="machine-li">
+          <div class="tit">冷却水泵</div>
+          <div class="machine-center-li">
+            <div class="machine-context">
+              <div class="chart">
+                <machine-chart :chartsData="coolPump"></machine-chart>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="machine-li">
+          <div class="tit">冷却塔</div>
+          <div class="machine-center-li">
+            <div class="machine-context">
+              <div class="chart">
+                <machine-chart :chartsData="coolTower"></machine-chart>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="" :visible.sync="dialogVisible" width="750px">
+      <prop-chart></prop-chart>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { format2 } from "@/utils/datetime";
+import machineChart from "./machineChart.vue";
+// import propChart from './propChart.vue';
+import countTo from "vue-count-to";
+import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
+import { listData } from "@/api/system/dict/data";
+export default {
+  components: { machineChart, countTo },
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeDate: [], //小时值
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      allDataArr: [
+        { value: 0 }, // 初始化元素及其属性
+        { value: 0 },
+        { value: 0 },
+        { value: 0 },
+      ],
+      chillerPump: [], //冷冻泵
+      chiller: [], //主机
+      coolPump: [], //冷却泵
+      coolTower: [], //冷却塔
+      allElect: 0, //总耗电量
+      electProp: [], //耗电占比
+      dialogVisible: false,
+      startVal: 0, //开始的数
+      duration: 1000, // 持续时间
+      separator: "", // 分隔符
+      systemType: "", //系统类型
+      systemTypes: [],
+    };
+  },
+  created() {
+    // 在组件创建完成后，设置默认值
+  },
+  mounted() {
+    this.initializeTimeDate();
+    // this.getDictList();
+    this.getTableData();
+  },
+  methods: {
+    /** 查询系统类型-字典数据列表 */
+    getDictList() {
+      let data = {
+        pageNum: 1,
+        pageSize: 100,
+        dictType: "sys_type",
+      };
+      listData(data).then((response) => {
+        this.systemTypes = response.rows;
+        this.systemType = this.systemTypes[0].dictValue;
+        this.getTableData();
+      });
+    },
+    // 初始化时间
+    initializeTimeDate() {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      this.timeDate = [format2(start), format2(end)]; // 更新
+    },
+    // 选择时间类型
+    updateDateType() {
+      // this.dateType = this.radio;
+      console.log(this.dateType);
+      (this.timeDate = []), //小时值
+        (this.dayDate = []), //日值
+        (this.monthDate = []), //月值
+        (this.startYear = ""), //开始年份
+        (this.endYear = ""); //结束年份
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeform.time1);
+      if (!this.dayDate) {
+        this.$nextTick(() => {
+          this.dayDate = [];
+        });
+      }
+      if (!this.monthDate) {
+        this.$nextTick(() => {
+          this.monthDate = [];
+        });
+      }
+    },
+    // 查询
+    findData() {
+      console.log("this.dateType", this.dateType);
+      console.log("this.timeDate", this.timeDate);
+      switch (this.dateType) {
+        case "hour":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.getTableData();
+          }
+          break;
+        case "day":
+          if (this.dayDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const newLength =
+              new Date(this.dayDate[1]).getTime() -
+              new Date(this.dayDate[0]).getTime();
+            const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24));
+            if (dayDiff > 31) {
+              this.showMessage(
+                "最多只能选择30天区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.getTableData();
+            }
+          }
+          break;
+        case "month":
+          if (this.monthDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const [start, end] = this.monthDate;
+            const startDate = new Date(start);
+            const endDate = new Date(end);
+            const startYear = startDate.getFullYear();
+            const startMonth = startDate.getMonth();
+            const endYear = endDate.getFullYear();
+            const endMonth = endDate.getMonth();
+            const monthDiff =
+              (endYear - startYear) * 12 + (endMonth - startMonth);
+            if (monthDiff > 12) {
+              this.showMessage(
+                "最多只能选择12个月区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.getTableData();
+            }
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.getTableData();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // 显示消息的函数
+    showMessage(message, type) {
+      this.$message({
+        message: message,
+        type: type,
+      });
+    },
+    //请求数据
+    getTableData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        systemType: "0",
+      };
+      console.log("查询数据参数", data);
+      this.listLoading = true;
+      energyAnalyze(data).then((res) => {
+        console.log("能源返回", res);
+        if (res.code == 200 && res.data.all) {
+          this.allDataArr = res.data.all;
+          this.allDataArr = this.allDataArr.map((item) => {
+            item.value = parseFloat(item.value);
+            return item;
+          });
+          this.chillerPump = res.data.chillerPump;
+          this.chiller = res.data.chiller;
+          this.coolPump = res.data.coolPump;
+          this.coolTower = res.data.coolTower;
+          console.log("this.allDataArr", this.allDataArr);
+          // 总电量
+          this.allElect = this.allDataArr.reduce(
+            (sum, item) => sum + item.value,
+            0
+          );
+          console.log("this.allElect ", this.allElect);
+          this.electProp = [];
+          // 计算每个指标的百分比
+          this.allDataArr.forEach((item) => {
+            console.log("两数相除", item.value, this.allElect);
+            let percentage;
+            if (this.allElect === 0) {
+              percentage = 0; // 或者设为其他特定值，如 null
+            } else {
+              percentage = (parseFloat(item.value) / this.allElect) * 100;
+              percentage = percentage.toFixed(2);
+            }
+            this.electProp.push(percentage);
+          });
+
+          console.log("百分比数组", this.electProp);
+        } else {
+          this.chiller = [];
+          this.chillerPump = [];
+          this.coolPump = [];
+          this.coolTower = [];
+        }
+      });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    // 导出
+    exportData() {
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        systemType: "0",
+      };
+      console.log("导出数据参数", data);
+      analyzeExport(data).then((res) => {
+        console.log("导出返回", res);
+        if (res) {
+          // 请求的结果就是文件
+          // 创建一个blob URL，用于生成下载链接
+          const url = window.URL.createObjectURL(new Blob([res]));
+          // 创建一个<a>元素，并设置其href和download属性
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", "机房能耗报表.xls"); // 设置下载的文件名
+          // 模拟点击下载链接
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          // 释放blob URL资源
+          window.URL.revokeObjectURL(url);
+          this.$message({
+            type: "success",
+            message: "导出成功!",
+          });
+        } else {
+          this.$message.error("导出失败!");
+        }
+      });
+      // .catch((err) => {
+      //     this.$message.error('导出失败!');
+      // })
+    },
+    onReversal() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.condition {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.24rem;
+
+  .condition-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .years-div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .years-word {
+        font-size: 14px;
+        margin: 0 5px;
+        color: #388ff3;
+      }
+    }
+
+    .time-label {
+      font-size: 16px;
+      line-height: 7px;
+      margin-right: 12px;
+      white-space: nowrap;
+    }
+  }
+}
+.machine {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  .machine-center {
+    width: 50%;
+  }
+
+  .machine-left,
+  .machine-right {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    // background: #00be97;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-right: 1px;
+
+    .machine-li {
+      width: 100%;
+      margin-bottom: 0.3rem;
+      border: 1px solid rgba(9, 83, 133, 0.5);
+      box-shadow: inset 0 0 30px rgba(9, 83, 133, 0.4);
+      position: relative;
+      border-radius: 0.07rem;
+
+      .tit {
+        padding: 0.1rem 0.1rem 0.1rem 0.25rem;
+        border-bottom: 1px solid rgba(9, 83, 133, 0.5);
+        font-size: 0.18rem;
+        font-weight: 500;
+        position: relative;
+        // background: rgba(64, 72, 71, 0.5);
+        border-radius: 0.07rem 0.07rem 0 0;
+        box-shadow: 0 0 5px rgba(9, 83, 133, 0.5);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .tit::before {
+        position: absolute;
+        content: "";
+        width: 6px;
+        height: 6px;
+        background: rgba(20, 231, 231, 0.9);
+        box-shadow: 0 0 5px rgba(0, 93, 130, 0.9);
+        border-radius: 50%;
+        left: 0.1rem;
+        top: 0.18rem;
+      }
+
+      .machine-center-li {
+        width: 100%;
+
+        .machine-context {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          width: 100%;
+
+          .chart {
+            width: 100%;
+            height: 330px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .condition {
+    .condition-left {
+      .years-div {
+        .years-word {
+          font-size: 0.14rem !important;
+          margin: 0 0.05rem !important;
+        }
+      }
+
+      .time-label {
+        font-size: 0.16rem !important;
+        line-height: 0.07rem !important;
+        margin-right: 0.12rem !important;
+      }
+    }
+  }
+  .machine {
+    .machine-left,
+    .machine-right {
+      .machine-li {
+        .tit::before {
+          width: 0.06rem !important;
+          height: 0.06rem !important;
+        }
+
+        .machine-center-li {
+          .machine-context {
+            .chart {
+              height: 3.3rem !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/centerairC/enSourceAnalysis/index.vue b/src/views/centerairC/enSourceAnalysis/index.vue
index e1ddb29..3fb881d 100644
--- a/src/views/centerairC/enSourceAnalysis/index.vue
+++ b/src/views/centerairC/enSourceAnalysis/index.vue
@@ -3,10 +3,17 @@
     <div class="details-content">
       <div class="details-header">
         <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-tab-pane label="设备热量" name="second">
+          <el-tab-pane label="机房能耗" name="first">
+            <machineRoom
+              v-if="activeName === 'first'"
+              @switch-tab="switchToEquitesMess"
+              @switch-fourth="switchToPatrolTem"
+            ></machineRoom>
+          </el-tab-pane>
+          <el-tab-pane label="设备能耗" name="second">
             <equipment v-if="activeName === 'second'"></equipment>
           </el-tab-pane>
-          <el-tab-pane label="设备组热量" name="three">
+          <el-tab-pane label="设备组能耗" name="three">
             <device-energy v-if="activeName === 'three'"></device-energy>
           </el-tab-pane>
         </el-tabs>
@@ -16,19 +23,30 @@
 </template>
 
 <script>
+import machineRoom from "./components/machineRoom.vue";
 import equipment from "./components/equipment.vue";
 import DeviceEnergy from "./components/deviceEnergy.vue";
 export default {
-  components: { equipment, DeviceEnergy },
+  components: { machineRoom, equipment, DeviceEnergy },
   data() {
     return {
-      activeName: "second", //设备热量
+      activeName: "first", //设备管理
     };
   },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
     },
+
+    //当在子页面中点击按钮时，会触发switch-tab事件，
+    // 然后在父组件中监听到这个事件，并将activeName设置为'second'，从而让第二个tab成为当前选中的tab。
+    switchToEquitesMess() {
+      this.activeName = "second";
+    },
+    switchToPatrolTem() {
+      // this.activeName = 'fourth';
+    },
+    // 记得请求冷水机组数据时，默认选中第一个冷水机组
   },
 };
 </script>
diff --git a/src/views/centerairC/energyAnalysis/index.vue b/src/views/centerairC/energyAnalysis/index.vue
index 8333fc3..4ca8403 100644
--- a/src/views/centerairC/energyAnalysis/index.vue
+++ b/src/views/centerairC/energyAnalysis/index.vue
@@ -3,7 +3,7 @@
     <div class="details-content">
       <div class="details-header">
         <el-tabs v-model="activeName" @tab-click="handleClick" lazy>
-          <el-tab-pane label="热量分析" name="first">
+          <el-tab-pane label="能耗分析" name="first">
             <energy-analysis v-if="activeName === 'first'"></energy-analysis>
           </el-tab-pane>
           <el-tab-pane label="环比分析" name="third">
diff --git a/src/views/centerairC/overview/index.vue b/src/views/centerairC/overview/index.vue
index 7a5f7c3..c326b4e 100644
--- a/src/views/centerairC/overview/index.vue
+++ b/src/views/centerairC/overview/index.vue
@@ -427,7 +427,7 @@ export default {
             electData: res.data[1].meter[index].toString(), // 转换为字符串
             copData: res.data[2].cop[index].toString(), // 转换为字符串
           }));
-          this.pageParm.total = res.data.totalSize;
+          this.pageParm.total = res.data[5].total;
         } else {
           this.tableData = [];
         }