From d376767755b3280c3a4640de1392b9a8a3f19355 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 3 Mar 2026 15:28:57 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E9=A6=96=E9=A1=B5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=EF=BC=8C=E5=B1=95=E7=A4=BA=E5=90=84?=
 =?UTF-8?q?=E4=B8=AA=E8=AE=BE=E5=A4=87=E7=BB=84=E7=9A=84eer=EF=BC=9B=202?=
 =?UTF-8?q?=E3=80=81=E6=B7=BB=E5=8A=A0=E6=97=A5=E5=8E=86=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E4=B8=80=E9=94=AE=E5=BC=80=E5=85=B3=E6=9C=BA=EF=BC=88=E5=88=86?=
 =?UTF-8?q?=E6=97=B6=E6=AE=B5=E6=8E=A7=E5=88=B6=EF=BC=89=E3=80=81=E8=8A=82?=
 =?UTF-8?q?=E5=81=87=E6=97=A5=E8=87=AA=E5=B7=B1=E6=8E=A7=E5=88=B6=EF=BC=9B?=
 =?UTF-8?q?=203=E3=80=81=E7=83=AD=E5=B9=B3=E8=A1=A1=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=EF=BC=88=E5=86=B7=E5=86=BB=E6=B0=B4=E4=BE=A7?=
 =?UTF-8?q?=E4=B8=8E=E5=86=B7=E5=8D=B4=E6=B0=B4=E4=BE=A7=E7=9A=84=E8=83=BD?=
 =?UTF-8?q?=E9=87=8F=E5=AF=B9=E6=AF=94=E3=80=81=E7=83=AD=E5=B9=B3=E8=A1=A1?=
 =?UTF-8?q?=E7=8E=87=E3=80=81=E7=83=AD=E5=B9=B3=E8=A1=A1=E5=81=8F=E5=B7=AE?=
 =?UTF-8?q?=EF=BC=89=EF=BC=8C=E5=85=B6=E4=B8=AD=E7=83=AD=E5=B9=B3=E8=A1=A1?=
 =?UTF-8?q?=E7=8E=87=E3=80=81=E7=83=AD=E5=B9=B3=E8=A1=A1=E5=81=8F=E5=B7=AE?=
 =?UTF-8?q?=E6=98=AF=E6=8A=98=E7=BA=BF=EF=BC=8C=E5=85=B6=E4=BD=99=E6=98=AF?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=EF=BC=9B=E9=A2=97=E7=B2=92=E5=BA=A6?=
 =?UTF-8?q?=E6=98=AF=E6=AF=8F=E5=88=86=E9=92=9F=E6=98=BE=E7=A4=BA=EF=BC=9B?=
 =?UTF-8?q?=204=E3=80=81=E7=9B=91=E6=8E=A7=E7=95=8C=E9=9D=A2=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8B=E8=A7=92=E6=B7=BB=E5=8A=A0=E7=83=AD=E5=B9=B3=E8=A1=A1?=
 =?UTF-8?q?=E7=8E=87=E5=AE=9E=E6=97=B6=E6=98=BE=E7=A4=BA=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 git                                           |    0
 src/assets/styles/element-ui.scss             |   18 +
 src/views/centerairC/dateSwitch/index.vue     |  514 +++++++
 src/views/centerairC/equilibrium/index.vue    | 1205 +++++++++++++++++
 .../centerairC/sysMonitor/monitorCenter.vue   |   23 +-
 src/views/components/aircAndWindcMeter.vue    |    2 +-
 src/views/components/hotWater.vue             |    2 +-
 src/views/components/sysEnergy.vue            |  815 +++++++++++
 src/views/components/temMeter.vue             |    2 +-
 src/views/components/viewColdSys.vue          |    8 +-
 src/views/index.vue                           |   12 +-
 11 files changed, 2590 insertions(+), 11 deletions(-)
 create mode 100644 git
 create mode 100644 src/views/centerairC/dateSwitch/index.vue
 create mode 100644 src/views/centerairC/equilibrium/index.vue
 create mode 100644 src/views/components/sysEnergy.vue

diff --git a/git b/git
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index f1c1197..f26dd4a 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -1458,4 +1458,22 @@
 .el-tag.el-tag--success{
   font-weight: bold !important;
   color: #03a249 !important;
+}
+.el-calendar {
+  background-color: #637c94 !important;
+}
+.el-calendar-table td.is-selected .calendar-cell {
+  color: #409eff !important;
+  font-weight: bold;
+}
+.el-calendar-table .el-calendar-day:hover .calendar-cell {
+  color: #409eff !important;
+  font-weight: bold;
+}
+.el-calendar-table thead th {
+  color: #d8def3 !important;
+}
+.el-calendar__title{
+    color: #ffffff !important;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/views/centerairC/dateSwitch/index.vue b/src/views/centerairC/dateSwitch/index.vue
new file mode 100644
index 0000000..7a181a6
--- /dev/null
+++ b/src/views/centerairC/dateSwitch/index.vue
@@ -0,0 +1,514 @@
+<template>
+  <div class="schedule-panel">
+    <!-- 顶部：全局状态与一键开关 -->
+    <el-row type="flex" align="middle" class="global-header">
+      <el-col :span="12">
+        <div class="global-switch">
+          <span class="label">一键总开关</span>
+          <el-switch
+            v-model="globalSwitch"
+            active-text="开启"
+            inactive-text="关闭"
+            @change="handleGlobalSwitch"
+          >
+          </el-switch>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="status-card">
+          <p><span class="label">当前时间：</span>{{ currentTime }}</p>
+          <p><span class="label">今日计划：</span>{{ todayPlan }}</p>
+          <p><span class="label">下次动作：</span>{{ nextAction }}</p>
+        </div>
+      </el-col>
+    </el-row>
+
+    <div class="date-content">
+      <div class="date-left">
+        <!-- 中部：常规时段设置（周循环） -->
+        <el-card class="section-card">
+          <div slot="header" class="section-header">
+            <span>常规时段设置</span>
+            <el-radio-group v-model="scheduleMode" size="small">
+              <el-radio-button label="normal">普通模式</el-radio-button>
+              <el-radio-button label="advanced">高级模式</el-radio-button>
+            </el-radio-group>
+          </div>
+
+          <!-- 普通模式：一周统一规则（此处仅展示示例，实际可按 mode 切换） -->
+          <el-form v-if="scheduleMode === 'normal'" label-width="150px">
+            <el-form-item label="工作日(周一~周五)">
+              <el-time-picker
+                is-range
+                v-model="workdayRange1"
+                range-separator="至"
+                start-placeholder="开机时间"
+                end-placeholder="关机时间"
+                format="HH:mm"
+                value-format="HH:mm"
+              >
+              </el-time-picker>
+              <span class="time-range-sep">+</span>
+              <el-time-picker
+                is-range
+                v-model="workdayRange2"
+                range-separator="至"
+                start-placeholder="开机时间"
+                end-placeholder="关机时间"
+                format="HH:mm"
+                value-format="HH:mm"
+              >
+              </el-time-picker>
+            </el-form-item>
+            <el-form-item label="周六">
+              <el-time-picker
+                is-range
+                v-model="saturdayRange"
+                range-separator="至"
+                start-placeholder="开机时间"
+                end-placeholder="关机时间"
+                format="HH:mm"
+                value-format="HH:mm"
+              >
+              </el-time-picker>
+            </el-form-item>
+            <el-form-item label="周日">
+              <el-checkbox v-model="sundayOff">全天关机</el-checkbox>
+              <el-time-picker
+                v-if="!sundayOff"
+                is-range
+                v-model="sundayRange"
+                range-separator="至"
+                start-placeholder="开机时间"
+                end-placeholder="关机时间"
+                format="HH:mm"
+                value-format="HH:mm"
+              >
+              </el-time-picker>
+            </el-form-item>
+          </el-form>
+
+          <!-- 高级模式：每天独立设置（简化示例，可扩展为表格） -->
+          <el-form v-else label-width="80px">
+            <div v-for="day in weekDays" :key="day.value" class="daily-item">
+              <el-form-item :label="day.label">
+                <el-time-picker
+                  is-range
+                  v-model="day.ranges[0]"
+                  range-separator="至"
+                  start-placeholder="开机"
+                  end-placeholder="关机"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  size="mini"
+                >
+                </el-time-picker>
+                <span class="time-range-sep">+</span>
+                <el-time-picker
+                  is-range
+                  v-model="day.ranges[1]"
+                  range-separator="至"
+                  start-placeholder="开机"
+                  end-placeholder="关机"
+                  format="HH:mm"
+                  value-format="HH:mm"
+                  size="mini"
+                >
+                </el-time-picker>
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-card>
+        <el-card class="section-card">
+          <div slot="header" class="section-header">
+            <span>节假日与特殊日控制</span>
+            <el-button type="primary" size="small" @click="dialogVisible = true"
+              >+ 添加例外日</el-button
+            >
+          </div>
+
+          <el-table :data="exceptionList" stripe style="width: 100%">
+            <el-table-column
+              prop="date"
+              label="日期"
+              width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="week"
+              label="星期"
+              width="80"
+            ></el-table-column>
+            <el-table-column prop="type" label="类型" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.type | typeTag">{{
+                  scope.row.type
+                }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="rule" label="执行规则"></el-table-column>
+            <el-table-column label="操作" width="150">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="editException(scope.row)"
+                  >编辑</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="danger"
+                  @click="deleteException(scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 添加例外日的弹窗 -->
+          <el-dialog
+            title="添加例外日"
+            :visible.sync="dialogVisible"
+            width="600px"
+          >
+            <el-form label-width="80px">
+              <el-form-item label="日期">
+                <el-date-picker
+                  v-model="newException.date"
+                  type="date"
+                  placeholder="选择日期"
+                  format="yyyy-MM-dd"
+                ></el-date-picker>
+              </el-form-item>
+              <el-form-item label="规则">
+                <el-radio-group v-model="newException.ruleType">
+                  <el-radio label="off">全天关闭</el-radio>
+                  <el-radio label="on">全天开启</el-radio>
+                  <el-radio label="custom">自定义时段</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item
+                v-if="newException.ruleType === 'custom'"
+                label="时段"
+              >
+                <el-time-picker
+                  is-range
+                  v-model="newException.customRange"
+                  range-separator="至"
+                  start-placeholder="开机"
+                  end-placeholder="关机"
+                  format="HH:mm"
+                >
+                </el-time-picker>
+              </el-form-item>
+              <el-form-item label="年度循环">
+                <el-checkbox v-model="newException.recurring"
+                  >每年生效</el-checkbox
+                >
+              </el-form-item>
+            </el-form>
+            <span slot="footer">
+              <el-button @click="dialogVisible = false">取消</el-button>
+              <el-button type="primary" @click="saveException">保存</el-button>
+            </span>
+          </el-dialog>
+        </el-card>
+      </div>
+      <!-- 下部：节假日与特殊日控制 + 日历视图（左右布局） -->
+      <div class="date-right exception-section">
+        <el-card class="section-card">
+          <div slot="header" class="section-header">
+            <span>日历视图</span>
+            <el-button type="text" @click="syncHolidays">同步节假日</el-button>
+          </div>
+          <!-- 日历组件：v-model 绑定当前显示的月份 -->
+          <el-calendar v-model="calendarDate">
+            <!-- 作用域插槽：使用 slot-scope="scope" 访问 scope.data -->
+            <template slot="dateCell" slot-scope="scope">
+              <div class="calendar-cell" :class="getDayClass(scope.data.day)">
+                <!-- 显示月-日，去掉年份 -->
+                {{ scope.data.day.split("-").slice(1).join("-") }}
+              </div>
+            </template>
+          </el-calendar>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 底部：操作按钮与优先级说明 -->
+    <el-row
+      type="flex"
+      justify="space-between"
+      align="middle"
+      class="footer-actions"
+    >
+      <el-col :span="12">
+        <div class="priority-note">
+          优先级：特殊日规则 > 节假日规则 > 周循环规则
+        </div>
+      </el-col>
+      <el-col :span="12" class="text-right">
+        <el-button @click="handleCancel">取消</el-button>
+        <span class="div-primary" style="margin-left: 10px"
+          ><el-button type="primary" @click="handleSave">保存</el-button></span
+        >
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 模拟数据与简单逻辑
+export default {
+  name: "EnergySchedule",
+  data() {
+    return {
+      globalSwitch: true,
+      currentTime: "2024-03-20 14:30 星期三",
+      todayPlan: "08:00 - 17:30",
+      nextAction: "下次开机 明天 08:00",
+      scheduleMode: "normal", // normal / advanced
+      // 普通模式数据
+      workdayRange1: ["08:00", "12:00"],
+      workdayRange2: ["13:00", "17:30"],
+      saturdayRange: ["09:00", "12:00"],
+      sundayOff: true,
+      sundayRange: [],
+      // 高级模式数据
+      weekDays: [
+        {
+          label: "周一",
+          value: 1,
+          ranges: [
+            ["08:00", "12:00"],
+            ["13:00", "17:30"],
+          ],
+        },
+        {
+          label: "周二",
+          value: 2,
+          ranges: [
+            ["08:00", "12:00"],
+            ["13:00", "17:30"],
+          ],
+        },
+        {
+          label: "周三",
+          value: 3,
+          ranges: [
+            ["08:00", "12:00"],
+            ["13:00", "17:30"],
+          ],
+        },
+        {
+          label: "周四",
+          value: 4,
+          ranges: [
+            ["08:00", "12:00"],
+            ["13:00", "17:30"],
+          ],
+        },
+        {
+          label: "周五",
+          value: 5,
+          ranges: [
+            ["08:00", "12:00"],
+            ["13:00", "17:30"],
+          ],
+        },
+        { label: "周六", value: 6, ranges: [["09:00", "12:00"], []] },
+        { label: "周日", value: 0, ranges: [[], []] },
+      ],
+      data: {
+        day: "2025-03-03",
+      },
+      // 例外日列表
+      exceptionList: [
+        {
+          date: "2024-05-01",
+          week: "周三",
+          type: "法定节假日",
+          rule: "全天关闭",
+        },
+        {
+          date: "2024-05-04",
+          week: "周六",
+          type: "调休日",
+          rule: "按工作日规则",
+        },
+      ],
+      // 预设的节假日规则，使用 "MM-DD" 格式，每年重复
+      holidayRules: [
+        { date: "05-01", type: "holiday" }, // 劳动节
+        { date: "05-04", type: "workday" }, // 青年节（示例）
+        { date: "10-01", type: "holiday" }, // 国庆节
+      ],
+      dialogVisible: false,
+      newException: {
+        date: "",
+        ruleType: "off",
+        customRange: [],
+        recurring: false,
+      },
+      calendarDate: new Date(),
+    };
+  },
+  filters: {
+    typeTag(type) {
+      if (type.includes("法定")) return "danger";
+      if (type.includes("调休")) return "warning";
+      return "info";
+    },
+  },
+  methods: {
+    handleGlobalSwitch(val) {
+      console.log("一键开关:", val);
+    },
+    editException(row) {
+      console.log("编辑", row);
+    },
+    deleteException(row) {
+      console.log("删除", row);
+      // 实际应从列表中移除
+    },
+    syncHolidays() {
+      console.log("同步国家法定节假日");
+    },
+    /**
+     * 根据日期字符串 'YYYY-MM-DD' 返回对应的样式类名
+     * @param {string} dayStr - 格式如 '2024-03-20'
+     * @returns {string} 样式类名，如 'holiday' 或 'workday'
+     */
+    getDayClass(dayStr) {
+      // 提取月-日部分，例如从 '2024-05-01' 得到 '05-01'
+      const monthDay = dayStr.slice(5); // 或者 dayStr.split('-').slice(1).join('-')
+
+      // 在预设规则中查找匹配项
+      const rule = this.holidayRules.find((item) => item.date === monthDay);
+
+      // 如果找到规则，返回对应的类型；否则返回空字符串（无特殊样式）
+      return rule ? rule.type : "";
+    },
+
+    /**
+     * 模拟“同步节假日”按钮功能
+     * 实际开发中可调用接口更新 holidayRules
+     */
+    syncHolidays() {
+      // 示例：从服务器获取最新节假日配置
+      // this.holidayRules = [...];
+      this.$message.success("节假日规则已同步");
+    },
+    handleSave() {
+      console.log("保存所有设置");
+      this.$message.success("设置已保存");
+    },
+    handleCancel() {
+      console.log("取消");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.schedule-panel {
+  padding: 0px 20px 20px 20px;
+  /* background-color: #f5f7fa; */
+  min-width: 1000px;
+}
+.global-header {
+  /* background-color: #fff; */
+  padding: 5px 20px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.global-switch .label {
+  font-weight: bold;
+  margin-right: 15px;
+}
+.status-card {
+  border-left: 2px solid #409eff;
+  padding-left: 15px;
+}
+.status-card p {
+  margin: 5px 0;
+  font-size: 14px;
+}
+.status-card .label {
+  color: #909399;
+}
+.section-card {
+  margin-bottom: 20px;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+}
+.time-range-sep {
+  margin: 0 10px;
+  color: #aaa;
+}
+.daily-item {
+  margin-bottom: 10px;
+}
+.calendar-cell {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.calendar-cell.holiday {
+  background-color: #fde2e2;
+  color: #f56c6c;
+  border-radius: 4px;
+}
+.calendar-cell.workday {
+  background-color: #d8def3;
+  color: #67c23a;
+  border-radius: 4px;
+}
+.footer-actions {
+  background-color: #0962aa;
+  padding: 15px 20px;
+  border-radius: 4px;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+}
+.priority-note {
+  color: #ffffff;
+  font-size: 13px;
+}
+.text-right {
+  text-align: right;
+}
+.date-content {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.date-left {
+  width: 59%;
+  display: flex;
+  flex-direction: column;
+}
+.date-right {
+  width: 40%;
+}
+.el-calendar {
+  background-color: #637c94 !important;
+}
+.el-calendar-table td.is-selected .calendar-cell {
+  color: #409eff !important;
+  font-weight: bold;
+}
+.el-calendar-table .el-calendar-day:hover .calendar-cell {
+  color: #409eff !important;
+  font-weight: bold;
+}
+.el-calendar-table thead th {
+  color: #d8def3 !important;
+}
+.el-calendar__title {
+  color: #ffffff !important;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/centerairC/equilibrium/index.vue b/src/views/centerairC/equilibrium/index.vue
new file mode 100644
index 0000000..df22eeb
--- /dev/null
+++ b/src/views/centerairC/equilibrium/index.vue
@@ -0,0 +1,1205 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="main-content">
+        <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="选择开始年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+              <div class="years-word">至</div>
+              <el-date-picker
+                v-model="endYear"
+                type="year"
+                placeholder="选择结束年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+            </div>
+            <!-- <el-select
+              style="margin-left: 0.12rem"
+              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">
+              <el-button
+                type="success"
+                style="margin-left: 0.12rem"
+                @click="findData"
+                >查询</el-button
+              >
+            </div>
+            <div class="primary-btn">
+              <el-button type="primary" @click="leadingPrint">打印</el-button>
+            </div>
+            <div class="warning-btn">
+              <el-button type="warning" @click="exportData">导出</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="charts-table">
+          <div class="connect-div" v-loading="listLoading">
+            <div class="charts-title">{{ this.titleDate }}热平衡校验</div>
+            <div class="charts_refs" ref="charts_refs"></div>
+            <div class="table-content" style="width: 100%">
+              <el-table :data="tableData" style="width: 100%" stripe>
+                <el-table-column prop="date" label="时间"> </el-table-column>
+                <el-table-column prop="coldData" label="冷冻水侧流量(m³/h)">
+                </el-table-column>
+                <el-table-column prop="electData" label="冷却水侧流量(m³/h)">
+                </el-table-column>
+                <el-table-column prop="copData" label="热平衡率">
+                </el-table-column>
+                <el-table-column prop="biasData" label="热平衡偏差">
+                </el-table-column>
+              </el-table>
+              <div class="page">
+                <el-pagination
+                  background
+                  style="width: 100%; height: 20%"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page="this.pageParm.page"
+                  :page-size="10"
+                  layout="->,total, sizes, prev, pager, next, jumper"
+                  :page-sizes="[10, 20, 30, 50, 100, 200, 9999]"
+                  :total="this.pageParm.total"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      width="900px"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" colspan="4">能源报表</th>
+            </tr>
+            <tr>
+              <th align="center">时间</th>
+              <th align="center">冷冻水侧流量(m³/h)</th>
+              <th align="center">冷却水侧流量(m³/h)</th>
+              <th align="center">热平衡率(%)</th>
+              <th align="center">热平衡偏差(%)</th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <el-button type="info" @click="dialogPrintVisible = false"
+            >取消</el-button
+          >
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <el-button type="success" @click="surePrint">确认</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { format2, getDay } from "@/utils/datetime";
+import { energyInquiry, exportData } from "@/api/centerairC/energyManage";
+import { listData } from "@/api/system/dict/data";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeDate: [], //小时值
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      // 图表数据
+      dateList: [],
+      coldData: [],
+      electData: [],
+      copData: [],
+      biasData: [],
+      chartInstance2: null,
+      option2: {},
+      showZoom: true,
+      // 表格数据
+      tableData: [],
+      pageParm: {
+        page: 1, //开始页面页数，初始页
+        pageSize: 10, //每页的数据条数
+        total: null, //页数总数
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      titleDate: "",
+      systemType: "", //系统类型
+      systemTypes: [],
+    };
+  },
+  mounted() {
+    this.initializeTimeDate();
+    this.initChart2();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+    // this.getDictList();
+    this.getTableData();
+    this.getChartsData();
+    this.userName = sessionStorage.getItem("userName");
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  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();
+        this.getChartsData();
+      });
+    },
+
+    //分页组件切换每页数量
+    handleSizeChange(val) {
+      this.pageParm.pageSize = val;
+      this.pageParm.page = 1;
+      // 更新表格
+      this.getTableData();
+    },
+    //分页组件转页
+    handleCurrentChange(val) {
+      this.pageParm.page = val;
+      // 更新表格
+      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)]; // 更新
+      this.titleDate = 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() {
+      this.pageParm.page = 1;
+      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.titleDate =
+              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
+            this.getTableData();
+            this.getChartsData();
+          }
+          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.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          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.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.titleDate = this.startYear + "至" + this.endYear;
+            this.getTableData();
+            this.getChartsData();
+          }
+          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,
+        pageNum: this.pageParm.page,
+        pageSize: this.pageParm.pageSize,
+        systemType: "0",
+      };
+      console.log("查询数据参数", data);
+      this.listLoading = true;
+      this.tableData = [
+  { date: "2026-03-03 02:01", coldData: 234, electData: 456, copData: 85, biasData: 2.0 },
+  { date: "2026-03-03 02:02", coldData: 216, electData: 427, copData: 80, biasData: 2.3 },
+  { date: "2026-03-03 02:03", coldData: 289, electData: 532, copData: 89, biasData: 1.8 },
+  { date: "2026-03-03 02:04", coldData: 225, electData: 441, copData: 82, biasData: 2.1 },
+  { date: "2026-03-03 02:05", coldData: 242, electData: 478, copData: 87, biasData: 1.9 },
+  { date: "2026-03-03 02:06", coldData: 208, electData: 415, copData: 78, biasData: 2.5 },
+  { date: "2026-03-03 02:07", coldData: 261, electData: 509, copData: 91, biasData: 1.7 },
+  { date: "2026-03-03 02:08", coldData: 237, electData: 463, copData: 84, biasData: 2.2 },
+  { date: "2026-03-03 02:09", coldData: 253, electData: 494, copData: 88, biasData: 2.0 },
+  { date: "2026-03-03 02:10", coldData: 219, electData: 433, copData: 79, biasData: 2.4 },
+  { date: "2026-03-03 02:11", coldData: 271, electData: 521, copData: 92, biasData: 1.6 },
+  { date: "2026-03-03 02:12", coldData: 246, electData: 481, copData: 86, biasData: 2.1 },
+  { date: "2026-03-03 02:13", coldData: 230, electData: 452, copData: 83, biasData: 2.3 },
+  { date: "2026-03-03 02:14", coldData: 265, electData: 513, copData: 90, biasData: 1.8 },
+  { date: "2026-03-03 02:15", coldData: 222, electData: 439, copData: 81, biasData: 2.2 },
+  { date: "2026-03-03 02:16", coldData: 258, electData: 501, copData: 89, biasData: 1.9 },
+  { date: "2026-03-03 02:17", coldData: 240, electData: 469, copData: 85, biasData: 2.0 },
+  { date: "2026-03-03 02:18", coldData: 213, electData: 423, copData: 77, biasData: 2.6 },
+  { date: "2026-03-03 02:19", coldData: 275, electData: 529, copData: 93, biasData: 1.5 },
+  { date: "2026-03-03 02:20", coldData: 248, electData: 485, copData: 87, biasData: 2.0 },
+  { date: "2026-03-03 02:21", coldData: 232, electData: 457, copData: 82, biasData: 2.3 },
+  { date: "2026-03-03 02:22", coldData: 267, electData: 516, copData: 91, biasData: 1.7 },
+  { date: "2026-03-03 02:23", coldData: 226, electData: 446, copData: 80, biasData: 2.2 },
+  { date: "2026-03-03 02:24", coldData: 254, electData: 491, copData: 88, biasData: 1.9 },
+  { date: "2026-03-03 02:25", coldData: 218, electData: 431, copData: 78, biasData: 2.5 },
+  { date: "2026-03-03 02:26", coldData: 263, electData: 508, copData: 90, biasData: 1.8 },
+  { date: "2026-03-03 02:27", coldData: 241, electData: 471, copData: 84, biasData: 2.1 },
+  { date: "2026-03-03 02:28", coldData: 256, electData: 496, copData: 89, biasData: 1.9 },
+  { date: "2026-03-03 02:29", coldData: 228, electData: 449, copData: 81, biasData: 2.3 },
+  { date: "2026-03-03 02:30", coldData: 269, electData: 522, copData: 92, biasData: 1.6 }
+];
+
+      this.pageParm.total = 30;
+      //   energyInquiry(data).then((res) => {
+      //     console.log("查询返回", res);
+      //     if (res.code == 200 && res.data) {
+      //       this.tableData = res.data[4].timeStrArr.map((date, index) => ({
+      //         date,
+      //         coldData: res.data[0].cold[index].toString(), // 转换为字符串
+      //         electData: res.data[1].meter[index].toString(), // 转换为字符串
+      //         copData: res.data[2].cop[index].toString(), // 转换为字符串
+      //       }));
+      //       this.pageParm.total = res.data.totalSize;
+      //     } else {
+      //       this.tableData = [];
+      //     }
+      //   });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    // 请求图表数据
+    getChartsData() {
+      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,
+        pageNum: 0,
+        pageSize: 10,
+        systemType: "0",
+      };
+      console.log("查询数据参数", data);
+const mockEnergyData = [
+  { date: "2026-03-03 02:01", coldData: 234, electData: 456, copData: 85, biasData: 2.0 },
+  { date: "2026-03-03 02:02", coldData: 216, electData: 427, copData: 80, biasData: 2.3 },
+  { date: "2026-03-03 02:03", coldData: 289, electData: 532, copData: 89, biasData: 1.8 },
+  { date: "2026-03-03 02:04", coldData: 225, electData: 441, copData: 82, biasData: 2.1 },
+  { date: "2026-03-03 02:05", coldData: 242, electData: 478, copData: 87, biasData: 1.9 },
+  { date: "2026-03-03 02:06", coldData: 208, electData: 415, copData: 78, biasData: 2.5 },
+  { date: "2026-03-03 02:07", coldData: 261, electData: 509, copData: 91, biasData: 1.7 },
+  { date: "2026-03-03 02:08", coldData: 237, electData: 463, copData: 84, biasData: 2.2 },
+  { date: "2026-03-03 02:09", coldData: 253, electData: 494, copData: 88, biasData: 2.0 },
+  { date: "2026-03-03 02:10", coldData: 219, electData: 433, copData: 79, biasData: 2.4 },
+  { date: "2026-03-03 02:11", coldData: 271, electData: 521, copData: 92, biasData: 1.6 },
+  { date: "2026-03-03 02:12", coldData: 246, electData: 481, copData: 86, biasData: 2.1 },
+  { date: "2026-03-03 02:13", coldData: 230, electData: 452, copData: 83, biasData: 2.3 },
+  { date: "2026-03-03 02:14", coldData: 265, electData: 513, copData: 90, biasData: 1.8 },
+  { date: "2026-03-03 02:15", coldData: 222, electData: 439, copData: 81, biasData: 2.2 },
+  { date: "2026-03-03 02:16", coldData: 258, electData: 501, copData: 89, biasData: 1.9 },
+  { date: "2026-03-03 02:17", coldData: 240, electData: 469, copData: 85, biasData: 2.0 },
+  { date: "2026-03-03 02:18", coldData: 213, electData: 423, copData: 77, biasData: 2.6 },
+  { date: "2026-03-03 02:19", coldData: 275, electData: 529, copData: 93, biasData: 1.5 },
+  { date: "2026-03-03 02:20", coldData: 248, electData: 485, copData: 87, biasData: 2.0 },
+  { date: "2026-03-03 02:21", coldData: 232, electData: 457, copData: 82, biasData: 2.3 },
+  { date: "2026-03-03 02:22", coldData: 267, electData: 516, copData: 91, biasData: 1.7 },
+  { date: "2026-03-03 02:23", coldData: 226, electData: 446, copData: 80, biasData: 2.2 },
+  { date: "2026-03-03 02:24", coldData: 254, electData: 491, copData: 88, biasData: 1.9 },
+  { date: "2026-03-03 02:25", coldData: 218, electData: 431, copData: 78, biasData: 2.5 },
+  { date: "2026-03-03 02:26", coldData: 263, electData: 508, copData: 90, biasData: 1.8 },
+  { date: "2026-03-03 02:27", coldData: 241, electData: 471, copData: 84, biasData: 2.1 },
+  { date: "2026-03-03 02:28", coldData: 256, electData: 496, copData: 89, biasData: 1.9 },
+  { date: "2026-03-03 02:29", coldData: 228, electData: 449, copData: 81, biasData: 2.3 },
+  { date: "2026-03-03 02:30", coldData: 269, electData: 522, copData: 92, biasData: 1.6 }
+];
+
+// 如果你需要分别赋值到原变量
+this.dateList = mockEnergyData.map(item => item.date);
+this.coldData  = mockEnergyData.map(item => item.coldData);
+this.electData = mockEnergyData.map(item => item.electData);
+this.copData   = mockEnergyData.map(item => item.copData);
+this.biasData  = mockEnergyData.map(item => item.biasData);
+      // this.option2.dataZoom[0].show = this.showZoom
+      // this.option2.series[0].data = this.coldData;
+      // this.option2.series[1].data = this.electData;
+      // this.option2.series[2].data = this.copData;
+      // this.option2.xAxis.data = this.dateList;
+      let coldNumbers = this.coldData.map((value) => parseFloat(value));
+      console.log("coldNumbers", coldNumbers);
+      let electNumbers = this.electData.map((value) => parseFloat(value));
+      let copNumbers = this.copData.map((value) => parseFloat(value));
+        let biasNumbers = this.biasData.map((value) => parseFloat(value));
+      // 计算双y轴最大最小值，
+      var Min1 = 0,
+        Min2 = 0,
+        Max1 = Math.ceil(Math.max(...coldNumbers, ...electNumbers)),
+        Max2 = Math.ceil(Math.max(...copNumbers,...biasNumbers));
+      console.log("Min1", Min1);
+      console.log("Min2", Min2);
+      console.log("Max1", Max1);
+      console.log("Max2", Max2);
+      const adapterOption = {
+        xAxis: {
+          data: this.dateList,
+        },
+        yAxis: [
+          //两个y轴
+          {
+            min: Min1,
+            max: Max1,
+            splitNumber: 10,
+            interval: (Max1 - Min1) / 10,
+          },
+          {
+            min: Min2,
+            max: Max2,
+            splitNumber: 10,
+            interval: (Max2 - Min2) / 10,
+          },
+        ],
+        series: [
+          {
+            name: "冷冻水侧流量",
+            data: this.coldData,
+            sampling: "lttb", //降采样策略
+          },
+          {
+            name: "冷却水侧流量",
+            data: this.electData,
+            sampling: "lttb", //降采样策略
+          },
+          {
+            name: "热平衡率",
+            data: this.copData,
+            sampling: "lttb", //降采样策略
+          },
+          {
+            name: "热平衡偏差",
+            data: this.biasData,
+            sampling: "lttb", //降采样策略
+          },
+        ],
+      };
+      this.chartInstance2.setOption(adapterOption);
+      this.chartInstance2.resize();
+      //   energyInquiry(data).then((res) => {
+      //     console.log("查询返回", res);
+      //     if (res.code == 200 && res.data) {
+      //       // 数据
+      //       this.dateList = res.data[4].timeStrArr;
+      //       this.coldData = res.data[0].cold;
+      //       this.electData = res.data[1].meter;
+      //       this.copData = res.data[2].cop;
+      //       // this.option2.dataZoom[0].show = this.showZoom
+      //       // this.option2.series[0].data = this.coldData;
+      //       // this.option2.series[1].data = this.electData;
+      //       // this.option2.series[2].data = this.copData;
+      //       // this.option2.xAxis.data = this.dateList;
+      //       let coldNumbers = this.coldData.map((value) => parseFloat(value));
+      //       console.log("coldNumbers", coldNumbers);
+      //       let electNumbers = this.electData.map((value) => parseFloat(value));
+      //       let copNumbers = this.copData.map((value) => parseFloat(value));
+      //       // 计算双y轴最大最小值，
+      //       var Min1 = 0,
+      //         Min2 = 0,
+      //         Max1 = Math.ceil(Math.max(...coldNumbers, ...electNumbers)),
+      //         Max2 = Math.ceil(Math.max(...copNumbers));
+      //       console.log("Min1", Min1);
+      //       console.log("Min2", Min2);
+      //       console.log("Max1", Max1);
+      //       console.log("Max2", Max2);
+      //       const adapterOption = {
+      //         xAxis: {
+      //           data: this.dateList,
+      //         },
+      //         yAxis: [
+      //           //两个y轴
+      //           {
+      //             min: Min1,
+      //             max: Max1,
+      //             splitNumber: 10,
+      //             interval: (Max1 - Min1) / 10,
+      //           },
+      //           {
+      //             min: Min2,
+      //             max: Max2,
+      //             splitNumber: 10,
+      //             interval: (Max2 - Min2) / 10,
+      //           },
+      //         ],
+      //         series: [
+      //           {
+      //             name: "冷冻水侧流量",
+      //             data: this.coldData,
+      //             sampling: "lttb", //降采样策略
+      //           },
+      //           {
+      //             name: "冷却水侧流量",
+      //             data: this.electData,
+      //             sampling: "lttb", //降采样策略
+      //           },
+      //           {
+      //             name: "热平衡率",
+      //             data: this.copData,
+      //             sampling: "lttb", //降采样策略
+      //           },
+      //         ],
+      //       };
+      //       this.chartInstance2.setOption(adapterOption);
+      //       this.chartInstance2.resize();
+      //     } else {
+      //       this.dateList = [];
+      //       this.coldData = [];
+      //       this.electData = [];
+      //       this.copData = [];
+      //       this.option2.series[0].data = [];
+      //       this.option2.series[1].data = [];
+      //       this.option2.series[2].data = [];
+      //       this.option2.xAxis.data = [];
+      //       this.chartInstance2.setOption(this.option2);
+      //     }
+      //   });
+    },
+    //初始化chartInstance2对象 折线图
+    initChart2() {
+      var Min1 = 0,
+        Min2 = 0,
+        Max1 = Math.ceil(Math.max(...this.coldData, ...this.electData) + 4),
+        Max2 = Math.ceil(Math.max(...this.copData) + 4);
+      this.chartInstance2 = echarts.init(this.$refs.charts_refs);
+      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;
+              // console.log("打印颜色", params[i].color.colorStops[0].color)
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color.colorStops[0].color +
+                '"></span>';
+              // 根据不同的seriesName 返回不同的单位
+              if (seriesName === "冷冻水侧流量") {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "m³/h" +
+                  "</span><br>";
+              } else if (seriesName === "冷却水侧流量") {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "m³/h" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "%" +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        legend: {
+          data: ["冷冻水侧流量", "冷却水侧流量", "热平衡率",'热平衡偏差'],
+          // selectedMode: false, // 是否允许图例进行点击
+          show: true, // 不显示图例
+          textStyle: {
+            color: "white", // 设置图例文字颜色为蓝色
+          },
+        },
+
+        grid: {
+          top: "10%",
+          left: "3%",
+          right: "4.4%",
+          bottom: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用量",
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+            min: Min1,
+            max: Max1,
+            splitNumber: 10,
+            interval: (Max1 - Min1) / 10,
+            scale: true,
+          },
+          {
+            type: "value",
+            name: "热平衡率与偏差",
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+            min: Min2,
+            max: Max2,
+            splitNumber: 10,
+            interval: (Max2 - Min2) / 10,
+            scale: true,
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider", // x 轴区域缩放
+            height: 15,
+            xAxisIndex: 0,
+            start: 0,
+            end: 100,
+            handleSize: "120%",
+            filterMode: "filter",
+          },
+          {
+            type: "slider", // y 轴区域缩放
+            width: 15,
+            handleSize: "120%",
+            yAxisIndex: [0, 1],
+            filterMode: "filter",
+            start: 0, // 起始位置设置为0
+            end: 100, // 默认结束位置设置为100
+          },
+        ],
+        series: [
+          {
+            name: "冷冻水侧流量",
+            type: "bar",
+            smooth: true,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(1, 102, 251, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(1, 102, 251, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
+            },
+          },
+          {
+            name: "冷却水侧流量",
+            type: "bar",
+            smooth: true,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 224, 225, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 224, 225, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              borderRadius: [5, 5, 0, 0],
+            },
+          },
+          {
+            name: "热平衡率",
+            type: "line",
+            smooth: false,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            yAxisIndex: 1,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#EE5217", //折线点的颜色
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE5217", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#EE5217", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              lineStyle: {
+                color: "#EE5217", //折线的颜色
+              },
+            },
+          },
+          {
+            name: "热平衡率偏差",
+            type: "line",
+            smooth: false,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            yAxisIndex: 1,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#fbff1f", //折线点的颜色
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#fbff1f", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#fbff1f", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              lineStyle: {
+                color: "#fbff1f", //折线的颜色
+              },
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance2.setOption(this.option2, true);
+    },
+    // 元素大小
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.charts_refs.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();
+    },
+    // 导出
+    exportData() {
+      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,
+        pageNum: 0,
+        pageSize: 10,
+        systemType: "0",
+      };
+      console.log("导出数据参数", data);
+      exportData(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('导出失败!');
+      // })
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</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;
+    }
+  }
+}
+.charts-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.charts-title {
+  font-size: 0.24rem;
+  line-height: 0.07rem;
+  letter-spacing: 0.02rem;
+  color: #1f70e9;
+  margin: 0.3rem 0;
+  width: 100%;
+  text-align: center;
+}
+.main-content {
+  min-height: 6.6rem;
+}
+
+.connect-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16rem;
+}
+.page {
+  margin-top: 0.22rem;
+}
+
+.charts_refs {
+  width: 16rem;
+  height: 4.55rem;
+  /* margin-bottom: 0.39rem; */
+  margin-left: -0.35rem;
+}
+// 媒体查询，适配大于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;
+        white-space: nowrap;
+        color: rgb(251, 255, 31);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
index f2115ea..f8e5267 100644
--- a/src/views/centerairC/sysMonitor/monitorCenter.vue
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -113,6 +113,17 @@
             <span class="deepColor">{{ performanceObj.yearCold }}</span>
             <span>kw</span>
           </div>
+          <div class="weather-li">
+            <span>热平衡率：</span>
+            <span class="deepColor">82</span>
+            <span>%</span>
+          </div>
+          <div class="weather-li">
+            <span>热平衡偏差：</span>
+            <span class="deepColor">1.8</span>
+            <span>%</span>
+            <span class="normal">校验通过√</span>
+          </div>
         </div>
       </div>
       <!-- 主机加减载时间 -->
@@ -4138,12 +4149,18 @@ export default {
       font-family: DIN;
       font-size: 0.25rem;
     }
+    .normal {
+      font-size: 0.13rem;
+      color: #007bff;
+      font-weight: bold;
+      margin-left: 0.1rem;
+    }
   }
 
   .performance {
     position: absolute;
-    top: 6.1rem !important;
-    right: -0.6rem !important;
+    top: 5.4rem !important;
+    right: -1.2rem !important;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -4151,7 +4168,7 @@ export default {
     font-size: 0.16rem;
   }
   .perdformance-bg {
-    width: 2.85rem;
+    width: 2.95rem;
     z-index: 10;
     display: flex;
     flex-direction: column;
diff --git a/src/views/components/aircAndWindcMeter.vue b/src/views/components/aircAndWindcMeter.vue
index ed7c932..c8120f3 100644
--- a/src/views/components/aircAndWindcMeter.vue
+++ b/src/views/components/aircAndWindcMeter.vue
@@ -9,7 +9,7 @@ import * as echarts from "echarts";
 export default {
   props: {
     subData: {
-      type: Array,
+      // type: Array,
       required: true,
     },
   },
diff --git a/src/views/components/hotWater.vue b/src/views/components/hotWater.vue
index 13c461d..e264f15 100644
--- a/src/views/components/hotWater.vue
+++ b/src/views/components/hotWater.vue
@@ -45,7 +45,7 @@
 export default {
   props: {
     subData: {
-      type: Array,
+      // type: Array,
       required: true,
     },
   },
diff --git a/src/views/components/sysEnergy.vue b/src/views/components/sysEnergy.vue
new file mode 100644
index 0000000..7633f19
--- /dev/null
+++ b/src/views/components/sysEnergy.vue
@@ -0,0 +1,815 @@
+<template>
+  <div class="sys_content">
+    <div class="sys_charts" ref="sys_charts"></div>
+    <div class="score">
+      <div class="excellent">优秀</div>
+      <div class="good">良好</div>
+      <div class="bad">差</div>
+      <div class="improve">需要改进</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      data1: "0",
+      data2: "0",
+      data3: "0",
+      data4: "0",
+      data5: "0",
+      chartInstance2: null,
+      option2: {},
+    };
+  },
+  mounted() {
+    this.initChart2();
+        this.getCoe();
+    this.screenAdapter2();
+    window.addEventListener("resize", this.screenAdapter2);
+    // this.nowData()
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter2);
+  },
+  methods: {
+    //初始化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}",
+        },
+        // 设置仪表盘的背景颜色  整个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: colorTemplate1,  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+                // opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
+                // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
+                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
+                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: 60,
+            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.813, "#ffb219"],
+                  [0.892, "#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()方法获取一个随机数
+      this.option2.series[0].data[0].value = (Math.random() * 7).toFixed(2);
+      this.option2.series[1].data[0].value = (Math.random() * 10).toFixed(2);
+      this.option2.series[2].data[0].value = (Math.random() * 2).toFixed(2);
+      this.option2.series[3].data[0].value = (Math.random() * 2).toFixed(2);
+      this.option2.series[4].data[0].value = (Math.random() * 10).toFixed(2);
+      this.chartInstance2.setOption(this.option2, true);
+      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 * 1.5,
+            },
+            detail: {
+              fontSize: titleFontSize * 1.5,
+            },
+          },
+          {
+            //冷却塔
+            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 * 1.5,
+            },
+            detail: {
+              fontSize: titleFontSize * 1.5,
+            },
+          },
+          {
+            //系统能效
+            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.2,
+            },
+            detail: {
+              fontSize: titleFontSize * 2.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 * 1.5,
+            },
+            detail: {
+              fontSize: titleFontSize * 1.5,
+            },
+          },
+          {
+            //冷却泵
+            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 * 1.5,
+            },
+            detail: {
+              fontSize: titleFontSize* 1.5,
+            },
+          },
+        ],
+      };
+      this.chartInstance2.setOption(adapterOption);
+      this.chartInstance2.resize();
+    },
+    // 请求的数据
+    // 系统系数
+    getCoe() {
+      // this.$api.homeScreen.getCoe().then((res) => {
+      //     console.log("系统系数返回", res)
+      //     if (res.code == 200) {
+      //         this.data1 = res.data.sysCoe || this.data1;
+      //         this.data2 = res.data.chillerCoe || this.data2;
+      //         this.data3 = res.data.chillPumpCoe || this.data3;
+      //         this.data4 = res.data.coolPumpCoe || this.data4;
+      //         this.data5 = res.data.towerCoe || this.data5;
+
+      //         this.option2.series[0].data[0].value = this.data2;
+      //         this.option2.series[1].data[0].value = this.data5;
+      //         this.option2.series[2].data[0].value = this.data1;
+      //         this.option2.series[3].data[0].value = this.data3;
+      //         this.option2.series[4].data[0].value = this.data4;
+      //         this.chartInstance2.setOption(this.option2, true);
+      //     }
+      // })
+      this.data1 = 8.0;
+      this.data2 = 0;
+      this.data3 = 8.17;
+      this.data4 = 0;
+      this.data5 = 0;
+
+      this.option2.series[0].data[0].value = this.data2;
+      this.option2.series[1].data[0].value = this.data5;
+      this.option2.series[2].data[0].value = this.data1;
+      this.option2.series[3].data[0].value = this.data3;
+      this.option2.series[4].data[0].value = this.data4;
+      this.chartInstance2.setOption(this.option2, true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sys_content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+    height: 300px;
+
+  .sys_title {
+    width: 15%;
+    font-size: 0.2rem;
+    margin: 0.1rem 0 0 0.2rem;
+    display: flex;
+    flex-direction: column;
+    color: #c5fff3;
+  }
+
+  .sys_charts {
+    width: 85%;
+    height: 250px;
+    margin-top: 0.2rem;
+  }
+
+  .score {
+    width: 10%;
+    height: 100%;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+    font-size: 0.18rem;
+    color: #ffffff;
+    margin: 0.6rem 0.6rem 0 0;
+
+    .excellent,
+    .good,
+    .bad,
+    .improve {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 0.1rem;
+      white-space: nowrap;
+    }
+
+    .excellent::before,
+    .good::before,
+    .bad::before,
+    .improve::before {
+      display: block;
+      content: "";
+      width: 0.15rem;
+      height: 0.14rem;
+      margin-right: 0.16rem;
+    }
+
+    .excellent::before {
+      background-color: #208fff;
+    }
+
+    .good::before {
+      background-color: #00be97;
+    }
+
+    .bad::before {
+      background-color: #ffb219;
+    }
+
+    .improve::before {
+      background-color: #ee5e5e;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/temMeter.vue b/src/views/components/temMeter.vue
index 96d0fe0..d26ff46 100644
--- a/src/views/components/temMeter.vue
+++ b/src/views/components/temMeter.vue
@@ -9,7 +9,7 @@ import * as echarts from "echarts";
 export default {
   props: {
     subData: {
-      type: Array,
+      // type: Array,
       required: true,
     },
   },
diff --git a/src/views/components/viewColdSys.vue b/src/views/components/viewColdSys.vue
index d38b60a..3bbdde5 100644
--- a/src/views/components/viewColdSys.vue
+++ b/src/views/components/viewColdSys.vue
@@ -11,7 +11,7 @@ import * as echarts from "echarts";
 export default {
   props: {
     subData: {
-      type: Object,
+      // type: Object,
       required: true,
     },
     title: "",
@@ -86,7 +86,8 @@ export default {
     //初始化chartInstance2对象 折线图
     initChart() {
       this.chartInstance = echarts.init(this.$refs.sys_charts);
-      var dataArr = this.subData.curValue; //值
+      // var dataArr = this.subData.curValue; //值
+      var dataArr = 8
       var maxData = 10; //最大值
       this.option = {
         // backgroundColor: "#0E1327",
@@ -358,7 +359,8 @@ export default {
     echartsData() {
       if (this.subData.length > 0) {
         this.useForm.maxData = 10;
-        this.useForm.useData = this.subData[0].value;
+        // this.useForm.useData = this.subData[0].value;
+        this.useForm.useData = 8;
         let that = this;
         // 使用配置函数
         const axisLineColor = this.getAxisLineColor(
diff --git a/src/views/index.vue b/src/views/index.vue
index 8832686..0f66f92 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -148,6 +148,12 @@
         <tem-meter :subData="temSys"></tem-meter>
       </div>
     </div>
+    <div class="special-div" style="margin-top: 16px">
+      <div class="special-top">
+        <div class="special-title">实时EER系数</div>
+      </div>
+      <sys-energy></sys-energy>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       title="上传图片"
@@ -195,6 +201,7 @@ import ViewColdSys from "./components/viewColdSys.vue";
 import HotWater from "./components/hotWater.vue";
 import AircAndWindcMeter from "./components/aircAndWindcMeter.vue";
 import TemMeter from "./components/temMeter.vue";
+import SysEnergy from './components/sysEnergy.vue';
 
 export default {
   components: {
@@ -203,6 +210,7 @@ export default {
     HotWater,
     AircAndWindcMeter,
     TemMeter,
+    SysEnergy,
   },
   data() {
     return {
@@ -381,8 +389,8 @@ export default {
         }
       });
     },
-    goEnergy(){
-      this.$router.push("/comprehensiveEnergy/systemEnergy")
+    goEnergy() {
+      this.$router.push("/comprehensiveEnergy/systemEnergy");
     },
     //初始化chartInstance对象
     initChart() {