diff --git a/src/router/index.js b/src/router/index.js
index 229dd4d..08d27ff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -68,7 +68,7 @@ export const constantRoutes = [
     children: [
       {
         path: "index",
-        component: () => import("@/views/index"),
+        component: () => import("@/views/newSystem/systemHome"),
         name: "Index",
         meta: { title: "首页", icon: "dashboard", affix: true },
       },
@@ -88,22 +88,22 @@ export const constantRoutes = [
       },
     ],
   },
-    // 综合大屏
-    {
-      path: "/Screen",
-      name:"Screen",
-      hidden: true,
-      component: () => import("@/views/bigScreen/bigScreen"),
-      meta: { title: "大屏总览", icon: "screen" },
-    },
-    // AI助手
-    {
-      path: "/ai",
-      name: "AI",
-      hidden: true,
-      component: () => import("@/views/ai/index"),
-      meta: { title: "AI助手", icon: "robot" },
-    },
+  // 综合大屏
+  {
+    path: "/Screen",
+    name: "Screen",
+    hidden: true,
+    component: () => import("@/views/bigScreen/bigScreen"),
+    meta: { title: "大屏总览", icon: "screen" },
+  },
+  // AI助手
+  {
+    path: "/ai",
+    name: "AI",
+    hidden: true,
+    component: () => import("@/views/ai/index"),
+    meta: { title: "AI助手", icon: "robot" },
+  },
 ];
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/centerairC/aabRecord/index.vue b/src/views/centerairC/aabRecord/index.vue
new file mode 100644
index 0000000..011350b
--- /dev/null
+++ b/src/views/centerairC/aabRecord/index.vue
@@ -0,0 +1,170 @@
+<!-- ChillerLoadEvent.vue -->
+<template>
+  <div class="app-container">
+    <el-card shadow="hover">
+      <div slot="header" class="clearfix">
+        <span>冷水机组加减载事件</span>
+        <el-button style="float:right;" size="mini" @click="clearList">清空</el-button>
+      </div>
+
+      <el-table
+        :data="list"
+        stripe
+        height="750"
+        :row-class-name="tableRowClassName"
+        @row-click="openDetail"
+      >
+        <el-table-column prop="time" label="时间"  />
+        <el-table-column prop="chillerName" label="机组"  />
+        <el-table-column prop="action" label="动作" >
+          <template slot-scope="{ row }">
+            <el-tag size="mini" :type="row.action === '加载' ? 'danger' : 'primary'">
+              {{ row.action }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="cause" label="触发原因"  show-overflow-tooltip />
+        <el-table-column prop="targetLoad" label="目标负荷%"  />
+        <el-table-column prop="actualLoad" label="实际负荷%"  />
+      </el-table>
+    </el-card>
+
+    <!-- 详情抽屉 -->
+    <el-drawer title="原始数据" :visible.sync="drawer" direction="rtl" size="50%">
+      <div style="padding:0 20px;">
+        <json-viewer :value="currentRow.raw" :expand-depth="3" copyable boxed sort />
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ChillerLoadEvent',
+  data() {
+    return {
+      list: [
+        {
+          time: '2026-03-03 08:10:01',
+          chillerName: 'CH-01',
+          action: '加载',
+          cause: '供水温度高于设定值 1.2 ℃',
+          targetLoad: 75,
+          actualLoad: 73,
+          raw: { supplyTemp: 8.2, setpoint: 7.0, deltaT: 1.2, compCurrent: 92.3, compFreq: 45.0 }
+        },
+        {
+          time: '2026-03-03 08:15:23',
+          chillerName: 'CH-02',
+          action: '减载',
+          cause: '供水温度低于设定值 0.9 ℃',
+          targetLoad: 60,
+          actualLoad: 62,
+          raw: { supplyTemp: 6.1, setpoint: 7.0, deltaT: 0.9, compCurrent: 68.5, compFreq: 38.2 }
+        },
+        {
+          time: '2026-03-03 08:22:45',
+          chillerName: 'CH-03',
+          action: '加载',
+          cause: '系统负荷增加 15%',
+          targetLoad: 80,
+          actualLoad: 78,
+          raw: { supplyTemp: 8.5, setpoint: 7.0, deltaT: 1.5, compCurrent: 95.1, compFreq: 48.6 }
+        },
+        {
+          time: '2026-03-03 08:28:12',
+          chillerName: 'CH-01',
+          action: '减载',
+          cause: '电动阀开度 < 25%',
+          targetLoad: 55,
+          actualLoad: 57,
+          raw: { supplyTemp: 6.3, setpoint: 7.0, deltaT: 0.7, compCurrent: 65.4, compFreq: 35.0 }
+        },
+        {
+          time: '2026-03-03 08:33:56',
+          chillerName: 'CH-02',
+          action: '加载',
+          cause: '回水温度超上限 0.8 ℃',
+          targetLoad: 78,
+          actualLoad: 76,
+          raw: { supplyTemp: 8.0, setpoint: 7.0, deltaT: 1.0, compCurrent: 90.0, compFreq: 46.2 }
+        },
+        {
+          time: '2026-03-03 08:39:30',
+          chillerName: 'CH-03',
+          action: '减载',
+          cause: '回水温度低于下限 1.1 ℃',
+          targetLoad: 50,
+          actualLoad: 52,
+          raw: { supplyTemp: 5.9, setpoint: 7.0, deltaT: 1.1, compCurrent: 60.0, compFreq: 32.5 }
+        },
+        {
+          time: '2026-03-03 08:45:11',
+          chillerName: 'CH-01',
+          action: '加载',
+          cause: '电动阀开度 > 95%',
+          targetLoad: 85,
+          actualLoad: 83,
+          raw: { supplyTemp: 8.7, setpoint: 7.0, deltaT: 1.7, compCurrent: 98.2, compFreq: 49.8 }
+        },
+        {
+          time: '2026-03-03 08:51:44',
+          chillerName: 'CH-02',
+          action: '减载',
+          cause: '系统负荷下降 12%',
+          targetLoad: 65,
+          actualLoad: 67,
+          raw: { supplyTemp: 6.5, setpoint: 7.0, deltaT: 0.5, compCurrent: 70.1, compFreq: 37.0 }
+        },
+        {
+          time: '2026-03-03 08:57:25',
+          chillerName: 'CH-03',
+          action: '加载',
+          cause: '供水温度高于设定值 1.0 ℃',
+          targetLoad: 72,
+          actualLoad: 70,
+          raw: { supplyTemp: 8.0, setpoint: 7.0, deltaT: 1.0, compCurrent: 88.5, compFreq: 44.3 }
+        },
+        {
+          time: '2026-03-03 09:03:05',
+          chillerName: 'CH-01',
+          action: '减载',
+          cause: '供水温度低于设定值 1.2 ℃',
+          targetLoad: 48,
+          actualLoad: 50,
+          raw: { supplyTemp: 5.8, setpoint: 7.0, deltaT: 1.2, compCurrent: 58.7, compFreq: 30.2 }
+        }
+      ],
+      drawer: false,
+      currentRow: {}
+    }
+  },
+  methods: {
+    clearList() {
+      this.$confirm('确定清空所有记录？', '提示', { type: 'warning' }).then(() => {
+        this.list = []
+      })
+    },
+    tableRowClassName({ row }) {
+      return row.action === '加载' ? 'load-row' : 'unload-row'
+    },
+    openDetail(row) {
+      this.currentRow = row
+      this.drawer = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.load-row {
+  background-color: #fff5f5 !important;
+}
+.unload-row {
+  background-color: #f0f9ff !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/comprehensiveEnergy/reportData/index.vue b/src/views/comprehensiveEnergy/reportData/index.vue
new file mode 100644
index 0000000..b021138
--- /dev/null
+++ b/src/views/comprehensiveEnergy/reportData/index.vue
@@ -0,0 +1,538 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="export main-content">
+        <div class="condition">
+          <div class="condition-left">
+            <div class="condition-btn">
+              <div
+                class="legend-li"
+                v-for="(item, index) in timeData"
+                :key="index"
+                @click="handleEnter(index)"
+                :class="{ timeStyle: timeIndex == index }"
+              >
+                {{ item.title }}
+              </div>
+            </div>
+            <div v-if="this.timeIndex == '0'">
+              <el-date-picker
+                v-model="dayData"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+              ></el-date-picker>
+            </div>
+            <div v-if="this.timeIndex == '1'">
+              <el-date-picker
+                v-model="monthData"
+                type="month"
+                value-format="yyyy-MM"
+                placeholder="选择月"
+              ></el-date-picker>
+            </div>
+            <el-button
+              type="success"
+              style="margin-left: 0.24rem"
+              @click="findData"
+              >查询</el-button
+            >
+          </div>
+          <div class="condition-right">
+            <el-button type="warning" @click="exportData">导出</el-button>
+            <el-button type="primary" @click="leadingPrint">打印</el-button>
+          </div>
+        </div>
+        <div class="table-content">
+          <div class="table-title">{{ this.curDate }}{{ this.tableTitle }}</div>
+          <el-table
+            :data="tableData"
+            border
+            v-loading="listLoading"
+            :cell-style="cellStyle"
+          >
+            <el-table-column label="项目" prop="name"></el-table-column>
+            <el-table-column
+              :label="this.tableTitle === '日报表' ? '当日数据' : '当月数据'"
+              prop="value"
+            ></el-table-column>
+            <el-table-column
+              :label="this.tableTitle === '日报表' ? '上日数据' : '上月数据'"
+              prop="lastValue"
+            ></el-table-column>
+            <el-table-column label="同期数据" prop="yoyValue"></el-table-column>
+            <el-table-column label="环比" prop="mom"></el-table-column>
+            <el-table-column label="同比" prop="yoy"></el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <el-dialog
+        :visible.sync="dialogPrintVisible"
+        title="打印预览"
+        width="900px"
+      >
+        <div id="report" ref="report" class="report">
+          <!-- <div class="print-title">铭汉云热水充值明细</div> -->
+          <table
+            border="1"
+            style="
+              table-layout: fixed;
+              width: 100%;
+              border: 1px solid #e2e6f0;
+              margin-bottom: 35px;
+            "
+          >
+            <thead>
+              <tr>
+                <th align="center">项目</th>
+                <th align="center" v-if="this.tableTitle == '日报表'">
+                  当日数据
+                </th>
+                <th align="center" v-else>当月数据</th>
+                <th align="center" v-if="this.tableTitle == '日报表'">
+                  上日数据
+                </th>
+                <th align="center" v-else>上月数据</th>
+                <th align="center">同期数据</th>
+                <th align="center">环比</th>
+                <th align="center">同比</th>
+              </tr>
+            </thead>
+            <tr v-for="(item, index) in tableData" :key="index">
+              <td style="word-break: break-word" align="center">
+                {{ item.name }}
+              </td>
+              <td align="center">{{ item.value }}</td>
+              <td align="center">{{ item.lastValue }}</td>
+              <td align="center">{{ item.yoyValue }}</td>
+              <td style="word-break: break-word" align="center">
+                {{ item.mom }}
+              </td>
+              <td style="word-break: break-word" align="center">
+                {{ item.yoy }}
+              </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>
+  </div>
+</template>
+
+<script>
+import { getDay, getMonth, getYear } from "@/utils/datetime";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      timeData: [{ title: "日报表" }, { title: "月报表" }, { title: "年报表" }],
+      timeIndex: 0, //日报表
+      tableTitle: "日报表",
+      dayData: "",
+      monthData: "",
+      type: "", //传给后端的查询类型
+      curDate: "", //传给后端的当前时间
+      tableData: [],
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+    };
+  },
+  created() {
+    this.getInitializeDate(); //获取当月默认日期（当月1号到当天）
+  },
+  mounted() {
+    this.userName = sessionStorage.getItem("userName");
+    this.getTableData();
+  },
+  methods: {
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (
+        (parseFloat(row.mom) < 0 && columnIndex === 4) ||
+        (parseFloat(row.yoy) < 0 && columnIndex === 5)
+      ) {
+        return { color: "#dc6565" };
+      } else if (
+        (parseFloat(row.mom) > 0 && columnIndex === 4) ||
+        (parseFloat(row.yoy) > 0 && columnIndex === 5)
+      ) {
+        return { color: "#11dbb1" };
+      } else {
+        return "";
+      }
+    },
+    // 默认时间时间
+    getInitializeDate() {
+      this.dayData = getDay(0);
+      this.monthData = getMonth(0);
+    },
+    handleEnter(index) {
+      this.timeIndex = index;
+    },
+    getTableData() {
+      if (this.timeIndex == "0") {
+        (this.type = "day"), (this.curDate = this.dayData);
+      } else {
+        (this.type = "month"), (this.curDate = this.monthData);
+      }
+      let data = {
+        type: this.type,
+        curDate: this.curDate,
+      };
+      this.listLoading = true;
+      console.log("用户管理-查询", data);
+      this.tableData = [
+        {
+          name: "气温(℃)",
+          value: "0.00~0.00",
+          lastValue: "0.00~0.00",
+          yoyValue: "0.00~0.00",
+          mom: "",
+          yoy: "",
+        },
+        {
+          name: "开机时间",
+          value: "2026-03-04 00:01:29",
+          lastValue: "2026-03-03 00:00:30",
+          yoyValue: "",
+          mom: "开机延迟0.98分钟",
+          yoy: "同期无数据",
+        },
+        {
+          name: "关机时间",
+          value: "2026-03-04 08:41:30",
+          lastValue: "2026-03-03 23:57:36",
+          yoyValue: "",
+          mom: "关机提前916.10分钟",
+          yoy: "同期无数据",
+        },
+        {
+          name: "运行时长",
+          value: "0天8小时40分",
+          lastValue: "0天23小时57分",
+          yoyValue: "",
+          mom: "运行减少917.08分钟",
+          yoy: "同期无数据",
+        },
+        {
+          name: "产冷量(kwr)",
+          value: "230",
+          lastValue: "505",
+          yoyValue: "",
+          mom: "-54.00%",
+          yoy: "同期无数据",
+        },
+        {
+          name: "耗电量(kwh)",
+          value: "498",
+          lastValue: "1096",
+          yoyValue: "332",
+          mom: "-55.00%",
+          yoy: "50.00%",
+        },
+        {
+          name: "主机耗电量(kwh)",
+          value: "170",
+          lastValue: "321",
+          yoyValue: "192",
+          mom: "-47.00%",
+          yoy: "-11.00%",
+        },
+        {
+          name: "主机COP",
+          value: "1.35",
+          lastValue: "1.57",
+          yoyValue: "0",
+          mom: "-14.00%",
+          yoy: "0%",
+        },
+        {
+          name: "主机耗电占比(%)",
+          value: "34.14",
+          lastValue: "29.29",
+          yoyValue: "0",
+          mom: "17.00%",
+          yoy: "0%",
+        },
+        {
+          name: "冷站EER",
+          value: "0.46",
+          lastValue: "0.46",
+          yoyValue: "0",
+          mom: "0%",
+          yoy: "0%",
+        },
+      ];
+      // this.$api.dataReport.dataReport(data).then((res) => {
+      //     console.log("查询返回", res);
+      //     if (res.code == 200) {
+      //         this.tableData = res.data.map(obj => {
+      //             if (obj.name == 'startupTime') {
+      //                 obj.name = '开机时间'
+      //             } else if (obj.name == 'shutdownTime') {
+      //                 obj.name = '关机时间'
+      //             } else if (obj.name == 'runTime') {
+      //                 obj.name = '运行时长'
+      //             } else if (obj.name == 'totalCoolCap') {
+      //                 obj.name = '产冷量(kwr)'
+      //             } else if (obj.name == 'totalEleUsed') {
+      //                 obj.name = '耗电量(kwh)'
+      //             } else if (obj.name == 'cop') {
+      //                 obj.name = '冷站EER'
+      //             } else if (obj.name == 'temp') {
+      //                 obj.name = '气温(℃)'
+      //             } else if (obj.name == 'hostEleUsed') {
+      //                 obj.name = '主机耗电量(kwh)'
+      //             } else if (obj.name == 'hostCop') {
+      //                 obj.name = '主机COP'
+      //             } else if (obj.name == 'hostEleLoad') {
+      //                 obj.name = '主机耗电占比(%)'
+      //             }
+      //             return obj
+      //         });
+
+      //     }
+      // });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    // 查询
+    findData() {
+      console.log(
+        "this.curDate",
+        this.tableTitle,
+        this.curDate,
+        this.dayData,
+        this.monthData
+      );
+      if (this.timeIndex == 0) {
+        this.tableTitle = "日报表";
+      } else {
+        this.tableTitle = "月报表";
+      }
+      console.log("标题", this.tableTitle);
+      if (this.dayData === null || this.monthData === null) {
+        this.getInitializeDate();
+        this.getTableData();
+      } else {
+        this.getTableData();
+      }
+    },
+    // 导出
+    exportData() {
+      import("@/assets/excel/Export2Excel").then((excel) => {
+        let outTitle = "";
+        let ourDate = "";
+        if (this.dayData === null || this.monthData === null) {
+          this.getInitializeDate();
+        }
+        if (this.timeIndex == "0") {
+          (this.type = "day"), (outTitle = "日报表");
+          ourDate = this.dayData;
+        } else {
+          (this.type = "month"), (outTitle = "月报表");
+          ourDate = this.monthData;
+        }
+        let data = {
+          type: this.type,
+          curDate: ourDate,
+        };
+        console.log("导出标题日期", outTitle, ourDate);
+        console.log("报表导出-导出", data);
+        this.$api.dataReport
+          .dataReport(data)
+          .then((res) => {
+            if (res.code == 200) {
+              const filterVal = [
+                "name",
+                "value",
+                "lastValue",
+                "yoyValue",
+                "mom",
+                "yoy",
+              ]; // 导出的excel表头字段名，需要导出表格字段名
+
+              let tHeader;
+              if (this.timeIndex == "0") {
+                tHeader = [
+                  "项目",
+                  "当日数据",
+                  "上日数据",
+                  "同期数据",
+                  "环比",
+                  "同比",
+                ]; // 导出的excel表头名信息
+              } else {
+                tHeader = [
+                  "项目",
+                  "当月数据",
+                  "上月数据",
+                  "同期数据",
+                  "环比",
+                  "同比",
+                ]; // 导出的excel表头名信息
+              }
+              const outTableData = res.data.map((obj) => {
+                if (obj.name == "startupTime") {
+                  obj.name = "开机时间";
+                } else if (obj.name == "shutdownTime") {
+                  obj.name = "关机时间";
+                } else if (obj.name == "runTime") {
+                  obj.name = "运行时长";
+                } else if (obj.name == "totalCoolCap") {
+                  obj.name = "产冷量(kwr)";
+                } else if (obj.name == "totalEleUsed") {
+                  obj.name = "耗电量(kwh)";
+                } else if (obj.name == "cop") {
+                  obj.name = "冷站EER";
+                } else if (obj.name == "temp") {
+                  obj.name = "气温(℃)";
+                } else if (obj.name == "hostEleUsed") {
+                  obj.name = "主机耗电量(kwh)";
+                } else if (obj.name == "hostCop") {
+                  obj.name = "主机COP";
+                } else if (obj.name == "hostEleLoad") {
+                  obj.name = "主机耗电占比(%)";
+                }
+                return obj;
+              });
+              const data = this.formatJson(filterVal, outTableData);
+              const autoWidth = true;
+              excel.export_json_to_excel({
+                header: tHeader, //表头
+                data, //数据
+                filename: `${outTitle + "_" + ourDate}`, //名称, //名称
+                autoWidth: true, //宽度自适应
+              });
+            } else {
+              this.$message.error("导出失败!");
+            }
+          })
+          .catch((err) => {
+            this.$message.error("导出失败!");
+          });
+      });
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
+    },
+    // 打印
+    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>
+.export {
+  align-items: center;
+  min-height: 7.4rem;
+
+  .condition {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .condition-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .condition-btn {
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        cursor: pointer;
+        border-radius: 4px;
+        margin-right: 0.24rem;
+        background-color: #1c285c;
+
+        .legend-li {
+          text-align: center;
+          padding: 10px 26px;
+          white-space: nowrap;
+          font-size: 16px;
+          color: #7394a8;
+        }
+
+        .timeStyle {
+          color: #ffffff !important;
+          background-color: #0c3ec7;
+          border: 1px solid #0c3ec7;
+        }
+      }
+    }
+
+    .condition-right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .table-content {
+    width: 100%;
+    margin-top: 20px;
+    padding: 0 0.2rem;
+    font-size: 0.22rem;
+    line-height: 0.13rem;
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .table-title {
+      margin-bottom: 0.2rem;
+    }
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/alarmManage/index.vue b/src/views/newCenterairC/alarmManage/index.vue
new file mode 100644
index 0000000..d8d503b
--- /dev/null
+++ b/src/views/newCenterairC/alarmManage/index.vue
@@ -0,0 +1,1748 @@
+<template>
+  <div class="alarm-manage">
+    <!-- 告警统计卡片 -->
+    <div class="alarm-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.total }}</div>
+          <div class="stat-label">告警总数</div>
+        </div>
+      </div>
+      <div class="stat-card pending">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.pending }}</div>
+          <div class="stat-label">待处理</div>
+        </div>
+      </div>
+      <div class="stat-card processing">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.processing }}</div>
+          <div class="stat-label">处理中</div>
+        </div>
+      </div>
+      <div class="stat-card resolved">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.resolved }}</div>
+          <div class="stat-label">已解决</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工单系统对接配置 -->
+    <div class="workorder-config">
+      <div class="config-header">
+        <div class="config-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+          </svg>
+          工单系统对接配置
+        </div>
+        <el-switch
+          v-model="workOrderConfig.enabled"
+          active-text="已启用"
+          inactive-text="已禁用"
+          class="custom-switch"
+        ></el-switch>
+      </div>
+
+    <div class="config-content" v-if="workOrderConfig.enabled">
+      <div class="config-row">
+        <div class="config-item">
+          <label>工单系统类型</label>
+          <el-select v-model="workOrderConfig.systemType" class="custom-select">
+            <el-option label="业主工单系统A" value="systemA"></el-option>
+            <el-option label="业主工单系统B" value="systemB"></el-option>
+            <el-option label="第三方工单平台" value="thirdParty"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>API地址</label>
+          <el-input v-model="workOrderConfig.apiUrl" placeholder="https://api.workorder.com" class="custom-input"></el-input>
+        </div>
+        <div class="config-item">
+          <label>API密钥</label>
+          <el-input v-model="workOrderConfig.apiKey" placeholder="请输入API密钥" show-password class="custom-input"></el-input>
+        </div>
+      </div>
+      <div class="config-row">
+        <div class="config-item">
+          <label>自动推送</label>
+          <el-switch v-model="workOrderConfig.autoPush" class="custom-switch"></el-switch>
+        </div>
+        <div class="config-item">
+          <label>推送告警等级</label>
+          <el-select v-model="workOrderConfig.pushLevel" class="custom-select" multiple>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>工单优先级映射</label>
+          <el-select v-model="workOrderConfig.priorityMapping" class="custom-select">
+            <el-option label="告警等级=工单优先级" value="direct"></el-option>
+            <el-option label="根据规则映射" value="rule"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="config-actions">
+        <el-button type="primary" @click="testConnection" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          测试连接
+        </el-button>
+        <el-button type="success" @click="saveConfig" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          保存配置
+        </el-button>
+      </div>
+    </div>
+    </div>
+
+    <!-- 告警筛选 -->
+    <div class="alarm-filter">
+      <div class="filter-group">
+        <div class="filter-item">
+          <label>告警级别</label>
+          <el-select v-model="filterForm.level" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警状态</label>
+          <el-select v-model="filterForm.status" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待处理" value="pending"></el-option>
+            <el-option label="处理中" value="processing"></el-option>
+            <el-option label="已解决" value="resolved"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>工单状态</label>
+          <el-select v-model="filterForm.workOrderStatus" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="未创建" value="notCreated"></el-option>
+            <el-option label="待派发" value="pending"></el-option>
+            <el-option label="进行中" value="inProgress"></el-option>
+            <el-option label="已完成" value="completed"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警时间</label>
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="filter-actions">
+        <el-input
+          v-model="filterForm.keyword"
+          placeholder="搜索告警标题/设备/描述"
+          clearable
+          class="search-input custom-input"
+        ></el-input>
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
+      </div>
+    </div>
+
+    <!-- 告警列表 -->
+    <div class="alarm-list">
+      <div class="list-header">
+        <div class="list-title">告警列表</div>
+        <div class="list-info">
+          共 {{ filteredAlarms.length }} 条告警
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="alarm-table">
+          <thead>
+            <tr>
+              <th>告警ID</th>
+              <th>告警级别</th>
+              <th>告警标题</th>
+              <th>设备名称</th>
+              <th>告警时间</th>
+              <th>告警状态</th>
+              <th>工单编号</th>
+              <th>工单状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="alarm in paginatedAlarms" :key="alarm.id">
+              <td>{{ alarm.id }}</td>
+              <td>
+                <span class="level-badge" :class="alarm.level">
+                  {{ getLevelText(alarm.level) }}
+                </span>
+              </td>
+              <td class="title-cell">{{ alarm.title }}</td>
+              <td>{{ alarm.deviceName }}</td>
+              <td>{{ alarm.alarmTime }}</td>
+              <td>
+                <span class="status-badge" :class="alarm.status">
+                  {{ getStatusText(alarm.status) }}
+                </span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderId" class="workorder-link" @click="viewWorkOrder(alarm)">
+                  {{ alarm.workOrderId }}
+                </span>
+                <span v-else class="no-workorder">未创建</span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderStatus" class="workorder-status" :class="alarm.workOrderStatus">
+                  {{ getWorkOrderStatusText(alarm.workOrderStatus) }}
+                </span>
+                <span v-else>-</span>
+              </td>
+              <td class="action-cell">
+                <div class="action-buttons">
+                  <el-button
+                    v-if="!alarm.workOrderId"
+                    type="primary"
+                    size="small"
+                    @click="createWorkOrder(alarm)"
+                    class="action-btn"
+                  >
+                    创建工单
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="viewAlarmDetail(alarm)"
+                    class="action-btn"
+                  >
+                    详情
+                  </el-button>
+                  <el-dropdown @command="(cmd) => handleAlarmCommand(cmd, alarm)" class="action-dropdown">
+                    <el-button size="small" class="action-btn">
+                      更多
+                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                      </svg>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu class="custom-dropdown-menu">
+                        <el-dropdown-item command="viewWorkOrder" v-if="alarm.workOrderId">查看工单</el-dropdown-item>
+                        <el-dropdown-item command="createWorkOrder" v-if="!alarm.workOrderId">创建工单</el-dropdown-item>
+                        <el-dropdown-item command="resolve" v-if="alarm.status !== 'resolved'" divided>标记已解决</el-dropdown-item>
+                        <el-dropdown-item command="close" v-if="alarm.status !== 'resolved'">关闭告警</el-dropdown-item>
+                        <el-dropdown-item command="reopen" v-if="alarm.status === 'resolved'">重新打开</el-dropdown-item>
+                        <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="filteredAlarms.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 告警详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="告警详情"
+      width="800px"
+      class="custom-dialog"
+    >
+      <div class="detail-content" v-if="selectedAlarm">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">告警ID:</span>
+              <span class="item-value">{{ selectedAlarm.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警级别:</span>
+              <span class="item-value level-badge" :class="selectedAlarm.level">
+                {{ getLevelText(selectedAlarm.level) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警标题:</span>
+              <span class="item-value">{{ selectedAlarm.title }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警状态:</span>
+              <span class="item-value status-badge" :class="selectedAlarm.status">
+                {{ getStatusText(selectedAlarm.status) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedAlarm.deviceName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警时间:</span>
+              <span class="item-value">{{ selectedAlarm.alarmTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">告警描述:</span>
+              <span class="item-value">{{ selectedAlarm.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedAlarm.workOrderId">
+          <div class="section-title">关联工单</div>
+          <div class="workorder-info">
+            <div class="info-row">
+              <span class="info-label">工单编号:</span>
+              <span class="info-value workorder-link" @click="viewWorkOrder(selectedAlarm)">
+                {{ selectedAlarm.workOrderId }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单状态:</span>
+              <span class="info-value workorder-status" :class="selectedAlarm.workOrderStatus">
+                {{ getWorkOrderStatusText(selectedAlarm.workOrderStatus) }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单类型:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderType }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">创建时间:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderCreateTime }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">处理人:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderHandler }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">处理记录</div>
+          <div class="process-timeline">
+            <div
+              v-for="(record, index) in selectedAlarm.processRecords"
+              :key="index"
+              class="timeline-item"
+            >
+              <div class="timeline-dot" :class="record.type"></div>
+              <div class="timeline-content">
+                <div class="timeline-title">{{ record.title }}</div>
+                <div class="timeline-time">{{ record.time }}</div>
+                <div class="timeline-desc" v-if="record.description">{{ record.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 创建工单弹窗 -->
+    <el-dialog
+      v-model="workOrderDialogVisible"
+      title="创建工单"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="workOrderForm" :rules="workOrderRules" ref="workOrderFormRef" label-width="100px">
+        <el-form-item label="工单标题" prop="title">
+          <el-input v-model="workOrderForm.title" placeholder="请输入工单标题" class="custom-input"></el-input>
+        </el-form-item>
+        <el-form-item label="工单类型" prop="type">
+          <el-select v-model="workOrderForm.type" class="custom-select">
+            <el-option label="设备故障" value="deviceFault"></el-option>
+            <el-option label="系统异常" value="systemError"></el-option>
+            <el-option label="维护保养" value="maintenance"></el-option>
+            <el-option label="其他" value="other"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-select v-model="workOrderForm.priority" class="custom-select">
+            <el-option label="紧急" value="urgent"></el-option>
+            <el-option label="高" value="high"></el-option>
+            <el-option label="中" value="medium"></el-option>
+            <el-option label="低" value="low"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指派人" prop="assignee">
+          <el-select v-model="workOrderForm.assignee" class="custom-select">
+            <el-option label="张三" value="user1"></el-option>
+            <el-option label="李四" value="user2"></el-option>
+            <el-option label="王五" value="user3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单描述" prop="description">
+          <el-input
+            v-model="workOrderForm.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入工单描述"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="workOrderDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="submitWorkOrder" class="custom-btn">提交工单</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AlarmManage",
+  data() {
+    return {
+      alarmStats: {
+        total: 156,
+        pending: 12,
+        processing: 28,
+        resolved: 116
+      },
+      workOrderConfig: {
+        enabled: true,
+        systemType: "systemA",
+        apiUrl: "https://api.workorder.example.com",
+        apiKey: "",
+        autoPush: true,
+        pushLevel: ["critical", "warning"],
+        priorityMapping: "direct"
+      },
+      filterForm: {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      alarmList: [],
+      detailDialogVisible: false,
+      workOrderDialogVisible: false,
+      selectedAlarm: null,
+      workOrderForm: {
+        title: "",
+        type: "",
+        priority: "",
+        assignee: "",
+        description: ""
+      },
+      workOrderRules: {
+        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
+        type: [{ required: true, message: "请选择工单类型", trigger: "change" }],
+        priority: [{ required: true, message: "请选择优先级", trigger: "change" }],
+        assignee: [{ required: true, message: "请选择指派人", trigger: "change" }],
+        description: [{ required: true, message: "请输入工单描述", trigger: "blur" }]
+      }
+    };
+  },
+  computed: {
+    filteredAlarms() {
+      let alarms = [...this.alarmList];
+      
+      if (this.filterForm.level) {
+        alarms = alarms.filter(a => a.level === this.filterForm.level);
+      }
+      
+      if (this.filterForm.status) {
+        alarms = alarms.filter(a => a.status === this.filterForm.status);
+      }
+      
+      if (this.filterForm.workOrderStatus) {
+        alarms = alarms.filter(a => a.workOrderStatus === this.filterForm.workOrderStatus);
+      }
+      
+      if (this.filterForm.keyword) {
+        const keyword = this.filterForm.keyword.toLowerCase();
+        alarms = alarms.filter(a => 
+          a.title.toLowerCase().includes(keyword) ||
+          a.deviceName.toLowerCase().includes(keyword) ||
+          a.description.toLowerCase().includes(keyword)
+        );
+      }
+      
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        const [start, end] = this.filterForm.dateRange;
+        alarms = alarms.filter(a => a.alarmTime >= start && a.alarmTime <= end);
+      }
+      
+      return alarms;
+    },
+    paginatedAlarms() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredAlarms.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initAlarmList();
+  },
+  methods: {
+    initAlarmList() {
+      const now = new Date();
+      this.alarmList = [
+        {
+          id: "ALM202403040001",
+          level: "critical",
+          title: "主机过载告警",
+          description: "1号主机负载超过额定值105%，持续运行10分钟",
+          deviceName: "1号主机",
+          deviceCode: "CH-001",
+          alarmTime: "2024-03-04 10:30:25",
+          status: "pending",
+          workOrderId: "WO202403040001",
+          workOrderStatus: "inProgress",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 10:35:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 10:30:25", description: "系统检测到1号主机过载" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 10:30:30", description: "成功创建工单WO202403040001" },
+            { type: "process", title: "工单已派发", time: "2024-03-04 10:45:00", description: "指派给运维人员张三" },
+            { type: "processing", title: "运维人员已接单", time: "2024-03-04 11:00:00", description: "开始处理主机过载问题" }
+          ]
+        },
+        {
+          id: "ALM202403040002",
+          level: "critical",
+          title: "冷冻泵故障告警",
+          description: "4号冷冻泵电机过载保护触发",
+          deviceName: "4号冷冻泵",
+          deviceCode: "CP-004",
+          alarmTime: "2024-03-04 09:15:42",
+          status: "processing",
+          workOrderId: "WO202403040002",
+          workOrderStatus: "pending",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 09:20:00",
+          workOrderHandler: "李四",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 09:15:42", description: "检测到冷冻泵电机过载" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 09:15:45", description: "成功创建工单WO202403040002" },
+            { type: "pending", title: "等待派发", time: "2024-03-04 09:20:00", description: "工单待派发" }
+          ]
+        },
+        {
+          id: "ALM202403040003",
+          level: "warning",
+          title: "冷却塔风机效率下降",
+          description: "1号冷却塔风机效率低于设计值15%",
+          deviceName: "1号冷却塔",
+          deviceCode: "CT-001",
+          alarmTime: "2024-03-04 08:45:18",
+          status: "pending",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 08:45:18", description: "检测到风机效率下降" }
+          ]
+        },
+        {
+          id: "ALM202403040004",
+          level: "info",
+          title: "温度传感器数据异常",
+          description: "18号温度传感器读数波动较大",
+          deviceName: "18号温度传感器",
+          deviceCode: "TS-018",
+          alarmTime: "2024-03-04 07:30:55",
+          status: "resolved",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 07:30:55", description: "传感器读数异常" },
+            { type: "resolve", title: "告警已解决", time: "2024-03-04 08:15:00", description: "传感器已恢复正常" }
+          ]
+        },
+        {
+          id: "ALM202403030005",
+          level: "critical",
+          title: "主机冷却水流量异常",
+          description: "2号主机冷却水流量低于设定值50%",
+          deviceName: "2号主机",
+          deviceCode: "CH-002",
+          alarmTime: "2024-03-03 16:22:33",
+          status: "resolved",
+          workOrderId: "WO202403030001",
+          workOrderStatus: "completed",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-03 16:30:00",
+          workOrderHandler: "王五",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 16:22:33", description: "检测到冷却水流量异常" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 16:22:40", description: "成功创建工单WO202403030001" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 16:45:00", description: "指派给运维人员王五" },
+            { type: "processing", title: "运维人员已接单", time: "2024-03-03 17:00:00", description: "开始处理冷却水流量问题" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 18:30:00", description: "冷却水流量恢复正常" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 18:35:00", description: "工单已归档" }
+          ]
+        },
+        {
+          id: "ALM202403030006",
+          level: "warning",
+          title: "系统EER值低于阈值",
+          description: "机房整体EER值为4.2，低于设定值5.0",
+          deviceName: "机房系统",
+          deviceCode: "SYS-001",
+          alarmTime: "2024-03-03 14:10:22",
+          status: "resolved",
+          workOrderId: "WO202403030002",
+          workOrderStatus: "completed",
+          workOrderType: "systemError",
+          workOrderCreateTime: "2024-03-03 14:20:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 14:10:22", description: "系统能效低于阈值" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 14:10:30", description: "成功创建工单WO202403030002" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 14:30:00", description: "指派给运维人员张三" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 15:45:00", description: "EER值已恢复到6.5" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 15:50:00", description: "工单已归档" }
+          ]
+        }
+      ];
+      
+      // 添加更多模拟数据
+      for (let i = 7; i <= 20; i++) {
+        const levels = ["critical", "warning", "info"];
+        const statuses = ["pending", "processing", "resolved"];
+        const workOrderStatuses = ["notCreated", "pending", "inProgress", "completed"];
+        const date = new Date(now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000);
+        
+        this.alarmList.push({
+          id: `ALM2024030${String(i).padStart(5, '0')}`,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          title: ["设备温度异常", "传感器离线", "电流波动异常", "冷却塔效率下降", "泵运行异常"][Math.floor(Math.random() * 5)],
+          description: `告警描述详情 ${i}`,
+          deviceName: `${["主机", "冷冻泵", "冷却泵", "冷却塔", "温度传感器"][Math.floor(Math.random() * 5)]}`,
+          deviceCode: `DEV-${String(i).padStart(3, '0')}`,
+          alarmTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          status: statuses[Math.floor(Math.random() * statuses.length)],
+          workOrderId: Math.random() > 0.5 ? `WO2024030${String(i).padStart(5, '0')}` : null,
+          workOrderStatus: Math.random() > 0.3 ? workOrderStatuses[Math.floor(Math.random() * workOrderStatuses.length)] : null,
+          workOrderType: "deviceFault",
+          workOrderCreateTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          workOrderHandler: ["张三", "李四", "王五"][Math.floor(Math.random() * 3)],
+          processRecords: [
+            { type: "create", title: "告警产生", time: date.toISOString().slice(0, 19).replace('T', ' '), description: "告警已产生" }
+          ]
+        });
+      }
+    },
+    getLevelText(level) {
+      const map = {
+        critical: "严重",
+        warning: "警告",
+        info: "信息"
+      };
+      return map[level] || level;
+    },
+    getStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已解决"
+      };
+      return map[status] || status;
+    },
+    getWorkOrderStatusText(status) {
+      const map = {
+        notCreated: "未创建",
+        pending: "待派发",
+        inProgress: "进行中",
+        completed: "已完成"
+      };
+      return map[status] || status;
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.filterForm = {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      };
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("告警列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewAlarmDetail(alarm) {
+      this.selectedAlarm = alarm;
+      this.detailDialogVisible = true;
+    },
+    createWorkOrder(alarm) {
+      this.workOrderForm.title = `[告警] ${alarm.title} - ${alarm.deviceName}`;
+      this.workOrderForm.type = "deviceFault";
+      this.workOrderForm.priority = alarm.level === "critical" ? "urgent" : alarm.level === "warning" ? "high" : "medium";
+      this.workOrderForm.assignee = "";
+      this.workOrderForm.description = alarm.description;
+      this.workOrderDialogVisible = true;
+    },
+    submitWorkOrder() {
+      this.$refs.workOrderFormRef.validate((valid) => {
+        if (valid) {
+          const alarm = this.alarmList.find(a => a === this.selectedAlarm);
+          if (alarm) {
+            alarm.workOrderId = `WO${new Date().getTime()}`;
+            alarm.workOrderStatus = "pending";
+            alarm.workOrderType = this.workOrderForm.type;
+            alarm.workOrderCreateTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
+            alarm.workOrderHandler = this.workOrderForm.assignee;
+            alarm.status = "processing";
+            alarm.processRecords.push({
+              type: "push",
+              title: "手动创建工单",
+              time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+              description: `成功创建工单${alarm.workOrderId}`
+            });
+          }
+          this.$message.success("工单创建成功");
+          this.workOrderDialogVisible = false;
+        }
+      });
+    },
+    viewWorkOrder(alarm) {
+      this.$message.info(`查看工单: ${alarm.workOrderId}`);
+    },
+    handleAlarmCommand(command, alarm) {
+      if (command === "resolve") {
+        alarm.status = "resolved";
+        alarm.processRecords.push({
+          type: "resolve",
+          title: "标记为已解决",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户手动标记为已解决"
+        });
+        this.$message.success("已标记为已解决");
+      } else if (command === "close") {
+        alarm.status = "resolved";
+        this.$message.success("告警已关闭");
+      } else if (command === "reopen") {
+        alarm.status = "pending";
+        alarm.processRecords.push({
+          type: "reopen",
+          title: "重新打开告警",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户重新打开告警"
+        });
+        this.$message.success("告警已重新打开");
+      } else if (command === "createWorkOrder") {
+        this.createWorkOrder(alarm);
+      } else if (command === "viewWorkOrder") {
+        this.viewWorkOrder(alarm);
+      } else if (command === "export") {
+        this.$message.success(`导出告警${alarm.id}的报告成功`);
+      }
+    },
+    testConnection() {
+      this.$message.success("工单系统连接测试成功");
+    },
+    saveConfig() {
+      this.$message.success("配置已保存");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.alarm-manage {
+  padding: 0.16rem;
+}
+
+.alarm-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.pending {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.processing {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.resolved {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.workorder-config {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .config-header {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+
+    .config-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+  }
+}
+
+.config-content {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .config-row {
+    display: flex;
+    gap: 0.15rem;
+    margin-bottom: 0.15rem;
+    flex-wrap: wrap;
+
+    .config-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-input {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+
+      ::v-deep .custom-switch {
+        .el-switch__core {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  }
+
+  .config-actions {
+    display: flex;
+    gap: 0.1rem;
+    margin-top: 0.15rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+
+      svg {
+        width: 0.14rem;
+        height: 0.14rem;
+        fill: #ffffff;
+        margin-right: 0.04rem;
+      }
+    }
+  }
+}
+
+.alarm-filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .filter-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 1.8rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    gap: 0.1rem;
+
+    .search-input {
+      width: 2.5rem;
+    }
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.alarm-list {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border-radius: 0.04rem;
+    background: rgba(255, 255, 255, 0.02);
+
+    .alarm-table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 10rem;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+          th {
+            padding: 0.14rem 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: 600;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            white-space: nowrap;
+
+            &:first-child {
+              padding-left: 0.15rem;
+              border-top-left-radius: 0.04rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+              border-top-right-radius: 0.04rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          transition: all 0.3s ease;
+          background: rgba(255, 255, 255, 0.02);
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.04);
+          }
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.1);
+            transform: translateX(0.02rem);
+          }
+
+          td {
+            padding: 0.14rem 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            vertical-align: middle;
+
+            &:first-child {
+              padding-left: 0.15rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+            }
+
+            .level-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.critical {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.warning {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.info {
+                background: linear-gradient(135deg, rgba(84, 112, 198, 0.25) 0%, rgba(103, 126, 234, 0.25) 100%);
+                color: #90CAF9;
+                border: 1px solid rgba(84, 112, 198, 0.4);
+              }
+            }
+
+            .status-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.processing {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.resolved {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+              font-weight: 500;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #91CC75;
+                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.5);
+              }
+            }
+
+            .no-workorder {
+              color: #ffffff;
+              opacity: 0.5;
+              font-style: italic;
+            }
+
+            .workorder-status {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.notCreated {
+                background: rgba(255, 255, 255, 0.1);
+                color: #ffffff;
+                opacity: 0.5;
+              }
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.inProgress {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.completed {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .title-cell {
+              max-width: 2.5rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              cursor: pointer;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #15e1fd;
+              }
+            }
+
+            .action-buttons {
+              display: flex;
+              align-items: center;
+              gap: 0.08rem;
+              flex-wrap: nowrap;
+
+              .action-btn {
+                padding: 0.05rem 0.12rem;
+                font-size: 0.12rem;
+                border-radius: 0.04rem;
+                font-weight: 500;
+                transition: all 0.3s ease;
+                white-space: nowrap;
+
+                &.el-button--primary {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                  }
+                }
+
+                &.el-button--success {
+                  background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(145, 204, 117, 0.4);
+                  }
+                }
+
+                &.el-button--default {
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+                }
+
+                &:active {
+                  transform: translateY(0);
+                }
+
+                svg {
+                  width: 0.1rem;
+                  height: 0.1rem;
+                  fill: #ffffff;
+                }
+              }
+
+              .action-dropdown {
+                ::v-deep .el-button--small {
+                  padding: 0.05rem 0.1rem;
+                  font-size: 0.12rem;
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+
+                  svg {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    fill: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.warning {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.info {
+                background: rgba(84, 112, 198, 0.2);
+                color: #5470C6;
+              }
+            }
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.processing {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.resolved {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .workorder-info {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        padding: 0.15rem;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.1rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .info-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .info-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+
+              &:hover {
+                color: #91CC75;
+              }
+            }
+
+            &.workorder-status {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.inProgress {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.completed {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .process-timeline {
+        .timeline-item {
+          display: flex;
+          margin-bottom: 0.2rem;
+
+          .timeline-dot {
+            width: 0.1rem;
+            height: 0.1rem;
+            border-radius: 50%;
+            margin-right: 0.15rem;
+            margin-top: 0.03rem;
+
+            &.create {
+              background: #5470C6;
+            }
+
+            &.push {
+              background: #91CC75;
+            }
+
+            &.process,
+            &.processing {
+              background: #FAC858;
+            }
+
+            &.resolve {
+              background: #73C0DE;
+            }
+
+            &.complete {
+              background: #3BA272;
+            }
+
+            &.pending {
+              background: #EE6666;
+            }
+
+            &.reopen {
+              background: #F37336;
+            }
+          }
+
+          .timeline-content {
+            flex: 1;
+
+            .timeline-title {
+              font-size: 0.14rem;
+              color: #ffffff;
+              font-weight: bold;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-time {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.6;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-desc {
+              font-size: 0.13rem;
+              color: #ffffff;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item__label {
+    color: #ffffff;
+    opacity: 0.7;
+  }
+
+  .custom-input,
+  .custom-select {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .alarm-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .alarm-filter {
+    flex-direction: column;
+  }
+
+  .filter-actions {
+    width: 100%;
+    margin-top: 0.1rem;
+
+    .search-input {
+      flex: 1;
+    }
+  }
+
+  .table-container {
+    .alarm-table {
+      thead tr th,
+      tbody tr td {
+        font-size: 0.12rem;
+        padding: 0.08rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/deviceManage/index.vue b/src/views/newCenterairC/deviceManage/index.vue
new file mode 100644
index 0000000..1a40ef6
--- /dev/null
+++ b/src/views/newCenterairC/deviceManage/index.vue
@@ -0,0 +1,1117 @@
+<template>
+  <div class="device-manage">
+    <!-- 搜索筛选区域 -->
+    <div class="search-filter-area">
+      <div class="search-group">
+        <div class="search-item">
+          <label>设备名称</label>
+          <el-input
+            v-model="searchForm.deviceName"
+            placeholder="请输入设备名称"
+            clearable
+            class="custom-input"
+            @clear="handleSearch"
+          >
+            <template #prefix>
+              <svg class="search-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M909.6 854.5L649.9 594.8c41.3-54.3 65.9-121.4 65.9-194.1C715.8 262.2 560.6 107 370.4 107S25 262.2 25 452.4s155.2 345.4 345.4 345.4c72.7 0 139.8-24.6 194.1-65.9l259.7 259.7c11.1 11.1 29.1 11.1 40.2 0l45.2-45.2c11.1-11.1 11.1-29.1 0-40.2zM370.4 705c-139.1 0-252.6-113.5-252.6-252.6s113.5-252.6 252.6-252.6 252.6 113.5 252.6 252.6-113.5 252.6-252.6 252.6z" fill="currentColor"/>
+              </svg>
+            </template>
+          </el-input>
+        </div>
+        <div class="search-item">
+          <label>设备状态</label>
+          <el-select
+            v-model="searchForm.deviceStatus"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option label="运行中" value="running"></el-option>
+            <el-option label="离线" value="offline"></el-option>
+            <el-option label="故障" value="fault"></el-option>
+            <el-option label="待机" value="standby"></el-option>
+          </el-select>
+        </div>
+        <div class="search-item">
+          <label>设备类型</label>
+          <el-select
+            v-model="searchForm.deviceType"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option
+              v-for="type in deviceTypes"
+              :key="type.value"
+              :label="type.label"
+              :value="type.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="action-group">
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">
+          <svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
+          </svg>
+          导出列表
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 设备统计卡片 -->
+    <div class="device-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.total }}</div>
+          <div class="stat-label">设备总数</div>
+        </div>
+      </div>
+      <div class="stat-card running">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.running }}</div>
+          <div class="stat-label">运行中</div>
+        </div>
+      </div>
+      <div class="stat-card offline">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.offline }}</div>
+          <div class="stat-label">离线</div>
+        </div>
+      </div>
+      <div class="stat-card fault">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.fault }}</div>
+          <div class="stat-label">故障</div>
+        </div>
+      </div>
+      <div class="stat-card standby">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.standby }}</div>
+          <div class="stat-label">待机</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备分类标签页 -->
+    <div class="category-tabs">
+      <div
+        v-for="(category, index) in deviceCategories"
+        :key="index"
+        :class="['category-tab', { active: activeCategory === index }]"
+        @click="handleCategoryChange(index)"
+      >
+        <span class="tab-icon">{{ getCategoryIcon(category.value) }}</span>
+        <span class="tab-label">{{ category.label }}</span>
+        <span class="tab-count">({{ category.count }})</span>
+      </div>
+    </div>
+
+    <!-- 设备列表 -->
+    <div class="device-list-container">
+      <div class="list-header">
+        <div class="list-title">设备列表</div>
+        <div class="list-info">
+          共 {{ filteredDevices.length }} 台设备
+        </div>
+      </div>
+      <div class="device-grid">
+        <div
+          v-for="(device, index) in paginatedDevices"
+          :key="index"
+          :class="['device-card', device.status]"
+          @click="viewDeviceDetail(device)"
+        >
+          <div class="card-header">
+            <div class="device-icon" :style="{ background: device.iconBg }">
+              <span>{{ getDeviceIcon(device.type) }}</span>
+            </div>
+            <div class="device-header-info">
+              <div class="device-name">{{ device.name }}</div>
+              <div class="device-code">{{ device.code }}</div>
+            </div>
+            <div class="status-badge" :class="device.status">
+              {{ getStatusText(device.status) }}
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="device-info-row">
+              <span class="info-label">型号:</span>
+              <span class="info-value">{{ device.model }}</span>
+            </div>
+            <div class="device-info-row">
+              <span class="info-label">安装日期:</span>
+              <span class="info-value">{{ device.installDate }}</span>
+            </div>
+            <div class="device-info-row" v-if="device.status === 'running'">
+              <span class="info-label">运行时长:</span>
+              <span class="info-value">{{ device.runtime }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="device-params" v-if="device.parameters">
+              <div
+                v-for="(param, pIndex) in device.parameters"
+                :key="pIndex"
+                class="param-item"
+              >
+                <span class="param-label">{{ param.label }}:</span>
+                <span class="param-value">{{ param.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[12, 24, 48, 96]"
+          :total="filteredDevices.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 设备详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      :title="selectedDevice ? selectedDevice.name + ' - 设备详情' : '设备详情'"
+      width="800px"
+      class="custom-dialog"
+      @close="closeDetailDialog"
+    >
+      <div class="detail-content" v-if="selectedDevice">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">设备编号:</span>
+              <span class="item-value">{{ selectedDevice.code }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedDevice.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备型号:</span>
+              <span class="item-value">{{ selectedDevice.model }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备类型:</span>
+              <span class="item-value">{{ selectedDevice.type }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">安装日期:</span>
+              <span class="item-value">{{ selectedDevice.installDate }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备状态:</span>
+              <span class="item-value status-badge" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">设备参数:</span>
+              <span class="item-value">{{ selectedDevice.spec }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedDevice.parameters && selectedDevice.parameters.length > 0">
+          <div class="section-title">运行参数</div>
+          <div class="params-grid">
+            <div
+              v-for="(param, index) in selectedDevice.parameters"
+              :key="index"
+              class="param-card"
+            >
+              <div class="param-label">{{ param.label }}</div>
+              <div class="param-value">{{ param.value }}</div>
+              <div class="param-unit">{{ param.unit }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">运行状态</div>
+          <div class="status-info">
+            <div class="status-item">
+              <span class="status-label">当前状态:</span>
+              <span class="status-text" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'running'">
+              <span class="status-label">运行时长:</span>
+              <span class="status-text">{{ selectedDevice.runtime }}</span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'fault'">
+              <span class="status-label">故障信息:</span>
+              <span class="status-text fault">{{ selectedDevice.faultInfo || '未知故障' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="closeDetailDialog" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeviceManage",
+  data() {
+    return {
+      searchForm: {
+        deviceName: "",
+        deviceStatus: "",
+        deviceType: ""
+      },
+      deviceTypes: [
+        { label: "主机", value: "host" },
+        { label: "冷冻泵", value: "chillerPump" },
+        { label: "冷却泵", value: "coolingPump" },
+        { label: "冷却塔", value: "coolingTower" },
+        { label: "温度传感器", value: "tempSensor" },
+        { label: "压力传感器", value: "pressureSensor" },
+        { label: "电表", value: "meter" }
+      ],
+      deviceCategories: [
+        { label: "全部设备", value: "all", count: 48 },
+        { label: "主机", value: "host", count: 4 },
+        { label: "冷冻泵", value: "chillerPump", count: 4 },
+        { label: "冷却泵", value: "coolingPump", count: 4 },
+        { label: "冷却塔", value: "coolingTower", count: 3 },
+        { label: "传感器", value: "sensor", count: 28 },
+        { label: "电表", value: "meter", count: 5 }
+      ],
+      activeCategory: 0,
+      currentPage: 1,
+      pageSize: 12,
+      deviceList: [],
+      deviceStats: {
+        total: 48,
+        running: 38,
+        offline: 5,
+        fault: 2,
+        standby: 3
+      },
+      detailDialogVisible: false,
+      selectedDevice: null
+    };
+  },
+  computed: {
+    filteredDevices() {
+      let devices = [...this.deviceList];
+      const category = this.deviceCategories[this.activeCategory];
+      if (category.value !== "all") {
+        if (category.value === "sensor") {
+          devices = devices.filter(d => d.type === "tempSensor" || d.type === "pressureSensor");
+        } else {
+          devices = devices.filter(d => d.type === category.value);
+        }
+      }
+      if (this.searchForm.deviceName) {
+        const keyword = this.searchForm.deviceName.toLowerCase();
+        devices = devices.filter(d => d.name.toLowerCase().includes(keyword) || d.code.toLowerCase().includes(keyword));
+      }
+      if (this.searchForm.deviceStatus) {
+        devices = devices.filter(d => d.status === this.searchForm.deviceStatus);
+      }
+      if (this.searchForm.deviceType) {
+        devices = devices.filter(d => d.type === this.searchForm.deviceType);
+      }
+      return devices;
+    },
+    paginatedDevices() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredDevices.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initDeviceList();
+  },
+  methods: {
+    initDeviceList() {
+      const hostIcons = ["#667eea", "#764ba2"];
+      const pumpIcons = ["#4facfe", "#00f2fe"];
+      const towerIcons = ["#fa709a", "#fee140"];
+      const sensorIcons = ["#f093fb", "#f5576c"];
+      const meterIcons = ["#a8edea", "#fed6e3"];
+      
+      this.deviceList = [
+        { code: "CH-001", name: "1号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "12.5", unit: "℃" }, { label: "出水温度", value: "7.2", unit: "℃" }, { label: "电流", value: "850", unit: "A" }, { label: "功率", value: "520", unit: "kW" }, { label: "COP", value: "5.2", unit: "" }] },
+        { code: "CH-002", name: "2号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "12.3", unit: "℃" }, { label: "出水温度", value: "7.1", unit: "℃" }, { label: "电流", value: "830", unit: "A" }, { label: "功率", value: "508", unit: "kW" }, { label: "COP", value: "5.1", unit: "" }] },
+        { code: "CH-003", name: "3号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)` },
+        { code: "CH-004", name: "4号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)` },
+        { code: "CP-001", name: "1号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`, parameters: [{ label: "流量", value: "1150", unit: "m3/h" }, { label: "扬程", value: "30.5", unit: "m" }, { label: "电流", value: "185", unit: "A" }, { label: "功率", value: "98", unit: "kW" }] },
+        { code: "CP-002", name: "2号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`, parameters: [{ label: "流量", value: "1120", unit: "m3/h" }, { label: "扬程", value: "29.8", unit: "m" }, { label: "电流", value: "178", unit: "A" }, { label: "功率", value: "95", unit: "kW" }] },
+        { code: "CP-003", name: "3号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)` },
+        { code: "CP-004", name: "4号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "fault", faultInfo: "电机过载保护", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)` },
+        { code: "CWP-001", name: "1号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`, parameters: [{ label: "流量", value: "1180", unit: "m3/h" }, { label: "扬程", value: "27.2", unit: "m" }, { label: "电流", value: "158", unit: "A" }, { label: "功率", value: "85", unit: "kW" }] },
+        { code: "CWP-002", name: "2号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`, parameters: [{ label: "流量", value: "1160", unit: "m3/h" }, { label: "扬程", value: "26.8", unit: "m" }, { label: "电流", value: "152", unit: "A" }, { label: "功率", value: "82", unit: "kW" }] },
+        { code: "CWP-003", name: "3号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)` },
+        { code: "CWP-004", name: "4号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)` },
+        { code: "CT-001", name: "1号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "37.2", unit: "℃" }, { label: "出水温度", value: "32.5", unit: "℃" }, { label: "风机频率", value: "45", unit: "Hz" }, { label: "风机功率", value: "12.5", unit: "kW" }] },
+        { code: "CT-002", name: "2号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "37.0", unit: "℃" }, { label: "出水温度", value: "32.3", unit: "℃" }, { label: "风机频率", value: "43", unit: "Hz" }, { label: "风机功率", value: "11.8", unit: "kW" }] },
+        { code: "CT-003", name: "3号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)` },
+        { code: "EM-001", name: "总电表", type: "meter", model: "DTS666", spec: "三相四线, 3(6)A, 0.5S级", installDate: "2020-06-15", status: "running", iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`, parameters: [{ label: "总有功电能", value: "1256800", unit: "kWh" }, { label: "总功率", value: "1256", unit: "kW" }, { label: "A相电流", value: "850", unit: "A" }, { label: "B相电流", value: "820", unit: "A" }, { label: "C相电流", value: "830", unit: "A" }] },
+        { code: "EM-002", name: "1号主机电表", type: "meter", model: "DTS666", spec: "三相四线, 3(6)A, 0.5S级", installDate: "2020-06-15", status: "running", iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`, parameters: [{ label: "有功电能", value: "285600", unit: "kWh" }, { label: "功率", value: "520", unit: "kW" }, { label: "A相电流", value: "285", unit: "A" }, { label: "B相电流", value: "280", unit: "A" }, { label: "C相电流", value: "285", unit: "A" }] }
+      ];
+      
+      for (let i = 1; i <= 18; i++) {
+        this.deviceList.push({
+          code: `TS-${String(i).padStart(3, '0')}`,
+          name: `${i}号温度传感器`,
+          type: "tempSensor",
+          model: "PT100",
+          spec: "测温范围: -50~200℃, 精度: +/-0.1℃",
+          installDate: "2020-06-15",
+          status: i <= 15 ? "running" : "offline",
+          iconBg: `linear-gradient(135deg, #${sensorIcons[0]} 0%, #${sensorIcons[1]} 100%)`,
+          parameters: [{ label: "当前温度", value: (12 + Math.random() * 8).toFixed(1), unit: "℃" }, { label: "信号强度", value: "-45", unit: "dBm" }]
+        });
+      }
+      
+      for (let i = 1; i <= 10; i++) {
+        this.deviceList.push({
+          code: `PS-${String(i).padStart(3, '0')}`,
+          name: `${i}号压力传感器`,
+          type: "pressureSensor",
+          model: "HB2000",
+          spec: "量程: 0~2.5MPa, 精度: +/-0.25%",
+          installDate: "2020-06-15",
+          status: i <= 8 ? "running" : i === 9 ? "fault" : "offline",
+          faultInfo: i === 9 ? "传感器漂移" : undefined,
+          iconBg: `linear-gradient(135deg, #30cfd0 0%, #330867 100%)`,
+          parameters: [{ label: "当前压力", value: (0.5 + Math.random() * 0.3).toFixed(2), unit: "MPa" }, { label: "信号强度", value: "-52", unit: "dBm" }]
+        });
+      }
+      
+      for (let i = 3; i <= 5; i++) {
+        this.deviceList.push({
+          code: `EM-00${i}`,
+          name: `${i}号主机电表`,
+          type: "meter",
+          model: "DTS666",
+          spec: "三相四线, 3(6)A, 0.5S级",
+          installDate: "2020-06-15",
+          status: "running",
+          iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`,
+          parameters: [{ label: "有功电能", value: Math.floor(250000 + Math.random() * 50000), unit: "kWh" }, { label: "功率", value: Math.floor(480 + Math.random() * 80), unit: "kW" }]
+        });
+      }
+    },
+    getStatusText(status) {
+      const statusMap = {
+        running: "运行中",
+        offline: "离线",
+        fault: "故障",
+        standby: "待机"
+      };
+      return statusMap[status] || status;
+    },
+    getDeviceIcon(type) {
+      const iconMap = {
+        host: "主机",
+        chillerPump: "冷冻泵",
+        coolingPump: "冷却泵",
+        coolingTower: "冷却塔",
+        tempSensor: "温度",
+        pressureSensor: "压力",
+        meter: "电表"
+      };
+      return iconMap[type] || "设备";
+    },
+    getCategoryIcon(value) {
+      const iconMap = {
+        all: "全部",
+        host: "主机",
+        chillerPump: "冷冻泵",
+        coolingPump: "冷却泵",
+        coolingTower: "冷却塔",
+        sensor: "传感器",
+        meter: "电表"
+      };
+      return iconMap[value] || "设备";
+    },
+    handleCategoryChange(index) {
+      this.activeCategory = index;
+      this.currentPage = 1;
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.searchForm = { deviceName: "", deviceStatus: "", deviceType: "" };
+      this.activeCategory = 0;
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("设备列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewDeviceDetail(device) {
+      this.selectedDevice = device;
+      this.detailDialogVisible = true;
+    },
+    closeDetailDialog() {
+      this.detailDialogVisible = false;
+      this.selectedDevice = null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-manage {
+  padding: 0.16rem;
+}
+
+.search-filter-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .search-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .search-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-input,
+      ::v-deep .custom-select {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: none;
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+
+        .search-icon {
+          width: 0.16rem;
+          height: 0.16rem;
+          fill: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+  }
+
+  .action-group {
+    display: flex;
+    gap: 0.1rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        .btn-icon {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.device-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.running {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    &.offline {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.fault {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.standby {
+      background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.2) 100%);
+      border: 1px solid rgba(250, 112, 154, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.category-tabs {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  overflow-x: auto;
+
+  .category-tab {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.1rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.06rem;
+    transition: all 0.3s;
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+
+    .tab-icon {
+      font-size: 0.16rem;
+    }
+
+    .tab-label {
+      flex: 1;
+    }
+
+    .tab-count {
+      font-size: 0.12rem;
+      opacity: 0.8;
+    }
+  }
+}
+
+.device-list-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+    gap: 0.15rem;
+    margin-bottom: 0.2rem;
+
+    .device-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      cursor: pointer;
+      transition: all 0.3s;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-0.02rem);
+      }
+
+      &.running {
+        border-left: 3px solid #91CC75;
+      }
+
+      &.offline {
+        border-left: 3px solid #EE6666;
+      }
+
+      &.fault {
+        border-left: 3px solid #FAC858;
+      }
+
+      &.standby {
+        border-left: 3px solid #5470C6;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.15rem;
+
+        .device-icon {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.12rem;
+          font-size: 0.24rem;
+          color: #ffffff;
+        }
+
+        .device-header-info {
+          flex: 1;
+
+          .device-name {
+            font-size: 0.15rem;
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .device-code {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .status-badge {
+          padding: 0.04rem 0.12rem;
+          border-radius: 0.04rem;
+          font-size: 0.11rem;
+
+          &.running {
+            background: rgba(145, 204, 117, 0.2);
+            color: #91CC75;
+            border: 1px solid rgba(145, 204, 117, 0.3);
+          }
+
+          &.offline {
+            background: rgba(238, 102, 102, 0.2);
+            color: #EE6666;
+            border: 1px solid rgba(238, 102, 102, 0.3);
+          }
+
+          &.fault {
+            background: rgba(250, 200, 88, 0.2);
+            color: #FAC858;
+            border: 1px solid rgba(250, 200, 88, 0.3);
+          }
+
+          &.standby {
+            background: rgba(84, 112, 198, 0.2);
+            color: #5470C6;
+            border: 1px solid rgba(84, 112, 198, 0.3);
+          }
+        }
+      }
+
+      .card-body {
+        margin-bottom: 0.15rem;
+
+        .device-info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.08rem;
+          font-size: 0.13rem;
+
+          .info-label {
+            color: #ffffff;
+            opacity: 0.6;
+          }
+
+          .info-value {
+            color: #ffffff;
+            opacity: 0.9;
+          }
+        }
+      }
+
+      .card-footer {
+        .device-params {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.08rem;
+
+          .param-item {
+            padding: 0.06rem 0.1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 0.04rem;
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.8;
+
+            .param-label {
+              opacity: 0.7;
+            }
+
+            .param-value {
+              color: #15e1fd;
+              font-weight: bold;
+              margin: 0 0.04rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.running {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+
+              &.offline {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.fault {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.standby {
+                background: rgba(84, 112, 198, 0.2);
+                color: #5470C6;
+              }
+            }
+          }
+        }
+      }
+
+      .params-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(1.5rem, 1fr));
+        gap: 0.15rem;
+
+        .param-card {
+          padding: 0.2rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.06rem;
+          text-align: center;
+
+          .param-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.08rem;
+          }
+
+          .param-value {
+            font-size: 0.2rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .param-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      .status-info {
+        .status-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+          margin-bottom: 0.1rem;
+
+          .status-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .status-text {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.running {
+              color: #91CC75;
+            }
+
+            &.offline {
+              color: #EE6666;
+            }
+
+            &.fault {
+              color: #FAC858;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .device-grid {
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/energyManage/carbonEmissionsAnalysis/index.vue b/src/views/newCenterairC/energyManage/carbonEmissionsAnalysis/index.vue
new file mode 100644
index 0000000..f263a8e
--- /dev/null
+++ b/src/views/newCenterairC/energyManage/carbonEmissionsAnalysis/index.vue
@@ -0,0 +1,943 @@
+<template>
+  <div class="carbon-emissions-analysis">
+    <!-- 时间选择器 -->
+    <div class="time-selector">
+      <div class="selector-label">时间维度</div>
+      <div class="time-periods">
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          :class="['period-item', { active: activePeriod === index }]"
+          @click="handlePeriodChange(index)"
+        >
+          {{ period }}
+        </div>
+      </div>
+      <div class="date-range" v-if="activePeriod === 3">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="custom-picker"
+        />
+      </div>
+    </div>
+
+    <!-- 碳排放核心指标 -->
+    <div class="carbon-indicators">
+      <div class="indicator-card primary">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">累计碳排放</div>
+        </div>
+        <div class="card-value">{{ carbonIndicators.totalCarbon }} <span class="unit">tCO₂e</span></div>
+        <div class="card-trend" :class="carbonIndicators.carbonTrend >= 0 ? 'up' : 'down'">
+          <span v-if="carbonIndicators.carbonTrend >= 0">↑</span>
+          <span v-else>↓</span>
+          {{ Math.abs(carbonIndicators.carbonTrend) }}%
+        </div>
+      </div>
+      <div class="indicator-card success">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">累计碳减排</div>
+        </div>
+        <div class="card-value">{{ carbonIndicators.totalReduction }} <span class="unit">tCO₂e</span></div>
+        <div class="card-trend" :class="carbonIndicators.reductionTrend >= 0 ? 'up' : 'down'">
+          <span v-if="carbonIndicators.reductionTrend >= 0">↑</span>
+          <span v-else>↓</span>
+          {{ Math.abs(carbonIndicators.reductionTrend) }}%
+        </div>
+      </div>
+      <div class="indicator-card warning">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+              <path d="M536 672h-72c-4.4 0-8 3.6-8 8v72c0 4.4 3.6 8 8 8h72c4.4 0 8-3.6 8-8v-72c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">碳强度</div>
+        </div>
+        <div class="card-value">{{ carbonIndicators.carbonIntensity }} <span class="unit">kgCO₂/kWh</span></div>
+        <div class="card-trend" :class="carbonIndicators.intensityTrend >= 0 ? 'up' : 'down'">
+          <span v-if="carbonIndicators.intensityTrend >= 0">↑</span>
+          <span v-else>↓</span>
+          {{ Math.abs(carbonIndicators.intensityTrend) }}%
+        </div>
+      </div>
+      <div class="indicator-card info">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              <path d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">节能率</div>
+        </div>
+        <div class="card-value">{{ carbonIndicators.energySavingRate }} <span class="unit">%</span></div>
+        <div class="card-trend" :class="carbonIndicators.savingTrend >= 0 ? 'up' : 'down'">
+          <span v-if="carbonIndicators.savingTrend >= 0">↑</span>
+          <span v-else>↓</span>
+          {{ Math.abs(carbonIndicators.savingTrend) }}%
+        </div>
+      </div>
+    </div>
+
+    <!-- 碳排放趋势图 -->
+    <div class="chart-section">
+      <div class="chart-header">
+        <div class="chart-title">碳排放趋势</div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #EE6666;"></span>
+            <span>碳排放量</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>碳减排量</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="carbonTrendChartRef"></div>
+    </div>
+
+    <!-- 碳排放来源分布 -->
+    <div class="chart-section half-width">
+      <div class="chart-header">
+        <div class="chart-title">碳排放来源分布</div>
+      </div>
+      <div class="chart" ref="carbonSourceChartRef"></div>
+    </div>
+
+    <!-- 能耗与碳排放对比 -->
+    <div class="chart-section half-width">
+      <div class="chart-header">
+        <div class="chart-title">能耗与碳排放对比</div>
+      </div>
+      <div class="chart" ref="energyCarbonChartRef"></div>
+    </div>
+
+    <!-- 碳减排量详情表格 -->
+    <div class="table-section">
+      <div class="section-header">
+        <div class="section-title">碳减排量详情</div>
+        <el-button type="primary" size="small" @click="exportData">导出数据</el-button>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>日期</th>
+              <th>用电量(kWh)</th>
+              <th>碳排放量(tCO₂e)</th>
+              <th>基准碳排放(tCO₂e)</th>
+              <th>碳减排量(tCO₂e)</th>
+              <th>碳减排率(%)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in carbonDetailList" :key="index">
+              <td>{{ item.date }}</td>
+              <td>{{ item.energy }}</td>
+              <td>{{ item.carbon }}</td>
+              <td>{{ item.baselineCarbon }}</td>
+              <td>{{ item.reduction }}</td>
+              <td>{{ item.reductionRate }}%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 碳减排贡献分析 -->
+    <div class="contribution-section">
+      <div class="section-header">
+        <div class="section-title">碳减排贡献分析</div>
+      </div>
+      <div class="contribution-grid">
+        <div class="contribution-item" v-for="item in contributionList" :key="item.name">
+          <div class="contribution-icon" :style="{ background: item.bg }">
+            <span>{{ item.icon }}</span>
+          </div>
+          <div class="contribution-info">
+            <div class="contribution-name">{{ item.name }}</div>
+            <div class="contribution-value">{{ item.value }} <span class="unit">tCO₂e</span></div>
+            <div class="contribution-percent">{{ item.percent }}%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "CarbonEmissionsAnalysis",
+  data() {
+    return {
+      // 时间段选项
+      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
+      activePeriod: 0,
+      // 日期范围
+      dateRange: [],
+      // 碳排放核心指标
+      carbonIndicators: {
+        totalCarbon: 1256.8,
+        carbonTrend: -5.2,
+        totalReduction: 89.6,
+        reductionTrend: 12.5,
+        carbonIntensity: 0.52,
+        intensityTrend: -3.8,
+        energySavingRate: 28.5,
+        savingTrend: 2.3
+      },
+      // 碳排放详情列表
+      carbonDetailList: [
+        { date: "2024-03-01", energy: 178000, carbon: 92.56, baselineCarbon: 129.5, reduction: 36.94, reductionRate: 28.5 },
+        { date: "2024-03-02", energy: 189000, carbon: 98.28, baselineCarbon: 137.5, reduction: 39.22, reductionRate: 28.5 },
+        { date: "2024-03-03", energy: 197000, carbon: 102.44, baselineCarbon: 143.3, reduction: 40.86, reductionRate: 28.5 },
+        { date: "2024-03-04", energy: 181000, carbon: 94.12, baselineCarbon: 131.6, reduction: 37.48, reductionRate: 28.5 },
+        { date: "2024-03-05", energy: 204000, carbon: 106.08, baselineCarbon: 148.4, reduction: 42.32, reductionRate: 28.5 }
+      ],
+      // 碳减排贡献分析
+      contributionList: [
+        { name: "能效提升", icon: "EER", value: 45.6, percent: 50.9, bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
+        { name: "设备优化", icon: "设备", value: 25.8, percent: 28.8, bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
+        { name: "运行策略", icon: "策略", value: 12.3, percent: 13.7, bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
+        { name: "其他措施", icon: "其他", value: 5.9, percent: 6.6, bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" }
+      ],
+      // 图表实例
+      carbonTrendChart: null,
+      carbonSourceChart: null,
+      energyCarbonChart: null
+    };
+  },
+  mounted() {
+    this.initCarbonTrendChart();
+    this.initCarbonSourceChart();
+    this.initEnergyCarbonChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.carbonTrendChart) this.carbonTrendChart.dispose();
+    if (this.carbonSourceChart) this.carbonSourceChart.dispose();
+    if (this.energyCarbonChart) this.energyCarbonChart.dispose();
+  },
+  watch: {
+    activePeriod() {
+      this.updateAllCharts();
+    }
+  },
+  methods: {
+    // 时间段切换
+    handlePeriodChange(index) {
+      this.activePeriod = index;
+    },
+    // 日期范围变化
+    handleDateChange(value) {
+      console.log("自定义日期范围:", value);
+      this.updateAllCharts();
+    },
+    // 导出数据
+    exportData() {
+      this.$message.success("数据导出成功");
+    },
+    // 初始化碳排放趋势图
+    initCarbonTrendChart() {
+      this.carbonTrendChart = echarts.init(this.$refs.carbonTrendChartRef);
+      this.updateCarbonTrendChart();
+    },
+    // 更新碳排放趋势图
+    updateCarbonTrendChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
+          reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          carbon: [856, 912, 888, 945, 1012, 956, 892],
+          reduction: [341.6, 364.8, 355.2, 378, 404.8, 382.4, 356.8]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          carbon: [24120, 27360, 25680],
+          reduction: [9648, 10944, 10272]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          carbon: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
+          reduction: [36.94, 39.22, 40.86, 37.48, 42.32, 44.96, 41.76]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["碳排放量", "碳减排量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "tCO₂e",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "碳排放量",
+            type: "bar",
+            data: currentData.carbon,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE6666"
+                  },
+                  {
+                    offset: 1,
+                    color: "#E53935"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "碳减排量",
+            type: "line",
+            smooth: true,
+            data: currentData.reduction,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 3
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145, 204, 117, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145, 204, 117, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.carbonTrendChart.setOption(option);
+    },
+    // 初始化碳排放来源分布图
+    initCarbonSourceChart() {
+      this.carbonSourceChart = echarts.init(this.$refs.carbonSourceChartRef);
+      const option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}% ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "碳排放来源",
+            type: "pie",
+            radius: ["30%", "70%"],
+            center: ["60%", "50%"],
+            data: [
+              { value: 65, name: "主机", itemStyle: { color: "#5470C6" } },
+              { value: 20, name: "冷冻泵", itemStyle: { color: "#91CC75" } },
+              { value: 10, name: "冷却泵", itemStyle: { color: "#FAC858" } },
+              { value: 3, name: "冷却塔风机", itemStyle: { color: "#EE6666" } },
+              { value: 2, name: "其他", itemStyle: { color: "#73C0DE" } }
+            ],
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.carbonSourceChart.setOption(option);
+    },
+    // 初始化能耗与碳排放对比图
+    initEnergyCarbonChart() {
+      this.energyCarbonChart = echarts.init(this.$refs.energyCarbonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["用电量", "碳排放量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "kWh",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "tCO₂e",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            data: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#15e1fd"
+                  },
+                  {
+                    offset: 1,
+                    color: "#208fff"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "碳排放量",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: [92.56, 98.28, 102.44, 94.12, 106.08, 112.56, 104.76],
+            itemStyle: {
+              color: "#EE6666"
+            },
+            lineStyle: {
+              color: "#EE6666",
+              width: 3
+            }
+          }
+        ]
+      };
+      this.energyCarbonChart.setOption(option);
+    },
+    // 更新所有图表
+    updateAllCharts() {
+      this.updateCarbonTrendChart();
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.carbonTrendChart) this.carbonTrendChart.resize();
+      if (this.carbonSourceChart) this.carbonSourceChart.resize();
+      if (this.energyCarbonChart) this.energyCarbonChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.carbon-emissions-analysis {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .selector-label {
+    font-size: 0.15rem;
+    color: #ffffff;
+    margin-right: 0.15rem;
+  }
+
+  .time-periods {
+    display: flex;
+    gap: 0.08rem;
+
+    .period-item {
+      padding: 0.06rem 0.2rem;
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        opacity: 1;
+      }
+    }
+  }
+
+  .date-range {
+    margin-left: 0.15rem;
+
+    ::v-deep .custom-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.carbon-indicators {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    padding: 0.25rem;
+    border-radius: 0.08rem;
+
+    &.primary {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.success {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    &.warning {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.info {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.15rem;
+
+      .card-icon {
+        width: 0.4rem;
+        height: 0.4rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.12rem;
+        background: rgba(255, 255, 255, 0.1);
+
+        svg {
+          width: 0.2rem;
+          height: 0.2rem;
+          fill: #ffffff;
+        }
+      }
+
+      .card-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.8;
+      }
+    }
+
+    .card-value {
+      font-size: 0.32rem;
+      color: #15e1fd;
+      font-weight: bold;
+      margin-bottom: 0.1rem;
+
+      .unit {
+        font-size: 0.16rem;
+        opacity: 0.8;
+      }
+    }
+
+    .card-trend {
+      font-size: 0.13rem;
+
+      &.up {
+        color: #EE6666;
+      }
+
+      &.down {
+        color: #91CC75;
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  &.half-width {
+    display: inline-block;
+    width: calc(50% - 0.08rem);
+    vertical-align: top;
+
+    &:nth-child(odd) {
+      margin-right: 0.16rem;
+    }
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.2rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.13rem;
+        color: #ffffff;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+          margin-right: 0.06rem;
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3rem;
+  }
+}
+
+.table-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+
+      thead {
+        tr {
+          background: rgba(255, 255, 255, 0.05);
+
+          th {
+            padding: 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #ffffff;
+            font-weight: bold;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          &:hover {
+            background: rgba(255, 255, 255, 0.05);
+          }
+
+          td {
+            padding: 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.8;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          }
+        }
+      }
+    }
+  }
+}
+
+.contribution-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .contribution-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+    gap: 0.15rem;
+
+    .contribution-item {
+      display: flex;
+      align-items: center;
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      .contribution-icon {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.15rem;
+
+        span {
+          font-size: 0.16rem;
+          color: #ffffff;
+          font-weight: bold;
+        }
+      }
+
+      .contribution-info {
+        flex: 1;
+
+        .contribution-name {
+          font-size: 0.14rem;
+          color: #ffffff;
+          opacity: 0.8;
+          margin-bottom: 0.05rem;
+        }
+
+        .contribution-value {
+          font-size: 0.2rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.03rem;
+
+          .unit {
+            font-size: 0.13rem;
+            opacity: 0.8;
+          }
+        }
+
+        .contribution-percent {
+          font-size: 0.12rem;
+          color: #91CC75;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .carbon-indicators {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .chart-section {
+    &.half-width {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  .contribution-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/energyManage/energyConsumptionEfficiencyTrend/index.vue b/src/views/newCenterairC/energyManage/energyConsumptionEfficiencyTrend/index.vue
new file mode 100644
index 0000000..6c5cc4b
--- /dev/null
+++ b/src/views/newCenterairC/energyManage/energyConsumptionEfficiencyTrend/index.vue
@@ -0,0 +1,2542 @@
+<template>
+  <div class="energy-efficiency-trend">
+    <!-- 时间选择器 -->
+    <div class="time-selector">
+      <div class="selector-label">时间段选择</div>
+      <div class="time-periods">
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          :class="['period-item', { active: activePeriod === index }]"
+          @click="handlePeriodChange(index)"
+        >
+          {{ period }}
+        </div>
+      </div>
+      <div class="date-range" v-if="activePeriod === 3">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="custom-picker"
+        />
+      </div>
+    </div>
+
+    <!-- 对比控制 -->
+    <div class="compare-control">
+      <el-checkbox v-model="enableCompare">开启对比模式</el-checkbox>
+      <div class="compare-range" v-if="enableCompare">
+        <span class="compare-label">对比时间段：</span>
+        <el-date-picker
+          v-model="compareRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          size="small"
+        />
+      </div>
+      <el-checkbox v-model="showAlarmMarkers" style="margin-left: 0.2rem;">显示告警标记</el-checkbox>
+    </div>
+
+    <!-- 核心指标卡片 -->
+    <div class="indicator-cards">
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <span>制冷</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.totalCooling }}</div>
+          <div class="card-label">总制冷量(RT)</div>
+          <div class="card-change" :class="indicators.coolingChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.coolingChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.coolingChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <span>能耗</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.totalEnergy }}</div>
+          <div class="card-label">总能耗(kWh)</div>
+          <div class="card-change" :class="indicators.energyChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.energyChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.energyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <span>EER</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.eer }}</div>
+          <div class="card-label">系统能效(EER)</div>
+          <div class="card-change" :class="indicators.eerChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.eerChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.eerChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <span>COP</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.cop }}</div>
+          <div class="card-label">平均COP</div>
+          <div class="card-change" :class="indicators.copChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.copChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.copChange) }}%
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 制冷量趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #15e1fd;"></span>
+          <span>机房制冷量趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #15e1fd;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="coolingTrendChartRef"></div>
+    </div>
+
+    <!-- 总能耗趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #FAC858;"></span>
+          <span>总能耗趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #FAC858;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #EE6666;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="energyTrendChartRef"></div>
+    </div>
+
+    <!-- 系统能效（EER）趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #91CC75;"></span>
+          <span>系统能效（EER）趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #5470C6;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="eerTrendChartRef"></div>
+    </div>
+
+    <!-- COP趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #5470C6;"></span>
+          <span>主机COP趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #5470C6;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #73C0DE;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="copTrendChartRef"></div>
+    </div>
+
+    <!-- 能效对比分析 -->
+    <div class="compare-analysis">
+      <div class="analysis-header">
+        <div class="analysis-title">能效对比分析</div>
+      </div>
+      <div class="analysis-content" v-if="enableCompare">
+        <div class="analysis-item">
+          <div class="analysis-label">制冷量变化</div>
+          <div class="analysis-value" :class="compareAnalysis.coolingDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.coolingDiff > 0 ? '+' : '' }}{{ compareAnalysis.coolingDiff }}RT
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.coolingRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.coolingRate > 0 ? '+' : '' }}{{ compareAnalysis.coolingRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">能耗变化</div>
+          <div class="analysis-value" :class="compareAnalysis.energyDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.energyDiff > 0 ? '+' : '' }}{{ compareAnalysis.energyDiff }}kWh
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.energyRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.energyRate > 0 ? '+' : '' }}{{ compareAnalysis.energyRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">EER变化</div>
+          <div class="analysis-value" :class="compareAnalysis.eerDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.eerDiff > 0 ? '+' : '' }}{{ compareAnalysis.eerDiff }}
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.eerRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.eerRate > 0 ? '+' : '' }}{{ compareAnalysis.eerRate }}%)
+          </div>
+        </div>
+      </div>
+      <div class="analysis-hint" v-else>
+        <svg class="hint-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+          <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+        </svg>
+        <span>开启对比模式后可查看两个时间段的能耗及能效对比分析</span>
+      </div>
+    </div>
+
+    <!-- 故障告警与能耗关联分析 -->
+    <div class="alarm-energy-analysis">
+      <div class="section-header">
+        <div class="section-title">故障告警与能耗关联分析</div>
+        <div class="section-actions">
+          <el-select v-model="alarmFilter.level" placeholder="告警级别" clearable size="small" class="custom-select" style="width: 1.2rem;">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 告警时间轴与能耗影响 -->
+      <div class="alarm-timeline-chart">
+        <div class="timeline-header">
+          <div class="header-item">
+            <span class="label">告警次数</span>
+            <span class="value">{{ alarmStats.total }}</span>
+          </div>
+          <div class="header-item">
+            <span class="label">能耗损失</span>
+            <span class="value alarm-impact">{{ alarmStats.energyLoss }}kWh</span>
+          </div>
+          <div class="header-item">
+            <span class="label">EER下降</span>
+            <span class="value alarm-impact">{{ alarmStats.eerDrop }}</span>
+          </div>
+          <div class="header-item">
+            <span class="label">影响时长</span>
+            <span class="value">{{ alarmStats.impactDuration }}小时</span>
+          </div>
+        </div>
+        <div class="timeline-chart" ref="alarmTimelineChartRef"></div>
+      </div>
+
+      <!-- 告警影响详情表格 -->
+      <div class="alarm-impact-table">
+        <div class="table-header">
+          <div class="table-title">告警影响详情</div>
+        </div>
+        <div class="table-container">
+          <table class="impact-table">
+            <thead>
+              <tr>
+                <th>告警时间</th>
+                <th>告警级别</th>
+                <th>告警标题</th>
+                <th>设备</th>
+                <th>状态</th>
+                <th>能耗影响</th>
+                <th>EER影响</th>
+                <th>影响时长</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="alarm in filteredAlarms" :key="alarm.id">
+                <td>{{ alarm.alarmTime }}</td>
+                <td>
+                  <span class="level-badge" :class="alarm.level">{{ getAlarmLevelText(alarm.level) }}</span>
+                </td>
+                <td class="title-cell">{{ alarm.title }}</td>
+                <td>{{ alarm.deviceName }}</td>
+                <td>
+                  <span class="status-badge" :class="alarm.status">{{ getAlarmStatusText(alarm.status) }}</span>
+                </td>
+                <td :class="alarm.energyImpact > 0 ? 'energy-loss' : 'energy-save'">
+                  {{ alarm.energyImpact > 0 ? '+' : '' }}{{ alarm.energyImpact }}kWh
+                </td>
+                <td :class="alarm.eerImpact < 0 ? 'eer-drop' : 'eer-rise'">
+                  {{ alarm.eerImpact > 0 ? '+' : '' }}{{ alarm.eerImpact }}
+                </td>
+                <td>{{ alarm.impactDuration }}h</td>
+                <td>
+                  <div class="action-buttons">
+                    <el-button
+                      size="small"
+                      type="primary"
+                      @click="viewAlarmDetail(alarm)"
+                      class="action-btn"
+                    >
+                      详情
+                    </el-button>
+                    <el-button
+                      v-if="alarm.status === 'pending' || alarm.status === 'processing'"
+                      size="small"
+                      type="success"
+                      @click="handleAlarmResolve(alarm)"
+                      class="action-btn"
+                    >
+                      处理
+                    </el-button>
+                    <el-dropdown @command="(cmd) => handleAlarmCommand(cmd, alarm)" class="action-dropdown">
+                      <el-button size="small" class="action-btn">
+                        更多
+                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                          <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                        </svg>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu class="custom-dropdown-menu">
+                          <el-dropdown-item command="createWorkOrder" v-if="!alarm.workOrderId">创建工单</el-dropdown-item>
+                          <el-dropdown-item command="viewWorkOrder" v-if="alarm.workOrderId">查看工单</el-dropdown-item>
+                          <el-dropdown-item command="resolve" v-if="alarm.status !== 'resolved'" divided>标记已解决</el-dropdown-item>
+                          <el-dropdown-item command="close" v-if="alarm.status !== 'resolved'">关闭告警</el-dropdown-item>
+                          <el-dropdown-item command="reopen" v-if="alarm.status === 'resolved'">重新打开</el-dropdown-item>
+                          <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 告警详情弹窗 -->
+    <el-dialog
+      v-model="alarmDetailDialogVisible"
+      title="告警与能耗关联详情"
+      width="900px"
+      class="custom-dialog"
+    >
+      <div class="alarm-detail-content" v-if="selectedAlarm">
+        <div class="detail-section">
+          <div class="section-title">告警信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">告警ID:</span>
+              <span class="item-value">{{ selectedAlarm.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警级别:</span>
+              <span class="item-value level-badge" :class="selectedAlarm.level">{{ getAlarmLevelText(selectedAlarm.level) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedAlarm.deviceName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警时间:</span>
+              <span class="item-value">{{ selectedAlarm.alarmTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">告警描述:</span>
+              <span class="item-value">{{ selectedAlarm.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗影响分析</div>
+          <div class="impact-cards">
+            <div class="impact-card">
+              <div class="card-label">能耗增加</div>
+              <div class="card-value energy-impact">{{ selectedAlarm.energyImpact }}kWh</div>
+              <div class="card-desc">相比正常运行时段</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">EER下降</div>
+              <div class="card-value eer-impact">{{ selectedAlarm.eerImpact }}</div>
+              <div class="card-desc">系统能效降低</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">影响时长</div>
+              <div class="card-value">{{ selectedAlarm.impactDuration }}h</div>
+              <div class="card-desc">告警持续时间</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">经济损失</div>
+              <div class="card-value cost-impact">{{ selectedAlarm.costImpact }}元</div>
+              <div class="card-desc">电费损失估算</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗趋势对比</div>
+          <div class="energy-comparison-chart" ref="energyComparisonChartRef"></div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="alarmDetailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EnergyConsumptionEfficiencyTrend",
+  data() {
+    return {
+      // 时间段选项
+      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
+      activePeriod: 0,
+      // 日期范围
+      dateRange: [],
+      compareRange: [],
+      // 对比模式
+      enableCompare: false,
+      // 显示告警标记
+      showAlarmMarkers: true,
+      // 核心指标
+      indicators: {
+        totalCooling: 45680,
+        coolingChange: 8.5,
+        totalEnergy: 1256800,
+        energyChange: -3.2,
+        eer: 6.8,
+        eerChange: 5.6,
+        cop: 5.2,
+        copChange: 4.8
+      },
+      // 对比分析数据
+      compareAnalysis: {
+        coolingDiff: 1250,
+        coolingRate: 2.8,
+        energyDiff: -38500,
+        energyRate: -2.97,
+        eerDiff: 0.35,
+        eerRate: 5.4
+      },
+      // 告警统计
+      alarmStats: {
+        total: 12,
+        energyLoss: 2850,
+        eerDrop: -0.35,
+        impactDuration: 48
+      },
+      // 告警筛选
+      alarmFilter: {
+        level: ""
+      },
+      // 告警列表
+      alarmList: [],
+      // 图表实例
+      coolingTrendChart: null,
+      energyTrendChart: null,
+      eerTrendChart: null,
+      copTrendChart: null,
+      alarmTimelineChart: null,
+      energyComparisonChart: null,
+      // 告警详情弹窗
+      alarmDetailDialogVisible: false,
+      selectedAlarm: null
+    };
+  },
+  computed: {
+    filteredAlarms() {
+      let alarms = [...this.alarmList];
+      if (this.alarmFilter.level) {
+        alarms = alarms.filter(a => a.level === this.alarmFilter.level);
+      }
+      return alarms;
+    }
+  },
+  mounted() {
+    this.initCoolingTrendChart();
+    this.initEnergyTrendChart();
+    this.initEerTrendChart();
+    this.initCopTrendChart();
+    this.initAlarmTimelineChart();
+    this.initAlarmList();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.coolingTrendChart) this.coolingTrendChart.dispose();
+    if (this.energyTrendChart) this.energyTrendChart.dispose();
+    if (this.eerTrendChart) this.eerTrendChart.dispose();
+    if (this.copTrendChart) this.copTrendChart.dispose();
+    if (this.alarmTimelineChart) this.alarmTimelineChart.dispose();
+    if (this.energyComparisonChart) this.energyComparisonChart.dispose();
+  },
+  watch: {
+    activePeriod() {
+      this.updateAllCharts();
+    },
+    enableCompare() {
+      this.updateAllCharts();
+    },
+    compareRange() {
+      if (this.enableCompare) {
+        this.updateAllCharts();
+      }
+    },
+    showAlarmMarkers() {
+      this.updateAllCharts();
+    },
+    "alarmFilter.level"() {
+      this.updateAlarmTimelineChart();
+    }
+  },
+  methods: {
+    // 时间段切换
+    handlePeriodChange(index) {
+      this.activePeriod = index;
+    },
+    // 日期范围变化
+    handleDateChange(value) {
+      console.log("自定义日期范围:", value);
+      this.updateAllCharts();
+    },
+    // 初始化制冷量趋势图
+    initCoolingTrendChart() {
+      this.coolingTrendChart = echarts.init(this.$refs.coolingTrendChartRef);
+      this.updateCoolingChart();
+    },
+    // 更新制冷量趋势图
+    updateCoolingChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [680, 720, 750, 690, 780, 820, 760],
+          compare: [650, 680, 700, 660, 740, 780, 720]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [6500, 7200, 6800, 7500, 7800, 7200, 6800],
+          compare: [6200, 6800, 6500, 7200, 7500, 6800, 6500]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          current: [185000, 210000, 195000],
+          compare: [175000, 200000, 185000]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [680, 720, 750, 690, 780, 820, 760],
+          compare: [650, 680, 700, 660, 740, 780, 720]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: {
+            color: "#15e1fd"
+          },
+          lineStyle: {
+            color: "#15e1fd",
+            width: 3
+          },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(21, 225, 253, 0.5)"
+                },
+                {
+                  offset: 1,
+                  color: "rgba(21, 225, 253, 0)"
+                }
+              ]
+            }
+          }
+        }
+      ];
+
+      // 告警标记点
+      const alarmPoints = this.getAlarmPoints(currentData.xData);
+      if (this.showAlarmMarkers && alarmPoints.length > 0) {
+        series[0].markPoint = {
+          data: alarmPoints,
+          symbol: "pin",
+          symbolSize: 30,
+          itemStyle: {
+            color: "#EE6666"
+          },
+          label: {
+            show: true,
+            color: "#ffffff",
+            fontSize: 10,
+            formatter: function(params) {
+              return "告警";
+            }
+          },
+          tooltip: {
+            formatter: function(params) {
+              return `告警时间: ${params.name}<br/>告警次数: ${params.value}`;
+            }
+          }
+        };
+      }
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: {
+            color: "#91CC75"
+          },
+          lineStyle: {
+            color: "#91CC75",
+            width: 2,
+            type: "dashed"
+          }
+        });
+      }
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "RT",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: series
+      };
+      this.coolingTrendChart.setOption(option);
+    },
+    // 初始化总能耗趋势图
+    initEnergyTrendChart() {
+      this.energyTrendChart = echarts.init(this.$refs.energyTrendChartRef);
+      this.updateEnergyChart();
+    },
+    // 更新总能耗趋势图
+    updateEnergyChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
+          compare: [184000, 195000, 203000, 187000, 210000, 222000, 207000]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [1680000, 1890000, 1780000, 1960000, 2040000, 1890000, 1780000],
+          compare: [1730000, 1940000, 1830000, 2010000, 2090000, 1940000, 1830000]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          current: [4850000, 5500000, 5100000],
+          compare: [5000000, 5650000, 5250000]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
+          compare: [184000, 195000, 203000, 187000, 210000, 222000, 207000]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const series = [
+        {
+          name: "当前时段",
+          type: "bar",
+          data: currentData.current,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#FAC858"
+                },
+                {
+                  offset: 1,
+                  color: "#F59E0B"
+                }
+              ]
+            }
+          }
+        }
+      ];
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "bar",
+          data: currentData.compare,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#EE6666"
+                },
+                {
+                  offset: 1,
+                  color: "#E53935"
+                }
+              ]
+            }
+          }
+        });
+      }
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: series
+      };
+      this.energyTrendChart.setOption(option);
+    },
+    // 初始化EER趋势图
+    initEerTrendChart() {
+      this.eerTrendChart = echarts.init(this.$refs.eerTrendChartRef);
+      this.updateEerChart();
+    },
+    // 更新EER趋势图
+    updateEerChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [6.5, 6.8, 6.7, 6.6, 7.0, 7.2, 6.9],
+          compare: [6.2, 6.4, 6.3, 6.2, 6.6, 6.8, 6.5]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [6.3, 6.6, 6.4, 6.7, 6.9, 6.7, 6.5],
+          compare: [6.0, 6.2, 6.1, 6.4, 6.6, 6.4, 6.2]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          current: [6.2, 6.5, 6.8],
+          compare: [5.9, 6.2, 6.4]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [6.5, 6.8, 6.7, 6.6, 7.0, 7.2, 6.9],
+          compare: [6.2, 6.4, 6.3, 6.2, 6.6, 6.8, 6.5]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: {
+            color: "#91CC75"
+          },
+          lineStyle: {
+            color: "#91CC75",
+            width: 3
+          }
+        }
+      ];
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: {
+            color: "#5470C6"
+          },
+          lineStyle: {
+            color: "#5470C6",
+            width: 2,
+            type: "dashed"
+          }
+        });
+      }
+
+      // 能效等级参考线
+      const markLine = {
+        data: [
+          { yAxis: 6.5, name: "优秀", lineStyle: { color: "#91CC75", type: "dashed" }, label: { show: true, formatter: "优秀≥6.5" } },
+          { yAxis: 5.5, name: "良好", lineStyle: { color: "#FAC858", type: "dashed" }, label: { show: true, formatter: "5.5" } },
+          { yAxis: 4.5, name: "一般", lineStyle: { color: "#EE6666", type: "dashed" }, label: { show: true, formatter: "4.5" } }
+        ]
+      };
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "EER",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            ...series[0],
+            markLine: markLine
+          },
+          ...series.slice(1)
+        ]
+      };
+      this.eerTrendChart.setOption(option);
+    },
+    // 初始化COP趋势图
+    initCopTrendChart() {
+      this.copTrendChart = echarts.init(this.$refs.copTrendChartRef);
+      this.updateCopChart();
+    },
+    // 更新COP趋势图
+    updateCopChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [5.0, 5.3, 5.2, 5.1, 5.5, 5.6, 5.3],
+          compare: [4.8, 5.0, 4.9, 4.8, 5.2, 5.3, 5.0]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [4.8, 5.1, 4.9, 5.2, 5.4, 5.2, 5.0],
+          compare: [4.6, 4.8, 4.7, 5.0, 5.2, 5.0, 4.8]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          current: [4.8, 5.1, 5.3],
+          compare: [4.5, 4.8, 5.0]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [5.0, 5.3, 5.2, 5.1, 5.5, 5.6, 5.3],
+          compare: [4.8, 5.0, 4.9, 4.8, 5.2, 5.3, 5.0]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: {
+            color: "#5470C6"
+          },
+          lineStyle: {
+            color: "#5470C6",
+            width: 3
+          },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(84, 112, 198, 0.5)"
+                },
+                {
+                  offset: 1,
+                  color: "rgba(84, 112, 198, 0)"
+                }
+              ]
+            }
+          }
+        }
+      ];
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: {
+            color: "#73C0DE"
+          },
+          lineStyle: {
+            color: "#73C0DE",
+            width: 2,
+            type: "dashed"
+          }
+        });
+      }
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "COP",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: series
+      };
+      this.copTrendChart.setOption(option);
+    },
+    // 更新所有图表
+    updateAllCharts() {
+      this.updateCoolingChart();
+      this.updateEnergyChart();
+      this.updateEerChart();
+      this.updateCopChart();
+      this.updateAlarmTimelineChart();
+    },
+    // 获取告警标记点
+    getAlarmPoints(xData) {
+      const alarmMap = {
+        0: [2, 1, 3, 0, 2, 3, 1], // 近七日
+        1: [8, 5, 12, 3, 9, 14, 6], // 近一月
+        2: [35, 42, 28], // 近三月
+        3: [2, 1, 3, 0, 2, 3, 1]  // 自定义
+      };
+
+      const alarmCounts = alarmMap[this.activePeriod] || [];
+      const points = [];
+
+      alarmCounts.forEach((count, index) => {
+        if (count > 0) {
+          points.push({
+            name: xData[index],
+            value: count,
+            xAxis: index,
+            yAxis: this.activePeriod === 2 ? 200000 : 800
+          });
+        }
+      });
+
+      return points;
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.coolingTrendChart) this.coolingTrendChart.resize();
+      if (this.energyTrendChart) this.energyTrendChart.resize();
+      if (this.eerTrendChart) this.eerTrendChart.resize();
+      if (this.copTrendChart) this.copTrendChart.resize();
+      if (this.alarmTimelineChart) this.alarmTimelineChart.resize();
+      if (this.energyComparisonChart) this.energyComparisonChart.resize();
+    },
+    // 初始化告警列表
+    initAlarmList() {
+      const now = new Date();
+      this.alarmList = [
+        {
+          id: "ALM202403040001",
+          level: "critical",
+          title: "主机过载告警",
+          description: "1号主机负载超过额定值105%，持续运行10分钟",
+          deviceName: "1号主机",
+          alarmTime: "2024-03-04 10:30:25",
+          status: "pending",
+          energyImpact: 450,
+          eerImpact: -0.28,
+          impactDuration: 8,
+          costImpact: 360,
+          energyData: { before: [18500, 19200, 18800, 19500, 18900], after: [19500, 20200, 19800, 20500, 19900] }
+        },
+        {
+          id: "ALM202403040002",
+          level: "critical",
+          title: "冷冻泵故障告警",
+          description: "4号冷冻泵电机过载保护触发",
+          deviceName: "4号冷冻泵",
+          alarmTime: "2024-03-04 09:15:42",
+          status: "processing",
+          energyImpact: 320,
+          eerImpact: -0.22,
+          impactDuration: 6,
+          costImpact: 256,
+          energyData: { before: [17800, 18500, 18200, 18900, 18300], after: [18800, 19500, 19200, 19900, 19300] }
+        },
+        {
+          id: "ALM202403040003",
+          level: "warning",
+          title: "冷却塔风机效率下降",
+          description: "1号冷却塔风机效率低于设计值15%",
+          deviceName: "1号冷却塔",
+          alarmTime: "2024-03-04 08:45:18",
+          status: "pending",
+          energyImpact: 180,
+          eerImpact: -0.15,
+          impactDuration: 5,
+          costImpact: 144,
+          energyData: { before: [17200, 17900, 17600, 18300, 17700], after: [18000, 18700, 18400, 19100, 18500] }
+        },
+        {
+          id: "ALM202403030005",
+          level: "critical",
+          title: "主机冷却水流量异常",
+          description: "2号主机冷却水流量低于设定值50%",
+          deviceName: "2号主机",
+          alarmTime: "2024-03-03 16:22:33",
+          status: "resolved",
+          energyImpact: 580,
+          eerImpact: -0.35,
+          impactDuration: 10,
+          costImpact: 464,
+          energyData: { before: [16800, 17500, 17200, 17900, 17300], after: [18200, 18900, 18600, 19300, 18700] }
+        },
+        {
+          id: "ALM202403030006",
+          level: "warning",
+          title: "系统EER值低于阈值",
+          description: "机房整体EER值为4.2，低于设定值5.0",
+          deviceName: "机房系统",
+          alarmTime: "2024-03-03 14:10:22",
+          status: "resolved",
+          energyImpact: 380,
+          eerImpact: -0.32,
+          impactDuration: 7,
+          costImpact: 304,
+          energyData: { before: [16900, 17600, 17300, 18000, 17400], after: [18100, 18800, 18500, 19200, 18600] }
+        },
+        {
+          id: "ALM202403030007",
+          level: "info",
+          title: "温度传感器数据异常",
+          description: "18号温度传感器读数波动较大",
+          deviceName: "18号温度传感器",
+          alarmTime: "2024-03-03 07:30:55",
+          status: "resolved",
+          energyImpact: 85,
+          eerImpact: -0.08,
+          impactDuration: 3,
+          costImpact: 68,
+          energyData: { before: [17500, 18200, 17900, 18600, 18000], after: [17800, 18500, 18200, 18900, 18300] }
+        },
+        {
+          id: "ALM202403020008",
+          level: "warning",
+          title: "冷却泵效率下降",
+          description: "3号冷却泵运行效率低于标准值10%",
+          deviceName: "3号冷却泵",
+          alarmTime: "2024-03-02 18:45:30",
+          status: "resolved",
+          energyImpact: 210,
+          eerImpact: -0.18,
+          impactDuration: 4,
+          costImpact: 168,
+          energyData: { before: [17100, 17800, 17500, 18200, 17600], after: [17900, 18600, 18300, 19000, 18400] }
+        },
+        {
+          id: "ALM202403020009",
+          level: "critical",
+          title: "压缩机异常振动",
+          description: "2号主机压缩机振动值超标",
+          deviceName: "2号主机",
+          alarmTime: "2024-03-02 11:20:15",
+          status: "resolved",
+          energyImpact: 420,
+          eerImpact: -0.25,
+          impactDuration: 6,
+          costImpact: 336,
+          energyData: { before: [16600, 17300, 17000, 17700, 17100], after: [17800, 18500, 18200, 18900, 18300] }
+        },
+        {
+          id: "ALM202403010010",
+          level: "warning",
+          title: "冷却塔布水不均",
+          description: "2号冷却塔布水器堵塞导致水流不均",
+          deviceName: "2号冷却塔",
+          alarmTime: "2024-03-01 15:35:42",
+          status: "resolved",
+          energyImpact: 165,
+          eerImpact: -0.12,
+          impactDuration: 4,
+          costImpact: 132,
+          energyData: { before: [17300, 18000, 17700, 18400, 17800], after: [18000, 18700, 18400, 19100, 18500] }
+        },
+        {
+          id: "ALM202403010011",
+          level: "info",
+          title: "电表数据异常",
+          description: "12号电表读数异常波动",
+          deviceName: "12号电表",
+          alarmTime: "2024-03-01 09:10:28",
+          status: "resolved",
+          energyImpact: 95,
+          eerImpact: -0.09,
+          impactDuration: 3,
+          costImpact: 76,
+          energyData: { before: [17600, 18300, 18000, 18700, 18100], after: [17900, 18600, 18300, 19000, 18400] }
+        },
+        {
+          id: "ALM202402280012",
+          level: "critical",
+          title: "冷凝器结垢严重",
+          description: "1号主机冷凝器结垢导致换热效率下降",
+          deviceName: "1号主机",
+          alarmTime: "2024-02-28 14:50:18",
+          status: "resolved",
+          energyImpact: 390,
+          eerImpact: -0.24,
+          impactDuration: 5,
+          costImpact: 312,
+          energyData: { before: [16700, 17400, 17100, 17800, 17200], after: [17700, 18400, 18100, 18800, 18200] }
+        },
+        {
+          id: "ALM202402280013",
+          level: "warning",
+          title: "蒸发器温度异常",
+          description: "3号主机蒸发器出口温度低于设定值",
+          deviceName: "3号主机",
+          alarmTime: "2024-02-28 10:25:33",
+          status: "resolved",
+          energyImpact: 130,
+          eerImpact: -0.11,
+          impactDuration: 3,
+          costImpact: 104,
+          energyData: { before: [17400, 18100, 17800, 18500, 17900], after: [18000, 18700, 18400, 19100, 18500] }
+        }
+      ];
+    },
+    // 获取告警级别文本
+    getAlarmLevelText(level) {
+      const map = {
+        critical: "严重",
+        warning: "警告",
+        info: "信息"
+      };
+      return map[level] || level;
+    },
+    // 获取告警状态文本
+    getAlarmStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已解决"
+      };
+      return map[status] || status;
+    },
+    // 初始化告警时间轴图表
+    initAlarmTimelineChart() {
+      this.alarmTimelineChart = echarts.init(this.$refs.alarmTimelineChartRef);
+      this.updateAlarmTimelineChart();
+    },
+    // 更新告警时间轴图表
+    updateAlarmTimelineChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          energyData: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
+          eerData: [6.5, 6.8, 6.7, 6.6, 7.0, 7.2, 6.9],
+          alarmData: [2, 1, 3, 0, 2, 3, 1]
+        },
+        1: { // 近一月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          energyData: [1680000, 1890000, 1780000, 1960000, 2040000, 1890000, 1780000],
+          eerData: [6.3, 6.6, 6.4, 6.7, 6.9, 6.7, 6.5],
+          alarmData: [8, 5, 12, 3, 9, 14, 6]
+        },
+        2: { // 近三月
+          xData: ["1月", "2月", "3月"],
+          energyData: [4850000, 5500000, 5100000],
+          eerData: [6.2, 6.5, 6.8],
+          alarmData: [35, 42, 28]
+        },
+        3: { // 自定义
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          energyData: [178000, 189000, 197000, 181000, 204000, 215000, 200000],
+          eerData: [6.5, 6.8, 6.7, 6.6, 7.0, 7.2, 6.9],
+          alarmData: [2, 1, 3, 0, 2, 3, 1]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["能耗", "EER", "告警次数"],
+          textStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          top: 0
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+          top: "15%"
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "能耗(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "EER/告警数",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "能耗",
+            type: "line",
+            smooth: true,
+            data: currentData.energyData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            lineStyle: {
+              color: "#FAC858",
+              width: 3
+            }
+          },
+          {
+            name: "EER",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: currentData.eerData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 2
+            }
+          },
+          {
+            name: "告警次数",
+            type: "bar",
+            yAxisIndex: 1,
+            data: currentData.alarmData,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(238, 102, 102, 0.8)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(238, 102, 102, 0.3)"
+                  }
+                ]
+              }
+            },
+            markPoint: {
+              data: currentData.alarmData.map((value, index) => {
+                if (value > 0) {
+                  return {
+                    name: "告警",
+                    xAxis: index,
+                    yAxis: value,
+                    value: value,
+                    itemStyle: {
+                      color: "#EE6666"
+                    }
+                  };
+                }
+                return null;
+              }).filter(item => item !== null),
+              symbolSize: 20,
+              label: {
+                show: true,
+                color: "#ffffff",
+                fontSize: 10
+              }
+            }
+          }
+        ]
+      };
+      this.alarmTimelineChart.setOption(option);
+    },
+    // 查看告警详情
+    viewAlarmDetail(alarm) {
+      this.selectedAlarm = alarm;
+      this.alarmDetailDialogVisible = true;
+      this.$nextTick(() => {
+        this.initEnergyComparisonChart();
+      });
+    },
+    // 处理告警
+    handleAlarmResolve(alarm) {
+      alarm.status = "processing";
+      this.$message.success("告警已开始处理");
+    },
+    // 处理告警命令
+    handleAlarmCommand(command, alarm) {
+      switch (command) {
+        case "createWorkOrder":
+          this.createWorkOrder(alarm);
+          break;
+        case "viewWorkOrder":
+          this.viewWorkOrder(alarm);
+          break;
+        case "resolve":
+          alarm.status = "resolved";
+          this.$message.success("已标记为已解决");
+          break;
+        case "close":
+          alarm.status = "resolved";
+          this.$message.success("告警已关闭");
+          break;
+        case "reopen":
+          alarm.status = "pending";
+          this.$message.success("告警已重新打开");
+          break;
+        case "export":
+          this.exportAlarmReport(alarm);
+          break;
+      }
+    },
+    // 创建工单
+    createWorkOrder(alarm) {
+      const workOrderId = `WO${new Date().getTime()}`;
+      alarm.workOrderId = workOrderId;
+      alarm.workOrderStatus = "pending";
+      this.$message.success(`已创建工单: ${workOrderId}`);
+    },
+    // 查看工单
+    viewWorkOrder(alarm) {
+      this.$message.info(`查看工单: ${alarm.workOrderId}`);
+    },
+    // 导出告警报告
+    exportAlarmReport(alarm) {
+      this.$message.success("告警报告导出成功");
+    },
+    // 初始化能耗对比图表
+    initEnergyComparisonChart() {
+      if (!this.$refs.energyComparisonChartRef || !this.selectedAlarm) return;
+
+      this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
+      const { energyData } = this.selectedAlarm;
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["告警前", "告警后"],
+          textStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          top: 0
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+          top: "15%"
+        },
+        xAxis: {
+          type: "category",
+          data: ["时段1", "时段2", "时段3", "时段4", "时段5"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "能耗(kWh)",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "告警前",
+            type: "bar",
+            data: energyData.before,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#91CC75"
+                  },
+                  {
+                    offset: 1,
+                    color: "#7CB342"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "告警后",
+            type: "bar",
+            data: energyData.after,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE6666"
+                  },
+                  {
+                    offset: 1,
+                    color: "#E53935"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.energyComparisonChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.energy-efficiency-trend {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .selector-label {
+    font-size: 0.15rem;
+    color: #ffffff;
+    margin-right: 0.15rem;
+  }
+
+  .time-periods {
+    display: flex;
+    gap: 0.08rem;
+
+    .period-item {
+      padding: 0.06rem 0.2rem;
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        opacity: 1;
+      }
+    }
+  }
+
+  .date-range {
+    margin-left: 0.15rem;
+
+    ::v-deep .custom-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 0.04rem;
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.compare-control {
+  display: flex;
+  align-items: center;
+  padding: 0.15rem 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  ::v-deep .el-checkbox {
+    color: #ffffff;
+
+    .el-checkbox__label {
+      color: #ffffff;
+    }
+  }
+
+  .compare-range {
+    display: flex;
+    align-items: center;
+    margin-left: 0.15rem;
+
+    .compare-label {
+      font-size: 0.14rem;
+      color: #ffffff;
+      margin-right: 0.1rem;
+    }
+
+    ::v-deep .el-date-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.indicator-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .card-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+
+      span {
+        font-size: 0.18rem;
+        color: #ffffff;
+      }
+    }
+
+    .card-content {
+      flex: 1;
+
+      .card-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+      }
+
+      .card-change {
+        font-size: 0.12rem;
+
+        &.positive {
+          color: #EE6666;
+        }
+
+        &.negative {
+          color: #91CC75;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      display: flex;
+      align-items: center;
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+
+      .title-icon {
+        width: 0.04rem;
+        height: 0.16rem;
+        border-radius: 0.02rem;
+        margin-right: 0.1rem;
+      }
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.2rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.13rem;
+        color: #ffffff;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+          margin-right: 0.06rem;
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3rem;
+  }
+}
+
+.compare-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .analysis-header {
+    margin-bottom: 0.2rem;
+
+    .analysis-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .analysis-content {
+    display: flex;
+    gap: 0.2rem;
+
+    .analysis-item {
+      flex: 1;
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+      text-align: center;
+
+      .analysis-label {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.1rem;
+      }
+
+      .analysis-value {
+        font-size: 0.2rem;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+
+        &.up {
+          color: #EE6666;
+        }
+
+        &.down {
+          color: #91CC75;
+        }
+      }
+
+      .analysis-percentage {
+        font-size: 0.13rem;
+        opacity: 0.8;
+
+        &.up {
+          color: #EE6666;
+        }
+
+        &.down {
+          color: #91CC75;
+        }
+      }
+    }
+  }
+
+  .analysis-hint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem;
+    color: #ffffff;
+    opacity: 0.6;
+
+    .hint-icon {
+      margin-right: 0.1rem;
+      font-size: 0.18rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      fill: currentColor;
+    }
+  }
+}
+
+.alarm-energy-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      ::v-deep .custom-select {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .alarm-timeline-chart {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+    padding: 0.2rem;
+    margin-bottom: 0.2rem;
+
+    .timeline-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.2rem;
+
+      .header-item {
+        text-align: center;
+        flex: 1;
+
+        .label {
+          display: block;
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.08rem;
+        }
+
+        .value {
+          font-size: 0.2rem;
+          font-weight: bold;
+          color: #15e1fd;
+
+          &.alarm-impact {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+
+    .timeline-chart {
+      width: 100%;
+      height: 3rem;
+    }
+  }
+
+  .alarm-impact-table {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .table-header {
+      margin-bottom: 0.15rem;
+
+      .table-title {
+        font-size: 0.15rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+    }
+
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .impact-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 10rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.14rem 0.12rem;
+              text-align: left;
+              font-size: 0.14rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.14rem 0.12rem;
+              font-size: 0.13rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+
+              .level-badge {
+                display: inline-block;
+                padding: 0.05rem 0.15rem;
+                border-radius: 0.05rem;
+                font-size: 0.12rem;
+                font-weight: 500;
+                white-space: nowrap;
+                box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+                &.critical {
+                  background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                  color: #FF8A80;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                }
+
+                &.warning {
+                  background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                  color: #FFE082;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                }
+
+                &.info {
+                  background: linear-gradient(135deg, rgba(84, 112, 198, 0.25) 0%, rgba(103, 126, 234, 0.25) 100%);
+                  color: #90CAF9;
+                  border: 1px solid rgba(84, 112, 198, 0.4);
+                }
+              }
+
+              .status-badge {
+                display: inline-block;
+                padding: 0.05rem 0.15rem;
+                border-radius: 0.05rem;
+                font-size: 0.12rem;
+                font-weight: 500;
+                white-space: nowrap;
+                box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+                &.pending {
+                  background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                  color: #FF8A80;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                }
+
+                &.processing {
+                  background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                  color: #FFE082;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                }
+
+                &.resolved {
+                  background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                  color: #A5D6A7;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                }
+              }
+
+              .title-cell {
+                max-width: 2.5rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                cursor: pointer;
+
+                &:hover {
+                  color: #15e1fd;
+                }
+              }
+
+              .energy-loss {
+                color: #FF8A80;
+                font-weight: 600;
+                text-shadow: 0 0 0.04rem rgba(238, 102, 102, 0.3);
+              }
+
+              .energy-save {
+                color: #A5D6A7;
+                font-weight: 600;
+                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.3);
+              }
+
+              .eer-drop {
+                color: #FF8A80;
+                font-weight: 600;
+                text-shadow: 0 0 0.04rem rgba(238, 102, 102, 0.3);
+              }
+
+              .eer-rise {
+                color: #A5D6A7;
+                font-weight: 600;
+                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.3);
+              }
+
+              .action-buttons {
+                display: flex;
+                align-items: center;
+                gap: 0.08rem;
+                flex-wrap: nowrap;
+
+                .action-btn {
+                  padding: 0.05rem 0.12rem;
+                  font-size: 0.12rem;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+                  transition: all 0.3s ease;
+                  white-space: nowrap;
+
+                  &.el-button--primary {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    border: none;
+                    color: #ffffff;
+                    box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                    &:hover {
+                      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                      transform: translateY(-0.02rem);
+                      box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                    }
+                  }
+
+                  &.el-button--success {
+                    background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+                    border: none;
+                    color: #ffffff;
+                    box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.3);
+
+                    &:hover {
+                      background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+                      transform: translateY(-0.02rem);
+                      box-shadow: 0 0.06rem 0.12rem rgba(145, 204, 117, 0.4);
+                    }
+                  }
+
+                  &.el-button--default {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: #ffffff;
+
+                    &:hover {
+                      background: rgba(255, 255, 255, 0.2);
+                    }
+                  }
+
+                  &:active {
+                    transform: translateY(0);
+                  }
+                }
+
+                .action-dropdown {
+                  ::v-deep .el-button--small {
+                    padding: 0.05rem 0.1rem;
+                    font-size: 0.12rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: #ffffff;
+                    border-radius: 0.04rem;
+                    font-weight: 500;
+
+                    &:hover {
+                      background: rgba(255, 255, 255, 0.2);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .alarm-detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.warning {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.info {
+                background: rgba(84, 112, 198, 0.2);
+                color: #5470C6;
+              }
+            }
+          }
+        }
+      }
+
+      .impact-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(1.8rem, 1fr));
+        gap: 0.15rem;
+
+        .impact-card {
+          padding: 0.2rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.06rem;
+          text-align: center;
+
+          .card-label {
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.1rem;
+          }
+
+          .card-value {
+            font-size: 0.22rem;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+
+            &.energy-impact {
+              color: #EE6666;
+            }
+
+            &.eer-impact {
+              color: #FAC858;
+            }
+
+            &.cost-impact {
+              color: #15e1fd;
+            }
+          }
+
+          .card-desc {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      .energy-comparison-chart {
+        width: 100%;
+        height: 3rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        padding: 0.15rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .indicator-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .analysis-content {
+    flex-direction: column;
+  }
+
+  .alarm-energy-analysis {
+    .impact-cards {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/energyManage/energyEfficiencyCalendarViz/index.vue b/src/views/newCenterairC/energyManage/energyEfficiencyCalendarViz/index.vue
new file mode 100644
index 0000000..436c98c
--- /dev/null
+++ b/src/views/newCenterairC/energyManage/energyEfficiencyCalendarViz/index.vue
@@ -0,0 +1,887 @@
+<template>
+  <div class="energy-efficiency-calendar">
+    <!-- 顶部控制栏 -->
+    <div class="control-bar">
+      <div class="date-picker-group">
+        <el-date-picker
+          v-model="currentDate"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="date-picker"
+        />
+        <div class="view-toggle">
+          <div
+            v-for="(view, index) in viewTypes"
+            :key="index"
+            :class="['view-btn', { active: activeView === index }]"
+            @click="handleViewChange(index)"
+          >
+            {{ view }}
+          </div>
+        </div>
+      </div>
+      <div class="indicator-selector">
+        <el-select v-model="selectedIndicator" @change="handleIndicatorChange" class="custom-select">
+          <el-option
+            v-for="indicator in indicators"
+            :key="indicator.value"
+            :label="indicator.label"
+            :value="indicator.value"
+          >
+            <span class="option-dot" :style="{ background: indicator.color }"></span>
+            <span class="option-label">{{ indicator.label }}</span>
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 月份导航 -->
+    <div class="month-navigation">
+      <el-button class="nav-btn" icon="el-icon-arrow-left" @click="prevMonth" size="small"></el-button>
+      <div class="current-month">{{ currentYear }}年{{ currentMonth }}月</div>
+      <el-button class="nav-btn" icon="el-icon-arrow-right" @click="nextMonth" size="small"></el-button>
+    </div>
+
+    <!-- 日历视图 -->
+    <div class="calendar-container">
+      <div class="calendar-header">
+        <div class="weekday" v-for="day in weekDays" :key="day">{{ day }}</div>
+      </div>
+      <div class="calendar-body">
+        <div
+          v-for="(day, index) in calendarDays"
+          :key="index"
+          :class="['calendar-day', { 'other-month': day.isOtherMonth, 'selected': isSelected(day), 'today': isToday(day) }]"
+          @click="handleDayClick(day)"
+        >
+          <div class="day-number">{{ day.day }}</div>
+          <div class="day-indicator" v-if="day.hasData">
+            <div class="indicator-value" :style="{ color: getIndicatorColor(day) }">
+              {{ getIndicatorValue(day) }}
+            </div>
+            <div class="indicator-unit">{{ getIndicatorUnit() }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日期图例 -->
+    <div class="calendar-legend">
+      <div class="legend-item" v-for="item in legendItems" :key="item.label">
+        <span class="legend-color" :style="{ background: item.color }"></span>
+        <span class="legend-label">{{ item.label }}</span>
+      </div>
+    </div>
+
+    <!-- 日期详情面板 -->
+    <div class="detail-panel" v-if="selectedDateData">
+      <div class="detail-header">
+        <div class="detail-title">日期详情 - {{ selectedDateData.date }}</div>
+        <el-button class="close-btn" icon="el-icon-close" @click="closeDetail" size="small" circle></el-button>
+      </div>
+      <div class="detail-content">
+        <div class="detail-row" v-for="(item, index) in detailData" :key="index">
+          <div class="detail-label">
+            <span class="label-dot" :style="{ background: item.color }"></span>
+            {{ item.label }}
+          </div>
+          <div class="detail-value" :style="{ color: item.color }">
+            {{ selectedDateData[item.key] }} {{ item.unit }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 月度汇总统计 -->
+    <div class="monthly-summary">
+      <div class="summary-header">
+        <div class="summary-title">月度汇总</div>
+        <div class="summary-period">{{ currentYear }}年{{ currentMonth }}月</div>
+      </div>
+      <div class="summary-cards">
+        <div class="summary-card">
+          <div class="summary-label">平均EER</div>
+          <div class="summary-value">{{ monthlySummary.avgEer }}</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">总用电量</div>
+          <div class="summary-value">{{ monthlySummary.totalEnergy }} <span class="unit">kWh</span></div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">总供冷量</div>
+          <div class="summary-value">{{ monthlySummary.totalCooling }} <span class="unit">RT</span></div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">平均单价</div>
+          <div class="summary-value">¥{{ monthlySummary.avgPrice }} <span class="unit">/kWh</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 趋势图 -->
+    <div class="trend-chart-section">
+      <div class="chart-header">
+        <div class="chart-title">{{ currentMonth }}月能效趋势</div>
+      </div>
+      <div class="chart" ref="trendChartRef"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EnergyEfficiencyCalendarViz",
+  data() {
+    return {
+      // 视图类型
+      viewTypes: ["日视图", "月视图"],
+      activeView: 1,
+      // 当前日期
+      currentDate: new Date().toISOString().split('T')[0],
+      currentYear: new Date().getFullYear(),
+      currentMonth: new Date().getMonth() + 1,
+      selectedDay: null,
+      selectedDateData: null,
+      // 星期
+      weekDays: ["日", "一", "二", "三", "四", "五", "六"],
+      // 指标选择
+      indicators: [
+        { label: "能效值(EER)", value: "eer", color: "#91CC75", unit: "" },
+        { label: "用电量", value: "energy", color: "#5470C6", unit: "kWh" },
+        { label: "供冷量", value: "cooling", color: "#15e1fd", unit: "RT" },
+        { label: "供能单价", value: "price", color: "#FAC858", unit: "元/kWh" }
+      ],
+      selectedIndicator: "eer",
+      // 日历数据
+      calendarDays: [],
+      // 图例
+      legendItems: [
+        { label: "优秀(≥6.5)", color: "#91CC75" },
+        { label: "良好(6.5-5.5)", color: "#4facfe" },
+        { label: "一般(5.5-4.5)", color: "#FAC858" },
+        { label: "急需改善(<4.5)", color: "#EE6666" }
+      ],
+      // 详情数据配置
+      detailData: [
+        { label: "能效值(EER)", key: "eer", color: "#91CC75", unit: "" },
+        { label: "用电量", key: "energy", color: "#5470C6", unit: "kWh" },
+        { label: "供冷量", key: "cooling", color: "#15e1fd", unit: "RT" },
+        { label: "供能单价", key: "price", color: "#FAC858", unit: "元/kWh" },
+        { label: "节电量", key: "saving", color: "#EE6666", unit: "kWh" }
+      ],
+      // 月度汇总
+      monthlySummary: {
+        avgEer: 6.5,
+        totalEnergy: 5620000,
+        totalCooling: 198500,
+        avgPrice: 1.18
+      },
+      // 模拟日历数据
+      dailyData: {},
+      // 图表实例
+      trendChart: null
+    };
+  },
+  mounted() {
+    this.generateDailyData();
+    this.generateCalendar();
+    this.initTrendChart();
+  },
+  beforeDestroy() {
+    if (this.trendChart) this.trendChart.dispose();
+  },
+  methods: {
+    // 生成模拟日历数据
+    generateDailyData() {
+      const year = this.currentYear;
+      const month = this.currentMonth;
+      const daysInMonth = new Date(year, month, 0).getDate();
+
+      for (let day = 1; day <= daysInMonth; day++) {
+        const date = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        const eer = (4 + Math.random() * 4).toFixed(1);
+        const energy = Math.floor(150000 + Math.random() * 100000);
+        const cooling = Math.floor(energy / 25 + Math.random() * 10);
+        const price = (1.1 + Math.random() * 0.2).toFixed(2);
+        const saving = Math.floor(energy * 0.25 + Math.random() * 10000);
+
+        this.dailyData[date] = {
+          date,
+          eer: parseFloat(eer),
+          energy,
+          cooling,
+          price: parseFloat(price),
+          saving,
+          hasData: true
+        };
+      }
+    },
+    // 生成日历
+    generateCalendar() {
+      const year = this.currentYear;
+      const month = this.currentMonth - 1;
+      const firstDay = new Date(year, month, 1).getDay();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
+      const prevMonthDays = new Date(year, month, 0).getDate();
+
+      const days = [];
+
+      // 上月日期
+      for (let i = firstDay - 1; i >= 0; i--) {
+        days.push({
+          day: prevMonthDays - i,
+          isOtherMonth: true,
+          hasData: false
+        });
+      }
+
+      // 当月日期
+      for (let i = 1; i <= daysInMonth; i++) {
+        const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
+        days.push({
+          day: i,
+          isOtherMonth: false,
+          ...this.dailyData[date]
+        });
+      }
+
+      // 下月日期
+      const remainingDays = 42 - days.length;
+      for (let i = 1; i <= remainingDays; i++) {
+        days.push({
+          day: i,
+          isOtherMonth: true,
+          hasData: false
+        });
+      }
+
+      this.calendarDays = days;
+    },
+    // 日期改变
+    handleDateChange(value) {
+      if (value) {
+        const date = new Date(value);
+        this.currentYear = date.getFullYear();
+        this.currentMonth = date.getMonth() + 1;
+        this.selectedDay = date.getDate();
+        this.generateCalendar();
+      }
+    },
+    // 视图切换
+    handleViewChange(index) {
+      this.activeView = index;
+    },
+    // 指标切换
+    handleIndicatorChange(value) {
+      this.selectedIndicator = value;
+    },
+    // 上月
+    prevMonth() {
+      if (this.currentMonth === 1) {
+        this.currentYear--;
+        this.currentMonth = 12;
+      } else {
+        this.currentMonth--;
+      }
+      this.generateCalendar();
+      this.updateTrendChart();
+    },
+    // 下月
+    nextMonth() {
+      if (this.currentMonth === 12) {
+        this.currentYear++;
+        this.currentMonth = 1;
+      } else {
+        this.currentMonth++;
+      }
+      this.generateCalendar();
+      this.updateTrendChart();
+    },
+    // 日期点击
+    handleDayClick(day) {
+      if (day.isOtherMonth || !day.hasData) return;
+
+      this.selectedDay = day.day;
+      this.selectedDateData = day;
+    },
+    // 判断是否选中
+    isSelected(day) {
+      return !day.isOtherMonth && day.day === this.selectedDay;
+    },
+    // 判断是否今天
+    isToday(day) {
+      if (day.isOtherMonth) return false;
+      const today = new Date();
+      return day.day === today.getDate() &&
+             this.currentMonth === today.getMonth() + 1 &&
+             this.currentYear === today.getFullYear();
+    },
+    // 获取指标颜色
+    getIndicatorColor(day) {
+      if (this.selectedIndicator !== 'eer') {
+        const indicator = this.indicators.find(i => i.value === this.selectedIndicator);
+        return indicator ? indicator.color : '#ffffff';
+      }
+
+      const eer = day.eer;
+      if (eer >= 6.5) return '#91CC75';
+      if (eer >= 5.5) return '#4facfe';
+      if (eer >= 4.5) return '#FAC858';
+      return '#EE6666';
+    },
+    // 获取指标值
+    getIndicatorValue(day) {
+      const key = this.selectedIndicator;
+      return day[key] !== undefined ? day[key] : '-';
+    },
+    // 获取指标单位
+    getIndicatorUnit() {
+      const indicator = this.indicators.find(i => i.value === this.selectedIndicator);
+      return indicator ? indicator.unit : '';
+    },
+    // 关闭详情
+    closeDetail() {
+      this.selectedDateData = null;
+      this.selectedDay = null;
+    },
+    // 初始化趋势图
+    initTrendChart() {
+      this.trendChart = echarts.init(this.$refs.trendChartRef);
+      this.updateTrendChart();
+    },
+    // 更新趋势图
+    updateTrendChart() {
+      const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();
+      const xData = [];
+      const eerData = [];
+      const energyData = [];
+
+      for (let day = 1; day <= daysInMonth; day++) {
+        const date = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        const data = this.dailyData[date];
+        xData.push(`${day}日`);
+        eerData.push(data ? data.eer : null);
+        energyData.push(data ? data.energy : null);
+      }
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["能效值(EER)", "用电量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "EER",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "kWh",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "能效值(EER)",
+            type: "line",
+            smooth: true,
+            data: eerData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 2
+            }
+          },
+          {
+            name: "用电量",
+            type: "bar",
+            yAxisIndex: 1,
+            data: energyData,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#5470C6"
+                  },
+                  {
+                    offset: 1,
+                    color: "#73C0DE"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.trendChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.energy-efficiency-calendar {
+  padding: 0.16rem;
+}
+
+.control-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .date-picker-group {
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
+
+    ::v-deep .date-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+
+    .view-toggle {
+      display: flex;
+      gap: 0.08rem;
+
+      .view-btn {
+        padding: 0.06rem 0.2rem;
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        cursor: pointer;
+        border-radius: 0.04rem;
+        transition: all 0.3s;
+
+        &:hover {
+          opacity: 1;
+        }
+
+        &.active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .indicator-selector {
+    ::v-deep .custom-select {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .option-dot {
+    display: inline-block;
+    width: 0.1rem;
+    height: 0.1rem;
+    border-radius: 50%;
+    margin-right: 0.08rem;
+  }
+}
+
+.month-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.15rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .current-month {
+    font-size: 0.18rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .nav-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+.calendar-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .calendar-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.1rem;
+    margin-bottom: 0.15rem;
+
+    .weekday {
+      text-align: center;
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding: 0.1rem 0;
+    }
+  }
+
+  .calendar-body {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.1rem;
+
+    .calendar-day {
+      aspect-ratio: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0.1rem;
+      border-radius: 0.06rem;
+      cursor: pointer;
+      transition: all 0.3s;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+      }
+
+      &.other-month {
+        opacity: 0.3;
+        cursor: default;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.03);
+        }
+      }
+
+      &.selected {
+        background: rgba(21, 225, 253, 0.2);
+        border: 2px solid #15e1fd;
+      }
+
+      &.today {
+        background: rgba(145, 204, 117, 0.2);
+        border: 1px solid #91CC75;
+      }
+
+      .day-number {
+        font-size: 0.16rem;
+        color: #ffffff;
+        margin-bottom: 0.05rem;
+      }
+
+      .day-indicator {
+        text-align: center;
+
+        .indicator-value {
+          font-size: 0.14rem;
+          font-weight: bold;
+        }
+
+        .indicator-unit {
+          font-size: 0.1rem;
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+
+.calendar-legend {
+  display: flex;
+  justify-content: center;
+  gap: 0.3rem;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    font-size: 0.13rem;
+    color: #ffffff;
+
+    .legend-color {
+      width: 0.12rem;
+      height: 0.12rem;
+      border-radius: 50%;
+      margin-right: 0.08rem;
+    }
+
+    .legend-label {
+      opacity: 0.8;
+    }
+  }
+}
+
+.detail-panel {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .detail-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .close-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+
+  .detail-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+    gap: 0.15rem;
+
+    .detail-row {
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 0.06rem;
+
+      .detail-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+        display: flex;
+        align-items: center;
+
+        .label-dot {
+          width: 0.08rem;
+          height: 0.08rem;
+          border-radius: 50%;
+          margin-right: 0.08rem;
+        }
+      }
+
+      .detail-value {
+        font-size: 0.18rem;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.monthly-summary {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .summary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .summary-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .summary-period {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .summary-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+    gap: 0.15rem;
+
+    .summary-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+      text-align: center;
+
+      .summary-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.1rem;
+      }
+
+      .summary-value {
+        font-size: 0.22rem;
+        color: #15e1fd;
+        font-weight: bold;
+
+        .unit {
+          font-size: 0.13rem;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
+
+.trend-chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .chart-header {
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .calendar-body {
+    .calendar-day {
+      .day-number {
+        font-size: 0.14rem;
+      }
+
+      .day-indicator {
+        .indicator-value {
+          font-size: 0.12rem;
+        }
+
+        .indicator-unit {
+          font-size: 0.09rem;
+        }
+      }
+    }
+  }
+
+  .detail-content {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .summary-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/energyManage/retrofitEffectivenessCompariso/index.vue b/src/views/newCenterairC/energyManage/retrofitEffectivenessCompariso/index.vue
new file mode 100644
index 0000000..4dec6ff
--- /dev/null
+++ b/src/views/newCenterairC/energyManage/retrofitEffectivenessCompariso/index.vue
@@ -0,0 +1,1041 @@
+<template>
+  <div class="retrofit-effectiveness">
+    <!-- 时间段选择 -->
+    <div class="time-selector">
+      <div class="selector-label">对比时间段</div>
+      <div class="time-range-group">
+        <div class="range-item">
+          <div class="range-label">改造前</div>
+          <el-date-picker
+            v-model="beforeDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+        <div class="range-divider">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="range-item">
+          <div class="range-label">改造后</div>
+          <el-date-picker
+            v-model="afterDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心指标对比 -->
+    <div class="comparison-indicators">
+      <div class="indicator-group">
+        <div class="group-title">能耗对比</div>
+        <div class="indicator-row">
+          <div class="indicator-card before">
+            <div class="card-title">改造前总能耗</div>
+            <div class="card-value">{{ comparisonIndicators.beforeEnergy }} <span class="unit">kWh</span></div>
+          </div>
+          <div class="indicator-arrow">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="indicator-card after">
+            <div class="card-title">改造后总能耗</div>
+            <div class="card-value">{{ comparisonIndicators.afterEnergy }} <span class="unit">kWh</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-group">
+        <div class="group-title">节能成效</div>
+        <div class="indicator-cards">
+          <div class="indicator-card success">
+            <div class="card-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="card-content">
+              <div class="card-label">节能量</div>
+              <div class="card-value">{{ comparisonIndicators.energySaving }} <span class="unit">kWh</span></div>
+              <div class="card-percent">{{ comparisonIndicators.energySavingRate }}%</div>
+            </div>
+          </div>
+          <div class="indicator-card warning">
+            <div class="card-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="card-content">
+              <div class="card-label">节能金额</div>
+              <div class="card-value">¥{{ comparisonIndicators.costSaving }}</div>
+              <div class="card-percent">年均节省</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-group">
+        <div class="group-title">能效与碳排放</div>
+        <div class="indicator-cards">
+          <div class="indicator-card info">
+            <div class="card-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="card-content">
+              <div class="card-label">EER提升</div>
+              <div class="card-value">{{ comparisonIndicators.eerImprovement }}</div>
+              <div class="card-percent">{{ comparisonIndicators.beforeEer }} → {{ comparisonIndicators.afterEer }}</div>
+            </div>
+          </div>
+          <div class="indicator-card primary">
+            <div class="card-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                <path d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="card-content">
+              <div class="card-label">碳减排量</div>
+              <div class="card-value">{{ comparisonIndicators.carbonReduction }} <span class="unit">tCO₂e</span></div>
+              <div class="card-percent">累计减排</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 能耗趋势对比图 -->
+    <div class="chart-section">
+      <div class="chart-header">
+        <div class="chart-title">能耗趋势对比</div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #EE6666;"></span>
+            <span>改造前</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>改造后</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="energyComparisonChartRef"></div>
+    </div>
+
+    <!-- 能效对比图 -->
+    <div class="chart-section half-width">
+      <div class="chart-header">
+        <div class="chart-title">能效对比</div>
+      </div>
+      <div class="chart" ref="eerComparisonChartRef"></div>
+    </div>
+
+    <!-- 节能贡献分析 -->
+    <div class="chart-section half-width">
+      <div class="chart-header">
+        <div class="chart-title">节能贡献分析</div>
+      </div>
+      <div class="chart" ref="savingContributionChartRef"></div>
+    </div>
+
+    <!-- 改造成效详情表格 -->
+    <div class="table-section">
+      <div class="section-header">
+        <div class="section-title">改造成效详情</div>
+        <el-button type="primary" size="small" @click="exportReport">导出报告</el-button>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>指标项目</th>
+              <th>改造前</th>
+              <th>改造后</th>
+              <th>变化量</th>
+              <th>变化率</th>
+              <th>改善效果</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in effectivenessDetail" :key="index">
+              <td>{{ item.name }}</td>
+              <td>{{ item.before }}</td>
+              <td>{{ item.after }}</td>
+              <td :class="item.change >= 0 ? 'positive' : 'negative'">
+                {{ item.change >= 0 ? '+' : '' }}{{ item.change }}
+              </td>
+              <td :class="item.changeRate >= 0 ? 'positive' : 'negative'">
+                {{ item.changeRate >= 0 ? '+' : '' }}{{ item.changeRate }}%
+              </td>
+              <td>
+                <span class="effect-tag" :class="item.effectClass">{{ item.effect }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 设备运行效率对比 -->
+    <div class="device-efficiency-section">
+      <div class="section-header">
+        <div class="section-title">设备运行效率对比</div>
+      </div>
+      <div class="device-grid">
+        <div class="device-item" v-for="device in deviceEfficiency" :key="device.name">
+          <div class="device-header">
+            <div class="device-name">{{ device.name }}</div>
+          </div>
+          <div class="device-metrics">
+            <div class="metric-item">
+              <div class="metric-label">改造前</div>
+              <div class="metric-value before">{{ device.before }}</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">改造后</div>
+              <div class="metric-value after">{{ device.after }}</div>
+            </div>
+            <div class="metric-item improvement">
+              <div class="metric-label">提升</div>
+              <div class="metric-value">+{{ device.improvement }}%</div>
+            </div>
+          </div>
+          <div class="progress-bar">
+            <div
+              class="progress-fill"
+              :style="{ width: device.improvement + '%' }"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "RetrofitEffectivenessComparison",
+  data() {
+    return {
+      // 日期范围
+      beforeDateRange: [],
+      afterDateRange: [],
+      // 对比指标
+      comparisonIndicators: {
+        beforeEnergy: 8560000,
+        afterEnergy: 5620000,
+        energySaving: 2940000,
+        energySavingRate: 34.3,
+        costSaving: 352800,
+        beforeEer: 4.5,
+        afterEer: 6.8,
+        eerImprovement: 2.3,
+        carbonReduction: 1529.4
+      },
+      // 改造成效详情
+      effectivenessDetail: [
+        { name: "总能耗", before: "856万kWh", after: "562万kWh", change: "-294万kWh", changeRate: -34.3, effect: "显著改善", effectClass: "excellent" },
+        { name: "平均EER", before: "4.5", after: "6.8", change: "+2.3", changeRate: 51.1, effect: "显著改善", effectClass: "excellent" },
+        { name: "平均COP", before: "3.8", after: "5.2", change: "+1.4", changeRate: 36.8, effect: "显著改善", effectClass: "excellent" },
+        { name: "碳排放", before: "4451.2tCO₂e", after: "2921.8tCO₂e", change: "-1529.4tCO₂e", changeRate: -34.4, effect: "显著改善", effectClass: "excellent" },
+        { name: "运行费用", before: "102.72万元", after: "67.44万元", change: "-35.28万元", changeRate: -34.3, effect: "显著改善", effectClass: "excellent" },
+        { name: "制冷量", before: "18.5万RT", after: "19.85万RT", change: "+1.35万RT", changeRate: 7.3, effect: "改善", effectClass: "good" }
+      ],
+      // 设备运行效率
+      deviceEfficiency: [
+        { name: "主机", before: "COP 3.8", after: "COP 5.2", improvement: 36.8 },
+        { name: "冷冻泵", before: "效率 65%", after: "效率 82%", improvement: 26.2 },
+        { name: "冷却泵", before: "效率 68%", after: "效率 85%", improvement: 25.0 },
+        { name: "冷却塔", before: "效率 72%", after: "效率 88%", improvement: 22.2 },
+        { name: "系统整体", before: "EER 4.5", after: "EER 6.8", improvement: 51.1 }
+      ],
+      // 图表实例
+      energyComparisonChart: null,
+      eerComparisonChart: null,
+      savingContributionChart: null
+    };
+  },
+  mounted() {
+    this.initEnergyComparisonChart();
+    this.initEerComparisonChart();
+    this.initSavingContributionChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.energyComparisonChart) this.energyComparisonChart.dispose();
+    if (this.eerComparisonChart) this.eerComparisonChart.dispose();
+    if (this.savingContributionChart) this.savingContributionChart.dispose();
+  },
+  methods: {
+    // 日期范围变化
+    handleDateChange(value) {
+      console.log("日期范围变化:", value);
+      this.updateAllCharts();
+    },
+    // 导出报告
+    exportReport() {
+      this.$message.success("报告导出成功");
+    },
+    // 初始化能耗对比图
+    initEnergyComparisonChart() {
+      this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "万kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: [78, 85, 92, 88, 75, 72, 68, 70, 75, 82, 86, 80],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE6666"
+                  },
+                  {
+                    offset: 1,
+                    color: "#E53935"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: [51, 56, 60, 58, 49, 47, 44, 46, 49, 54, 56, 52],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#91CC75"
+                  },
+                  {
+                    offset: 1,
+                    color: "#66BB6A"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.energyComparisonChart.setOption(option);
+    },
+    // 初始化能效对比图
+    initEerComparisonChart() {
+      this.eerComparisonChart = echarts.init(this.$refs.eerComparisonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["改造前EER", "改造后EER"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "EER",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "改造前EER",
+            type: "line",
+            smooth: true,
+            data: [4.2, 4.3, 4.5, 4.4, 4.1, 4.0, 4.0, 4.1, 4.2, 4.4, 4.5, 4.5],
+            itemStyle: {
+              color: "#EE6666"
+            },
+            lineStyle: {
+              color: "#EE6666",
+              width: 2,
+              type: "dashed"
+            }
+          },
+          {
+            name: "改造后EER",
+            type: "line",
+            smooth: true,
+            data: [6.3, 6.5, 6.8, 6.6, 6.2, 6.1, 6.0, 6.1, 6.3, 6.5, 6.7, 6.8],
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 3
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145, 204, 117, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145, 204, 117, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.eerComparisonChart.setOption(option);
+    },
+    // 初始化节能贡献分析图
+    initSavingContributionChart() {
+      this.savingContributionChart = echarts.init(this.$refs.savingContributionChartRef);
+      const option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}% ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "节能贡献",
+            type: "pie",
+            radius: ["30%", "70%"],
+            center: ["60%", "50%"],
+            data: [
+              { value: 45, name: "设备升级", itemStyle: { color: "#5470C6" } },
+              { value: 25, name: "控制优化", itemStyle: { color: "#91CC75" } },
+              { value: 18, name: "管路改造", itemStyle: { color: "#FAC858" } },
+              { value: 8, name: "智能调度", itemStyle: { color: "#EE6666" } },
+              { value: 4, name: "其他", itemStyle: { color: "#73C0DE" } }
+            ],
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.savingContributionChart.setOption(option);
+    },
+    // 更新所有图表
+    updateAllCharts() {
+      // 这里可以根据日期范围更新图表数据
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.energyComparisonChart) this.energyComparisonChart.resize();
+      if (this.eerComparisonChart) this.eerComparisonChart.resize();
+      if (this.savingContributionChart) this.savingContributionChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.retrofit-effectiveness {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .selector-label {
+    font-size: 0.15rem;
+    color: #ffffff;
+    margin-right: 0.15rem;
+  }
+
+  .time-range-group {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+
+    .range-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      .range-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-picker {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .range-divider {
+      display: flex;
+      align-items: center;
+      padding: 0 0.15rem;
+
+      svg {
+        width: 0.24rem;
+        height: 0.24rem;
+        fill: #ffffff;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+.comparison-indicators {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-group {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+
+    .group-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      margin-bottom: 0.15rem;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .indicator-row {
+      display: flex;
+      align-items: center;
+      gap: 0.15rem;
+
+      .indicator-card {
+        flex: 1;
+        padding: 0.2rem;
+        border-radius: 0.06rem;
+
+        &.before {
+          background: rgba(238, 102, 102, 0.2);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        &.after {
+          background: rgba(145, 204, 117, 0.2);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        .card-title {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.1rem;
+        }
+
+        .card-value {
+          font-size: 0.2rem;
+          color: #15e1fd;
+          font-weight: bold;
+
+          .unit {
+            font-size: 0.12rem;
+            opacity: 0.8;
+          }
+        }
+      }
+
+      .indicator-arrow {
+        display: flex;
+        align-items: center;
+
+        svg {
+          width: 0.32rem;
+          height: 0.32rem;
+          fill: #ffffff;
+          opacity: 0.5;
+        }
+      }
+    }
+
+    .indicator-cards {
+      display: flex;
+      gap: 0.12rem;
+
+      .indicator-card {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 0.15rem;
+        border-radius: 0.06rem;
+        background: rgba(255, 255, 255, 0.05);
+
+        &.success {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.warning {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.info {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.primary {
+          background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        .card-icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.12rem;
+          background: rgba(255, 255, 255, 0.1);
+
+          svg {
+            width: 0.2rem;
+            height: 0.2rem;
+            fill: #ffffff;
+          }
+        }
+
+        .card-content {
+          flex: 1;
+
+          .card-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.05rem;
+          }
+
+          .card-value {
+            font-size: 0.18rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.03rem;
+
+            .unit {
+              font-size: 0.11rem;
+              opacity: 0.8;
+            }
+          }
+
+          .card-percent {
+            font-size: 0.11rem;
+            color: #91CC75;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  &.half-width {
+    display: inline-block;
+    width: calc(50% - 0.08rem);
+    vertical-align: top;
+
+    &:nth-child(odd) {
+      margin-right: 0.16rem;
+    }
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.2rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.13rem;
+        color: #ffffff;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+          margin-right: 0.06rem;
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3rem;
+  }
+}
+
+.table-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+
+      thead {
+        tr {
+          background: rgba(255, 255, 255, 0.05);
+
+          th {
+            padding: 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #ffffff;
+            font-weight: bold;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          &:hover {
+            background: rgba(255, 255, 255, 0.05);
+          }
+
+          td {
+            padding: 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.8;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+            &.positive {
+              color: #EE6666;
+            }
+
+            &.negative {
+              color: #91CC75;
+            }
+
+            .effect-tag {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.excellent {
+                background: rgba(145, 204, 117, 0.3);
+                color: #91CC75;
+                border: 1px solid rgba(145, 204, 117, 0.5);
+              }
+
+              &.good {
+                background: rgba(84, 112, 198, 0.3);
+                color: #5470C6;
+                border: 1px solid rgba(84, 112, 198, 0.5);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-efficiency-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+    gap: 0.15rem;
+
+    .device-item {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      .device-header {
+        margin-bottom: 0.15rem;
+
+        .device-name {
+          font-size: 0.15rem;
+          color: #ffffff;
+          font-weight: bold;
+        }
+      }
+
+      .device-metrics {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 0.12rem;
+
+        .metric-item {
+          text-align: center;
+
+          .metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.05rem;
+          }
+
+          .metric-value {
+            font-size: 0.14rem;
+            font-weight: bold;
+
+            &.before {
+              color: #EE6666;
+            }
+
+            &.after {
+              color: #91CC75;
+            }
+          }
+
+          &.improvement {
+            .metric-value {
+              color: #15e1fd;
+            }
+          }
+        }
+      }
+
+      .progress-bar {
+        width: 100%;
+        height: 0.08rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 0.04rem;
+        overflow: hidden;
+
+        .progress-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #91CC75, #15e1fd);
+          border-radius: 0.04rem;
+          transition: width 1s ease-in-out;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .comparison-indicators {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-section {
+    &.half-width {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  .device-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/home/index.vue b/src/views/newCenterairC/home/index.vue
new file mode 100644
index 0000000..ed2ed6d
--- /dev/null
+++ b/src/views/newCenterairC/home/index.vue
@@ -0,0 +1,1280 @@
+<template>
+  <div class="chiller-plant-home">
+    <!-- 基础信息展示 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">基础信息</div>
+      </div>
+      <div class="basic-info">
+        <div class="info-item">
+          <div class="info-label">项目名称</div>
+          <div class="info-value">{{ basicInfo.projectName }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">项目位置</div>
+          <div class="info-value">{{ basicInfo.location }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">项目面积</div>
+          <div class="info-value">{{ basicInfo.area }}m²</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">业务类型</div>
+          <div class="info-value">{{ basicInfo.businessType }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">机房负责人</div>
+          <div class="info-value">{{ basicInfo.manager }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">设备安装日期</div>
+          <div class="info-value">{{ basicInfo.installDate }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">电费单价</div>
+          <div class="info-value">¥{{ basicInfo.electricPrice }}/kWh</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">冷站机房数量</div>
+          <div class="info-value">{{ basicInfo.chillerCount }}个</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关键指标统计 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">关键指标统计</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in timeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeTimeTab === index }]"
+            @click="handleTimeTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="key-indicators">
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <span class="icon-text">节能</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.energySavingRate }}%</div>
+            <div class="indicator-label">节能率</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+            <span class="icon-text">金额</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">¥{{ keyIndicators.totalSaving }}</div>
+            <div class="indicator-label">综合节电金额</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+            <span class="icon-text">减碳</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.carbonReduction }}t</div>
+            <div class="indicator-label">综合减碳量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+            <span class="icon-text">EER</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.eer }}</div>
+            <div class="indicator-label">空调能效(EER)</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+            <span class="icon-text">用电</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.totalElectricity }}kWh</div>
+            <div class="indicator-label">总用电量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+            <span class="icon-text">制冷</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.totalCooling }}RT</div>
+            <div class="indicator-label">总制冷量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <span class="icon-text">设备</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.deviceCount }}台</div>
+            <div class="indicator-label">设备总数</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 能效状态可视化 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">能效状态</div>
+      </div>
+      <div class="efficiency-status">
+        <div class="efficiency-badge" :class="'efficiency-' + efficiencyStatus.level">
+          <div class="badge-icon">{{ efficiencyStatus.icon }}</div>
+          <div class="badge-text">{{ efficiencyStatus.text }}</div>
+        </div>
+        <div class="efficiency-value">
+          <div class="value-label">当前EER值</div>
+          <div class="value-number">{{ efficiencyStatus.eerValue }}</div>
+        </div>
+        <div class="efficiency-scale">
+          <div class="scale-item excellent" :class="{ active: efficiencyStatus.level === 'excellent' }">
+            <div class="scale-label">优秀</div>
+            <div class="scale-value">≥6.5</div>
+          </div>
+          <div class="scale-item good" :class="{ active: efficiencyStatus.level === 'good' }">
+            <div class="scale-label">良好</div>
+            <div class="scale-value">6.5-5.5</div>
+          </div>
+          <div class="scale-item normal" :class="{ active: efficiencyStatus.level === 'normal' }">
+            <div class="scale-label">一般</div>
+            <div class="scale-value">5.5-4.5</div>
+          </div>
+          <div class="scale-item poor" :class="{ active: efficiencyStatus.level === 'poor' }">
+            <div class="scale-label">急需改善</div>
+            <div class="scale-value">&lt;4.5</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 多维度数据可视化 -->
+    <div class="charts-section">
+      <div class="chart-row">
+        <!-- 用能趋势图 -->
+        <div class="special-div chart-card">
+          <div class="special-top">
+            <div class="special-title">用能趋势</div>
+            <div class="time-switch">
+              <div
+                v-for="(type, index) in timeTypes"
+                :key="index"
+                :class="['switch-item', { active: activeTimeType === index }]"
+                @click="handleTimeTypeChange(index)"
+              >
+                {{ type }}
+              </div>
+            </div>
+          </div>
+          <div class="chart-container" ref="energyTrendChartRef"></div>
+        </div>
+        <!-- 设备能耗占比 -->
+        <div class="special-div chart-card">
+          <div class="special-top">
+            <div class="special-title">设备能耗占比</div>
+          </div>
+          <div class="chart-container" ref="deviceEnergyChartRef"></div>
+        </div>
+      </div>
+      <!-- 冷热负荷分布 -->
+      <div class="special-div chart-card full-width">
+        <div class="special-top">
+          <div class="special-title">冷热负荷分布</div>
+        </div>
+        <div class="chart-container" ref="loadDistributionChartRef"></div>
+      </div>
+    </div>
+
+    <!-- 机房运行状态全景展示 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">机房运行状态全景</div>
+      </div>
+      <div class="operation-status">
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot online"></div>
+            <div class="status-title">系统实时用电量</div>
+          </div>
+          <div class="status-value">{{ operationStatus.realtimeElectricity }}kW</div>
+          <div class="status-chart-mini" ref="miniChart1"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot cooling"></div>
+            <div class="status-title">系统实时制冷量</div>
+          </div>
+          <div class="status-value">{{ operationStatus.realtimeCooling }}RT</div>
+          <div class="status-chart-mini" ref="miniChart2"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot heating"></div>
+            <div class="status-title">系统实时散热量</div>
+          </div>
+          <div class="status-value">{{ operationStatus.realtimeHeating }}kW</div>
+          <div class="status-chart-mini" ref="miniChart3"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot warning" :class="getHeatBalanceClass(operationStatus.heatImbalanceRate)"></div>
+            <div class="status-title">热不平衡率</div>
+          </div>
+          <div class="status-value" :class="getHeatBalanceClass(operationStatus.heatImbalanceRate)">
+            {{ operationStatus.heatImbalanceRate }}%
+          </div>
+          <div class="status-indicator">
+            <div class="indicator-bar">
+              <div
+                class="indicator-fill"
+                :style="{ width: operationStatus.heatImbalanceRate + '%' }"
+                :class="getHeatBalanceClass(operationStatus.heatImbalanceRate)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 设备运行状态 -->
+      <div class="device-status-grid">
+        <div class="device-status-item" v-for="device in deviceStatus" :key="device.name">
+          <div class="device-status-icon" :class="device.status"></div>
+          <div class="device-info">
+            <div class="device-name">{{ device.name }}</div>
+            <div class="device-state">{{ device.statusText }}</div>
+          </div>
+          <div class="device-value">{{ device.value }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "ChillerPlantHome",
+  data() {
+    return {
+      // 基础信息
+      basicInfo: {
+        projectName: "XX大厦空调高效机房",
+        location: "北京市朝阳区建国路88号",
+        area: 125000,
+        businessType: "商业综合体",
+        manager: "张三",
+        installDate: "2020-06-15",
+        electricPrice: 1.2,
+        chillerCount: 2
+      },
+      // 时间选项
+      timeTabs: ["近七日", "当月", "当年", "自定义"],
+      activeTimeTab: 0,
+      // 关键指标
+      keyIndicators: {
+        energySavingRate: 28.5,
+        totalSaving: 156800,
+        carbonReduction: 89.6,
+        eer: 6.8,
+        totalElectricity: 1256800,
+        totalCooling: 45680,
+        deviceCount: 48
+      },
+      // 能效状态
+      efficiencyStatus: {
+        level: "excellent",
+        text: "优秀",
+        icon: "★",
+        eerValue: 6.8
+      },
+      // 用能趋势时间类型
+      timeTypes: ["日", "周", "月"],
+      activeTimeType: 0,
+      // 运行状态
+      operationStatus: {
+        realtimeElectricity: 1256,
+        realtimeCooling: 850,
+        realtimeHeating: 1580,
+        heatImbalanceRate: 12.5
+      },
+      // 设备运行状态
+      deviceStatus: [
+        { name: "主机", status: "running", statusText: "运行中", value: "3/4" },
+        { name: "冷冻泵", status: "running", statusText: "运行中", value: "4/4" },
+        { name: "冷却泵", status: "running", statusText: "运行中", value: "4/4" },
+        { name: "冷却塔", status: "running", statusText: "运行中", value: "3/3" },
+        { name: "风机", status: "running", statusText: "运行中", value: "6/6" },
+        { name: "控制柜", status: "running", statusText: "运行中", value: "2/2" }
+      ],
+      // 图表实例
+      energyTrendChart: null,
+      deviceEnergyChart: null,
+      loadDistributionChart: null,
+      miniCharts: []
+    };
+  },
+  mounted() {
+    this.initEnergyTrendChart();
+    this.initDeviceEnergyChart();
+    this.initLoadDistributionChart();
+    this.initMiniCharts();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.energyTrendChart) this.energyTrendChart.dispose();
+    if (this.deviceEnergyChart) this.deviceEnergyChart.dispose();
+    if (this.loadDistributionChart) this.loadDistributionChart.dispose();
+    this.miniCharts.forEach(chart => chart && chart.dispose());
+  },
+  watch: {
+    activeTimeType() {
+      this.updateEnergyTrendChart();
+    },
+    activeTimeTab() {
+      this.updateKeyIndicators();
+    }
+  },
+  methods: {
+    // 时间切换
+    handleTimeTabChange(index) {
+      this.activeTimeTab = index;
+    },
+    // 用能趋势时间类型切换
+    handleTimeTypeChange(index) {
+      this.activeTimeType = index;
+    },
+    // 获取热不平衡率样式
+    getHeatBalanceClass(value) {
+      if (value < 10) return "good";
+      if (value < 20) return "warning";
+      return "danger";
+    },
+    // 初始化用能趋势图
+    initEnergyTrendChart() {
+      this.energyTrendChart = echarts.init(this.$refs.energyTrendChartRef);
+      this.updateEnergyTrendChart();
+    },
+    // 更新用能趋势图
+    updateEnergyTrendChart() {
+      const dataMap = {
+        0: { // 日
+          xData: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
+          electricity: [320, 280, 650, 980, 1050, 890, 420],
+          cooling: [220, 180, 480, 720, 780, 650, 310]
+        },
+        1: { // 周
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          electricity: [6500, 6800, 7200, 6900, 7100, 5800, 5200],
+          cooling: [4800, 5100, 5400, 5200, 5300, 4300, 3900]
+        },
+        2: { // 月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          electricity: [28000, 32000, 35000, 33000, 31000, 29000, 27000],
+          cooling: [21000, 24000, 26000, 25000, 23000, 22000, 20000]
+        }
+      };
+
+      const currentData = dataMap[this.activeTimeType];
+      const unit = this.activeTimeType === 0 ? "kW" : "kWh";
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["用电量", "制冷量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: unit,
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "用电量",
+            type: "line",
+            smooth: true,
+            data: currentData.electricity,
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(21, 225, 253, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(21, 225, 253, 0)"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "制冷量",
+            type: "line",
+            smooth: true,
+            data: currentData.cooling,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145, 204, 117, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145, 204, 117, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.energyTrendChart.setOption(option);
+    },
+    // 初始化设备能耗占比图
+    initDeviceEnergyChart() {
+      this.deviceEnergyChart = echarts.init(this.$refs.deviceEnergyChartRef);
+      const option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}% ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "设备能耗占比",
+            type: "pie",
+            radius: ["30%", "70%"],
+            center: ["60%", "50%"],
+            data: [
+              { value: 45, name: "主机", itemStyle: { color: "#5470C6" } },
+              { value: 20, name: "冷冻泵", itemStyle: { color: "#91CC75" } },
+              { value: 18, name: "冷却泵", itemStyle: { color: "#FAC858" } },
+              { value: 12, name: "冷却塔风机", itemStyle: { color: "#EE6666" } },
+              { value: 5, name: "其他", itemStyle: { color: "#73C0DE" } }
+            ],
+            label: {
+              formatter: "{b}\n{d}%"
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+      this.deviceEnergyChart.setOption(option);
+    },
+    // 初始化冷热负荷分布图
+    initLoadDistributionChart() {
+      this.loadDistributionChart = echarts.init(this.$refs.loadDistributionChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["冷负荷", "热负荷"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kW",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "冷负荷",
+            type: "bar",
+            data: [280, 240, 650, 980, 1050, 890, 420],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#15e1fd"
+                  },
+                  {
+                    offset: 1,
+                    color: "#208fff"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "热负荷",
+            type: "bar",
+            data: [180, 150, 380, 580, 620, 520, 250],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#FAC858"
+                  },
+                  {
+                    offset: 1,
+                    color: "#EE6666"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.loadDistributionChart.setOption(option);
+    },
+    // 初始化迷你图表
+    initMiniCharts() {
+      const chartRefs = [
+        this.$refs.miniChart1,
+        this.$refs.miniChart2,
+        this.$refs.miniChart3
+      ];
+
+      const dataSeries = [
+        [1200, 1220, 1240, 1230, 1250, 1256, 1248],
+        [820, 830, 840, 845, 850, 850, 848],
+        [1550, 1560, 1570, 1575, 1580, 1580, 1578]
+      ];
+
+      chartRefs.forEach((ref, index) => {
+        if (ref) {
+          const chart = echarts.init(ref);
+          const option = {
+            grid: {
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0
+            },
+            xAxis: {
+              type: "category",
+              show: false,
+              data: ["1", "2", "3", "4", "5", "6", "7"]
+            },
+            yAxis: {
+              type: "value",
+              show: false
+            },
+            series: [
+              {
+                type: "line",
+                smooth: true,
+                data: dataSeries[index],
+                showSymbol: false,
+                lineStyle: {
+                  width: 2,
+                  color: index === 0 ? "#15e1fd" : index === 1 ? "#91CC75" : "#FAC858"
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: index === 0 ? "rgba(21, 225, 253, 0.3)" : index === 1 ? "rgba(145, 204, 117, 0.3)" : "rgba(250, 200, 88, 0.3)"
+                      },
+                      {
+                        offset: 1,
+                        color: index === 0 ? "rgba(21, 225, 253, 0)" : index === 1 ? "rgba(145, 204, 117, 0)" : "rgba(250, 200, 88, 0)"
+                      }
+                    ]
+                  }
+                }
+              }
+            ]
+          };
+          chart.setOption(option);
+          this.miniCharts.push(chart);
+        }
+      });
+    },
+    // 更新关键指标
+    updateKeyIndicators() {
+      // 这里可以根据时间选项更新关键指标数据
+      // 模拟数据变化
+      const dataMap = {
+        0: {
+          energySavingRate: 28.5,
+          totalSaving: 156800,
+          carbonReduction: 89.6,
+          eer: 6.8,
+          totalElectricity: 1256800,
+          totalCooling: 45680,
+          deviceCount: 48
+        },
+        1: {
+          energySavingRate: 30.2,
+          totalSaving: 680000,
+          carbonReduction: 389.5,
+          eer: 7.0,
+          totalElectricity: 5600000,
+          totalCooling: 198500,
+          deviceCount: 48
+        },
+        2: {
+          energySavingRate: 27.8,
+          totalSaving: 8560000,
+          carbonReduction: 4890.2,
+          eer: 6.5,
+          totalElectricity: 68000000,
+          totalCooling: 2456000,
+          deviceCount: 48
+        },
+        3: {
+          energySavingRate: 29.1,
+          totalSaving: 125000,
+          carbonReduction: 71.5,
+          eer: 6.7,
+          totalElectricity: 1050000,
+          totalCooling: 38200,
+          deviceCount: 48
+        }
+      };
+
+      this.keyIndicators = { ...dataMap[this.activeTimeTab] };
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.energyTrendChart) this.energyTrendChart.resize();
+      if (this.deviceEnergyChart) this.deviceEnergyChart.resize();
+      if (this.loadDistributionChart) this.loadDistributionChart.resize();
+      this.miniCharts.forEach(chart => chart && chart.resize());
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.chiller-plant-home {
+  padding: 0.16rem;
+}
+
+.basic-info {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.2rem;
+  gap: 0.15rem;
+
+  .info-item {
+    flex: 1;
+    min-width: 2rem;
+    padding: 0.15rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+
+    .info-label {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+      margin-bottom: 0.08rem;
+    }
+
+    .info-value {
+      font-size: 0.18rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+}
+
+.time-tabs {
+  display: flex;
+  gap: 0.08rem;
+
+  .time-tab {
+    padding: 0.05rem 0.15rem;
+    font-size: 0.13rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.key-indicators {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.2rem;
+  gap: 0.15rem;
+
+  .indicator-item {
+    flex: 1;
+    min-width: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .indicator-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+
+      .icon-text {
+        font-size: 0.2rem;
+        color: #ffffff;
+      }
+    }
+
+    .indicator-content {
+      flex: 1;
+
+      .indicator-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .indicator-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.efficiency-status {
+  display: flex;
+  align-items: center;
+  padding: 0.3rem 0.2rem;
+  gap: 0.3rem;
+
+  .efficiency-badge {
+    padding: 0.15rem 0.3rem;
+    border-radius: 0.08rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 1.2rem;
+
+    &.efficiency-excellent {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+
+    &.efficiency-good {
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    }
+
+    &.efficiency-normal {
+      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    }
+
+    &.efficiency-poor {
+      background: linear-gradient(135deg, #ee5e5e 0%, #ff6b6b 100%);
+    }
+
+    .badge-icon {
+      font-size: 0.3rem;
+      color: #ffffff;
+      margin-bottom: 0.05rem;
+    }
+
+    .badge-text {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+  }
+
+  .efficiency-value {
+    flex: 1;
+
+    .value-label {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+      margin-bottom: 0.1rem;
+    }
+
+    .value-number {
+      font-size: 0.48rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+
+  .efficiency-scale {
+    display: flex;
+    gap: 0.1rem;
+
+    .scale-item {
+      padding: 0.1rem 0.2rem;
+      border-radius: 0.04rem;
+      text-align: center;
+      opacity: 0.6;
+      transition: all 0.3s;
+
+      &.excellent {
+        background: rgba(102, 126, 234, 0.3);
+        border: 1px solid rgba(102, 126, 234, 0.5);
+
+        &.active {
+          opacity: 1;
+          background: rgba(102, 126, 234, 0.6);
+        }
+      }
+
+      &.good {
+        background: rgba(79, 172, 254, 0.3);
+        border: 1px solid rgba(79, 172, 254, 0.5);
+
+        &.active {
+          opacity: 1;
+          background: rgba(79, 172, 254, 0.6);
+        }
+      }
+
+      &.normal {
+        background: rgba(250, 112, 154, 0.3);
+        border: 1px solid rgba(250, 112, 154, 0.5);
+
+        &.active {
+          opacity: 1;
+          background: rgba(250, 112, 154, 0.6);
+        }
+      }
+
+      &.poor {
+        background: rgba(238, 94, 94, 0.3);
+        border: 1px solid rgba(238, 94, 94, 0.5);
+
+        &.active {
+          opacity: 1;
+          background: rgba(238, 94, 94, 0.6);
+        }
+      }
+
+      .scale-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        margin-bottom: 0.05rem;
+      }
+
+      .scale-value {
+        font-size: 0.11rem;
+        color: #ffffff;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.charts-section {
+  margin-top: 0.16rem;
+
+  .chart-row {
+    display: flex;
+    gap: 0.16rem;
+    margin-bottom: 0.16rem;
+
+    .chart-card {
+      flex: 1;
+    }
+  }
+
+  .full-width {
+    width: 100%;
+  }
+}
+
+.time-switch {
+  display: flex;
+  gap: 0.08rem;
+
+  .switch-item {
+    padding: 0.05rem 0.2rem;
+    font-size: 0.13rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.chart-container {
+  width: 100%;
+  height: 2.8rem;
+}
+
+.operation-status {
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.2rem;
+  flex-wrap: wrap;
+
+  .status-card {
+    flex: 1;
+    min-width: 2.5rem;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .status-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.15rem;
+
+      .status-dot {
+        width: 0.08rem;
+        height: 0.08rem;
+        border-radius: 50%;
+        margin-right: 0.1rem;
+
+        &.online {
+          background: #91CC75;
+        }
+
+        &.cooling {
+          background: #15e1fd;
+        }
+
+        &.heating {
+          background: #FAC858;
+        }
+
+        &.good {
+          background: #91CC75;
+        }
+
+        &.warning {
+          background: #FAC858;
+        }
+
+        &.danger {
+          background: #EE6666;
+        }
+      }
+
+      .status-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.8;
+      }
+    }
+
+    .status-value {
+      font-size: 0.32rem;
+      color: #15e1fd;
+      font-weight: bold;
+      margin-bottom: 0.1rem;
+
+      &.good {
+        color: #91CC75;
+      }
+
+      &.warning {
+        color: #FAC858;
+      }
+
+      &.danger {
+        color: #EE6666;
+      }
+    }
+
+    .status-chart-mini {
+      width: 100%;
+      height: 0.5rem;
+    }
+
+    .status-indicator {
+      .indicator-bar {
+        width: 100%;
+        height: 0.08rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 0.04rem;
+        overflow: hidden;
+
+        .indicator-fill {
+          height: 100%;
+          border-radius: 0.04rem;
+          transition: all 0.3s;
+
+          &.good {
+            background: linear-gradient(90deg, #91CC75, #66BB6A);
+          }
+
+          &.warning {
+            background: linear-gradient(90deg, #FAC858, #FFB300);
+          }
+
+          &.danger {
+            background: linear-gradient(90deg, #EE6666, #E53935);
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.12rem;
+  padding: 0.2rem;
+
+  .device-status-item {
+    display: flex;
+    align-items: center;
+    padding: 0.15rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+
+    .device-status-icon {
+      width: 0.08rem;
+      height: 0.08rem;
+      border-radius: 50%;
+      margin-right: 0.12rem;
+
+      &.running {
+        background: #91CC75;
+        box-shadow: 0 0 0.1rem rgba(145, 204, 117, 0.5);
+      }
+
+      &.stopped {
+        background: #EE6666;
+      }
+
+      &.standby {
+        background: #FAC858;
+      }
+    }
+
+    .device-info {
+      flex: 1;
+
+      .device-name {
+        font-size: 0.14rem;
+        color: #ffffff;
+        margin-bottom: 0.03rem;
+      }
+
+      .device-state {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.6;
+      }
+    }
+
+    .device-value {
+      font-size: 0.18rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .basic-info {
+    .info-item {
+      min-width: 1.5rem;
+    }
+  }
+
+  .key-indicators {
+    .indicator-item {
+      min-width: 2rem;
+    }
+  }
+
+  .efficiency-status {
+    flex-direction: column;
+
+    .efficiency-value {
+      text-align: center;
+    }
+
+    .efficiency-scale {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .chart-row {
+    flex-direction: column;
+  }
+
+  .operation-status {
+    .status-card {
+      min-width: 2rem;
+    }
+  }
+
+  .device-status-grid {
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/reportManage/base/index.vue b/src/views/newCenterairC/reportManage/base/index.vue
new file mode 100644
index 0000000..434e90d
--- /dev/null
+++ b/src/views/newCenterairC/reportManage/base/index.vue
@@ -0,0 +1,1210 @@
+<template>
+  <div class="base-report">
+    <!-- 查询条件 -->
+    <div class="filter-section">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>统计周期</label>
+          <el-select v-model="reportForm.periodType" class="custom-select" @change="handlePeriodChange">
+            <el-option label="日" value="day"></el-option>
+            <el-option label="月" value="month"></el-option>
+            <el-option label="季" value="quarter"></el-option>
+            <el-option label="年" value="year"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>开始时间</label>
+          <el-date-picker
+            v-model="reportForm.startTime"
+            :type="datePickerType"
+            placeholder="选择开始时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>结束时间</label>
+          <el-date-picker
+            v-model="reportForm.endTime"
+            :type="datePickerType"
+            placeholder="选择结束时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>项目名称</label>
+          <el-select v-model="reportForm.projectId" placeholder="全部项目" clearable class="custom-select">
+            <el-option label="全部项目" value=""></el-option>
+            <el-option label="中央空调系统项目A" value="P001"></el-option>
+            <el-option label="中央空调系统项目B" value="P002"></el-option>
+            <el-option label="中央空调系统项目C" value="P003"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-actions">
+          <el-button type="primary" @click="generateReport" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
+              <path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
+              <path d="M800 352H592v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v128c0 17.7 14.3 32 32 32h240c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32v-64c0-52.9-43.1-96-96-96z" fill="currentColor"/>
+              <path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
+            </svg>
+            生成报表
+          </el-button>
+          <el-button type="success" @click="exportToExcel" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+              <path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            导出Excel
+          </el-button>
+          <el-button type="warning" @click="exportToPDF" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+            </svg>
+            导出PDF
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报表内容 -->
+    <div class="report-content" v-if="reportData">
+      <!-- 项目基础信息 -->
+      <div class="info-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            项目基础信息
+          </div>
+        </div>
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="info-label">项目编码</span>
+            <span class="info-value">{{ reportData.projectInfo.projectCode }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目名称</span>
+            <span class="info-value">{{ reportData.projectInfo.projectName }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目主体</span>
+            <span class="info-value">{{ reportData.projectInfo.projectOwner }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目地址</span>
+            <span class="info-value">{{ reportData.projectInfo.address }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">安装日期</span>
+            <span class="info-value">{{ reportData.projectInfo.installDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">投产日期</span>
+            <span class="info-value">{{ reportData.projectInfo.productionDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">合同金额</span>
+            <span class="info-value">{{ reportData.projectInfo.contractAmount }}万元</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">建筑面积</span>
+            <span class="info-value">{{ reportData.projectInfo.buildingArea }}m²</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设计冷负荷</span>
+            <span class="info-value">{{ reportData.projectInfo.designCoolingLoad }}kW</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设计冷量</span>
+            <span class="info-value">{{ reportData.projectInfo.designCoolingCapacity }}kW</span>
+          </div>
+          <div class="info-item full-width">
+            <span class="info-label">项目描述</span>
+            <span class="info-value">{{ reportData.projectInfo.description }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 机房设备统计 -->
+      <div class="device-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            机房设备统计
+          </div>
+        </div>
+        <div class="device-grid">
+          <div class="device-card chiller">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+                <path d="M416 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.chiller }}</div>
+              <div class="device-label">主机</div>
+            </div>
+          </div>
+          <div class="device-card pump-chilled">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.chilledWaterPump }}</div>
+              <div class="device-label">冷冻泵</div>
+            </div>
+          </div>
+          <div class="device-card pump-cooling">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.coolingWaterPump }}</div>
+              <div class="device-label">冷却泵</div>
+            </div>
+          </div>
+          <div class="device-card cooling-tower">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.coolingTower }}</div>
+              <div class="device-label">冷却塔</div>
+            </div>
+          </div>
+          <div class="device-card terminal">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.terminal }}</div>
+              <div class="device-label">末端设备</div>
+            </div>
+          </div>
+          <div class="device-card other">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.other }}</div>
+              <div class="device-label">其他设备</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能收益卡片 -->
+      <div class="saving-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能收益
+          </div>
+        </div>
+        <div class="saving-grid">
+          <div class="saving-card energy-rate">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.energyRate }}%</div>
+              <div class="saving-label">节能率</div>
+              <div class="saving-trend" :class="reportData.saving.energyRateTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.energyRateTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.energyRateTrend >= 0 ? '+' : '' }}{{ reportData.saving.energyRateTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card money">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.savingMoney }}万元</div>
+              <div class="saving-label">节电金额</div>
+              <div class="saving-trend" :class="reportData.saving.savingMoneyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.savingMoneyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.savingMoneyTrend >= 0 ? '+' : '' }}{{ reportData.saving.savingMoneyTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card carbon">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.carbonReduction }}吨</div>
+              <div class="saving-label">碳减排量</div>
+              <div class="saving-trend" :class="reportData.saving.carbonReductionTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.carbonReductionTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.carbonReductionTrend >= 0 ? '+' : '' }}{{ reportData.saving.carbonReductionTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card total-energy">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.totalEnergy }}万kWh</div>
+              <div class="saving-label">累计节电量</div>
+              <div class="saving-trend" :class="reportData.saving.totalEnergyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.totalEnergyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.totalEnergyTrend >= 0 ? '+' : '' }}{{ reportData.saving.totalEnergyTrend }}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能趋势图表 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能趋势分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="savingChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 设备详细清单 -->
+      <div class="table-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            设备详细清单
+          </div>
+        </div>
+        <div class="table-container">
+          <table class="device-detail-table">
+            <thead>
+              <tr>
+                <th>设备编号</th>
+                <th>设备名称</th>
+                <th>设备类型</th>
+                <th>规格型号</th>
+                <th>额定功率</th>
+                <th>数量</th>
+                <th>安装日期</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in reportData.deviceDetail" :key="index">
+                <td>{{ item.deviceCode }}</td>
+                <td>{{ item.deviceName }}</td>
+                <td>{{ item.deviceType }}</td>
+                <td>{{ item.model }}</td>
+                <td>{{ item.ratedPower }} kW</td>
+                <td>{{ item.quantity }}</td>
+                <td>{{ item.installDate }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div class="empty-state" v-if="!reportData">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+        <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+      </svg>
+      <div class="empty-text">请选择时间范围并点击"生成报表"按钮</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "BaseReport",
+  data() {
+    return {
+      reportForm: {
+        periodType: "month",
+        startTime: "",
+        endTime: "",
+        projectId: ""
+      },
+      reportData: null,
+      savingChart: null
+    };
+  },
+  computed: {
+    datePickerType() {
+      const map = {
+        day: "date",
+        month: "month",
+        quarter: "month",
+        year: "year"
+      };
+      return map[this.reportForm.periodType];
+    }
+  },
+  mounted() {
+    this.initDefaultDate();
+    this.$nextTick(() => {
+      this.generateReport();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    initDefaultDate() {
+      const now = new Date();
+      const end = new Date(now);
+      const start = new Date(now);
+      
+      if (this.reportForm.periodType === "day") {
+        start.setDate(start.getDate() - 30);
+        this.reportForm.startTime = start.toISOString().slice(0, 10);
+        this.reportForm.endTime = end.toISOString().slice(0, 10);
+      } else if (this.reportForm.periodType === "month") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else if (this.reportForm.periodType === "quarter") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else {
+        start.setFullYear(start.getFullYear() - 3);
+        this.reportForm.startTime = start.toISOString().slice(0, 4);
+        this.reportForm.endTime = end.toISOString().slice(0, 4);
+      }
+    },
+    handlePeriodChange() {
+      this.initDefaultDate();
+    },
+    generateReport() {
+      if (!this.reportForm.startTime || !this.reportForm.endTime) {
+        this.$message.warning("请选择时间范围");
+        return;
+      }
+
+      const startDate = new Date(this.reportForm.startTime);
+      const endDate = new Date(this.reportForm.endTime);
+      
+      if (startDate > endDate) {
+        this.$message.warning("开始时间不能大于结束时间");
+        return;
+      }
+
+      this.reportData = {
+        projectInfo: {
+          projectCode: "PROJ-2024-001",
+          projectName: "中央空调系统项目A",
+          projectOwner: "某某科技有限公司",
+          address: "广东省深圳市南山区科技园南区",
+          installDate: "2023-06-15",
+          productionDate: "2023-08-01",
+          contractAmount: 1250,
+          buildingArea: 85000,
+          designCoolingLoad: 3500,
+          designCoolingCapacity: 4200,
+          description: "本项目为某科技园区中央空调系统节能改造项目，涵盖3栋写字楼和2栋研发楼，采用高效冷站系统，通过智能控制系统实现整体能效提升。"
+        },
+        deviceStats: {
+          chiller: 6,
+          chilledWaterPump: 8,
+          coolingWaterPump: 8,
+          coolingTower: 4,
+          terminal: 560,
+          other: 35
+        },
+        saving: {
+          energyRate: 28.5,
+          energyRateTrend: 5.2,
+          savingMoney: 156.8,
+          savingMoneyTrend: 8.5,
+          carbonReduction: 892.5,
+          carbonReductionTrend: 7.8,
+          totalEnergy: 185.6,
+          totalEnergyTrend: 8.5
+        },
+        deviceDetail: [
+          { deviceCode: "CH-001", deviceName: "1号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1800RT", ratedPower: 850, quantity: 2, installDate: "2023-06-15" },
+          { deviceCode: "CH-002", deviceName: "2号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1200RT", ratedPower: 650, quantity: 2, installDate: "2023-06-18" },
+          { deviceCode: "CH-003", deviceName: "3号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1800RT", ratedPower: 850, quantity: 2, installDate: "2023-06-20" },
+          { deviceCode: "CP-001", deviceName: "冷冻泵1-4号", deviceType: "冷冻泵", model: "SB-200-180", ratedPower: 45, quantity: 4, installDate: "2023-06-22" },
+          { deviceCode: "CP-002", deviceName: "冷冻泵5-8号", deviceType: "冷冻泵", model: "SB-200-180", ratedPower: 45, quantity: 4, installDate: "2023-06-22" },
+          { deviceCode: "CP-003", deviceName: "冷却泵1-4号", deviceType: "冷却泵", model: "SB-200-220", ratedPower: 55, quantity: 4, installDate: "2023-06-24" },
+          { deviceCode: "CP-004", deviceName: "冷却泵5-8号", deviceType: "冷却泵", model: "SB-200-220", ratedPower: 55, quantity: 4, installDate: "2023-06-24" },
+          { deviceCode: "CT-001", deviceName: "1号冷却塔", deviceType: "冷却塔", model: "CTN-600", ratedPower: 22, quantity: 2, installDate: "2023-06-26" },
+          { deviceCode: "CT-002", deviceName: "2号冷却塔", deviceType: "冷却塔", model: "CTN-600", ratedPower: 22, quantity: 2, installDate: "2023-06-26" },
+          { deviceCode: "TM-001", deviceName: "风机盘管组A", deviceType: "末端设备", model: "FC-400", ratedPower: 0.08, quantity: 280, installDate: "2023-07-01" },
+          { deviceCode: "TM-002", deviceName: "风机盘管组B", deviceType: "末端设备", model: "FC-400", ratedPower: 0.08, quantity: 280, installDate: "2023-07-01" }
+        ],
+        savingTrend: this.generateSavingTrend()
+      };
+
+      this.$nextTick(() => {
+        this.initCharts();
+      });
+    },
+    generateSavingTrend() {
+      const trend = [];
+      const now = new Date();
+      const months = 12;
+      
+      for (let i = months; i >= 0; i--) {
+        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        
+        trend.push({
+          period: `${year}-${month}`,
+          energyRate: (25 + Math.random() * 5).toFixed(1),
+          savingMoney: (100 + Math.random() * 80).toFixed(1),
+          carbonReduction: (500 + Math.random() * 500).toFixed(1),
+          totalEnergy: (150 + Math.random() * 50).toFixed(1)
+        });
+      }
+      
+      return trend;
+    },
+    initCharts() {
+      this.initSavingChart();
+    },
+    initSavingChart() {
+      if (!this.$refs.savingChart) return;
+      
+      if (this.savingChart) {
+        this.savingChart.dispose();
+      }
+      
+      this.savingChart = echarts.init(this.$refs.savingChart);
+      
+      const periods = this.reportData.savingTrend.map(item => item.period);
+      const energyRateData = this.reportData.savingTrend.map(item => item.energyRate);
+      const savingMoneyData = this.reportData.savingTrend.map(item => item.savingMoney);
+      const carbonData = this.reportData.savingTrend.map(item => item.carbonReduction);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["节能率", "节电金额", "碳减排量"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: periods,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff",
+            rotate: 45
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "节能率 (%)",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "left",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.1)"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "金额/减排量",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "节能率",
+            type: "line",
+            smooth: true,
+            data: energyRateData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "节电金额",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: savingMoneyData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "碳减排量",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: carbonData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(84, 112, 198, 0.5)" },
+                { offset: 1, color: "rgba(84, 112, 198, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.savingChart.setOption(option);
+    },
+    exportToExcel() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为Excel格式");
+    },
+    exportToPDF() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为PDF格式");
+    },
+    handleResize() {
+      if (this.savingChart) this.savingChart.resize();
+    },
+    destroyCharts() {
+      if (this.savingChart) {
+        this.savingChart.dispose();
+        this.savingChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.base-report {
+  padding: 0.16rem;
+  min-height: calc(100vh - 0.32rem);
+}
+
+.filter-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .filter-row {
+    display: flex;
+    gap: 0.15rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .filter-actions {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-btn {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+
+        &.el-button--primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+          }
+        }
+
+        &.el-button--success {
+          background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+          }
+        }
+
+        &.el-button--warning {
+          background: linear-gradient(135deg, #FAC858 0%, #FFA726 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
+          }
+        }
+
+        svg {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+      }
+    }
+  }
+}
+
+.report-content {
+  .info-section,
+  .device-section,
+  .saving-section,
+  .chart-section,
+  .table-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+
+      .section-title {
+        font-size: 0.16rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+
+        svg {
+          width: 0.18rem;
+          height: 0.18rem;
+          fill: #15e1fd;
+        }
+      }
+    }
+  }
+
+  .info-section {
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.15rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.08);
+          transform: translateX(0.02rem);
+        }
+
+        &.full-width {
+          grid-column: 1 / -1;
+        }
+
+        .info-label {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+        }
+
+        .info-value {
+          font-size: 0.14rem;
+          color: #15e1fd;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .device-section {
+    .device-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+      gap: 0.15rem;
+
+      .device-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.chiller {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.pump-chilled {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.pump-cooling {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.cooling-tower {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        &.terminal {
+          background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        &.other {
+          background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, rgba(255, 105, 180, 0.2) 100%);
+          border: 1px solid rgba(238, 130, 238, 0.3);
+        }
+
+        .device-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .device-content {
+          flex: 1;
+
+          .device-count {
+            font-size: 0.28rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .device-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+  }
+
+  .saving-section {
+    .saving-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .saving-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.energy-rate {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.money {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.carbon {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.total-energy {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        .saving-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .saving-content {
+          flex: 1;
+
+          .saving-value {
+            font-size: 0.22rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-trend {
+            display: flex;
+            align-items: center;
+            font-size: 0.12rem;
+            font-weight: 500;
+
+            svg {
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.03rem;
+            }
+
+            &.up {
+              color: #91CC75;
+            }
+
+            &.down {
+              color: #EE6666;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chart-section {
+    .chart-container {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0.04rem;
+      padding: 0.1rem;
+
+      .chart {
+        width: 100%;
+        height: 4.5rem;
+      }
+    }
+  }
+
+  .table-section {
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .device-detail-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 10rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.14rem 0.12rem;
+              text-align: left;
+              font-size: 0.14rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.14rem 0.12rem;
+              font-size: 0.13rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #ffffff;
+  opacity: 0.5;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: #ffffff;
+    margin-bottom: 0.2rem;
+  }
+
+  .empty-text {
+    font-size: 0.16rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .filter-section {
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+
+      .filter-item {
+        width: 100%;
+      }
+
+      .filter-actions {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid,
+  .saving-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/reportManage/machine/index.vue b/src/views/newCenterairC/reportManage/machine/index.vue
new file mode 100644
index 0000000..51a33ee
--- /dev/null
+++ b/src/views/newCenterairC/reportManage/machine/index.vue
@@ -0,0 +1,1268 @@
+<template>
+  <div class="machine-report">
+    <!-- 查询条件 -->
+    <div class="filter-section">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>统计周期</label>
+          <el-select v-model="reportForm.periodType" class="custom-select" @change="handlePeriodChange">
+            <el-option label="小时" value="hour"></el-option>
+            <el-option label="日" value="day"></el-option>
+            <el-option label="月" value="month"></el-option>
+            <el-option label="年" value="year"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>开始时间</label>
+          <el-date-picker
+            v-model="reportForm.startTime"
+            :type="datePickerType"
+            placeholder="选择开始时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>结束时间</label>
+          <el-date-picker
+            v-model="reportForm.endTime"
+            :type="datePickerType"
+            placeholder="选择结束时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>机房名称</label>
+          <el-select v-model="reportForm.machineRoomId" placeholder="全部机房" clearable class="custom-select">
+            <el-option label="全部机房" value=""></el-option>
+            <el-option label="1号机房" value="MR001"></el-option>
+            <el-option label="2号机房" value="MR002"></el-option>
+            <el-option label="3号机房" value="MR003"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-actions">
+          <el-button type="primary" @click="generateReport" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
+              <path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
+              <path d="M800 352H592v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v128c0 17.7 14.3 32 32 32h240c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32v-64c0-52.9-43.1-96-96-96z" fill="currentColor"/>
+              <path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
+            </svg>
+            生成报表
+          </el-button>
+          <el-button type="success" @click="exportToExcel" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+              <path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            导出Excel
+          </el-button>
+          <el-button type="warning" @click="exportToPDF" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+            </svg>
+            导出PDF
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报表内容 -->
+    <div class="report-content" v-if="reportData">
+      <!-- 报表标题 -->
+      <div class="report-header">
+        <div class="report-title">{{ reportData.title }}</div>
+        <div class="report-period">统计周期: {{ reportData.period }}</div>
+      </div>
+
+      <!-- 能效指标卡片 -->
+      <div class="kpi-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            能效指标
+          </div>
+        </div>
+        <div class="kpi-grid">
+          <div class="kpi-card eer">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.eer }}</div>
+              <div class="kpi-label">系统EER</div>
+              <div class="kpi-trend" :class="reportData.kpi.eerTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.eerTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.eerTrend >= 0 ? '+' : '' }}{{ reportData.kpi.eerTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card cop">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.cop }}</div>
+              <div class="kpi-label">系统COP</div>
+              <div class="kpi-trend" :class="reportData.kpi.copTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.copTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.copTrend >= 0 ? '+' : '' }}{{ reportData.kpi.copTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card power">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.totalPower }} kWh</div>
+              <div class="kpi-label">系统总电量</div>
+              <div class="kpi-trend" :class="reportData.kpi.powerTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.powerTrend <= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.powerTrend >= 0 ? '+' : '' }}{{ reportData.kpi.powerTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card cooling">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.totalCooling }} kWH</div>
+              <div class="kpi-label">系统总冷量</div>
+              <div class="kpi-trend" :class="reportData.kpi.coolingTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.coolingTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.coolingTrend >= 0 ? '+' : '' }}{{ reportData.kpi.coolingTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card unit-power">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.unitPower }} kWh/kWh</div>
+              <div class="kpi-label">单位冷量电耗</div>
+              <div class="kpi-trend" :class="reportData.kpi.unitPowerTrend <= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.unitPowerTrend <= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.unitPowerTrend >= 0 ? '+' : '' }}{{ reportData.kpi.unitPowerTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card efficiency">
+            <div class="kpi-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="kpi-content">
+              <div class="kpi-value">{{ reportData.kpi.efficiency }}%</div>
+              <div class="kpi-label">系统运行效率</div>
+              <div class="kpi-trend" :class="reportData.kpi.efficiencyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.kpi.efficiencyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.kpi.efficiencyTrend >= 0 ? '+' : '' }}{{ reportData.kpi.efficiencyTrend }}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 系统电量分析 -->
+      <div class="data-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            系统电量分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="powerChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 系统冷量分析 -->
+      <div class="data-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            系统冷量分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="coolingChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 设备分项用电 -->
+      <div class="data-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            设备分项用电
+          </div>
+        </div>
+        <div class="table-container">
+          <table class="device-table">
+            <thead>
+              <tr>
+                <th>设备名称</th>
+                <th>设备类型</th>
+                <th>用电量 (kWh)</th>
+                <th>占比 (%)</th>
+                <th>同比变化</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in reportData.devicePower" :key="index">
+                <td>{{ item.deviceName }}</td>
+                <td>{{ item.deviceType }}</td>
+                <td>{{ item.power }}</td>
+                <td>{{ item.ratio }}%</td>
+                <td>
+                  <span class="trend-value" :class="item.trend >= 0 ? 'down' : 'up'">
+                    {{ item.trend >= 0 ? '+' : '' }}{{ item.trend }}%
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- EER趋势分析 -->
+      <div class="data-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            EER趋势分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="eerChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 日报表明细 -->
+      <div class="data-section" v-if="reportForm.periodType === 'day'">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            日报表明细
+          </div>
+        </div>
+        <div class="table-container">
+          <table class="detail-table">
+            <thead>
+              <tr>
+                <th>日期</th>
+                <th>系统EER</th>
+                <th>系统COP</th>
+                <th>系统电量 (kWh)</th>
+                <th>系统冷量 (kWh)</th>
+                <th>单位电耗 (kWh/kWh)</th>
+                <th>运行效率 (%)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in reportData.dailyDetail" :key="index">
+                <td>{{ item.date }}</td>
+                <td>{{ item.eer }}</td>
+                <td>{{ item.cop }}</td>
+                <td>{{ item.power }}</td>
+                <td>{{ item.cooling }}</td>
+                <td>{{ item.unitPower }}</td>
+                <td>{{ item.efficiency }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div class="empty-state" v-if="!reportData">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+        <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+      </svg>
+      <div class="empty-text">请选择时间范围并点击"生成报表"按钮</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "MachineReport",
+  data() {
+    return {
+      reportForm: {
+        periodType: "day",
+        startTime: "",
+        endTime: "",
+        machineRoomId: ""
+      },
+      reportData: null,
+      powerChart: null,
+      coolingChart: null,
+      eerChart: null
+    };
+  },
+  computed: {
+    datePickerType() {
+      const map = {
+        hour: "datetime",
+        day: "date",
+        month: "month",
+        year: "year"
+      };
+      return map[this.reportForm.periodType];
+    }
+  },
+  mounted() {
+    this.initDefaultDate();
+    this.$nextTick(() => {
+      this.generateReport();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    initDefaultDate() {
+      const now = new Date();
+      const end = new Date(now);
+      const start = new Date(now);
+      
+      if (this.reportForm.periodType === "day") {
+        start.setDate(start.getDate() - 30);
+        this.reportForm.startTime = start.toISOString().slice(0, 10) + " 00:00:00";
+        this.reportForm.endTime = end.toISOString().slice(0, 10) + " 23:59:59";
+      } else if (this.reportForm.periodType === "month") {
+        start.setMonth(start.getMonth() - 6);
+        this.reportForm.startTime = start.toISOString().slice(0, 7) + "-01 00:00:00";
+        this.reportForm.endTime = end.toISOString().slice(0, 7) + "-28 23:59:59";
+      } else if (this.reportForm.periodType === "year") {
+        start.setFullYear(start.getFullYear() - 2);
+        this.reportForm.startTime = start.toISOString().slice(0, 4) + "-01-01 00:00:00";
+        this.reportForm.endTime = end.toISOString().slice(0, 4) + "-12-31 23:59:59";
+      } else {
+        start.setHours(start.getHours() - 24);
+        this.reportForm.startTime = start.toISOString().slice(0, 19).replace('T', ' ');
+        this.reportForm.endTime = end.toISOString().slice(0, 19).replace('T', ' ');
+      }
+    },
+    handlePeriodChange() {
+      this.initDefaultDate();
+    },
+    generateReport() {
+      if (!this.reportForm.startTime || !this.reportForm.endTime) {
+        this.$message.warning("请选择时间范围");
+        return;
+      }
+
+      const startDate = new Date(this.reportForm.startTime);
+      const endDate = new Date(this.reportForm.endTime);
+      
+      if (startDate > endDate) {
+        this.$message.warning("开始时间不能大于结束时间");
+        return;
+      }
+
+      this.reportData = {
+        title: "冷站机房能效报表",
+        period: `${this.reportForm.startTime} 至 ${this.reportForm.endTime}`,
+        kpi: {
+          eer: 6.5,
+          eerTrend: 8.5,
+          cop: 5.8,
+          copTrend: 6.2,
+          totalPower: 125680,
+          powerTrend: -5.3,
+          totalCooling: 812450,
+          coolingTrend: 3.8,
+          unitPower: 0.155,
+          unitPowerTrend: -8.2,
+          efficiency: 85.6,
+          efficiencyTrend: 4.1
+        },
+        devicePower: [
+          { deviceName: "1号冷水机组", deviceType: "冷水机组", power: 45800, ratio: 36.4, trend: -3.5 },
+          { deviceName: "2号冷水机组", deviceType: "冷水机组", power: 42350, ratio: 33.7, trend: -4.2 },
+          { deviceName: "冷冻泵1", deviceType: "冷冻泵", power: 8650, ratio: 6.9, trend: 1.2 },
+          { deviceName: "冷冻泵2", deviceType: "冷冻泵", power: 8920, ratio: 7.1, trend: 0.8 },
+          { deviceName: "冷却泵1", deviceType: "冷却泵", power: 9480, ratio: 7.5, trend: 2.1 },
+          { deviceName: "冷却泵2", deviceType: "冷却泵", power: 9120, ratio: 7.3, trend: 1.8 },
+          { deviceName: "1号冷却塔", deviceType: "冷却塔", power: 5200, ratio: 4.1, trend: -1.5 },
+          { deviceName: "2号冷却塔", deviceType: "冷却塔", power: 4850, ratio: 3.9, trend: -2.0 },
+          { deviceName: "风机盘管", deviceType: "末端设备", power: 1310, ratio: 1.0, trend: 0.5 },
+          { deviceName: "其他设备", deviceType: "其他", power: 0, ratio: 2.1, trend: 0 }
+        ],
+        dailyDetail: this.generateDailyDetail(startDate, endDate)
+      };
+
+      this.$nextTick(() => {
+        this.initCharts();
+      });
+    },
+    generateDailyDetail(startDate, endDate) {
+      const detail = [];
+      const current = new Date(startDate);
+      
+      while (current <= endDate) {
+        const baseEER = 6.0 + Math.random() * 1.5;
+        const baseCOP = 5.3 + Math.random() * 1.3;
+        const basePower = 3500 + Math.random() * 1000;
+        const baseCooling = basePower * baseEER;
+        
+        detail.push({
+          date: current.toISOString().slice(0, 10),
+          eer: baseEER.toFixed(2),
+          cop: baseCOP.toFixed(2),
+          power: Math.round(basePower),
+          cooling: Math.round(baseCooling),
+          unitPower: (1 / baseEER).toFixed(3),
+          efficiency: (80 + Math.random() * 10).toFixed(1)
+        });
+        
+        current.setDate(current.getDate() + 1);
+      }
+      
+      return detail;
+    },
+    initCharts() {
+      this.initPowerChart();
+      this.initCoolingChart();
+      this.initEERChart();
+    },
+    initPowerChart() {
+      if (!this.$refs.powerChart) return;
+      
+      if (this.powerChart) {
+        this.powerChart.dispose();
+      }
+      
+      this.powerChart = echarts.init(this.$refs.powerChart);
+      
+      const dates = this.reportData.dailyDetail.map(item => item.date);
+      const powerData = this.reportData.dailyDetail.map(item => item.power);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["系统电量"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "系统电量",
+            type: "line",
+            smooth: true,
+            data: powerData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(84, 112, 198, 0.5)" },
+                { offset: 1, color: "rgba(84, 112, 198, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.powerChart.setOption(option);
+    },
+    initCoolingChart() {
+      if (!this.$refs.coolingChart) return;
+      
+      if (this.coolingChart) {
+        this.coolingChart.dispose();
+      }
+      
+      this.coolingChart = echarts.init(this.$refs.coolingChart);
+      
+      const dates = this.reportData.dailyDetail.map(item => item.date);
+      const coolingData = this.reportData.dailyDetail.map(item => item.cooling);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["系统冷量"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "系统冷量",
+            type: "line",
+            smooth: true,
+            data: coolingData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.coolingChart.setOption(option);
+    },
+    initEERChart() {
+      if (!this.$refs.eerChart) return;
+      
+      if (this.eerChart) {
+        this.eerChart.dispose();
+      }
+      
+      this.eerChart = echarts.init(this.$refs.eerChart);
+      
+      const dates = this.reportData.dailyDetail.map(item => item.date);
+      const eerData = this.reportData.dailyDetail.map(item => item.eer);
+      const copData = this.reportData.dailyDetail.map(item => item.cop);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["系统EER", "系统COP"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "系统EER",
+            type: "line",
+            smooth: true,
+            data: eerData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "系统COP",
+            type: "line",
+            smooth: true,
+            data: copData,
+            itemStyle: {
+              color: "#EE6666"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.5)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.eerChart.setOption(option);
+    },
+    exportToExcel() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为Excel格式");
+    },
+    exportToPDF() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为PDF格式");
+    },
+    handleResize() {
+      if (this.powerChart) this.powerChart.resize();
+      if (this.coolingChart) this.coolingChart.resize();
+      if (this.eerChart) this.eerChart.resize();
+    },
+    destroyCharts() {
+      if (this.powerChart) {
+        this.powerChart.dispose();
+        this.powerChart = null;
+      }
+      if (this.coolingChart) {
+        this.coolingChart.dispose();
+        this.coolingChart = null;
+      }
+      if (this.eerChart) {
+        this.eerChart.dispose();
+        this.eerChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.machine-report {
+  padding: 0.16rem;
+  min-height: calc(100vh - 0.32rem);
+}
+
+.filter-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .filter-row {
+    display: flex;
+    gap: 0.15rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .filter-actions {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-btn {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+
+        &.el-button--primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+          }
+        }
+
+        &.el-button--success {
+          background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+          }
+        }
+
+        &.el-button--warning {
+          background: linear-gradient(135deg, #FAC858 0%, #FFA726 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
+          }
+        }
+
+        svg {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+      }
+    }
+  }
+}
+
+.report-content {
+  .report-header {
+    background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+    border: 1px solid rgba(21, 225, 253, 0.2);
+
+    .report-title {
+      font-size: 0.18rem;
+      color: #15e1fd;
+      font-weight: bold;
+      margin-bottom: 0.08rem;
+    }
+
+    .report-period {
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .kpi-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+
+      .section-title {
+        font-size: 0.16rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+
+        svg {
+          width: 0.18rem;
+          height: 0.18rem;
+          fill: #15e1fd;
+        }
+      }
+    }
+
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .kpi-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.eer {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.cop {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.power {
+          background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        &.cooling {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.unit-power {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        &.efficiency {
+          background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, rgba(255, 105, 180, 0.2) 100%);
+          border: 1px solid rgba(238, 130, 238, 0.3);
+        }
+
+        .kpi-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .kpi-content {
+          flex: 1;
+
+          .kpi-value {
+            font-size: 0.22rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .kpi-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.05rem;
+          }
+
+          .kpi-trend {
+            display: flex;
+            align-items: center;
+            font-size: 0.12rem;
+            font-weight: 500;
+
+            svg {
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.03rem;
+            }
+
+            &.up {
+              color: #91CC75;
+            }
+
+            &.down {
+              color: #EE6666;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .data-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+
+      .section-title {
+        font-size: 0.16rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+
+        svg {
+          width: 0.18rem;
+          height: 0.18rem;
+          fill: #15e1fd;
+        }
+      }
+    }
+
+    .chart-container {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0.04rem;
+      padding: 0.1rem;
+
+      .chart {
+        width: 100%;
+        height: 4rem;
+      }
+    }
+
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .device-table,
+      .detail-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 8rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.14rem 0.12rem;
+              text-align: left;
+              font-size: 0.14rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.14rem 0.12rem;
+              font-size: 0.13rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+
+              .trend-value {
+                display: inline-block;
+                padding: 0.04rem 0.12rem;
+                border-radius: 0.04rem;
+                font-size: 0.12rem;
+                font-weight: 500;
+
+                &.up {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                }
+
+                &.down {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #ffffff;
+  opacity: 0.5;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: #ffffff;
+    margin-bottom: 0.2rem;
+  }
+
+  .empty-text {
+    font-size: 0.16rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .filter-section {
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+
+      .filter-item {
+        width: 100%;
+      }
+
+      .filter-actions {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/components/hostChart.vue b/src/views/newCenterairC/sysMonitor/components/hostChart.vue
new file mode 100644
index 0000000..da9e4c5
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/hostChart.vue
@@ -0,0 +1,531 @@
+<template>
+  <div>
+    <div class="historyCharts" ref="chart_ref"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    temArray: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      chartData1: [],
+      chartData2: [],
+      chartData3: [],
+      chartData4: [],
+      chartData5: [],
+      bottomData: [],
+    };
+  },
+  watch: {
+    temArray: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.chartData1 = []; // 清空 chartData1
+          this.chartData2 = []; // 清空 chartData2
+          this.bottomData = []; // 清空 bottomData
+          console.log("charts传值", newVal);
+          let data = newVal;
+          if (data.length > 0) {
+            // 获取 title 和 titleStr 数组
+            const title = data[0].title;
+            const titleStr = data[1].titleStr;
+            // 获取 dataList 数组
+            const dataList = data[3].dataList;
+
+            // 遍历 dataList 数组
+            dataList.forEach((item) => {
+              // 查找 name 在 title 数组中的索引
+              const index = title.indexOf(item.name);
+              if (index !== -1) {
+                // 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值
+                item.name = titleStr[index];
+              }
+            });
+            console.log("处理后的data", data);
+            let name1 = "";
+            let name2 = "";
+            let name3 = "";
+            let name4 = "";
+            let name5 = "";
+
+            data.forEach((item) => {
+              if (item.timeStr) {
+                this.bottomData = item.timeStr;
+              }
+
+              if (item.dataList) {
+                // 用于存储 name 的数组
+                const names = [];
+                // 用于存储 chartData 的数组
+                const chartData = [];
+
+                // 查找包含“负载”的数据
+                let loadDataIndex = -1;
+                for (let i = 0; i < item.dataList.length; i++) {
+                  if (
+                    item.dataList[i].name &&
+                    item.dataList[i].name.includes("负载")
+                  ) {
+                    loadDataIndex = i;
+                    this.chartData5 = item.dataList[i].value;
+                    name5 = item.dataList[i].name;
+                    break;
+                  }
+                }
+
+                // 剔除包含“负载”的数据
+                if (loadDataIndex !== -1) {
+                  item.dataList.splice(loadDataIndex, 1);
+                }
+
+                // 处理剩下的数据
+                item.dataList.slice(0, 4).forEach((val, index) => {
+                  if (val.name) {
+                    chartData[index] = val.value;
+                    names[index] = val.name;
+                  }
+                });
+
+                // 将 chartData 数组的值赋值给 this.chartDataX
+                this.chartData1 = chartData[0] || "";
+                this.chartData2 = chartData[1] || "";
+                this.chartData3 = chartData[2] || "";
+                this.chartData4 = chartData[3] || "";
+
+                // 将 names 数组的值赋值给外部作用域的变量
+                name1 = names[0] || "";
+                name2 = names[1] || "";
+                name3 = names[2] || "";
+                name4 = names[3] || "";
+              }
+            });
+            // console.log("this.chartData1", this.chartData1);
+            // console.log("this.chartData2", this.chartData2);
+            // console.log("this.chartData3", this.chartData3);
+            // console.log("this.chartData4", this.chartData4);
+            // console.log("this.chartData5", this.chartData5);
+            this.$nextTick(() => {
+              // 计算双y轴最大最小值，
+              var Min1 = 0,
+                Min2 = 0,
+                Max1 = Math.ceil(
+                  Math.max(
+                    ...this.chartData1,
+                    ...this.chartData2,
+                    ...this.chartData3,
+                    ...this.chartData4
+                  )
+                ),
+                Max2 = Math.ceil(Math.max(...this.chartData5));
+              console.log("Min1", Min1);
+              console.log("Min2", Min2);
+              console.log("Max1", Max1);
+              console.log("Max2", Max2);
+              const adapterOption = {
+                xAxis: {
+                  data: this.bottomData,
+                },
+                yAxis: [
+                  //两个y轴
+                  {
+                    min: Min1,
+                    max: Max1,
+                    splitNumber: 10,
+                    interval: (Max1 - Min1) / 10,
+                  },
+                  {
+                    min: Min2,
+                    max: Max2,
+                    splitNumber: 10,
+                    interval: (Max2 - Min2) / 10,
+                  },
+                ],
+                series: [
+                  {
+                    yAxisIndex: 0,
+                    name: name1,
+                    data: this.chartData1,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name: name2,
+                    data: this.chartData2,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name: name3,
+                    data: this.chartData3,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name: name4,
+                    data: this.chartData4,
+                  },
+                  {
+                    yAxisIndex: 1,
+                    name: name5,
+                    data: this.chartData5,
+                  },
+                ],
+              };
+              this.chartInstance.setOption(adapterOption);
+              // 手动的调用图标对象的 resize 才能产生效果
+              this.chartInstance.resize();
+            });
+          } else {
+            this.$nextTick(() => {
+              const adapterOption = {
+                xAxis: {
+                  data: [],
+                },
+                yAxis: [
+                  //两个y轴
+                  {
+                    min: 0,
+                    max: 0,
+                    splitNumber: 10,
+                    interval: 0,
+                  },
+                  {
+                    min: 0,
+                    max: 0,
+                    splitNumber: 10,
+                    interval: 0,
+                  },
+                ],
+                series: [
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                ],
+              };
+              this.chartInstance.setOption(adapterOption);
+              //手动的调用图标对象的resize才能产生效果
+              this.chartInstance.resize();
+              this.screenAdapter();
+            });
+          }
+        }
+      },
+    },
+  },
+  mounted() {
+    this.initChart();
+    this.screenAdapter();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      var Min1 = 0,
+        Min2 = 0,
+        Max1 = Math.ceil(
+          Math.max(
+            ...this.chartData1,
+            ...this.chartData2,
+            ...this.chartData3,
+            ...this.chartData4
+          ) + 4
+        ),
+        Max2 = Math.ceil(Math.max(...this.chartData5) + 4);
+      const chartRef = this.$refs.chart_ref;
+      if (chartRef) {
+        // 初始化图表的代码
+        this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+        this.option = {
+          tooltip: {
+            trigger: "axis",
+            // 自定义 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)
+                var marker =
+                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                  params[i].color +
+                  '"></span>';
+                // 根据不同的seriesName 返回不同的单位
+                if (seriesName.includes("负载")) {
+                  res +=
+                    marker +
+                    seriesName +
+                    ":" +
+                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                    value +
+                    " " +
+                    "%" +
+                    "</span><br>";
+                } else {
+                  res +=
+                    marker +
+                    seriesName +
+                    ":" +
+                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                    value +
+                    " " +
+                    "℃" +
+                    "</span><br>";
+                }
+              }
+              return res;
+            },
+            textStyle: {
+              fontSize: titleFontSize * 1.5,
+            },
+          },
+          legend: {
+            show: true,
+            top: 0,
+            textStyle: {
+              color: "white",
+              fontSize: titleFontSize * 1.5,
+            },
+          },
+          grid: {
+            top: "10%",
+            left: "4%",
+            right: "6%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            //设置为true代表离零刻度间隔一段距离
+            boundaryGap: true,
+            // 修饰刻度标签的颜色即x坐标数据
+            axisLabel: {
+              // interval: 0, //强制显示所有x轴数据
+              // rotate: 30, //x轴坐标字体倾斜30度
+              color: "rgba(255, 255, 255, 1)",
+              textStyle: {
+                fontSize: titleFontSize * 1.5,
+              },
+            },
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            // x坐标轴的颜色
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#e2e6f0",
+              },
+            }, //x轴分割线
+            data: this.bottomData,
+          },
+          yAxis: [
+            {
+              min: Min1,
+              max: Max1,
+              splitNumber: 10,
+              interval: (Max1 - Min1) / 10,
+              // 设置 name 的样式
+              nameTextStyle: {
+                color: "rgba(255, 255, 255, 1)",
+                fontSize: titleFontSize * 2,
+              },
+              miniInterval: 5,
+              type: "value",
+              // 修饰刻度标签的颜色即y坐标数据
+              axisLabel: {
+                color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
+              },
+              // 显示y坐标轴
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#365576", // 设置 y 轴线的颜色
+                },
+              },
+              //y轴分割线段数
+              // splitNumber: 10,
+              // 修改y轴分割线的颜色
+              splitLine: {
+                lineStyle: {
+                  color: "#1a3d62", // 设置分割线的颜色
+                  type: "dashed", // 设置分割线为虚线
+                },
+              },
+            },
+            {
+              min: Min2,
+              max: Max2,
+              splitNumber: 10,
+              interval: (Max2 - Min2) / 10,
+              // 设置 name 的样式
+              nameTextStyle: {
+                color: "rgba(255, 255, 255, 1)",
+                fontSize: titleFontSize * 1.5,
+              },
+              miniInterval: 5,
+              type: "value",
+              name: "负载", // y 轴的单位描述
+              // 修饰刻度标签的颜色即y坐标数据
+              axisLabel: {
+                color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
+              },
+              // 显示y坐标轴
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#365576", // 设置 y 轴线的颜色
+                },
+              },
+              //y轴分割线段数
+              // splitNumber: 10,
+              // 修改y轴分割线的颜色
+              splitLine: {
+                lineStyle: {
+                  color: "#1a3d62", // 设置分割线的颜色
+                  type: "dashed", // 设置分割线为虚线
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData1,
+              yAxisIndex: 0,
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线点的颜色
+              },
+              lineStyle: {
+                color: "#00CED1", //折线点的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData2,
+              yAxisIndex: 0,
+              //折线颜色
+              itemStyle: {
+                color: "#3ba272", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData3,
+              yAxisIndex: 0,
+              //折线颜色
+              itemStyle: {
+                color: "#1a69f1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData4,
+              yAxisIndex: 0,
+              //折线颜色
+              itemStyle: {
+                color: "#ee6666", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData5,
+              yAxisIndex: 1,
+              //折线颜色
+              itemStyle: {
+                color: "#fac858", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+            },
+          ],
+        };
+        //把配置项给实例对象
+        this.chartInstance.setOption(this.option, true);
+      } else {
+        console.error("未找到有效的 DOM 元素");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.historyCharts {
+  width: 100%;
+  height: 4.4rem;
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/components/lineChildren.vue b/src/views/newCenterairC/sysMonitor/components/lineChildren.vue
new file mode 100644
index 0000000..0f3f6ff
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/lineChildren.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="line-container">
+    <!-- 第一个圆点 -->
+    <div class="dot dot-start"></div>
+    <!-- 第一条直线 -->
+    <div
+      class="line line1"
+      :style="{
+        transform: `rotate(${angle1}deg)`,
+        width: lineWidth1Rem + 'rem'
+      }"
+    ></div>
+    <!-- 中间圆点 -->
+    <div
+      class="dot dot-mid"
+      :style="{
+        top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem',
+        left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem'
+      }"
+    ></div>
+    <!-- 第二条直线 -->
+    <div
+      class="line line2"
+      :style="{
+        top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem',
+        left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem',
+        transform: `rotate(${angle2}deg)`,
+        width: lineWidth2Rem + 'rem'
+      }"
+    ></div>
+    <!-- 最后一个圆点 -->
+    <div
+      class="dot dot-end"
+      :style="{
+        top: endDotTop + 'rem',
+        left: endDotLeft + 'rem'
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 第一条直线的角度
+    angle1: {
+      type: Number,
+      default: 0
+    },
+    // 第二条直线的角度
+    angle2: {
+      type: Number,
+      default: 0
+    },
+    // 第一条直线的宽度（px）
+    lineWidth1: {
+      type: Number,
+      default: 100
+    },
+    // 第二条直线的宽度（px）
+    lineWidth2: {
+      type: Number,
+      default: 100
+    }
+  },
+  computed: {
+    lineWidth1Rem() {
+      return this.lineWidth1 / 100;
+    },
+    lineWidth2Rem() {
+      return this.lineWidth2 / 100;
+    },
+    endDotTop() {
+      // 第一条直线终点的 y 坐标
+      const firstLineEndY = 1 + Math.sin((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem;
+      // 第二条直线在第一条直线基础上终点的 y 坐标偏移量
+      const secondLineYOffset = Math.sin((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem;
+      return firstLineEndY + secondLineYOffset - 0.025;
+    },
+    endDotLeft() {
+      // 第一条直线终点的 x 坐标
+      const firstLineEndX = 1 + Math.cos((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem;
+      // 第二条直线在第一条直线基础上终点的 x 坐标偏移量
+      const secondLineXOffset = Math.cos((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem;
+      return firstLineEndX + secondLineXOffset - 0.025;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.line-container {
+  position: relative;
+}
+
+.line {
+  position: absolute;
+  height: 1px;
+  background-color: rgba(0, 255, 255, 0.5);
+  transform-origin: left center;
+}
+
+.line1 {
+  top: 1rem;
+  left: 1rem;
+}
+
+.dot {
+  position: absolute;
+  width: 0.05rem;
+  height: 0.05rem;
+  background-color: aqua;
+  border-radius: 50%;
+}
+
+.dot-start {
+  top: 0.97rem;
+  left: 0.97rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/newCenterairC/sysMonitor/components/lineSquare.vue b/src/views/newCenterairC/sysMonitor/components/lineSquare.vue
new file mode 100644
index 0000000..f960fa1
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/lineSquare.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="crossed-lines-container">
+      <!-- 上边线 -->
+      <div
+        class="line horizontal-line"
+        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% - ${(verticalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 右边线 -->
+      <div
+        class="line vertical-line"
+        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% + ${(horizontalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 下边线 -->
+      <div
+        class="line horizontal-line"
+        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% + ${(verticalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 左边线 -->
+      <div
+        class="line vertical-line"
+        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% - ${(horizontalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      // 水平方向（上下边）的直线长度
+      horizontalLength: {
+        type: Number,
+        default: 100
+      },
+      // 垂直方向（左右边）的直线长度
+      verticalLength: {
+        type: Number,
+        default: 100
+      },
+      // 直线交叉时超出的长度
+      overlap: {
+        type: Number,
+        default: 10
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .crossed-lines-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .line {
+    position: absolute;
+    background-color: rgb(45, 121, 236,0.7);
+  }
+  
+  .horizontal-line {
+    height: 0.01rem;
+  }
+  
+  .vertical-line {
+    width: 0.01rem;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/newCenterairC/sysMonitor/components/loadData.vue b/src/views/newCenterairC/sysMonitor/components/loadData.vue
new file mode 100644
index 0000000..9a3c7b1
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/loadData.vue
@@ -0,0 +1,450 @@
+<template>
+  <div>
+    <div class="sys_charts" ref="sys_charts"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    hostData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      loadPercent: "",
+    };
+  },
+  watch: {
+    hostData: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal, oldVal) {
+        if (newVal) {
+          console.log("charts传值", newVal);
+          let data = newVal;
+          if (data.length > 0) {
+            data.forEach((item) => {
+              if (item.otherName === "负载") {
+                this.loadPercent = item.curValue;
+              }
+            });
+            this.$nextTick(() => {
+              // 销毁现有的 ECharts 实例
+              if (this.chartInstance) {
+                this.chartInstance.dispose();
+              }
+              // 重新初始化图表
+              this.initChart();
+            });
+          } else {
+          }
+        }
+      },
+    },
+  },
+  mounted() {
+    this.initChart();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 计算颜色设置的函数
+    getAxisLineColor(useData, maxData) {
+      // 计算阈值
+      // 真实值大于最大值的0.75才使用颜色渐变
+      const threshold = maxData * 0.75;
+
+      // 判断实际值是否超过阈值
+      if (useData > threshold) {
+        return [
+          [
+            useData / maxData,
+            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(0,127,208,1)" },
+              { offset: 0.6, color: "rgba(0,127,208,1)" },
+              { offset: 1, color: "rgba(69, 235, 167,0.5)" },
+            ]),
+          ],
+          [1, "rgba(28,128,245,.0)"],
+        ];
+      } else {
+        return [
+          [
+            useData / maxData,
+            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(0,127,208,1)" },
+              { offset: 0.5, color: "rgba(0,127,208,1)" },
+              { offset: 1, color: "rgba(0,127,208,1)" },
+            ]),
+          ],
+          [1, "rgba(28,128,245,.0)"],
+        ];
+      }
+    },
+    //初始化chartInstance2对象 折线图
+    initChart() {
+      var value = 80;
+      // 初始化数据
+      const dataArr = this.loadPercent; //负载数据
+      const dataX = 100;
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
+      this.chartInstance = echarts.init(this.$refs.sys_charts);
+      this.option = {
+        backgroundStyle: {
+          borderWidth: 1,
+          color: "transparent",
+        },
+        title: [
+          {
+            text: `${dataArr} %`,
+            bottom: titleFontSize,
+            left: "center",
+            textStyle: {
+              fontSize: titleFontSize * 1.5, //标记
+              color: "#ffff",
+              fontWeight: 800,
+            },
+            triggerEvent: true,
+          },
+        ],
+
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            name: "最外部进度条",
+            type: "gauge",
+            radius: "99%",
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    dataArr / dataX,
+                    {
+                      type: "linear",
+                      x: 0,
+                      y: 1,
+                      x2: 0.5,
+                      y2: 0.5,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "rgba(0,0,0,0)", // 0% 处的颜色
+                        },
+                        {
+                          offset: 0.8,
+                          color: "#195b9d", // 100% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#0a2256", // 100% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
+                    },
+                  ],
+                  [1, "#083158"],
+                ],
+                width: 5, //标记
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              // 标题
+              show: false,
+            },
+            data: [
+              {
+                name: "title",
+                value: dataArr,
+              },
+            ],
+            pointer: {
+              show: false,
+            },
+            animationDuration: 4000,
+          },
+          {
+            name: "刻度尺",
+            type: "gauge",
+            radius: "88%",
+            splitNumber: 10, // 刻度数量
+            min: 0, // 最小刻度
+            max: dataX, // 最大刻度
+            // 分隔线
+            splitLine: {
+              show: true,
+              length: 12,
+              lineStyle: {
+                width: 3,
+                color: "#12E5FE",
+              },
+            },
+            // 刻度线
+            axisTick: {
+              show: true,
+              splitNumber: 10,
+              length: 5,
+              lineStyle: {
+                color: "#12E5FE",
+                width: 2,
+              },
+            },
+            // 刻度标签
+            axisLabel: {
+              distance: -8, //刻度数字离轴线的距离
+              color: "#CEF3FE",
+              fontSize: "6",
+              fontWeight: 600,
+            },
+            detail: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                width: -10, //刻度离轴线的距离
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0.6,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0.85,
+                          color: "#031F46", // 0% 处的颜色
+                        },
+                        {
+                          offset: 0.93,
+                          color: "#060d25", // 100% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#12D7EF", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ],
+                ],
+              },
+            },
+          },
+          {
+            name: "外部指针",
+            type: "gauge",
+            radius: "90%",
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
+                  [dataArr / dataX + 0.003, "#e43c59"],
+                  [1, "rgba(0,0,0,0)"],
+                ],
+                width: 33,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              // 标题
+              show: false,
+            },
+            data: [
+              {
+                name: "title",
+                value: dataArr,
+              },
+            ],
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            name: "内层带指针",
+            type: "gauge",
+            radius: "60%",
+            splitNumber: 10, // 刻度数量
+            min: 0, // 最小刻度
+            max: dataX, // 最大刻度
+            // 仪表盘轴线相关配置
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0.59,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0.72,
+                          color: "#032046",
+                        },
+                        {
+                          offset: 0.94,
+                          color: "#086989",
+                        },
+                        {
+                          offset: 0.98,
+                          color: "#0FAFCB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0EA4C1",
+                        },
+                      ],
+                    },
+                  ],
+                ],
+                width: 1000,
+              },
+            },
+            // 分隔线
+            splitLine: {
+              show: false,
+            },
+            // 刻度线
+            axisTick: {
+              show: false,
+            },
+            // 刻度标签
+            axisLabel: {
+              show: false,
+            },
+            // 仪表盘指针
+            pointer: {
+              show: true,
+              length: "95%",
+              width: 5, // 指针粗细
+            },
+            // 仪表盘指针样式
+            itemStyle: {
+              color: "#01eaf8",
+            },
+            data: [
+              {
+                value: dataArr,
+              },
+            ],
+            detail: {
+              show: false,
+            },
+          },
+
+          // 中间半圆装饰
+          {
+            type: "gauge",
+            radius: "110%", // 大小
+            center: ["50%", "127%"],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // 轴线样式
+                width: 4, // 宽度
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#00f3f9", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#000", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              // 刻度
+              show: false,
+            },
+            splitLine: {
+              // 分割线
+              show: false,
+            },
+            axisLabel: {
+              // 刻度标签
+              show: false,
+            },
+            pointer: {
+              // 仪表盘指针
+              show: false,
+            },
+            detail: {
+              // 仪表盘详情
+              show: false,
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+    screenAdapter() {
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
+      const adapterOption = {};
+      this.chartInstance.setOption(adapterOption);
+      this.chartInstance.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sys_charts {
+  width: 2rem;
+  height: 2rem;
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/components/performanceChart.vue b/src/views/newCenterairC/sysMonitor/components/performanceChart.vue
new file mode 100644
index 0000000..7aa38da
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/performanceChart.vue
@@ -0,0 +1,416 @@
+<template>
+    <div>
+      <div class="historyCharts" ref="chart_ref"></div>
+    </div>
+  </template>
+  
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    props: {
+      temArray: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        chartInstance: null,
+        option: {},
+        chartData1: [],
+        chartData2: [],
+        chartData3: [],
+        chartData4: [],
+        bottomData: [],
+      };
+    },
+    watch: {
+      temArray: {
+        immediate: true, // 页面加载时立即触发一次监听
+        handler(newVal, oldVal) {
+          if (newVal) {
+            this.chartData1 = []; // 清空 chartData1
+            this.chartData2 = []; // 清空 chartData2
+            this.bottomData = []; // 清空 bottomData
+            console.log("charts传值", newVal);
+            let data = newVal;
+            if (data.length > 0) {
+              // 获取 title 和 titleStr 数组
+              const title = data.data[0].title;
+              const titleStr = data.data[1].titleStr;
+              // 获取 dataList 数组
+              const dataList = data.data[3].dataList;
+  
+              // 遍历 dataList 数组
+              dataList.forEach((item) => {
+                // 查找 name 在 title 数组中的索引
+                const index = title.indexOf(item.name);
+                if (index !== -1) {
+                  // 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值
+                  item.name = titleStr[index];
+                }
+              });
+              console.log("处理后的data", data);
+              data.forEach((item) => {
+                if (item.timeStr) {
+                  this.bottomData = item.timeStr;
+                }
+                if (item.dataList) {
+                  let name1 = "";
+                  let name2 = "";
+                  let name3 = "";
+                  let name4 = "";
+                  item.dataList.forEach((val, index) => {
+                    if (val.name) {
+                      switch (index) {
+                        case 0:
+                          this.chartData1 = val.value;
+                          name1 = val.name;
+                          break;
+                        case 1:
+                          this.chartData2 = val.value;
+                          name2 = val.name;
+                          break;
+                        case 2:
+                          this.chartData3 = val.value;
+                          name3 = val.name;
+                          break;
+                        case 3:
+                          this.chartData4 = val.value;
+                          name4 = val.name;
+                          break;
+                        default:
+                          break;
+                      }
+                    }
+                  });
+                }
+              });
+              this.$nextTick(() => {
+                const adapterOption = {
+                  xAxis: {
+                    data: this.bottomData,
+                  },
+                  series: [
+                    {
+                      yAxisIndex: 0,
+                      name:name1,
+                      data: this.chartData1,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name2,
+                      data: this.chartData2,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name3,
+                      data: this.chartData3,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name4,
+                      data: this.chartData4,
+                    },
+                  ],
+                };
+                this.chartInstance.setOption(adapterOption);
+                //手动的调用图标对象的resize才能产生效果
+                this.chartInstance.resize();
+              });
+            } else {
+              this.$nextTick(() => {
+                const adapterOption = {
+                  xAxis: {
+                    data: [],
+                  },
+                  series: [
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                  ],
+                };
+                this.chartInstance.setOption(adapterOption);
+                //手动的调用图标对象的resize才能产生效果
+                this.chartInstance.resize();
+                this.screenAdapter();
+              });
+            }
+          }
+        },
+      },
+    },
+    mounted() {
+      this.initChart();
+      this.screenAdapter();
+    },
+    destroyed() {
+      //取消监听器
+      window.removeEventListener("resize", this.screenAdapter);
+    },
+    methods: {
+      // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+      screenAdapter() {
+        //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+        //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+        const adapterOption = {};
+        //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+        this.chartInstance.setOption(adapterOption);
+        //手动的调用图标对象的resize才能产生效果
+        this.chartInstance.resize();
+      },
+      //初始化chartInstance对象
+      initChart() {
+        const chartRef = this.$refs.chart_ref;
+        if (chartRef) {
+          // 初始化图表的代码
+          this.chartInstance = echarts.init(this.$refs.chart_ref);
+          this.option = {
+            tooltip: {
+              trigger: "axis",
+            },
+            legend: {
+              show: true,
+              top: 0,
+              textStyle: {
+                color: "white",
+              },
+            },
+            grid: {
+              top: "10%",
+              left: "4%",
+              right: "6%",
+              bottom: "3%",
+              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轴分割线
+              data: this.bottomData,
+            },
+            yAxis: {
+              min: 0,
+              // max:20,
+              // // // min:'dataMin',
+              // // // max:'dataMax',
+              // name: "kwh", // 第一个 y 轴的单位描述
+              // 设置 name 的样式
+              nameTextStyle: {
+                color: "rgba(255, 255, 255, 1)",
+                fontSize: 12,
+              },
+              miniInterval: 5,
+              type: "value",
+              // 修饰刻度标签的颜色即y坐标数据
+              axisLabel: {
+                color: "rgba(255, 255, 255, 1)",
+              },
+              // 显示y坐标轴
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "#365576", // 设置 y 轴线的颜色
+                },
+              },
+              //y轴分割线段数
+              // splitNumber: 10,
+              // 修改y轴分割线的颜色
+              splitLine: {
+                lineStyle: {
+                  color: "#1a3d62", // 设置分割线的颜色
+                  type: "dashed", // 设置分割线为虚线
+                },
+              },
+            },
+            series: [
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData1,
+                //折线颜色
+                itemStyle: {
+                  color: "#1a69f1", //折线点的颜色
+                },
+                lineStyle: {
+                  color: "#1a69f1", //折线点的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                // 区域填充样式，添加渐变背景
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+              },
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData2,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+              },
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData3,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+              },
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData4,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+              },
+            ],
+          };
+          //把配置项给实例对象
+          this.chartInstance.setOption(this.option, true);
+        } else {
+          console.error("未找到有效的 DOM 元素");
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .historyCharts {
+    width: 100%;
+    height:3rem;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/newCenterairC/sysMonitor/components/titleImg.vue b/src/views/newCenterairC/sysMonitor/components/titleImg.vue
new file mode 100644
index 0000000..352709f
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/components/titleImg.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="title-img">
+    <img src="../../../../assets/images/big.png" class="img1" alt="" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.title-img {
+  position: relative;
+}
+.img1 {
+  width: 0.8rem;
+  height: 0.5rem;
+  z-index: 10;
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/hostDetails.vue b/src/views/newCenterairC/sysMonitor/hostDetails.vue
new file mode 100644
index 0000000..bb6dbdc
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/hostDetails.vue
@@ -0,0 +1,2059 @@
+<template>
+  <div class="monitor" v-loading="loading">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        @click="goSys"
+        src="../../../assets/images/title-center.png"
+        alt=""
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
+    <div class="host-detail">
+      <div class="detail-top">
+        <div class="detail-top-left">
+          <img
+            class="host-img1"
+            src="../../../assets/images/host-img3.png"
+            alt=""
+            v-if="isMagnetic === 'true'"
+          />
+          <img
+            class="host-img1"
+            src="../../../assets/images/host-img6.png"
+            alt=""
+            v-if="deviceName === '1号螺杆机'"
+          />
+          <img
+            class="host-img1"
+            src="../../../assets/images/host-img4.png"
+            alt=""
+            v-if="deviceName === '2号离心机'"
+          />
+          <div class="host-name">{{ deviceName }}</div>
+          <!-- 冷凝器蒸发器压力-->
+          <div class="outIn">
+            <!-- <div class="outIn-li in1">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
+            </div>
+            <div class="outIn-li out1">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
+            </div> -->
+            <!-- <div class="outIn-li in2">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">566.6kpa</div>
+            </div>
+            <div class="outIn-li out2">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">566.6kpa</div>
+            </div> -->
+          </div>
+          <!-- 运行状态 -->
+          <img
+            src="../../../assets/images/fan-img.png"
+            :class="{
+              moveClass: hostListClass('1'),
+              fanBlade: isMagnetic === 'true',
+              rightFan1: deviceName === '1号螺杆机',
+              rightFan2: deviceName === '2号离心机',
+            }"
+            alt=""
+          />
+          <!-- 启停状态 -->
+          <div class="startClass" v-if="hostListClass('2')"></div>
+          <!-- 冷冻冷却水流信号 -->
+          <div class="water-flow3">
+            <div class="water-flow-li">
+              <span>冷却水流:</span>
+              <span v-if="hostListClass('21')">接通</span>
+              <span v-else>断开</span>
+              <span
+                class="break"
+                :class="{ connect: hostListClass('21') }"
+              ></span>
+            </div>
+            <div class="water-flow-li">
+              <span>冷冻水流:</span>
+              <span v-if="hostListClass('20')">接通</span>
+              <span v-else>断开</span>
+              <span
+                class="break"
+                :class="{ connect: hostListClass('20') }"
+              ></span>
+            </div>
+          </div>
+          <div class="hostStatus">
+            <div class="hostStatus-li">
+              <span>远程启动信号:</span>
+              <span class="automaticData">{{ onOffObj.curValue }}</span>
+            </div>
+            <div class="hostStatus-li">
+              <span>运行累计时间:</span>
+              <span class="timeData">{{ timeObj.curValue }}小时</span>
+            </div>
+            <div class="hostStatus-li">
+              <span>实时冷冻水温度设点:</span>
+              <span class="dotData">{{ coldWaterSetObj.curValue }}℃</span>
+            </div>
+            <div class="hostStatus-li" v-if="isMagnetic === 'true'">
+              <span>用户冷冻水控制点:</span>
+              <span class="goodData">{{ coldWaterControlObj.curValue }}℃</span>
+              <!-- <span class="badData" v-else>{{ coldWaterControlObj.curValue }}</span> -->
+            </div>
+            <div class="hostStatus-li" v-if="isMagnetic === 'true'">
+              <span>冷水设定值偏移:</span>
+              <!-- <span class="goodData">{{ offsetValuerControlObj.curValue }}℃</span> -->
+              <span class="goodData">
+                <el-input
+                  v-model="offsetValuerControlObj.curValue"
+                  size="mini"
+                  @keyup.enter.native="
+                    handleEnter(offsetValuerControlObj, $event)
+                  "
+                  @input="handleInput(offsetValuerControlObj.curValue)"
+                  @blur="handleBlur()"
+                >
+                  <template #suffix>℃</template></el-input
+                ></span
+              >
+            </div>
+            <div class="hostStatus-li" v-if="isMagnetic === 'true'">
+              <span>最终冷冻水温度设定值:</span>
+              <span class="goodData">{{ finalColdWaterTemp }}℃</span>
+            </div>
+            <!-- <div class="hostStatus-li2" @click="openTimeSwitch">
+              偏移值定时设置
+            </div> -->
+          </div>
+          <!-- 负载 -->
+          <LoadData class="loadData" :hostData="hostData"></LoadData>
+        </div>
+        <div class="detail-top-right">
+          <!-- 温度 -->
+          <host-chart :temArray="temArray"></host-chart>
+        </div>
+      </div>
+      <div class="detail-bottom">
+        <div class="detail-data hostparams">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="details-title">主机参数</div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(item, index) in rightHostData"
+              :key="index"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ item.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(item.curValue),
+                      goodData: isSpecialValue(item.curValue),
+                      badData: item.curValue === '故障',
+                    }"
+                    >{{ item.curValue }}</span
+                  >
+                  <span>{{ item.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData1.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData1.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData2.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData2.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData3.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData3.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span
+                    :class="{
+                      dotData: !isSpecialValue(subItem.curValue),
+                      goodData: isSpecialValue(subItem.curValue),
+                      badData: subItem.curValue === '故障',
+                    }"
+                    >{{ subItem.curValue }}</span
+                  >
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 定时开关内容 -->
+    <el-dialog
+      title="偏移值定时设置"
+      :visible.sync="isOpenTimeSwitch"
+      append-to-body
+      width="800px"
+      class="custom-dialog"
+    >
+      <div class="dialog-content">
+        <div class="device-container" v-loading="loading">
+          <div class="device-li">
+            <div class="device-name">定时名称</div>
+            <div class="device-name">设置时间1</div>
+            <div class="device-name">设置时间2</div>
+            <div class="device-name">偏移值</div>
+            <div class="device-name">当前设定值</div>
+            <div class="device-name">最终设定值</div>
+            <div class="device-name">启动状态</div>
+          </div>
+          <div
+            class="device-li"
+            v-for="(item, index) in delayList"
+            :key="index"
+            :class="{ highlight: item.name.includes(currentWeekday) }"
+          >
+            <div class="device-name">{{ item.name }}</div>
+            <div class="device-name">
+              <el-form @submit.native.prevent>
+                <el-form-item>
+                  <el-input
+                    size="mini"
+                    v-model="item.delayOpenHour"
+                    @keyup.enter.native="
+                      handleSwitchEnter(item, 'openHour', $event)
+                    "
+                    @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
+                  ></el-input> </el-form-item
+              ></el-form>
+              <div class="slip">:</div>
+              <el-form @submit.native.prevent>
+                <el-form-item>
+                  <el-input
+                    size="mini"
+                    v-model="item.delayOpenMinute"
+                    @keyup.enter.native="
+                      handleSwitchEnter(item, 'openMinute', $event)
+                    "
+                    @input="
+                      handleSwitchInput(item, 'delayOpenMinute', 'minute')
+                    "
+                  ></el-input> </el-form-item
+              ></el-form>
+            </div>
+            <div class="device-name">
+              <el-form @submit.native.prevent>
+                <el-form-item>
+                  <el-input
+                    size="mini"
+                    v-model="item.delayCloseHour"
+                    @keyup.enter.native="
+                      handleSwitchEnter(item, 'closeHour', $event)
+                    "
+                    @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
+                  ></el-input></el-form-item
+              ></el-form>
+              <div class="slip">:</div>
+              <el-form @submit.native.prevent>
+                <el-form-item>
+                  <el-input
+                    size="mini"
+                    v-model="item.delayCloseMinute"
+                    @keyup.enter.native="
+                      handleSwitchEnter(item, 'closeMinute', $event)
+                    "
+                    @input="
+                      handleSwitchInput(item, 'delayCloseMinute', 'minute')
+                    "
+                  ></el-input></el-form-item
+              ></el-form>
+            </div>
+            <!-- 三个值，偏移值可输入 -->
+            <div class="device-name">
+              <el-form @submit.native.prevent>
+                <el-form-item>
+                  <el-input
+                    size="mini"
+                    v-model="item.offsetValue"
+                    @keyup.enter.native="
+                      handleOffsetValueEnter(item, 'offset', $event)
+                    "
+                    @input="handleSwitchInput(item, 'offsetValue', 'offset')"
+                  ></el-input></el-form-item
+              ></el-form>
+            </div>
+            <div class="device-name">{{ item.curValue }}</div>
+            <div class="device-name">{{ item.finalOutWaterTemp }}</div>
+            <div class="device-name">
+              <el-switch
+                style="display: block"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="开启"
+                inactive-text="停用"
+                v-model="item.delayStatus"
+                @change="handleSwitchStatus(item)"
+              >
+              </el-switch>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  hostDetailsData,
+  hostTemData,
+  runTime,
+  operationConrol,
+} from "@/api/centerairC/sysMonitor";
+import { policyListData } from "@/api/centerairC/strategy";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { undateTime } from "@/api/aircAndWindc/index";
+import { cpmList } from "@/api/device/gather";
+import LoadData from "./components/loadData.vue";
+import hostChart from "./components/hostChart.vue";
+import titleImg from "./components/titleImg.vue";
+import lineSquare from "./components/lineSquare.vue";
+import { format } from "@/utils/datetime";
+import { getDay } from "@/utils/datetime";
+export default {
+  name: "sysControl",
+  components: { LoadData, hostChart, titleImg, lineSquare },
+  data() {
+    return {
+      loading: false,
+
+      currentDate: new Date(),
+      nowTimer: null,
+      deviceName: "", //主机名称
+      hostData: [], //主机参数
+      condenserPre: "", //冷凝器压力
+      evaporatorPre: "", //蒸发器压力
+      rightHostData: [], //右
+      onOffObj: {}, //远程开关机
+      timeObj: {}, //累计运行时间
+      coldWaterSetObj: {}, //本地出水温度设定值
+      coldWaterControlObj: {}, //远程出水温度设定值
+      offsetValuerControlObj: {}, //偏移值设定
+      compressorData1: [], //压缩机1参数
+      compressorData2: [],
+      compressorData3: [],
+      temArray: [], //冷冻冷却水温度
+      isMagnetic: false,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+      sharedIndex: 0,
+      isOpenTimeSwitch: false,
+      delayList: [],
+      currentWeekday: "",
+
+      timer: null, // 用于存储定时器 ID
+    };
+  },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+    finalColdWaterTemp() {
+      const coldWaterValue =
+        this.coldWaterControlObj.curValue === ""
+          ? 0
+          : parseFloat(this.coldWaterControlObj.curValue);
+      const offsetValue =
+        this.offsetValuerControlObj.curValue === ""
+          ? 0
+          : parseFloat(this.offsetValuerControlObj.curValue);
+      return coldWaterValue + offsetValue;
+    },
+  },
+  created() {},
+  mounted() {
+    this.getHostDetailsData();
+    this.getAlarnStatus();
+    this.getDayData();
+    // 在组件挂载后尝试进入全屏
+    setTimeout(() => {
+      this.requestFullscreen();
+    }, 100); // 延迟 100 毫秒执行全屏操作
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      // this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      this.$router.back();
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    getHostDetailsData() {
+      //判断当前的url是否有传参
+      // 获取查询字符串
+      const search = window.location.search;
+      // 判断是否有查询参数
+      const hasQueryParams = search.length > 1;
+      if (hasQueryParams) {
+        console.log("当前 URL 有传参");
+        // 解析查询字符串
+        const queryParams = {};
+        const params = search.slice(1).split("&");
+        params.forEach((param) => {
+          const [key, value] = param.split("=");
+          queryParams[key] = decodeURIComponent(value);
+        });
+        console.log("传递的参数:", queryParams);
+        // 获取特定参数
+        const deviceLedgerId = queryParams.hostId;
+        this.deviceName = queryParams.hostName;
+        this.isMagnetic = queryParams.isMagnetic;
+        console.log("是否是磁悬浮主机", this.isMagnetic);
+        // 请求主机参数、压缩机参数
+        this.getHostParams(deviceLedgerId);
+        // 请求采集位点
+        this.getCollect(deviceLedgerId);
+      } else {
+      }
+    },
+    // 主机参数、压缩机参数
+    getHostParams(id) {
+      hostDetailsData({ deviceLedgerId: id }).then((res) => {
+        console.log("主机参数返回", res);
+        if (res.code == 200) {
+          let data = res.rows;
+          data.forEach((item) => {
+            if (item.mtType === "0") {
+              // 主机参数
+              this.hostData = item.list;
+              // 主机参数分开两列
+              this.leftHostData = [];
+              this.rightHostData = [];
+              // 筛选去掉特定 paramType 的数据
+              // this.rightHostData = this.hostData.filter((item) => {
+              //   return !["2", "21", "20", "6", "5", "22", "26"].includes(
+              //     Number(item.paramType)
+              //   );
+              // });
+              this.rightHostData = this.hostData.filter((item) => {
+                const specificParamTypes = [26];
+                // 检查是否属于需要排除的特定 paramType
+                const isSpecificParamType = specificParamTypes.includes(
+                  Number(item.paramType)
+                );
+                const isCombinedCondition0 =
+                  Number(item.paramType) === 2 &&
+                  item.otherName.includes("手动启停");
+                // 检查是否满足 item.paramType 为 12 且 otherName 包含 "冷水控制设定值"
+                const isCombinedCondition1 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("冷水控制设定值");
+                const isCombinedCondition2 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("用户冷水设定值");
+                const isCombinedCondition3 =
+                  Number(item.paramType) === 12 &&
+                  item.otherName.includes("冷冻水偏移值设置");
+                // 返回 false 表示要排除该元素
+                return (
+                  !isSpecificParamType &&
+                  !isCombinedCondition0 &&
+                  !isCombinedCondition1 &&
+                  !isCombinedCondition2 &&
+                  !isCombinedCondition3
+                );
+              });
+              // 根据 ordernum 进行排序
+              this.rightHostData.sort((a, b) => {
+                return Number(a.orderNum) - Number(b.orderNum);
+              });
+              this.hostData.forEach((item) => {
+                //左边主机参数 根据不同的 paramType 处理 showValue
+                if (
+                  item.paramType === "22" &&
+                  item.otherName.includes("远程启动信号")
+                ) {
+                  // 远程开关机-手动启停
+                  // item.showValue =
+                  //   Number(item.curValue) === 0 ? "自动" : "手动";
+                  this.onOffObj = item;
+                } else if (item.paramType === "26") {
+                  // 累计运行时间
+                  this.timeObj = item;
+                } else if (
+                  item.paramType === "12" &&
+                  item.otherName.includes("冷水控制设定值")
+                ) {
+                  // 本地出水温度设定值
+                  this.coldWaterSetObj = item;
+                } else if (
+                  item.paramType === "12" &&
+                  item.otherName.includes("用户冷水设定值")
+                ) {
+                  // 远程出水温度设定值
+                  this.coldWaterControlObj = item;
+                } else if (
+                  item.paramType === "12" &&
+                  item.otherName.includes("冷冻水偏移值设置")
+                ) {
+                  // 远程出水温度设定值
+                  this.offsetValuerControlObj = item;
+                  // 检查 curValue 属性是否存在且为有效的数字
+                  if (
+                    this.offsetValuerControlObj.curValue !== undefined &&
+                    !isNaN(parseFloat(this.offsetValuerControlObj.curValue))
+                  ) {
+                    // 将 curValue 转换为整数并除以 10
+                    this.offsetValuerControlObj.curValue =
+                      parseInt(this.offsetValuerControlObj.curValue, 10) / 10;
+                  }
+                }
+              });
+            }
+          });
+          // 使用 filter 方法过滤掉 item 为 '0' 的对象
+          let compressorData = data.filter((obj) => obj.mtType !== "0");
+          console.log("压缩机数组", this.compressorData);
+          compressorData.forEach((item) => {
+            if (item.mtType === "9") {
+              // 压缩机1
+              this.compressorData1 = item;
+              // 根据 ordernum 进行排序
+              if (
+                this.compressorData1.list &&
+                Array.isArray(this.compressorData1.list)
+              ) {
+                this.compressorData1.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
+              }
+            }
+            if (item.mtType === "10") {
+              // 压缩机2
+              this.compressorData2 = item;
+              // 对 this.compressorData2 对象中的 list 数组进行排序
+              if (
+                this.compressorData2.list &&
+                Array.isArray(this.compressorData2.list)
+              ) {
+                this.compressorData2.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
+              }
+            }
+            if (item.mtType === "11") {
+              // 压缩机3
+              this.compressorData3 = item;
+              if (
+                this.compressorData3.list &&
+                Array.isArray(this.compressorData3.list)
+              ) {
+                this.compressorData3.list.sort((a, b) => {
+                  return Number(a.orderNum) - Number(b.orderNum);
+                });
+              }
+            }
+          });
+        }
+      });
+    },
+    // 采集参数列表
+    getCollect(id) {
+      let data = {
+        pageNum: 1,
+        pageSize: 10000,
+        deviceLedgerId: id,
+      };
+      cpmList(data).then((res) => {
+        console.log("采集位点返回", res);
+        if (res.code == 200) {
+          // 过滤掉结果，只保留冷冻冷却进出水温度
+          let data = res.rows;
+          let newDataArray = []; // 用于存储符合条件的对象的新数组
+          data.forEach((item) => {
+            if (
+              item.otherName.includes("冷冻回水温度") ||
+              item.otherName.includes("冷冻供水温度") ||
+              item.otherName.includes("冷却回水温度") ||
+              item.otherName.includes("冷却供水温度") ||
+              item.otherName.includes("主机-负载")
+            ) {
+              let dataItem = {
+                name: item.otherName,
+                value: item.id,
+              };
+              newDataArray.push(dataItem);
+            }
+          });
+          console.log("处理后的数组···", newDataArray);
+          // 请求温度
+          this.getTemData(newDataArray);
+        }
+      });
+    },
+    // 冷冻冷却进出水温度图表数据
+    getTemData(array) {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      let data = {
+        timeType: "min",
+        startTime: format(start),
+        endTime: format(end),
+        pageNum: 0,
+        pageSize: 10,
+        searchParams: array,
+        systemType: "0",
+      };
+      hostTemData(data).then((res) => {
+        console.log("进出水温度返回值", res);
+        if (res.code == 200 && res.data.length > 0) {
+          this.temArray = res.data;
+        }
+      });
+    },
+    hostListClass(paramType) {
+      for (let i = 0; i < this.hostData.length; i++) {
+        const item = this.hostData[i];
+        if (
+          item.paramType === paramType &&
+          typeof item.curValue === "string" &&
+          /[\u4e00-\u9fa5]/.test(item.curValue)
+        ) {
+          switch (item.paramType) {
+            case "1": // 运行状态
+              if (item.curValue === "运行") {
+                return true;
+              }
+              break;
+            case "2": // 启停
+              if (item.curValue === "启动" && item.otherName.includes("启停")) {
+                return true;
+              }
+              break;
+            case "5": // 故障
+              if (item.curValue === "正常") {
+                return true;
+              }
+              break;
+            case "6": // 手自动切换
+              if (item.curValue === "自动") {
+                return true;
+              }
+              break;
+            case "22": // 本地远程切换
+              if (item.curValue === "远程") {
+                return true;
+              }
+              break;
+            default:
+              return false;
+              break;
+          }
+        } else {
+          if (item.paramType === paramType && Number(item.curValue) !== 0) {
+            return true;
+          }
+        }
+      }
+      // 否则
+      return false;
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+    // 判断 curValue 是否为特定值
+    isSpecialValue(value) {
+      const specialValues = ["运行", "启动", "正常"];
+      return specialValues.includes(value);
+    },
+    // 处理输入事件，过滤非法字符并确保输入值在0-10之间（支持一位小数）
+    handleInput(item) {
+      console.log("校验");
+      // 获取当前输入值
+      let input = String(item);
+      // 如果输入为空，直接设置并返回
+      if (input === "") {
+        this.offsetValuerControlObj.curValue = "";
+        return;
+      }
+
+      // 过滤非数字和小数点的字符，但允许一个小数点
+      let filteredInput = input.replace(/[^\d.]/g, "");
+
+      // 处理多个小数点的情况，只保留第一个小数点
+      let dotCount = (filteredInput.match(/\./g) || []).length;
+      if (dotCount > 1) {
+        let firstDotIndex = filteredInput.indexOf(".");
+        filteredInput =
+          filteredInput.substring(0, firstDotIndex + 1) +
+          filteredInput.substring(firstDotIndex + 1).replace(/\./g, "");
+      }
+
+      // 检查输入是否以 0 开头且后面不是小数点，如果是则去掉开头的 0
+      if (
+        filteredInput.startsWith("0") &&
+        filteredInput.length > 1 &&
+        filteredInput[1] !== "."
+      ) {
+        filteredInput = filteredInput.replace(/^0+/, "");
+      }
+
+      // 如果以小数点开头，在前面添加0
+      if (filteredInput.startsWith(".")) {
+        filteredInput = "0" + filteredInput;
+      }
+
+      // 限制小数点后只能有一位数字
+      let dotIndex = filteredInput.indexOf(".");
+      if (dotIndex !== -1) {
+        filteredInput = filteredInput.slice(0, dotIndex + 2);
+      }
+
+      // 如果过滤后为空，设置空值并返回
+      if (filteredInput === "") {
+        this.offsetValuerControlObj.curValue = "";
+        return;
+      }
+
+      // 将输入转换为数字进行范围验证
+      let numInput = parseFloat(filteredInput);
+
+      // 检查输入是否在 0 到 10 之间（包含小数）
+      if (!isNaN(numInput) && numInput >= 0 && numInput <= 10) {
+        // 在范围内，设置过滤后的值
+        this.offsetValuerControlObj.curValue = filteredInput;
+      } else {
+        // 如果输入不在有效范围内，给出警告并恢复上一次的有效值
+        this.$modal.msgWarning("只能输入0-10之间且最多一位小数的数值");
+        // 恢复为上一次的有效值或清空
+        this.offsetValuerControlObj.curValue = "";
+      }
+    },
+    // 失去焦点
+    handleBlur() {
+      // this.currentFocusIndex = "";
+    },
+    handleEnter(item, event) {
+      console.log("请求后端", item);
+      if (!item.curValue) {
+        this.$modal.msgError("请输入偏移值");
+        return;
+      }
+      // 失去焦点
+      event.target.blur();
+      this.$confirm(
+        `确定要修改冷水设定值偏移的温度为:${item.curValue} ℃吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 将 item.curValue 乘以 10 后再传入函数
+          const multipliedValue = parseFloat(item.curValue) * 10;
+          this.hadleOperationConrol(item.id, multipliedValue);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          // this.$emit("upList");
+          this.getHostDetailsData();
+        });
+    },
+    // 操作
+    hadleOperationConrol(id, param) {
+      let data = {
+        id: id,
+        param: param,
+      };
+      console.log("操作参数", data);
+      operationConrol([data])
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getHostDetailsData();
+              this.loading = false;
+            }, 5000);
+          } else {
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getHostDetailsData();
+          }
+        })
+        .catch((error) => {
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getHostDetailsData();
+        });
+    },
+    // 打开定时开关弹框
+    openTimeSwitch() {
+      this.isOpenTimeSwitch = true;
+      this.getPolicyList();
+    },
+    // 请求列表
+    getPolicyList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: "0",
+          funPolicyType: "4",
+        };
+        policyListData(data)
+          .then((res) => {
+            console.log("设备定时开关返回res", res);
+            if (res.code === 200) {
+              let handleList = res.rows;
+              this.delayList = [];
+              handleList.forEach((element, index) => {
+                if (element.values && element.values.length > 0) {
+                  // 初始化一个空对象来存储非蝶阀处理后的结果
+                  let delayItem = {
+                    name: element.name,
+                  };
+                  const limitedChildren = element.values;
+                  limitedChildren.forEach((child) => {
+                    // console.log("定时${index}开_时", `定时${index}开_时`);
+                    // console.log("child.pointName", child.pointName);
+                    if (child.pointName) {
+                      // 时间设置1-小时
+                      if (
+                        child.pointName.includes(
+                          `偏移值设置时间${index + 1}-开时1`
+                        )
+                      ) {
+                        // console.log("定时开机-时·························");
+                        delayItem.delayOpenHour = child.curValue;
+                        delayItem.delayOpenHourId = child.id;
+                      }
+                      //   时间设置1-分钟
+                      else if (
+                        child.pointName.includes(
+                          `偏移值设置时间${index + 1}-开分1`
+                        )
+                      ) {
+                        delayItem.delayOpenMinute = child.curValue;
+                        delayItem.delayOpenMinuteId = child.id;
+                      }
+                      // 时间设置2-小时
+                      else if (
+                        child.pointName.includes(
+                          `偏移值设置时间${index + 1}-关时2`
+                        )
+                      ) {
+                        delayItem.delayCloseHour = child.curValue;
+                        delayItem.delayCloseHourId = child.id;
+                      }
+                      //   时间设置2-分钟
+                      else if (
+                        child.pointName.includes(
+                          `偏移值设置时间${index + 1}-关分2`
+                        )
+                      ) {
+                        delayItem.delayCloseMinute = child.curValue;
+                        delayItem.delayCloseMinuteId = child.id;
+                      }
+                      //   偏移值
+                      else if (child.pointName.includes(`偏移值${index + 1}`)) {
+                        delayItem.offsetValue = child.curValue;
+                        delayItem.offsetValue =
+                          parseInt(delayItem.offsetValue, 10) / 10;
+                        delayItem.offsetValueId = child.id;
+                      }
+                      // 当前出水温度设置
+                      else if (child.pointName.includes("出水温度设置")) {
+                        delayItem.curValue = child.curValue;
+                        delayItem.curValueId = child.id;
+                      }
+                      // 启动状态
+                      else if (child.pointName.includes(`启动标志`)) {
+                        delayItem.delayStatus =
+                          Number(child.curValue) == 0 ? false : true;
+                        delayItem.delayStatusId = child.id;
+                      }
+                    }
+                  });
+                  // 计算最终出水温度设置值
+                  const offsetValue =
+                    delayItem.offsetValue !== null &&
+                    delayItem.offsetValue !== ""
+                      ? parseFloat(delayItem.offsetValue)
+                      : NaN;
+                  const curValue =
+                    delayItem.curValue !== null && delayItem.curValue !== ""
+                      ? parseFloat(delayItem.curValue)
+                      : NaN;
+
+                  if (!isNaN(offsetValue) && !isNaN(curValue)) {
+                    delayItem.finalOutWaterTemp = offsetValue + curValue;
+                  }
+                  // 将处理后的对象添加到 delayList 中
+                  if (Object.keys(delayItem).length > 1) {
+                    this.delayList.push(delayItem);
+                  }
+                }
+              });
+              console.log("处理后的数组", this.delayList);
+              //   this.delayList = res.rows;
+            } else {
+              this.delayList = [];
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 处理输入事件，过滤非数字字符
+    handleSwitchInput(item, propertyName, name) {
+      console.log("校验", item[propertyName]);
+      // 如果值为空，不进行后续校验
+      if (item[propertyName] === "") {
+        return;
+      }
+      let isValid = true;
+      // 实时校验并过滤非数字字符
+      let inputValue = String(item[propertyName]).replace(/[^\d]/g, "");
+      if (name === "hour") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 23;
+        if (!isValid) {
+          this.$message.error("输入值在0-23区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      } else if (name === "minute") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 59;
+        if (!isValid) {
+          this.$message.error("输入值在0-59区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      } else if (name === "offset") {
+        isValid = !isNaN(inputValue) && parseInt(inputValue) >= 0;
+        if (!isValid) {
+          this.$message.error("输入值大于0，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      }
+
+      item[propertyName] = inputValue;
+    },
+    handleSwitchEnter(item, name, event) {
+      console.log("item", item);
+      console.log("接收到的事件对象:", event);
+      // 阻止事件的默认行为
+      if (event && event.preventDefault) {
+        event.preventDefault();
+      }
+      // 失去焦点
+      event.target.blur();
+      let id = "";
+      let value = "";
+      let title = "";
+      let unit = "";
+      if (name === "openHour") {
+        id = item.delayOpenHourId;
+        value = item.delayOpenHour;
+        title = "设置时间1-小时";
+        unit = "时";
+      } else if (name === "openMinute") {
+        id = item.delayOpenMinuteId;
+        value = item.delayOpenMinute;
+        title = "设置时间1-分钟";
+        unit = "分";
+      } else if (name === "closeHour") {
+        id = item.delayCloseHourId;
+        value = item.delayCloseHour;
+        title = "设置时间2-小时";
+        unit = "时";
+      } else if (name === "closeMinute") {
+        id = item.delayCloseMinuteId;
+        value = item.delayCloseMinute;
+        title = "设置时间2-分钟";
+        unit = "分";
+      }
+
+      if (value === "") {
+        this.$message.warning("请输入当前设置值!");
+        return;
+      }
+      console.log("请求后端", item);
+      this.$confirm(
+        `确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // console.log("打印id",id)
+          this.handleSwitchOperationConrol(id, value);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的值
+          this.getPolicyList();
+        });
+    },
+    handleOffsetValueEnter(item, name, event) {
+      console.log("item", item);
+      console.log("接收到的事件对象:", event);
+      // 阻止事件的默认行为
+      if (event && event.preventDefault) {
+        event.preventDefault();
+      }
+      // 失去焦点
+      event.target.blur();
+      let id = "";
+      let value = "";
+      let title = "";
+      let unit = "";
+      if (name === "offset") {
+        id = item.offsetValueId;
+        value = item.offsetValue;
+        title = "偏移值";
+        unit = "";
+      }
+
+      if (value === "") {
+        this.$message.warning("请输入当前设置值!");
+        return;
+      }
+      console.log("请求后端", item);
+      this.$confirm(
+        `确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // console.log("打印id",id)
+          // 将 item.curValue 乘以 10 后再传入函数
+          const multipliedValue = parseFloat(item.offsetValue) * 10;
+          this.handleSwitchOperationConrol(id, multipliedValue);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的值
+          this.getPolicyList();
+        });
+    },
+    handleSwitchOperationConrol(id, param) {
+      let data = {
+        policyId: id,
+        timeValue: param,
+      };
+      //  console.log("操作参数", data);
+      // 开启 loading 效果
+      this.loading = true;
+      undateTime(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            // this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getPolicyList();
+              // 关闭 loading 效果
+              this.loading = false;
+            }, 500);
+          } else {
+            // 关闭 loading 效果
+            this.loading = false;
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getPolicyList();
+          }
+        })
+        .catch((error) => {
+          // 关闭 loading 效果
+          this.loading = false;
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getPolicyList();
+        });
+    },
+    // 启用状态
+    handleSwitchStatus(item) {
+      this.$confirm(
+        `确定要切换"${item.name}"的状态为:${
+          item.delayStatus ? "开启" : "停用 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.delayStatus);
+          let param = null;
+          if (item.delayStatus) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.handleSwitchOperationConrol(item.delayStatusId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.delayStatus = !item.delayStatus;
+          console.log("不请求后台");
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  background-color: black;
+  color: #fff;
+
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+
+    .title-center {
+      width: 9.46rem;
+      height: 0.8rem;
+    }
+
+    .title-right {
+      width: 5.04rem;
+      height: 0.78rem;
+    }
+
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      cursor: pointer;
+    }
+
+    .nowTime {
+      position: absolute;
+      top: 0.37rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+
+    .icon_warning {
+      position: absolute;
+      top: 0.39rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+
+      50% {
+        opacity: 0;
+      }
+    }
+
+    .icon_home {
+      position: absolute;
+      top: 0.39rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+
+    .back-icon {
+      position: absolute;
+      top: 0.39rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      cursor: pointer;
+    }
+  }
+
+  .host-detail {
+    padding: 0.2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .detail-top {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .detail-top-left {
+        height: 4.8rem;
+        // background-color: aquamarine;
+        position: relative;
+
+        .host-img1 {
+          width: 4.48rem;
+          height: 3.57rem;
+          margin: 0.2rem 0 0 0.2rem;
+        }
+
+        .outIn {
+          position: absolute;
+          left: 4.8rem;
+          top: 1rem;
+          display: flex;
+          flex-direction: column;
+
+          .outIn-li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            width: 2rem;
+            height: 1rem;
+            font-weight: bold;
+
+            // background-color: #e2aeae;
+            .arrow {
+              font-size: 0.3rem;
+              z-index: 10;
+            }
+
+            .kpa {
+              font-size: 0.18rem;
+              z-index: 10;
+            }
+          }
+
+          .in1 {
+            position: absolute;
+            top: 1.3rem;
+            left: 0.2rem;
+            color: rgb(123, 212, 247);
+          }
+
+          .out1 {
+            position: absolute;
+            top: 1.6rem;
+            left: 0.18rem;
+            color: rgb(38, 122, 218);
+
+            .arrow {
+              transform: scaleX(-1);
+            }
+          }
+
+          .in2 {
+            position: absolute;
+            top: 1.9rem;
+            left: -0.4rem;
+            color: rgb(235, 120, 206);
+          }
+
+          .out2 {
+            position: absolute;
+            top: 2.2rem;
+            left: -0.4rem;
+            color: rgb(240, 56, 95);
+
+            .arrow {
+              transform: scaleX(-1);
+            }
+          }
+        }
+
+        /* 定义灯闪烁的动画 */
+        @keyframes blink {
+          0% {
+            opacity: 1;
+          }
+
+          50% {
+            opacity: 0.7;
+          }
+
+          100% {
+            opacity: 1;
+          }
+        }
+
+        .startClass {
+          z-index: 10;
+          position: absolute;
+          top: 2.2rem;
+          left: 2.7rem;
+          width: 0.18rem;
+          height: 0.18rem;
+          border-radius: 50%;
+          animation: blink 1s infinite;
+          background-color: #38fc52 !important;
+        }
+
+        .hostStatus {
+          z-index: 10;
+          position: absolute;
+          top: 0.6rem;
+          left: 4.9rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          width: 2.8rem !important;
+          margin-top: 1.5rem;
+
+          .hostStatus-li {
+            background-color: #25455a;
+            color: #c0dffc;
+            font-size: 0.16rem;
+            margin-bottom: 0.1rem;
+            padding: 0.1rem;
+            letter-spacing: 0.02rem;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+
+            span {
+              white-space: nowrap;
+            }
+          }
+
+          .hostStatus-li2 {
+            background-color: #136bf0;
+            color: #ffffff;
+            font-size: 0.16rem;
+            margin-bottom: 0.1rem;
+            padding: 0.1rem;
+            letter-spacing: 0.02rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.1rem;
+            cursor: pointer;
+          }
+
+          .hostStatus-li2:hover {
+            background-color: #217af0;
+          }
+        }
+
+        .water-flow3 {
+          z-index: 10;
+          position: absolute;
+          top: 3.5rem;
+          left: 1.2rem;
+
+          .water-flow-li {
+            margin-bottom: 0.04rem;
+            color: #46f1e3;
+            font-size: 0.18rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            span {
+              background-color: rgba(0, 255, 255, 0.2);
+              border-radius: 0.1rem;
+              padding: 0.01rem 0.03rem;
+            }
+
+            .break {
+              margin-left: 0.07rem;
+              display: inline-block;
+              width: 0.18rem;
+              height: 0.18rem;
+              border-radius: 50%;
+              border: 1px solid #46f1e3;
+              background-color: transparent !important;
+            }
+
+            .connect {
+              animation: blink 1s infinite;
+              background-color: #38fc52 !important;
+            }
+          }
+        }
+
+        /* 定义 host 动画关键帧 */
+        @keyframes host {
+          0% {
+            /* 修改初始旋转角度 */
+            transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+          }
+
+          100% {
+            /* 修改结束旋转角度 */
+            transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
+          }
+        }
+
+        .fanBlade {
+          z-index: 10;
+          position: absolute;
+          top: 2.5rem;
+          left: 4.1rem;
+          width: 0.5rem;
+          height: 0.5rem;
+          transform-style: preserve-3d;
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
+            rotateY(40deg);
+        }
+
+        .rightFan1 {
+          z-index: 10;
+          position: absolute;
+          top: 2.7rem;
+          left: 4.2rem;
+          width: 0.5rem;
+          height: 0.5rem;
+          transform-style: preserve-3d;
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
+            rotateY(40deg);
+        }
+        .rightFan2 {
+         z-index: 10;
+          position: absolute;
+          top: 2.4rem;
+          left: 4.2rem;
+          width: 0.5rem;
+          height: 0.5rem;
+          transform-style: preserve-3d;
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
+            rotateY(40deg);
+        }
+
+        .moveClass {
+          animation: host 2s linear infinite;
+        }
+
+        .host-name {
+          z-index: 10;
+          position: absolute;
+          top: 1.6rem;
+          left: 1.44rem;
+          color: #2925f8;
+          font-weight: bold;
+          font-size: 0.18rem;
+        }
+
+        .loadData {
+          z-index: 10;
+          position: absolute;
+          top: 0rem;
+          left: 5rem;
+        }
+      }
+
+      .detail-top-right {
+        width: calc(100% - 7.6rem);
+        height: 4.8rem;
+        // background-color: rgb(127, 172, 255);
+      }
+    }
+
+    .detail-bottom {
+      // height: 5rem;
+      margin-top: 0.3rem;
+      margin-left: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .detail-data {
+        display: flex;
+        flex-direction: column;
+        // width: 4rem;
+        position: relative;
+
+        .detail-data-top {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          color: #c0dffc;
+          font-weight: bold;
+          font-size: 0.18rem;
+          width: 100%;
+          text-align: center;
+          z-index: 10;
+
+          .details-title {
+            margin: 0 0.15rem;
+          }
+        }
+
+        .detail-data-bottom {
+          width: 100%;
+          // padding: 0.1rem 0.3rem;
+          z-index: 0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: stretch;
+          justify-content: flex-start;
+
+          .detail-data-li {
+            // width: 100%;
+            margin-right: 0.1rem;
+            margin-bottom: 0.15rem !important;
+            position: relative;
+            color: #c0dffc;
+            font-family: Arial, sans-serif;
+            letter-spacing: 0.02rem;
+            font-size: 0.18rem;
+            position: relative;
+            margin-bottom: 0.2rem;
+            border-left: 0.01rem solid #217df5;
+            border-right: 0.01rem solid #217df5;
+            background-image: radial-gradient(
+                circle at left top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at left bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              );
+            background-repeat: no-repeat;
+            background-position: left top, right top, left bottom, right bottom;
+          }
+
+          .detail-data-li::before,
+          .detail-data-li::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0.01rem;
+            background-image: linear-gradient(
+              to right,
+              #217df5 0%,
+              rgba(41, 128, 185, 0) 50%,
+              #217df5 100%
+            );
+          }
+
+          .detail-data-li::before {
+            top: 0;
+          }
+
+          .detail-data-li::after {
+            bottom: 0;
+          }
+
+          .rightDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+          }
+
+          .leftDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding: 0.04rem 0.1rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .rightDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+            z-index: 10;
+          }
+
+          .rightDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+            z-index: 10;
+          }
+
+          .leftDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            border-radius: 50%;
+            z-index: 10;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+          }
+
+          .leftDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            z-index: 10;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+          }
+        }
+
+        .line1 {
+          position: absolute;
+          top: 0rem;
+        }
+      }
+
+      .hostparams {
+        width: 7rem;
+
+        .detail-data-bottom {
+          // padding-left: 0.5rem;
+          .detail-data-li {
+            // width: 3.2rem;
+            width: calc(50% - 0.2rem) !important;
+            margin: 0 0.1rem;
+          }
+        }
+      }
+
+      .compressor {
+        width: 3.5rem;
+
+        .detail-data-bottom {
+          // padding-left: 0.75rem;
+          .detail-data-li {
+            // width: 3.4rem;
+            width: calc(100%) !important;
+            margin: 0 0.1rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+.choice {
+  margin-left: 0 !important;
+}
+
+.choice .mr20 {
+  width: 1rem !important;
+  color: #c0dffc;
+  font-weight: bold !important;
+  font-size: 0.18rem !important;
+  text-align: center !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.timeStyle {
+  color: #ffffff !important;
+}
+
+.dotData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #3b80ff;
+  display: flex;
+  align-items: center;
+}
+
+.goodData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #3df574;
+}
+
+.badData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #cf3607;
+}
+
+.automaticData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #da7b10;
+}
+
+.timeData {
+  font-weight: bold;
+  margin: 0 0.06rem;
+  color: #1df3e8;
+}
+</style>
+<style scoped>
+.goodData >>> .el-input--mini {
+  font-size: 0.16rem !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.goodData >>> .el-input {
+  width: 1rem !important;
+}
+.goodData >>> .el-input--suffix .el-input__inner {
+  padding-right: 0.3rem !important;
+}
+
+.goodData >>> .el-input--mini .el-input__inner {
+  height: 0.28rem !important;
+  line-height: 20.28rem !important;
+}
+
+.goodData >>> .el-input__inner {
+  font-weight: bold;
+  box-shadow: none !important;
+}
+
+.goodData >>> .el-input__suffix {
+  font-weight: bold;
+  right: 0.05rem !important;
+  height: 100% !important;
+  top: -0.01rem !important;
+}
+
+.device-name:nth-child(3) {
+  margin-left: 30px !important;
+}
+
+.device-name {
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.device-name .slip {
+  margin: 0 5px;
+}
+
+.device-name >>> .el-form {
+  width: 50px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.device-name >>> .el-form-item {
+  margin-bottom: 0 !important;
+}
+
+.device-name >>> .el-input {
+  width: 50px !important;
+}
+
+.device-name {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/index.vue b/src/views/newCenterairC/sysMonitor/index.vue
new file mode 100644
index 0000000..fb61bdd
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.toPage();
+  },
+  methods: {
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到高校导航大屏展示
+      this.$router.push("/monitorCenter")
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/views/newCenterairC/sysMonitor/monitorCenter.vue b/src/views/newCenterairC/sysMonitor/monitorCenter.vue
new file mode 100644
index 0000000..f8e5267
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/monitorCenter.vue
@@ -0,0 +1,4668 @@
+<template>
+  <div class="monitor" v-loading="loading">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        @click="goSys"
+        src="../../../assets/images/title-center.png"
+        alt=""
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
+    <div class="monitor-content">
+      <!-- 天气数据 -->
+      <div class="weather">
+        <div class="weather-li">
+          <span>室外温度：</span>
+          <span class="deepColor">{{ weatherObj.temperature }}</span>
+          <span>℃</span>
+        </div>
+        <div class="weather-li">
+          <span>室外湿度：</span>
+          <span class="deepColor">{{ weatherObj.humidity }}</span>
+          <span>%</span>
+        </div>
+        <div class="weather-li">
+          <span>室外含湿：</span>
+          <span class="deepColor">{{ weatherObj.humidityRatio }}</span>
+          <span>g/kg</span>
+        </div>
+        <div class="weather-li">
+          <span>室外焓值：</span>
+          <span class="deepColor">{{ weatherObj.enthalpy }}</span>
+          <span>kj/kg</span>
+        </div>
+        <div class="weather-li">
+          <span>室外露点：</span>
+          <span class="deepColor">{{ weatherObj.dewPointTemp }}</span>
+          <span>℃</span>
+        </div>
+        <div class="weather-li">
+          <span>室外湿球：</span>
+          <span class="deepColor">{{ weatherObj.wetBulbTemp }}</span>
+          <span>℃</span>
+        </div>
+      </div>
+      <!-- 系统性能数据 -->
+      <div class="performance">
+        <div class="title">系 统 性 能</div>
+        <div class="perdformance-bg">
+          <div class="weather-li">
+            <span>实时EER：</span>
+            <span class="deepColor">{{ performanceObj.realEER }}</span>
+            <span>kw/kw</span>
+          </div>
+          <div class="weather-li">
+            <span>实时功率：</span>
+            <span class="deepColor">{{ performanceObj.realPower }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>实时冷量：</span>
+            <span class="deepColor">{{ performanceObj.realCold }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>全年EER：</span>
+            <span class="deepColor">{{ performanceObj.yearEER }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>全年用电：</span>
+            <span class="deepColor">{{ performanceObj.yearPower }}</span>
+            <span>kw/h</span>
+          </div>
+          <div class="weather-li">
+            <span>全年产冷：</span>
+            <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>
+      <!-- 主机加减载时间 -->
+      <!-- <div class="detail-data-bottom">
+        <div class="detail-data-li">
+          <div class="rightDot">
+            <div class="leftDot">
+              <span>主机加载时间:</span>
+              <span class="dotData">{{ hostAddTime }}</span>
+              <span class="dotUnit">min</span>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data-li">
+          <div class="rightDot">
+            <div class="leftDot">
+              <span>主机减载时间:</span>
+              <span class="dotData">{{ hostReduceTime }}</span>
+              <span class="dotUnit">min</span>
+            </div>
+          </div>
+        </div>
+      </div> -->
+      <!-- 一键启停 -->
+      <div class="offClass" @click="handleOneKeyButton">
+        <div v-if="isShowOn" class="off-bg on-animation">启动</div>
+        <div v-else class="off-bg">停止</div>
+      </div>
+      <!-- 系统提示 -->
+      <div class="sysTips" v-if="startOrStopStatus">
+        <img class="step" src="../../../assets/images/step.png" alt="" />
+        <div class="tips-text">{{ startOrStopStatus }}</div>
+      </div>
+      <!-- <div class="funtion-menu1" @click="goPerformance">
+        <div class="menu-title"><div>冷机性能统计</div></div>
+        <img class="ditu" src="../../../assets/images/di.png" />
+      </div> -->
+      <div class="funtion-menu1 menu2" @click="goControl">
+        <div class="menu-title"><div>系统控制</div></div>
+        <img class="ditu" src="../../../assets/images/di.png" />
+      </div>
+      <!-- 整体图 -->
+      <img
+        class="monitor-img"
+        src="../../../assets/images/meizhou.png"
+        alt=""
+      />
+
+      <!-- 主机1数据定位 -->
+      <div
+        class="hostName1"
+        v-if="hostList.length > 0"
+        @click="goControlList(hostList, 1)"
+      >
+        {{ hostList[0].deviceName }}
+      </div>
+      <div
+        class="hostStatus1"
+        :class="{ startClass: hostListControlClass(1) }"
+      ></div>
+      <img
+        class="host-img1"
+        v-if="hostListRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(1) }"
+      />
+      <div
+        class="host-main1"
+        v-if="hostList.length > 0 && hostList[0].deviceName"
+        :title="`${hostList[0].deviceName}性能`"
+        @click="goHostDetail(hostList[0], false)"
+      ></div>
+      <div class="hostLoad1" v-if="hostListRunClass(1) && hostLoadData(1)">
+        {{ hostLoad1 }}%
+      </div>
+      <div class="water-flow1">
+        <div class="water-flow-li">
+          <span>1#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(1) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>1#冷冻水流:</span>
+          <span v-if="hostFreezeWaterFlowClass(1)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(1) }"
+          ></span>
+        </div>
+      </div>
+      <line-children
+        :angle1="-0"
+        :angle2="-35"
+        :lineWidth1="190"
+        :lineWidth2="150"
+        class="host-line1"
+      ></line-children>
+      <div class="setTem1" v-if="hostSetTemClass(1)">
+        实时设点:{{ hostSetTem1 }}℃
+      </div>
+      <div class="setTem2" v-if="hostSetTemClass(2)">
+        实时设点:{{ hostSetTem4 }}℃
+      </div>
+      <div class="setTem3" v-if="hostSetTemClass(3)">
+        实时设点:{{ hostSetTem3 }}℃
+      </div>
+      <!-- 主机2数据定位 -->
+      <div
+        class="hostName2"
+        v-if="hostList.length > 0"
+        @click="goControlList(hostList, 2)"
+      >
+        {{ hostList[1].deviceName }}
+      </div>
+      <div
+        class="hostStatus2"
+        :class="{ startClass: hostListControlClass(2) }"
+      ></div>
+      <img
+        class="host-img2"
+        v-if="hostListRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(2) }"
+      />
+      <div
+        class="host-main2"
+        v-if="hostList.length > 0 && hostList[1].deviceName"
+        :title="`${hostList[1].deviceName}性能`"
+        @click="goHostDetail(hostList[1], false)"
+      ></div>
+      <div class="hostLoad2" v-if="hostListRunClass(2) && hostLoadData(2)">
+        {{ hostLoad2 }}%
+      </div>
+      <div class="water-flow2">
+        <div class="water-flow-li">
+          <span>2#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(2) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>2#冷冻水流:</span>
+          <span v-if="hostFreezeWaterFlowClass(2)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(2) }"
+          ></span>
+        </div>
+      </div>
+      <line-children
+        :angle1="-0"
+        :angle2="-35"
+        :lineWidth1="220"
+        :lineWidth2="360"
+        class="host-line2"
+      ></line-children>
+      <!-- 主机3数据定位 -->
+      <div
+        class="hostName3"
+        v-if="hostList.length > 0"
+        @click="goControlList(hostList, 3)"
+      >
+        {{ hostList[2].deviceName }}
+      </div>
+      <!-- 主机启停状态 -->
+      <div
+        class="hostStatus3"
+        :class="{ startClass: hostListControlClass(3) }"
+      ></div>
+      <!-- 主机运行状态 -->
+      <img
+        class="host-img3"
+        v-if="hostListRunClass(3)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(3) }"
+      />
+      <!-- 点击主机跳转到主机参数详情页 -->
+      <div
+        class="host-main3"
+        v-if="hostList.length > 0 && hostList[2].deviceName"
+        :title="`${hostList[2].deviceName}性能`"
+        @click="goHostDetail(hostList[2], true)"
+      ></div>
+      <!-- 主机负载 -->
+      <div class="hostLoad3" v-if="hostListRunClass(3) && hostLoadData(3)">
+        {{ hostLoad3 }}%
+      </div>
+      <!-- 主机冷却冷冻水流信息 -->
+      <div class="water-flow3">
+        <div class="water-flow-li">
+          <span>3#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(3)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(3) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>3#冷冻水流:</span>
+          <span v-if="hostFreezeWaterFlowClass(3)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(3) }"
+          ></span>
+        </div>
+      </div>
+      <!-- 线+主机冷却水流状态 -->
+      <line-children
+        :angle1="-0"
+        :angle2="-39"
+        :lineWidth1="300"
+        :lineWidth2="530"
+        class="host-line3"
+      ></line-children>
+
+      <!-- 冷却泵数据定位 -->
+      <div class="coolingPump1" @click="goControlList(coolingPump, 1)">1#</div>
+      <div class="coolingPump2" @click="goControlList(coolingPump, 2)">2#</div>
+      <div class="coolingPump3" @click="goControlList(coolingPump, 3)">3#</div>
+      <div class="coolingPump4" @click="goControlList(coolingPump, 4)">4#</div>
+      <div class="coolingPump5" @click="goControlList(coolingPump, 5)">5#</div>
+      <!-- 运行状态 -->
+      <img
+        class="cooling-img1"
+        v-if="coolingPumpRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(1) }"
+      />
+      <img
+        class="cooling-img2"
+        v-if="coolingPumpRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(2) }"
+      />
+      <img
+        class="cooling-img3"
+        v-if="coolingPumpRunClass(3)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(3) }"
+      />
+      <img
+        class="cooling-img4"
+        v-if="coolingPumpRunClass(4)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(4) }"
+      />
+      <img
+        class="cooling-img5"
+        v-if="coolingPumpRunClass(5)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(5) }"
+      />
+      <!-- 频率反馈 -->
+      <div
+        class="cooling-hz1"
+        v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
+      >
+        {{ coolingPumpHz1 }}Hz
+      </div>
+      <div
+        class="cooling-hz2"
+        v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
+      >
+        {{ coolingPumpHz2 }}Hz
+      </div>
+      <div
+        class="cooling-hz3"
+        v-if="coolingPumpHz(3) && coolingPumpRunClass(3)"
+      >
+        {{ coolingPumpHz3 }}Hz
+      </div>
+      <div
+        class="cooling-hz4"
+        v-if="coolingPumpHz(4) && coolingPumpRunClass(4)"
+      >
+        {{ coolingPumpHz4 }}Hz
+      </div>
+      <div
+        class="cooling-hz5"
+        v-if="coolingPumpHz(5) && coolingPumpRunClass(5)"
+      >
+        {{ coolingPumpHz5 }}Hz
+      </div>
+      <!-- 冷冻泵数据定位 -->
+      <div class="freezingPump1" @click="goControlList(freezingPump, 1)">
+        1#
+      </div>
+      <div class="freezingPump2" @click="goControlList(freezingPump, 2)">
+        2#
+      </div>
+      <div class="freezingPump3" @click="goControlList(freezingPump, 3)">
+        3#
+      </div>
+      <div class="freezingPump4" @click="goControlList(freezingPump, 4)">
+        4#
+      </div>
+      <div class="freezingPump5" @click="goControlList(freezingPump, 5)">
+        5#
+      </div>
+      <img
+        class="freezing-img1"
+        v-if="freezingPumpRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(1) }"
+      />
+      <img
+        class="freezing-img2"
+        v-if="freezingPumpRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(2) }"
+      />
+      <img
+        class="freezing-img3"
+        v-if="freezingPumpRunClass(3)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(3) }"
+      />
+      <img
+        class="freezing-img4"
+        v-if="freezingPumpRunClass(4)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(4) }"
+      />
+      <img
+        class="freezing-img5"
+        v-if="freezingPumpRunClass(5)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(5) }"
+      />
+      <!-- 频率反馈 旋转+有频率反馈才显示 -->
+      <div
+        class="freezing-hz1"
+        v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
+      >
+        {{ freezingPumpHz1 }}Hz
+      </div>
+      <div
+        class="freezing-hz2"
+        v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
+      >
+        {{ freezingPumpHz2 }}Hz
+      </div>
+      <div
+        class="freezing-hz3"
+        v-if="freezingPumpHz(3) && freezingPumpRunClass(3)"
+      >
+        {{ freezingPumpHz3 }}Hz
+      </div>
+      <div
+        class="freezing-hz4"
+        v-if="freezingPumpHz(4) && freezingPumpRunClass(4)"
+      >
+        {{ freezingPumpHz4 }}Hz
+      </div>
+      <div
+        class="freezing-hz5"
+        v-if="freezingPumpHz(5) && freezingPumpRunClass(5)"
+      >
+        {{ freezingPumpHz5 }}Hz
+      </div>
+      <!-- 冷却塔数据定位 3个风机 三个出水阀 -->
+      <div class="coolingTower3" @click="goControlList(coolingTower, 3)">
+        3#
+      </div>
+      <div class="coolingTower2" @click="goControlList(coolingTower, 2)">
+        2#
+      </div>
+      <div class="coolingTower1" @click="goControlList(coolingTower, 1)">
+        1#
+      </div>
+      <!-- 风机频率 -->
+      <div
+        class="coolingTowerHz3"
+        v-if="coolingTowerHz(3, 1) && coolingTowerRunClass(3, 1)"
+      >
+        {{ coolingTowerHz3 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz2"
+        v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
+      >
+        {{ coolingTowerHz2 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz1"
+        v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
+      >
+        {{ coolingTowerHz1 }}Hz
+      </div>
+      <!-- 3号冷却塔风机1 -->
+      <img
+        class="fan-img1"
+        v-if="coolingTowerRunClass(3, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(3, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 2号冷却塔风机1 -->
+      <img
+        class="fan-img2"
+        v-if="coolingTowerRunClass(2, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(2, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 1 号冷却塔风机1 -->
+      <img
+        class="fan-img3"
+        v-if="coolingTowerRunClass(1, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(1, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 冷却塔进出水阀门 -->
+      <div
+        class="towerValve1"
+        :class="{ startClass: towerValveControlClass(3) }"
+        @click="goControlList(coolingTowerOutlet, 3)"
+      ></div>
+      <div
+        class="towerValve2"
+        :class="{ startClass: towerValveControlClass(2) }"
+        @click="goControlList(coolingTowerOutlet, 2)"
+      ></div>
+      <div
+        class="towerValve3"
+        :class="{ startClass: towerValveControlClass(1) }"
+        @click="goControlList(coolingTowerOutlet, 1)"
+      ></div>
+      <div
+        class="towerValve4"
+        :class="{ startClass: towerValveInControlClass(3) }"
+        @click="goControlList(coolingTowerInlet, 3)"
+      ></div>
+      <div
+        class="towerValve5"
+        :class="{ startClass: towerValveInControlClass(2) }"
+        @click="goControlList(coolingTowerInlet, 2)"
+      ></div>
+      <div
+        class="towerValve6"
+        :class="{ startClass: towerValveInControlClass(1) }"
+        @click="goControlList(coolingTowerInlet, 1)"
+      ></div>
+      <!-- 冷冻蝶阀数据定位 -->
+      <!-- <div
+        class="frozenValve1"
+        :class="{ startClass: frozenValveControlClass(1) }"
+      ></div> -->
+      <div
+        class="frozenValve2"
+        :class="{ startClass: frozenValveControlClass(2) }"
+        @click="goControlList(frozenValve, 2)"
+      ></div>
+      <div
+        class="frozenValve3"
+        :class="{ startClass: frozenValveControlClass(3) }"
+        @click="goControlList(frozenValve, 3)"
+      ></div>
+      <!-- 冷却蝶阀数据定位 -->
+      <!-- <div
+        class="coolingValue1"
+        :class="{ startClass: coolingValueControlClass(1) }"
+      ></div> -->
+      <div
+        class="coolingValue2"
+        :class="{ startClass: coolingValueControlClass(2) }"
+        @click="goControlList(coolingValue, 2)"
+      ></div>
+      <div
+        class="coolingValue3"
+        :class="{ startClass: coolingValueControlClass(3) }"
+        @click="goControlList(coolingValue, 3)"
+      ></div>
+      <!-- 箭头 -->
+      <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
+      <img
+        class="out-arrow"
+        src="../../../assets/images/out-arrow.png"
+        alt=""
+      />
+      <!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
+      <div class="freezingInTem">{{ freezingInTem }}℃</div>
+      <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
+      <!-- 冷冻水流 -->
+      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
+      <!-- 冷冻进出水压力 -->
+      <!-- <div class="freezingInPre">{{ freezingInPre }}kpa</div>
+      <div class="freezingOutPre">{{ freezingOutPre }}kpa</div> -->
+      <!-- 冷却进出水温度 -->
+      <div class="coolingInTem">{{ coolingInTem }}℃</div>
+      <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
+      <!-- 报警状态与系统模式 -->
+      <div class="statusAndModel" v-if="isWarning">
+        <img src="../../../assets/images/red.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border6.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysWarning" @click="showAlarm">Warning</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
+      </div>
+      <div class="statusAndModel" v-else>
+        <img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border5.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysNormal">Normal</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
+      </div>
+      <!-- 供暖区 -->
+      <div class="hotClass">供暖区</div>
+      <!-- 采暖锅炉名称 -->
+      <div
+        class="steamHeatingBoiler1"
+        v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
+        :title="`${steamHeatingFire[0].deviceName}详情`"
+        @click="goBoilerDetail(steamHeatingFire[0], false)"
+      >
+        {{ steamHeatingFire[0].deviceName }}
+      </div>
+      <div
+        class="steamHeatingBoiler2"
+        v-if="steamHeatingFire.length > 1 && steamHeatingFire[0].deviceName"
+        :title="`${steamHeatingFire[1].deviceName}详情`"
+        @click="goBoilerDetail(steamHeatingFire[1], false)"
+      >
+        {{ steamHeatingFire[1].deviceName }}
+      </div>
+      <!-- 采暖锅炉点击跳转 -->
+      <div
+        class="steamHeatingBoiler-main1"
+        v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
+        :title="`${steamHeatingFire[0].deviceName}详情`"
+        @click="goBoilerDetail(steamHeatingFire[0], false)"
+      ></div>
+      <div
+        class="steamHeatingBoiler-main2"
+        v-if="steamHeatingFire.length > 1 && steamHeatingFire[1].deviceName"
+        :title="`${steamHeatingFire[1].deviceName}详情`"
+        @click="goBoilerDetail(steamHeatingFire[1], false)"
+      ></div>
+      <!-- 采暖锅炉运行状态 -->
+      <img
+        class="steamHeatingBoiler-img1"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        v-if="steamHeatingBoilerRunClass(1)"
+        :class="{ moveClass2: steamHeatingBoilerRunClass(1) }"
+      />
+      <img
+        class="steamHeatingBoiler-img2"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        v-if="steamHeatingBoilerRunClass(2)"
+        :class="{ moveClass2: steamHeatingBoilerRunClass(2) }"
+      />
+      <!-- 采暖泵名称 -->
+      <div
+        class="steamHeatingPump1"
+        v-if="
+          steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[0].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[0], false)"
+      >
+        1#
+      </div>
+      <div
+        class="steamHeatingPump2"
+        v-if="
+          steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[0].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[1].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[1], false)"
+      >
+        2#
+      </div>
+      <div
+        class="steamHeatingPump3"
+        v-if="
+          steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[0].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[2].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[2], false)"
+      >
+        3#
+      </div>
+      <!-- 采暖泵点击跳转 -->
+      <div
+        class="steamHeatingPump-main1"
+        v-if="
+          steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[0].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[0], false)"
+      ></div>
+      <div
+        class="steamHeatingPump-main2"
+        v-if="
+          steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[1].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[1].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[1], false)"
+      ></div>
+      <div
+        class="steamHeatingPump-main3"
+        v-if="
+          steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[2].deviceName
+        "
+        :title="`${steamHeatingHzAndRun[2].deviceName}详情`"
+        @click="goPumpDetail(steamHeatingHzAndRun[2], false)"
+      ></div>
+      <!-- 采暖泵运行状态 -->
+      <img
+        class="steamHeatingPump-img1"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        v-if="steamHeatingPumpRunClass(1)"
+        :class="{ moveClass2: steamHeatingPumpRunClass(1) }"
+      />
+      <img
+        class="steamHeatingPump-img2"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        v-if="steamHeatingPumpRunClass(2)"
+        :class="{ moveClass2: steamHeatingPumpRunClass(2) }"
+      />
+      <img
+        class="steamHeatingPump-img3"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        v-if="steamHeatingPumpRunClass(3)"
+        :class="{ moveClass2: steamHeatingPumpRunClass(3) }"
+      />
+      <!-- 采暖泵频率反馈 -->
+      <div
+        class="steamHeatingPump-hz1"
+        v-if="steamHeatingPumpHz(1) && steamHeatingPumpRunClass(1)"
+      >
+        {{ steamHeatingPumpHz1 }}Hz
+      </div>
+      <div
+        class="steamHeatingPump-hz2"
+        v-if="steamHeatingPumpHz(2) && steamHeatingPumpRunClass(2)"
+      >
+        {{ steamHeatingPumpHz2 }}Hz
+      </div>
+      <div
+        class="steamHeatingPump-hz3"
+        v-if="steamHeatingPumpHz(3) && steamHeatingPumpRunClass(3)"
+      >
+        {{ steamHeatingPumpHz3 }}Hz
+      </div>
+      <!-- 热量计供回水温度 -->
+      <div class="steamHeatingInTem">{{ steamHeatingInTem }}℃</div>
+      <div class="steamHeatingOutTem">{{ steamHeatingOutTem }}℃</div>
+      <!-- 供冷区进水阀 -->
+      <div class="coolingOut-vavle">
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(coolingInletBuild, null, '裙楼供冷进水阀')"
+            style="cursor: pointer"
+            >裙楼供冷进水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.coolingInletBuild),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.coolingInletBuild, "13") }}bar
+          </div>
+        </div>
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(coolingInletGuest, null, '客房供冷进水阀')"
+            style="cursor: pointer"
+            >客房供冷进水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.coolingInletGuest),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.coolingInletGuest, "13") }}bar
+          </div>
+        </div>
+      </div>
+      <line-children
+        :angle1="-110"
+        :angle2="0"
+        :lineWidth1="230"
+        :lineWidth2="240"
+        class="coolingOut-line"
+      ></line-children>
+      <!-- 供冷区出水阀 -->
+      <div class="coolingIn-vavle">
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(coolingOutletBuild, null, '裙楼供冷出水阀')"
+            style="cursor: pointer"
+            >裙楼供冷出水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.coolingOutletBuild),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.coolingOutletBuild, "13") }}bar
+          </div>
+        </div>
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(coolingOutletGuest, null, '客房供冷出水阀')"
+            style="cursor: pointer"
+            >客房供冷出水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.coolingOutletGuest),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.coolingOutletGuest, "13") }}bar
+          </div>
+        </div>
+      </div>
+      <line-children
+        :angle1="-110"
+        :angle2="0"
+        :lineWidth1="170"
+        :lineWidth2="240"
+        class="coolingIn-line"
+      ></line-children>
+      <!--供暖区进水阀  -->
+      <div class="hotOut-vavle">
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(hotInletBuild, null, '裙楼供暖进水阀')"
+            style="cursor: pointer"
+            >裙楼供暖进水阀:</span
+          >
+          <span
+            class="break"
+            :class="{ connect: hostAndCoolingControlClass(this.hotInletBuild) }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.hotInletBuild, "13") }}bar
+          </div>
+        </div>
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(hotInletGuest, null, '客房供暖进水阀')"
+            style="cursor: pointer"
+            >客房供暖进水阀:</span
+          >
+          <span
+            class="break"
+            :class="{ connect: hostAndCoolingControlClass(this.hotInletGuest) }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.hotInletGuest, "13") }}bar
+          </div>
+        </div>
+      </div>
+      <line-children
+        :angle1="-45"
+        :angle2="0"
+        :lineWidth1="90"
+        :lineWidth2="240"
+        class="hotOut-line"
+      ></line-children>
+      <!--供暖区出水阀  -->
+      <div class="hotIn-vavle">
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(hotOutletBuild, null, '裙楼供暖出水阀')"
+            style="cursor: pointer"
+            >裙楼供暖出水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.hotOutletBuild),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.hotOutletBuild, "13") }}bar
+          </div>
+        </div>
+        <div class="water-flow-li">
+          <span
+            @click="goControlList(hotOutletGuest, null, '客房供暖出水阀')"
+            style="cursor: pointer"
+            >客房供暖出水阀:</span
+          >
+          <span
+            class="break"
+            :class="{
+              connect: hostAndCoolingControlClass(this.hotOutletGuest),
+            }"
+          ></span>
+          <div class="outInre">
+            {{ getValueByType(this.hotOutletGuest, "13") }}bar
+          </div>
+        </div>
+      </div>
+      <line-children
+        :angle1="-45"
+        :angle2="0"
+        :lineWidth1="170"
+        :lineWidth2="240"
+        class="hotIn-line"
+      ></line-children>
+    </div>
+    <!-- 报警弹框内容 -->
+    <el-dialog
+      title="报警内容"
+      :visible.sync="openDialog"
+      width="680px"
+      append-to-body
+    >
+      <el-table :data="alarmList" height="600px">
+        <el-table-column
+          prop="otherName"
+          label="报警位置"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="curTime"
+          label="报警时间"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+    </el-dialog>
+    <!-- 控制弹框内容 -->
+    <el-dialog
+      :title="controlTitle"
+      :visible.sync="openControlDialog"
+      width="850px"
+      append-to-body
+      class="monitor-dialog"
+    >
+      <div class="device-container">
+        <div class="device-li">
+          <div class="device-name">手自动切换</div>
+          <div class="device-name">手动控制</div>
+          <div
+            class="device-name"
+            v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
+          >
+            频率手自动切换
+          </div>
+          <div
+            v-if="hasFrequencySet(controlArr[0], 'frequency')"
+            class="device-name"
+          >
+            频率反馈
+          </div>
+          <div
+            v-if="hasFrequencySet(controlArr[0], 'frequencySet')"
+            class="device-name"
+          >
+            频率调节
+          </div>
+        </div>
+        <div
+          class="device-li"
+          v-for="(item, index) in controlArr"
+          :key="index + 1"
+        >
+          <div class="device-name">
+            <el-switch
+              style="display: block"
+              v-model="item.automaticText"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="手动"
+              inactive-text="自动"
+              @change="handleAutomaticText(item)"
+            >
+            </el-switch>
+          </div>
+          <div class="device-name">
+            <el-switch
+              style="display: block"
+              v-model="item.controlText"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="开启"
+              inactive-text="停止"
+              @change="handleControlText(item)"
+            >
+            </el-switch>
+          </div>
+          <!-- 频率-手自动切换 -->
+          <div
+            class="device-name"
+            v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
+          >
+            <el-switch
+              style="display: block"
+              v-model="item.frequencyAutotext"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="手动"
+              inactive-text="自动"
+              @change="handleFrequencyAutomaticText(item)"
+            >
+            </el-switch>
+          </div>
+          <div
+            class="device-name2"
+            v-if="hasFrequencySet(controlArr[0], 'frequency')"
+          >
+            {{ item.frequency }}Hz
+          </div>
+          <!-- 频率调节 -->
+          <div v-if="hasFrequencySet(controlArr[0], 'frequencySet')">
+            <el-input
+              v-model="item.frequencySet"
+              size="mini"
+              @keyup.enter.native="handleEnter(item, $event)"
+              @input="handleInput(item)"
+              @blur="handleBlur()"
+              :disabled="!item.frequencyAutotext"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  weatherData,
+  sysPerformance,
+  oneKeyButton,
+  monitorList,
+  operationConrol,
+  systemMode,
+  runTime,
+} from "@/api/centerairC/sysMonitor";
+import LineChildren from "./components/lineChildren.vue";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { policyListData } from "@/api/centerairC/strategy";
+import { getDay } from "@/utils/datetime";
+export default {
+  components: { LineChildren },
+  data() {
+    return {
+      loading: false,
+      weatherObj: {},
+      performanceObj: {},
+      hostList: [], //主机列表
+      coolingPump: [], //冷却泵
+      freezingPump: [], //冷冻泵
+      coolingTower: [], //冷却塔
+      frozenValve: [], //冷冻蝶阀
+      coolingValue: [], //冷却蝶阀
+      coolingTowerInlet: [], //冷却塔进水阀
+      coolingTowerOutlet: [], //冷却塔出水阀
+
+      coolingOutletBuild: [], //裙楼供冷出水阀
+      coolingInletBuild: [], //裙楼供冷进水阀
+      coolingOutletGuest: [], //客房供冷出水阀
+      coolingInletGuest: [], //客房供冷进水阀
+
+      hotOutletBuild: [], //裙楼供暖出水阀
+      hotInletBuild: [], //裙楼供暖进水阀
+      hotOutletGuest: [], //客房供暖出水阀
+      hotInletGuest: [], //客房供暖进水阀
+      // 频率反馈
+      steamHeatingPumpHz1: "",
+      steamHeatingPumpHz2: "",
+      steamHeatingPumpHz3: "",
+      steamHeatingHzAndRun: [], //运行和频率
+      steamHeatingFire: [], //热水锅炉火力
+      steamHeatingTem: [], //热量计供回水温度数组
+      steamHeatingInTem: "", //回水温度
+      steamHeatingOutTem: "", //供水温度
+      freezingManifold: [], //冷冻总管
+      isShowOn: false, //一键启停,false是Off,true显示On
+      oneKeyButtonId: "",
+
+      // 主机负载
+      hostLoad1: "",
+      hostLoad2: "",
+      hostLoad3: "",
+      // 主机设定温度
+      hostSetTem1: "",
+      hostSetTem2: "",
+      hostSetTem3: "",
+      // 冷却泵频率反馈
+      coolingPumpHz1: "",
+      coolingPumpHz2: "",
+      coolingPumpHz3: "",
+      coolingPumpHz4: "",
+      coolingPumpHz5: "",
+      // 冷冻泵频率反馈
+      freezingPumpHz1: "",
+      freezingPumpHz2: "",
+      freezingPumpHz3: "",
+      freezingPumpHz4: "",
+      freezingPumpHz5: "",
+      // 冷却塔风机频率
+      coolingTowerHz3: "",
+      coolingTowerHz2: "",
+      coolingTowerHz1: "",
+      // 冷冻泵进出水温度
+      freezingInTem: "",
+      freezingOutTem: "",
+      // 冷冻水流
+      freezingOutWater: "",
+      // 冷冻泵进出压力
+      freezingInPre: "",
+      freezingOutPre: "",
+      // 冷却进出水温度
+      coolingInTem: "",
+      coolingOutTem: "",
+
+      // 报警标志
+      isWarning: false,
+      // 报警列表
+      alarmList: [],
+      // 系统模式
+      sysStatus: "",
+      // 模式提示
+      startOrStopStatus: "",
+      openDialog: false,
+      timer: null, // 用于存储定时器 ID
+
+      currentDate: new Date(),
+      nowTimer: null,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+
+      // 控制弹框
+      controlTitle: "",
+      openControlDialog: false,
+      controlArr: [],
+
+      hostAddTime: "", //主机加载时间
+      hostReduceTime: "", //主机减载时间
+    };
+  },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+  },
+  created() {},
+  mounted() {
+    // 在组件挂载后尝试进入全屏
+    this.requestFullscreen();
+    // 首次进入页面时执行
+    this.getWeatherData();
+    this.getSystemMode();
+    this.getPerformance();
+    this.getOneKeyButton();
+    this.getMonitorList();
+    this.getSteamHeatingData();
+    this.getAlarnStatus();
+    this.getDayData();
+
+    // 设置定时器，每 10 秒执行一次
+    this.timer = setInterval(() => {
+      this.getWeatherData();
+      this.getSystemMode();
+      this.getPerformance();
+      this.getOneKeyButton();
+      this.getMonitorList();
+      this.getSteamHeatingData();
+      this.getAlarnStatus();
+      this.getDayData();
+    }, 10000);
+    // 每秒更新一次时间
+    this.nowTimer = setInterval(() => {
+      this.currentDate = new Date();
+    }, 1000);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+    // 在组件销毁前退出全屏
+    // this.exitFullscreen();
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏操作没有进行中啊~~~~~~~~~~~~~~~~", element);
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      // 退出全屏
+      // this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      // 退出全屏
+      // this.exitFullscreen();
+      window.history.go(-2);
+    },
+    // 冷机性能
+    goPerformance() {
+      // 退出全屏
+      // this.exitFullscreen();
+      this.$router.push("/performance");
+    },
+    // 系统控制
+    goControl() {
+      // 退出全屏
+      // this.exitFullscreen();
+      this.$router.push("/centerairC/monitorControl/sysControl");
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+
+    // 主机参数
+    goHostDetail(item, val) {
+      console.log("item", item);
+      let hostId = item.properties[0].deviceLedgerId;
+      this.$router.push({
+        path: "/hostDetails",
+        query: {
+          hostId: hostId,
+          hostName: item.deviceName,
+          isMagnetic: val,
+        },
+      });
+    },
+    // 获取天气相关数据
+    getWeatherData() {
+      weatherData().then((res) => {
+        if (res.code == 200) {
+          this.weatherObj = res.data;
+        }
+      });
+    },
+    // 获取系统性能数据
+    getPerformance() {
+      sysPerformance().then((res) => {
+        if (res.code == 200) {
+          this.performanceObj = res.data;
+        }
+      });
+    },
+    // 获取当前系统模式/启动、停止运行状态/报警列表
+    getSystemMode() {
+      let data = {
+        systemType: "0",
+        paramType: "27",
+      };
+      systemMode(data).then((res) => {
+        console.log("当前系统模式与报警列表返回", res);
+        if (res.code == 200) {
+          this.sysStatus = res.data.autoType;
+          this.alarmList = res.data.alarmList;
+          if (res.data.alarmList.length > 0) {
+            this.isWarning = true;
+          } else {
+            this.isWarning = false;
+          }
+          this.startOrStopStatus = res.data.startOrStopStatus;
+        }
+      });
+    },
+    showAlarm() {
+      this.openDialog = true;
+    },
+    // 获取一键启停信息
+    getOneKeyButton() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: 0,
+          paramType: "27",
+        };
+        oneKeyButton(data)
+          .then((res) => {
+            console.log("一键启停返回信息", res);
+            if (res.code === 200) {
+              this.oneKeyButtonId = res.data.id;
+              if (Number(res.data.curValue) == 0) {
+                this.isShowOn = false;
+              } else {
+                this.isShowOn = true;
+              }
+            } else {
+              this.oneKeyButtonId = "";
+              this.isShowOn = false;
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 一键启停按钮
+    handleOneKeyButton() {
+      let param = "";
+      let paramText = "";
+      if (this.isShowOn) {
+        // this.isShowOn为true代表ON,此时点击按钮想OFF
+        param = 0;
+        paramText = "一键关闭";
+      } else {
+        param = 1;
+        paramText = "一键开启";
+      }
+      this.$confirm(`确定要${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let data = {
+            id: this.oneKeyButtonId,
+            param: param,
+          };
+          operationConrol([data])
+            .then((res) => {
+              if (res.code == 200) {
+                this.$modal.msgSuccess("指令下发成功!");
+                // 开启 loading 效果
+                this.loading = true;
+                // 更新状态;
+                setTimeout(() => {
+                  this.getOneKeyButton().finally(() => {
+                    // 关闭 loading 效果
+                    this.loading = false;
+                  });
+                }, 5000);
+              } else {
+                this.getOneKeyButton();
+              }
+            })
+            .catch((error) => {
+              console.log("请求发生错误，更新设备状态", error);
+              this.getOneKeyButton();
+            });
+        })
+        .catch(() => {});
+    },
+    // 主机加减载时间min
+    getPolicyList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: "0",
+          funPolicyType: "1",
+        };
+        policyListData(data)
+          .then((res) => {
+            console.log("策略返回res", res);
+            if (res.code == 200) {
+              let dataList = res.rows;
+              // 筛选出主机->加减载时间
+              dataList.forEach((val) => {
+                if (val.name === "主机策略") {
+                  val.values.forEach((child) => {
+                    if (child.pointName === "主机加载时间") {
+                      this.hostAddTime = child.curValue;
+                    }
+                    if (child.pointName === "主机减载时间") {
+                      this.hostReduceTime = child.curValue;
+                    }
+                  });
+                }
+              });
+            } else {
+              this.policyList = [];
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 系统监测数据
+    getMonitorList() {
+      monitorList({ systemType: 0 }).then((res) => {
+        if (res.code === 200) {
+          console.log("设备监测列表返回", res);
+
+          // 初始化各个设备列表
+          this.hostList = [];
+          this.coolingPump = [];
+          this.freezingPump = [];
+          this.coolingTower = [];
+          this.frozenValve = [];
+          this.coolingValue = [];
+          this.coolingTowerInlet = [];
+          this.coolingTowerOutlet = [];
+          this.freezingManifold = [];
+          this.coolingOutletBuild = []; //裙楼供冷出水阀
+          this.coolingInletBuild = []; //裙楼供冷进水阀
+          this.coolingOutletGuest = []; //客房供冷出水阀
+          this.coolingInletGuest = []; //客房供冷进水阀
+          this.hotOutletBuild = []; //裙楼供暖出水阀
+          this.hotInletBuild = []; //裙楼供暖进水阀
+          this.hotOutletGuest = []; //客房供暖出水阀
+          this.hotInletGuest = []; //客房供暖进水阀
+
+          res.rows.forEach((row) => {
+            switch (row.name) {
+              case "0":
+                this.hostList = this.processDeviceList(row.values);
+                console.log("主机列表", this.hostList);
+                break;
+              case "1":
+                this.coolingPump = this.processDeviceList(row.values);
+                console.log("冷却泵列表", this.coolingPump);
+                break;
+              case "2":
+                this.freezingPump = this.processDeviceList(row.values);
+                console.log("冷冻泵列表", this.freezingPump);
+                break;
+              case "3":
+                this.coolingTower = this.processDeviceList(row.values);
+                console.log("冷却塔列表", this.coolingTower);
+                break;
+              case "4":
+                this.frozenValve = this.processDeviceList(row.values);
+                console.log("冷冻蝶阀列表", this.frozenValve);
+                break;
+              case "7":
+                this.coolingValue = this.processDeviceList(row.values);
+                console.log("冷却蝶阀列表", this.coolingValue);
+                break;
+              case "8":
+                this.coolingTowerInlet = this.processDeviceList(row.values);
+                console.log("冷却塔进水阀列表", this.coolingTowerInlet);
+                break;
+              case "9":
+                this.coolingTowerOutlet = this.processDeviceList(row.values);
+                console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
+                break;
+              case "15":
+                this.freezingManifold = row.values;
+                console.log("冷冻总管", this.freezingManifold);
+                this.freezingManifoldData();
+                break;
+              case "18":
+                let buildInData = row.values;
+                buildInData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingInletBuild.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotInletBuild.push(item);
+                  }
+                });
+                console.log("裙楼供冷进水阀", this.coolingInletBuild);
+                console.log("裙楼供暖进水阀", this.hotInletBuild);
+                break;
+              case "19":
+                let buildOutData = row.values;
+                buildOutData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingOutletBuild.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotOutletBuild.push(item);
+                  }
+                });
+                console.log("裙楼供冷出水阀", this.coolingOutletBuild);
+                console.log("裙楼供暖出水阀", this.hotOutletBuild);
+                break;
+              case "20":
+                let guestInData = row.values;
+                guestInData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingInletGuest.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotInletGuest.push(item);
+                  }
+                });
+                console.log("客房供冷进水阀", this.coolingInletGuest);
+                console.log("客房供暖进水阀", this.hotInletGuest);
+                break;
+              case "21":
+                let guestOutData = row.values;
+                guestOutData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingOutletGuest.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotOutletGuest.push(item);
+                  }
+                });
+                console.log("客房供冷出水阀", this.coolingOutletGuest);
+                console.log("客房供暖出水阀", this.hotOutletGuest);
+                break;
+              default:
+                break;
+            }
+          });
+        }
+      });
+    },
+    // 获取蒸汽锅炉运行监测数据
+    getSteamHeatingData() {
+      monitorList({ systemType: 3 }).then((res) => {
+        if (res.code === 200) {
+          console.log("设备监测列表返回", res);
+          // 初始化各个设备列表
+          this.steamHeatingHzAndRun = []; //频率和运行状态
+          this.steamHeatingFire = []; //热水锅炉火力
+          this.steamHeatingTem = []; //热量计供回水温度
+          res.rows.forEach((row) => {
+            switch (row.name) {
+              case "11":
+                this.steamHeatingHzAndRun = this.processDeviceList(row.values);
+                console.log(
+                  "裙蒸汽锅炉频率和运行状态",
+                  this.steamHeatingHzAndRun
+                );
+                break;
+              case "25":
+                this.steamHeatingFire = this.processDeviceList(row.values);
+                console.log("裙蒸汽锅炉火力", this.steamHeatingFire);
+
+                break;
+              case "6":
+                this.steamHeatingTem = row.values;
+                console.log("裙蒸汽锅炉热量计供回水温度", this.steamHeatingTem);
+                this.steamHeatingTem.forEach((element) => {
+                  if (
+                    element.collectName.includes("回水温度") &&
+                    element.paramType == "12"
+                  ) {
+                    this.steamHeatingInTem = element.collectValue;
+                  }
+                  if (
+                    element.collectName.includes("供水温度") &&
+                    element.paramType == "12"
+                  ) {
+                    this.steamHeatingOutTem = element.collectValue;
+                  }
+                });
+                break;
+              default:
+                break;
+            }
+          });
+        }
+      });
+    },
+    // 封装一个通用函数来处理设备列表
+    processDeviceList(values) {
+      const deviceList = [];
+      // 遍历每个设备属性
+      values.forEach((item) => {
+        // 提取设备编号
+        const match = item.deviceName.match(/(\d+)号/);
+        if (match) {
+          const deviceNumber = parseInt(match[1]);
+          // 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
+          if (!deviceList[deviceNumber - 1]) {
+            deviceList[deviceNumber - 1] = {
+              deviceName: item.deviceName,
+              properties: [],
+            };
+          }
+          // 将当前属性添加到对应设备的 properties 数组中
+          deviceList[deviceNumber - 1].properties.push(item);
+        }
+      });
+      // 过滤掉 deviceList 中可能存在的空元素
+      return deviceList.filter((item) => item);
+    },
+    // 主机负载
+    hostLoadData(index) {
+      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "28") {
+          // 动态构造属性名
+          const propertyName = `hostLoad${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表启停控制中的停止
+      return false;
+    },
+    // 主机启停状态
+    hostListControlClass(index) {
+      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 遍历 properties 数组，如果当前对象paramType === 2并且item.collectValue !== "0.00"则便是启停控制中的开启
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (
+          item.paramType === "2" &&
+          Number(item.collectValue) !== 0 &&
+          item.collectName.includes("启停")
+        ) {
+          return true;
+        }
+      }
+      // 否则代表启停控制中的停止
+      return false;
+    },
+    // 主机运行状态
+    hostListRunClass(index) {
+      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 主机冷却水流信号
+    hostCoolingWaterFlowClass(index) {
+      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 21并且item.collectValue !== "0.00"则便是主机冷却水流信号：接通
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "21" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表主机冷却水流信号：断开
+      return false;
+    },
+    // 主机冷冻水流信号
+    hostFreezeWaterFlowClass(index) {
+      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 20并且item.collectValue !== "0.00"则便是主机冷冻水流信号：接通
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "20" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表主机冷冻水流信号：断开
+      return false;
+    },
+    // 主机设定温度
+    hostSetTemClass(index) {
+      // 从 this.hostList  中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.hostList.length; i++) {
+        const device = this.hostList[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (
+          item.paramType === "12" &&
+          item.collectName.includes("冷水控制设定值")
+        ) {
+          // 动态构造属性名
+          const propertyName = `hostSetTem${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.hostSetTem[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却泵运行状态
+    coolingPumpRunClass(index) {
+      // 从 this.coolingPump 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingPump.length; i++) {
+        const device = this.coolingPump[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却泵频率
+    coolingPumpHz(index) {
+      // 从 this.coolingPump  中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingPump.length; i++) {
+        const device = this.coolingPump[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "4") {
+          // 动态构造属性名
+          const propertyName = `coolingPumpHz${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.coolingPumpHz[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷冻泵运行状态
+    freezingPumpRunClass(index) {
+      // 从 this.freezingPump  中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.freezingPump.length; i++) {
+        const device = this.freezingPump[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    //冷冻泵频率
+    freezingPumpHz(index) {
+      // 从 this.freezingPump  中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.freezingPump.length; i++) {
+        const device = this.freezingPump[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "4") {
+          // 动态构造属性名
+          const propertyName = `freezingPumpHz${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.freezingPumpHz[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔风机运行状态,index为多少号风机,1表示1号风机;item表示风机x
+    coolingTowerRunClass(index, item) {
+      // 从 this.coolingTower  中查找 deviceName 第一个数字与 index 相同的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingTower.length; i++) {
+        const device = this.coolingTower[i];
+        const deviceName = device.deviceName.toString();
+        // 使用正则表达式匹配 deviceName 开头的数字,提取 deviceName 的第一个词（以非数字字符分割）
+        const firstWordMatch = deviceName.match(/^\d+/);
+        if (firstWordMatch && firstWordMatch[0] === index.toString()) {
+          targetDevice = device;
+          break;
+        }
+      }
+
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 创建一个新数组，用于存储 paramType === 1 的对象
+      const filteredProperties = [];
+      let filterItem = {};
+      for (let i = 0; i < properties.length; i++) {
+        // console.log('properties[i].paramType',properties[i].paramType)
+        if (properties[i].paramType === "1") {
+          filteredProperties.push(properties[i]);
+          // filterItem  = properties[i]
+        }
+      }
+      // // 将处理后的对象添加到 deviceList 中
+      // if (Object.keys(filterItem).length > 1) {
+      //   filteredProperties.push(filterItem);
+      // }
+      // console.log("paramType为1的对象", filteredProperties);
+      // console.log("index, item", index, item);
+      // 根据 index 和 item 生成目标属性名称
+      const towerNumber = index;
+      const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
+      // console.log("targetPropertyName",targetPropertyName)
+      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
+      for (let i = 0; i < filteredProperties.length; i++) {
+        const collectName = filteredProperties[i].collectName;
+        if (
+          collectName.includes(`${towerNumber}号冷却塔风机${item}`) &&
+          collectName.includes("运行") &&
+          Number(filteredProperties[i].collectValue) !== 0
+        ) {
+          if (index === 0 && item === 1) {
+            // console.log(
+            //   "返回的true",
+            //   filteredProperties[i].collectName === targetPropertyName &&
+            //     Number(filteredProperties[i].collectValue) !== 0
+            // );
+          }
+          return true;
+        }
+      }
+
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔风机频率,index为多少号风机,1表示1号风机;item表示风机x
+    coolingTowerHz(index, item) {
+      // 从 this.coolingTower  中查找 deviceName 第一个数字与 index 相同的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingTower.length; i++) {
+        const device = this.coolingTower[i];
+        const deviceName = device.deviceName.toString();
+        // 使用正则表达式匹配 deviceName 开头的数字,提取 deviceName 的第一个词（以非数字字符分割）
+        const firstWordMatch = deviceName.match(/^\d+/);
+        if (firstWordMatch && firstWordMatch[0] === index.toString()) {
+          targetDevice = device;
+          break;
+        }
+      }
+
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 创建一个新数组，用于存储 paramType === 4 的对象
+      const filteredProperties = [];
+      let filterItem = {};
+      for (let i = 0; i < properties.length; i++) {
+        // console.log('properties[i].paramType',properties[i].paramType)
+        if (properties[i].paramType === "4") {
+          filteredProperties.push(properties[i]);
+          // filterItem  = properties[i]
+        }
+      }
+      // // 将处理后的对象添加到 deviceList 中
+      // if (Object.keys(filterItem).length > 1) {
+      //   filteredProperties.push(filterItem);
+      // }
+      // console.log("paramType为4的对象", filteredProperties);
+      // console.log("index, item", index, item);
+      // 根据 index 和 item 生成目标属性名称
+      const towerNumber = index;
+      const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
+      // console.log("targetPropertyName",targetPropertyName)
+      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
+      for (let i = 0; i < filteredProperties.length; i++) {
+        const collectName = filteredProperties[i].collectName;
+        if (
+          collectName.includes(`${towerNumber}号冷却塔风机${item}`) &&
+          collectName.includes("频率反馈")
+        ) {
+          // 动态构造 coolingTowerHz 相关属性名
+          const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}`;
+          // console.log(
+          //   "coolingTowerHzPropertyName---",
+          //   coolingTowerHzPropertyName
+          // );
+          // 获取 collectValue 转换为数字后的值
+          const value = Number(filteredProperties[i].collectValue);
+          // 使用方括号语法动态设置属性值
+          this[coolingTowerHzPropertyName] = value;
+          // console.log(
+          //   "coolingTowerHzPropertyName])",
+          //   coolingTowerHzPropertyName
+          // );
+          // console.log("Number(filteredProperties[i].collectValue)", value);
+          return true;
+        }
+      }
+
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔出水蝶阀启停状态
+    towerValveControlClass(index) {
+      // 从 this.coolingTowerOutlet 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingTowerOutlet.length; i++) {
+        const device = this.coolingTowerOutlet[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // console.log("item.collectName", item.collectName);
+          // console.log("item.collectValue", item.collectValue);
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("开到位") &&
+            Number(item.collectValue) == 1
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("关到位") &&
+            Number(item.collectValue) == 0
+          ) {
+            valveCloseFeedbackFound = true;
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷却塔进水蝶阀启停状态
+    towerValveInControlClass(index) {
+      // 从 this.coolingTowerInlet 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingTowerInlet.length; i++) {
+        const device = this.coolingTowerInlet[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // console.log("item.collectName", item.collectName);
+          // console.log("item.collectValue", item.collectValue);
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("开到位") &&
+            Number(item.collectValue) == 1
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("关到位") &&
+            Number(item.collectValue) == 0
+          ) {
+            valveCloseFeedbackFound = true;
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷冻蝶阀启停状态
+    frozenValveControlClass(index) {
+      // 从 this.frozenValve 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.frozenValve.length; i++) {
+        const device = this.frozenValve[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("开到位") &&
+            Number(item.collectValue) !== 0
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("关到位") &&
+            Number(item.collectValue) === 0
+          ) {
+            valveCloseFeedbackFound = true;
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷却蝶阀启停状态
+    coolingValueControlClass(index) {
+      // 从 this.coolingValue 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.coolingValue.length; i++) {
+        const device = this.coolingValue[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("开到位") &&
+            Number(item.collectValue) !== 0
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("关到位") &&
+            Number(item.collectValue) === 0
+          ) {
+            valveCloseFeedbackFound = true;
+            // console.log("冷冻蝶阀阀关到位应该是true才对呀");
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷冻总管数据 供回水温度、压力等
+    freezingManifoldData(index, val) {
+      console.log("this.freezingManifold", this.freezingManifold);
+      // 检查 freezingManifold 长度是否足够
+      if (this.freezingManifold.length <= index) {
+        return false;
+      }
+      this.freezingManifold.forEach((item) => {
+        if (item.collectName === "冷冻供水温度") {
+          this.freezingOutTem = item.collectValue;
+          console.log("item.collectName", item.collectName);
+        } else if (item.collectName === "冷冻回水温度") {
+          this.freezingInTem = item.collectValue;
+        } else if (item.collectName === "冷冻供水压力") {
+          this.freezingOutPre = item.collectValue;
+        } else if (item.collectName === "冷冻回水压力") {
+          this.freezingInPre = item.collectValue;
+        } else if (item.collectName === "冷却供水温度") {
+          this.coolingOutTem = item.collectValue;
+        } else if (item.collectName === "冷却回水温度") {
+          this.coolingInTem = item.collectValue;
+        } else if (item.collectName === "总冷量计瞬时流量") {
+          this.freezingOutWater = item.collectValue;
+        }
+      });
+      return true;
+    },
+    // 裙楼-客房进出水阀启停状态
+    hostAndCoolingControlClass(item) {
+      // 检查数组中是否存在 paramType 为 "7" 的对象
+      const hasParamType7 = item.some((obj) => obj.paramType === "7");
+
+      if (!hasParamType7) {
+        // 如果没有 paramType 为 "7" 的对象
+        for (let i = 0; i < item.length; i++) {
+          if (item[i].paramType === "2") {
+            if (Number(item[i].collectValue) !== 0) {
+              return true;
+            }
+          }
+        }
+      } else {
+        // 如果有 paramType 为 "7" 的对象
+        for (let i = 0; i < item.length; i++) {
+          if (item[i].paramType === "7") {
+            const { collectName, collectValue } = item[i];
+            if (
+              (collectName.includes("开到位") && Number(collectValue) === 1) ||
+              (collectName.includes("关到位") && Number(collectValue) === 0)
+            ) {
+              return true;
+            }
+          }
+        }
+      }
+      return false;
+    },
+    // 裙楼、客房的进出水压力
+    getValueByType(arr, targetType) {
+      const targetItem = arr.find((item) => item.paramType === targetType);
+      return targetItem ? targetItem.collectValue : 0;
+    },
+    // 采暖泵运行状态
+    steamHeatingPumpRunClass(index) {
+      // 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
+        const device = this.steamHeatingHzAndRun[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) == !0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 采暖泵频率
+    steamHeatingPumpHz(index) {
+      // 从 this.steamHeatingHzAndRun  中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
+        const device = this.steamHeatingHzAndRun[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "4") {
+          // 动态构造属性名
+          const propertyName = `steamHeatingPumpHz${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.steamHeatingPumpHz[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 采暖锅炉运行状态
+    steamHeatingBoilerRunClass(index) {
+      // 从 this.steamHeatingFire 中查找 deviceName 包含与 index 相同数字的对象
+      let targetDevice = null;
+      for (let i = 0; i < this.steamHeatingFire.length; i++) {
+        const device = this.steamHeatingFire[i];
+        const indexStr = index.toString();
+        const deviceName = device.deviceName.toString();
+        for (let j = 0; j < indexStr.length; j++) {
+          if (deviceName.includes(indexStr[j])) {
+            targetDevice = device;
+            break;
+          }
+        }
+        if (targetDevice) {
+          break;
+        }
+      }
+      // 如果未找到匹配的设备，返回 false
+      if (!targetDevice) {
+        return false;
+      }
+      // 获取匹配设备的 properties 数组
+      const properties = targetDevice.properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // console.log("锅炉列表111", properties);
+      // 遍历 properties 数组，如果当前对象paramType === 45并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (
+          item.paramType === "45" &&
+          item.collectName.includes("火力") &&
+          Number(item.collectValue) !== 0
+        ) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 采暖锅炉温度
+    getTemperature(values, targetName) {
+      // console.log("values和targetName", values, targetName);
+      const targetItem = values.find((item) =>
+        item.collectName.includes(targetName)
+      );
+      // console.log("得到的targetItem", targetItem.collectValue);
+      return targetItem ? targetItem.collectValue : "";
+    },
+    // 采暖锅炉跳转
+    goBoilerDetail(item, val) {
+      // console.log("item", item);
+      // let hostId = item.properties[0].deviceLedgerId;
+      this.$router.push({
+        path: "/hotWaterBoilerDetails",
+        // query: {
+        //   hostId: hostId,
+        //   hostName: item.deviceName,
+        //   isMagnetic: val,
+        // },
+      });
+    },
+    // 采暖泵跳转
+    goPumpDetail() {
+      this.$router.push({
+        path: "/heatingPumpDetails",
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+    // 控制
+    goControlList(item, index, name) {
+      console.log("item1111111111111111111", item, index, name);
+      // 处理properties值,
+      this.controlArr = [];
+      this.controlTitle = "";
+      // 初始化一个空对象来存储非蝶阀处理后的结果
+      let deviceItem = {};
+      let properties;
+      if (index !== undefined && index !== null && index !== "") {
+        // 从 item  中查找 deviceName 包含与 index 相同数字的对象
+        let targetDevice = null;
+        for (let i = 0; i < item.length; i++) {
+          const device = item[i];
+          const indexStr = index.toString();
+          const deviceName = device.deviceName.toString();
+          for (let j = 0; j < indexStr.length; j++) {
+            if (deviceName.includes(indexStr[j])) {
+              this.controlTitle = deviceName;
+              deviceItem.name = deviceName;
+              console.log("this.controlTitle", this.controlTitle);
+              targetDevice = device;
+              break;
+            }
+          }
+          if (targetDevice) {
+            break;
+          }
+        }
+        // 如果未找到匹配的设备，返回 false
+        if (!targetDevice) {
+          return false;
+        }
+        // 获取匹配设备的 properties 数组
+        properties = targetDevice.properties;
+        console.log("匹配的当前的设备数据", properties);
+      } else {
+        // 如果 index 未传值，直接将 item 当作 properties
+        properties = item;
+        this.controlTitle = name;
+        deviceItem.name = name;
+        console.log("index 未传值，直接处理 item 作为 properties", properties);
+      }
+      console.log("匹配的当前的设备数据", properties);
+
+      properties.forEach((child) => {
+        if (child.collectName) {
+          // 手动控制
+          if (
+            child.paramType === "2" &&
+            !child.collectName.includes("阀") &&
+            child.collectName.includes("启停")
+          ) {
+            deviceItem.controlText =
+              Number(child.collectValue) == 0 ? false : true;
+            deviceItem.controlId = child.id;
+          }
+          // 阀门的-手动控制
+          else if (
+            child.paramType === "2" &&
+            child.collectName.includes("阀")
+          ) {
+            deviceItem.controlText =
+              Number(child.collectValue) == 0 ? false : true;
+            deviceItem.controlId = child.id;
+          }
+          // 手自动切换    0自动1手动
+          else if (
+            child.paramType === "6" &&
+            !child.collectName.includes("阀")
+          ) {
+            deviceItem.automaticText =
+              Number(child.collectValue) == 0 ? false : true;
+            deviceItem.automaticId = child.id;
+          }
+          // 阀门的-手自动切换
+          else if (
+            child.paramType === "6" &&
+            child.collectName.includes("阀")
+          ) {
+            deviceItem.automaticText =
+              Number(child.collectValue) == 0 ? false : true;
+            deviceItem.automaticId = child.id;
+          }
+          // 频率-手自动切换
+          else if (
+            child.paramType === "40" &&
+            !child.collectName.includes("阀")
+          ) {
+            deviceItem.frequencyAutotext =
+              Number(child.collectValue) == 0 ? false : true;
+            deviceItem.frequencyAutotextId = child.id;
+          }
+          // 频率调节
+          else if (
+            child.paramType === "3" &&
+            !child.collectName.includes("阀")
+          ) {
+            deviceItem.frequencySet =
+              Number(child.collectValue) == 0 ? "0" : child.collectValue;
+            deviceItem.frequencyId = child.id;
+          }
+          // 频率反馈
+          else if (
+            child.paramType === "4" &&
+            child.collectName.includes("频率反馈")
+          ) {
+            deviceItem.frequency = child.collectValue;
+          }
+        }
+      });
+      // 将处理后的对象添加到 deviceList 中
+      if (Object.keys(deviceItem).length > 1) {
+        this.controlArr.push(deviceItem);
+      }
+      console.log("处理后的this.controlArr", this.controlArr);
+      this.openControlDialog = true;
+    },
+    hasFrequencySet(item, name) {
+      return (
+        item &&
+        item.hasOwnProperty(name) &&
+        item[name] !== null &&
+        item[name] !== ""
+      );
+    },
+    // 处理输入事件，过滤非数字字符
+    handleInput(item) {
+      console.log("校验");
+      // 实时校验并过滤非数字字符
+      item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
+    },
+    // 失去焦点
+    handleBlur() {
+      // this.currentFocusIndex = "";
+    },
+    handleEnter(item, event) {
+      console.log("请求后端", item);
+      // 失去焦点
+      event.target.blur();
+      this.$confirm(
+        `确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.hadleOperationConrol(item.frequencyId, item.frequencySet);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          // this.$emit("upList");
+        });
+    },
+    //手动控制
+    handleControlText(item) {
+      this.$confirm(
+        `确定要切换设备"${item.name}"的状态为:${
+          item.controlText ? "开启" : "停止 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.controlText);
+          let param = null;
+          if (item.controlText) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.hadleOperationConrol(item.controlId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.controlText = !item.controlText;
+          console.log("不请求后台");
+        });
+    },
+    // 手自动切换
+    handleAutomaticText(item) {
+      this.$confirm(
+        `确定要切换设备"${item.name}"的状态为:${
+          item.automaticText ? "手动" : "自动 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.automaticText);
+          let param = null;
+          if (item.automaticText) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.hadleOperationConrol(item.automaticId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.automaticText = !item.automaticText;
+          console.log("不请求后台");
+        });
+    },
+    // 频率-手自动切换
+    handleFrequencyAutomaticText(item) {
+      this.$confirm(
+        `确定要切换"${item.name}"的频率手自动状态为:${
+          item.frequencyAutotext ? "手动" : "自动 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.frequencyAutotext);
+          let param = null;
+          if (item.frequencyAutotext) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.hadleOperationConrol(item.frequencyAutotextId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.frequencyAutotext = !item.frequencyAutotext;
+          console.log("不请求后台");
+        });
+    },
+    // 操作
+    hadleOperationConrol(id, param) {
+      let data = {
+        id: id,
+        param: param,
+      };
+      console.log("操作参数", data);
+      operationConrol([data])
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getMonitorList();
+              this.loading = false;
+            }, 5000);
+          } else {
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getMonitorList();
+          }
+        })
+        .catch((error) => {
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getMonitorList();
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  background-color: black;
+  color: #fff;
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+    .title-center {
+      width: 9.46rem;
+      height: 0.8rem;
+    }
+    .title-right {
+      width: 5.04rem;
+      height: 0.78rem;
+    }
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      cursor: pointer;
+    }
+    .nowTime {
+      position: absolute;
+      top: 0.37rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .icon_warning {
+      position: absolute;
+      top: 0.39rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+    }
+    .icon_home {
+      position: absolute;
+      top: 0.39rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+    .back-icon {
+      position: absolute;
+      top: 0.39rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      cursor: pointer;
+    }
+  }
+  .monitor-content {
+    width: 16rem;
+    min-height: calc(10.74rem - 1rem);
+    position: relative;
+    margin-left: calc((100% - 16rem) / 2);
+    .sys-logo {
+      width: 1.9rem;
+      height: 0.56rem;
+      position: absolute;
+      top: 0.4rem;
+      left: 0;
+      z-index: 10;
+    }
+    .sys-title {
+      background-image: url(../../../assets/images/top.png);
+      background-size: 100% 100%;
+      width: 16rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0;
+      left: 0;
+      font-size: 0.22rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .monitor-img {
+      position: absolute;
+      top: 0.2rem;
+      left: calc((100% - 15.4rem) / 2);
+      // left:1rem;
+      width: 15.4rem;
+      height: 9.25rem;
+      z-index: 1;
+    }
+    .fan-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 1.04rem;
+      left: 7.2rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 0.98rem;
+      left: 7.65rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 0.92rem;
+      left: 8.07rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    /* 定义 fan 动画关键帧 */
+    @keyframes fan {
+      0% {
+        /* 修改初始旋转角度 */
+        transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+      }
+      100% {
+        /* 修改结束旋转角度 */
+        transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
+      }
+    }
+    .towerValve1 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 1.43rem;
+      left: 7.7rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve2 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 1.37rem;
+      left: 8.13rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve3 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 1.3rem;
+      left: 8.56rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve4 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 2.35rem;
+      left: 7.62rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve5 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 2.27rem;
+      left: 8.02rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve6 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 2.2rem;
+      left: 8.44rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .in-arrow {
+      position: absolute;
+      top: 3.46rem;
+      right: 2.78rem;
+      transform: rotate(180deg);
+      width: 0.3rem;
+      height: 0.45rem;
+      z-index: 10;
+    }
+    .out-arrow {
+      position: absolute;
+      top: 3.4rem;
+      right: 3.05rem;
+      width: 0.3rem;
+      height: 0.45rem;
+      z-index: 10;
+    }
+    .coolingInTem {
+      z-index: 10;
+      position: absolute;
+      top: 2.9rem;
+      left: 6.8rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .coolingOutTem {
+      z-index: 10;
+      position: absolute;
+      top: 2.9rem;
+      left: 5.85rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingInTem {
+      z-index: 10;
+      position: absolute;
+      top: 4rem;
+      right: 5.5rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutTem {
+      z-index: 10;
+      position: absolute;
+      top: 4.2rem;
+      right: 5.05rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutWater {
+      z-index: 10;
+      position: absolute;
+      top: 5.43rem;
+      right: 5.1rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+
+    .freezingInPre {
+      z-index: 10;
+      position: absolute;
+      top: 4.3rem;
+      right: 6.3rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutPre {
+      z-index: 10;
+      position: absolute;
+      top: 4.7rem;
+      right: 6rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .host-line1 {
+      position: absolute;
+      left: -0.5rem;
+      top: 6.55rem;
+      z-index: 10;
+    }
+    .host-line2 {
+      position: absolute;
+      left: -0.5rem;
+      top: 7.3rem;
+      z-index: 10;
+    }
+    .host-line3 {
+      position: absolute;
+      left: -0.4rem;
+      top: 8.02rem;
+      z-index: 10;
+    }
+    .setTem1 {
+      z-index: 10;
+      font-size: 0.16rem;
+      font-weight: bold;
+      color: #ffffff;
+      position: absolute;
+      top: 6.8rem;
+      left: 4.1rem;
+      transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
+      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    .setTem2 {
+      z-index: 10;
+      font-size: 0.16rem;
+      font-weight: bold;
+      color: #ffffff;
+      position: absolute;
+      top: 6.12rem;
+      left: 5.9rem;
+      transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
+      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    .setTem3 {
+      z-index: 10;
+      font-size: 0.16rem;
+      font-weight: bold;
+      color: #ffffff;
+      position: absolute;
+      top: 5.5rem;
+      left: 7.8rem;
+      transform: rotateX(20deg) rotateY(0deg) rotateZ(-22deg); /* 分别在 X、Y、Z 轴上旋转 */
+      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    .hostName1 {
+      cursor: pointer;
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 6.35rem;
+      left: 3.05rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(46deg); /* 分别在 X、Y、Z 轴上旋转 */
+      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
+    }
+    .hostName2 {
+      cursor: pointer;
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 5.73rem;
+      left: 4.89rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
+      transform-origin: bottom center;
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    .hostName3 {
+      cursor: pointer;
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 5.14rem;
+      left: 6.47rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(36deg);
+      transform-origin: bottom center;
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    /* 定义 host 动画关键帧 */
+    @keyframes host {
+      0% {
+        /* 修改初始旋转角度 */
+        transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+      }
+      100% {
+        /* 修改结束旋转角度 */
+        transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
+      }
+    }
+    .host-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.25rem;
+      left: 4.5rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
+    }
+    .host-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.62rem;
+      left: 6.28rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(0deg) rotateZ(0deg);
+    }
+    .host-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 5.05rem;
+      left: 8.18rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+    }
+    .host-main1 {
+      z-index: 100;
+      position: absolute;
+      top: 5.39rem;
+      left: 4.15rem;
+      width: 1.6rem;
+      height: 1.2rem;
+      // background-color: #007bff;
+      border-top-right-radius: 0.3rem;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(35deg);
+    }
+    .host-main2 {
+      z-index: 100;
+      position: absolute;
+      top: 4.9rem;
+      left: 5.9rem;
+      width: 1.5rem;
+      height: 1.05rem;
+      // background-color: #007bff;
+      border-top-right-radius: 0.3rem;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
+    }
+    .host-main3 {
+      z-index: 100;
+      position: absolute;
+      top: 4.55rem;
+      left: 7.7rem;
+      width: 1.5rem;
+      height: 0.8rem;
+      // background-color: #007bff;
+      border-top-right-radius: 0.3rem;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(25deg);
+    }
+    .hostLoad1 {
+      z-index: 10;
+      position: absolute;
+      top: 5.9rem;
+      left: 4.09rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .hostLoad2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.35rem;
+      left: 5.93rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .hostLoad3 {
+      z-index: 10;
+      position: absolute;
+      top: 4.5rem;
+      left: 7.6rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .water-flow1 {
+      z-index: 10;
+      position: absolute;
+      top: 7rem;
+      left: 0.6rem;
+      font-size: 0.16rem;
+    }
+    .water-flow2 {
+      z-index: 10;
+      position: absolute;
+      top: 7.76rem;
+      left: 0.6rem;
+      font-size: 0.16rem;
+    }
+    .water-flow3 {
+      z-index: 10;
+      position: absolute;
+      top: 8.48rem;
+      left: 0.8rem;
+      font-size: 0.16rem;
+    }
+    .water-flow-li {
+      margin-bottom: 0.04rem;
+      color: #46f1e3;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      span {
+        background-color: rgba(0, 255, 255, 0.2);
+        border-radius: 0.1rem;
+        padding: 0.01rem 0.03rem;
+      }
+      .break {
+        margin-left: 0.07rem;
+        display: inline-block;
+        width: 0.18rem;
+        height: 0.18rem;
+        border-radius: 50%;
+        border: 1px solid #46f1e3;
+        background-color: transparent !important;
+      }
+      .connect {
+        animation: blink 1s infinite;
+        background-color: #38fc52 !important;
+      }
+    }
+    .moveClass {
+      animation: host 2s linear infinite;
+    }
+    .moveClass2 {
+      animation: fan 2s linear infinite;
+    }
+    .startClass {
+      /* 应用动画 */
+      animation: blink 1s infinite;
+      background-color: #38fc52 !important;
+    }
+    .hostStatus1 {
+      z-index: 10;
+      position: absolute;
+      top: 5.9rem;
+      left: 3.8rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .hostStatus2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.35rem;
+      left: 5.7rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .hostStatus3 {
+      z-index: 10;
+      position: absolute;
+      top: 4.7rem;
+      left: 7.6rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .coolingPump1 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.9rem;
+      left: 7.23rem;
+    }
+    .coolingPump2 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.75rem;
+      left: 7.68rem;
+    }
+    .coolingPump3 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.6rem;
+      left: 8.22rem;
+    }
+    .coolingPump4 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.5rem;
+      left: 8.68rem;
+    }
+    .coolingPump5 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.4rem;
+      left: 9.1rem;
+    }
+    .cooling-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 3.48rem;
+      left: 7.25rem;
+      width: 0.35rem;
+      height: 0.35rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 3.36rem;
+      left: 7.75rem;
+      width: 0.35rem;
+      height: 0.35rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 3.23rem;
+      left: 8.28rem;
+      width: 0.35rem;
+      height: 0.35rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img4 {
+      z-index: 10;
+      position: absolute;
+      top: 3.11rem;
+      left: 8.74rem;
+      width: 0.35rem;
+      height: 0.35rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img5 {
+      z-index: 10;
+      position: absolute;
+      top: 3rem;
+      left: 9.18rem;
+      width: 0.35rem;
+      height: 0.35rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-hz1 {
+      z-index: 10;
+      position: absolute;
+      top: 3.42rem;
+      left: 6.95rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz2 {
+      z-index: 10;
+      position: absolute;
+      top: 3.3rem;
+      left: 7.5rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz3 {
+      z-index: 10;
+      position: absolute;
+      top: 3.16rem;
+      left: 8rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz4 {
+      z-index: 10;
+      position: absolute;
+      top: 2.99rem;
+      left: 8.48rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz5 {
+      z-index: 10;
+      position: absolute;
+      top: 2.92rem;
+      left: 9.05rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingPump1 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 7.8rem;
+      left: 6.2rem;
+    }
+    .freezingPump2 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 7.43rem;
+      left: 6.96rem;
+    }
+    .freezingPump3 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 6.7rem;
+      left: 8.6rem;
+    }
+    .freezingPump4 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 6.4rem;
+      left: 9.15rem;
+    }
+    .freezingPump5 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 6.2rem;
+      left: 9.7rem;
+    }
+    .freezing-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 7.25rem;
+      left: 6.25rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 6.89rem;
+      left: 7.04rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 6.2rem;
+      left: 8.67rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img4 {
+      z-index: 10;
+      position: absolute;
+      top: 5.95rem;
+      left: 9.22rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img5 {
+      z-index: 10;
+      position: absolute;
+      top: 5.72rem;
+      left: 9.76rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-hz1 {
+      z-index: 10;
+      position: absolute;
+      top: 7.21rem;
+      left: 6rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz2 {
+      z-index: 10;
+      position: absolute;
+      top: 6.85rem;
+      left: 6.82rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz3 {
+      z-index: 10;
+      position: absolute;
+      top: 6.16rem;
+      left: 8.35rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz4 {
+      z-index: 10;
+      position: absolute;
+      top: 5.89rem;
+      left: 8.93rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz5 {
+      z-index: 10;
+      position: absolute;
+      top: 5.68rem;
+      left: 9.46rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .coolingTower3 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.8rem;
+      left: 7.35rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
+    }
+    .coolingTower2 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.73rem;
+      left: 7.75rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
+    }
+    .coolingTower1 {
+      cursor: pointer;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.65rem;
+      left: 8.16rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(0deg);
+    }
+    .coolingTowerHz1 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.86rem;
+      left: 7.71rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
+    }
+    .coolingTowerHz2 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.95rem;
+      left: 7.22rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
+    }
+    .coolingTowerHz3 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 1.05rem;
+      left: 6.6rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-2deg);
+    }
+    /* 定义灯闪烁的动画 */
+    @keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.7;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    .frozenValve1 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 6.27rem;
+      left: 5.15rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .frozenValve2 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 5.61rem;
+      left: 6.96rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .frozenValve3 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 4.88rem;
+      left: 8.53rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue1 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 5.37rem;
+      left: 3.16rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue2 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 4.85rem;
+      left: 4.92rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue3 {
+      cursor: pointer;
+      z-index: 10;
+      position: absolute;
+      top: 4.35rem;
+      left: 6.77rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .statusAndModel {
+      z-index: 10;
+      position: absolute;
+      top: 8.5rem;
+      right: 2.7rem;
+      width: 3rem;
+      .warnStatus {
+        position: absolute;
+        left: 0.04rem;
+        top: 0.3rem;
+        width: 0.45rem;
+        height: 0.45rem;
+        animation: breathe 4s ease-in-out infinite;
+      }
+      @keyframes breathe {
+        0% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+        50% {
+          transform: scale(1.1);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+      }
+      .modelStatus {
+        position: absolute;
+        top: 0;
+        right: 0rem;
+        width: 2.65rem;
+        height: 0.83rem;
+      }
+      .sysNormal {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        color: #89e8f5;
+        letter-spacing: 0.02rem;
+      }
+      .sysWarning {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        cursor: pointer;
+        color: #ffffff;
+        letter-spacing: 0.02rem;
+        animation: blink 0.5s ease-in-out infinite;
+      }
+      .sysStatus {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.8rem;
+        font-size: 0.18rem;
+        font-weight: bold;
+        color: #ffffff;
+        letter-spacing: 0.02rem;
+      }
+    }
+  }
+  .weather {
+    min-width: 2.85rem;
+    min-height: 1.6rem;
+    z-index: 10;
+    position: absolute;
+    top: 0.8rem;
+    left: 0rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.2rem;
+    // color: rgb(18, 155, 209);
+    // color: rgb(147, 204, 236);
+    color: #ffffff;
+    background-image: url(../../../assets/images/border1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
+  }
+  .weather-li {
+    width: 100%;
+    padding: 0.05rem 0 0.05rem 0.3rem;
+    /* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */
+    border-top: 1px solid transparent;
+    border-bottom: 1px dashed #1a3f8f;
+    position: relative;
+    .deepColor {
+      display: inline-block;
+      margin: 0 0.1rem 0 0.05rem;
+      // color: #20ebfa;
+      // color: #18f13c;
+      // color: #6cf02f;
+      color: #6cf02f;
+      font-weight: bold;
+      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: 5.4rem !important;
+    right: -1.2rem !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.16rem;
+  }
+  .perdformance-bg {
+    width: 2.95rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.2rem;
+    color: #ffffff;
+    background-image: url(../../../assets/images/border4.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
+  }
+  .title {
+    z-index: 10;
+    width: 100%;
+    background-image: url(../../../assets/images/text_img_title.png);
+    background-repeat: no-repeat;
+    background-repeat: no-repeat;
+    background-size: 2rem 0.45rem;
+    background-position: bottom left;
+    font-family: SourceHanSansCN-Medium;
+    font-size: 0.2rem;
+    font-style: italic;
+    font-weight: bold;
+    line-height: 0.6rem;
+    color: #ffffff;
+    padding-left: 0.5rem;
+    margin-bottom: 0.01rem;
+    margin-left: 0.4rem;
+  }
+  .offClass {
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-image: url(../../../assets/images/border2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    top: 0.6rem;
+    right: 0.3rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .off-bg {
+      position: absolute;
+      left: 0.38rem;
+      top: 0.32rem;
+      width: 1rem;
+      height: 1rem;
+      background-image: url(../../../assets/images/border3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 1rem;
+      font-family: DIN;
+      font-size: 0.22rem;
+      color: #6cf02f;
+      font-weight: bold;
+    }
+    .on-animation {
+      animation: rotateZ 5s linear infinite;
+      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
+      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
+    }
+    /* 定义旋转动画 */
+    @keyframes rotateZ {
+      0% {
+        transform: rotateY(0deg); /* 初始状态，不旋转 */
+      }
+      50% {
+        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
+      }
+      100% {
+        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
+      }
+    }
+  }
+  /* 鼠标悬停时移除动画 */
+  .offClass:hover .on-animation {
+    animation: none;
+  }
+  .sysTips {
+    position: absolute;
+    top: 2.3rem;
+    left: 14.2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 10;
+    .step {
+      width: 0.2rem;
+      height: 0.3rem;
+      margin-right: 0.04rem;
+      animation: moveRight 1s ease-in-out infinite alternate;
+    }
+    @keyframes moveRight {
+      0% {
+        transform: translateX(0); /* 初始位置，不移动 */
+      }
+      100% {
+        transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
+      }
+    }
+    .tips-text {
+      border: 0.01rem solid transparent;
+      border-image: linear-gradient(to right, #007bff, #00ffff);
+      border-image-slice: 1;
+      font-size: 0.18rem;
+      color: #1fecf3;
+      padding: 0.01rem 0.03rem;
+    }
+  }
+  .funtion-menu1 {
+    position: absolute;
+    top: 7.2rem;
+    left: -1.4rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 10;
+    width: 1.7rem;
+    height: 0.8rem;
+    cursor: pointer;
+    .ditu {
+      width: 1.7rem;
+      height: 0.8rem;
+      position: absolute;
+      top: 0;
+    }
+    .menu-title {
+      color: #46f1e3;
+      font-size: 0.18rem;
+      --bRadius: 0.05rem;
+      text-align: center;
+      position: absolute;
+      top: 0;
+      left: 0.2rem;
+      width: 1.25rem;
+      div {
+        position: relative;
+        text-align: center;
+        border-radius: var(--bRadius);
+        transition: all 0.3s;
+        padding: 0.01rem 0.02rem;
+        background-color: rgba(0, 255, 255, 0.2);
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          top: -10px;
+          left: -10px;
+          right: -10px;
+          bottom: -10px;
+          border: 2px solid #46f1e3;
+          transition: all 0.5s;
+          border-radius: var(--bRadius);
+          animation: clippath 3s infinite linear;
+        }
+        &::after {
+          animation: clippath 3s infinite -1.5s linear;
+        }
+        @keyframes clippath {
+          0%,
+          100% {
+            clip-path: inset(0 0 98% 0);
+          }
+          25% {
+            clip-path: inset(0 98% 0 0);
+          }
+          50% {
+            clip-path: inset(98% 0 0 0);
+          }
+          75% {
+            clip-path: inset(0 0 0 98%);
+          }
+        }
+      }
+    }
+  }
+  .menu2 {
+    position: absolute;
+    top: 8.6rem;
+    left: -1.4rem;
+  }
+  .funtion-menu1:hover {
+    .menu-title {
+      transform: scale(1.1);
+    }
+  }
+  .hotClass {
+    z-index: 10;
+    position: absolute;
+    top: 4.15rem;
+    right: 3.5rem;
+    font-size: 0.16rem;
+    color: #00ffff;
+    font-weight: bold;
+  }
+  .coolingOut-line {
+    z-index: 10;
+    position: absolute;
+    right: 6.45rem;
+    top: 2.95rem;
+    z-index: 10;
+  }
+  .coolingOut-vavle {
+    z-index: 10;
+    position: absolute;
+    top: 1.2rem;
+    right: 3.8rem;
+    font-size: 0.16rem;
+  }
+  .coolingIn-line {
+    z-index: 10;
+    position: absolute;
+    right: 5.6rem;
+    top: 3.2rem;
+    z-index: 10;
+  }
+  .coolingIn-vavle {
+    z-index: 10;
+    position: absolute;
+    top: 2rem;
+    right: 2.8rem;
+    font-size: 0.16rem;
+  }
+  .hotIn-vavle {
+    z-index: 10;
+    position: absolute;
+    top: 2.93rem;
+    right: -0.65rem;
+    font-size: 0.16rem;
+  }
+  .hotIn-line {
+    z-index: 10;
+    position: absolute;
+    top: 3.72rem;
+    right: 3.9rem;
+    font-size: 0.16rem;
+  }
+  .hotOut-vavle {
+    z-index: 10;
+    position: absolute;
+    top: 3.77rem;
+    right: -0.9rem;
+    font-size: 0.16rem;
+  }
+  .hotOut-line {
+    z-index: 10;
+    position: absolute;
+    top: 4rem;
+    right: 3.1rem;
+    font-size: 0.16rem;
+  }
+  .outInre {
+    font-size: 0.16rem;
+    font-weight: bold;
+    color: #ffffff;
+    margin-left: 0.1rem;
+  }
+  .steamHeatingBoiler1 {
+    border-bottom: 1px solid rgba(0, 255, 255, 1);
+    z-index: 10;
+    font-size: 0.2rem;
+    font-weight: bold;
+    color: aqua;
+    position: absolute;
+    cursor: pointer;
+    top: 4.9rem;
+    left: 9.4rem;
+    transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */
+    transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+    text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
+  }
+  .steamHeatingBoiler2 {
+    border-bottom: 1px solid rgba(0, 255, 255, 1);
+    z-index: 10;
+    font-size: 0.2rem;
+    font-weight: bold;
+    color: aqua;
+    position: absolute;
+    cursor: pointer;
+    top: 5.45rem;
+    left: 10.9rem;
+    transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */
+    transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+    text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
+  }
+  .steamHeatingBoiler-main1 {
+    z-index: 100;
+    position: absolute;
+    top: 4.5rem;
+    left: 10.25rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    // background-color: #007bff;
+    cursor: pointer;
+    opacity: 0.4;
+    transform-style: preserve-3d;
+  }
+  .steamHeatingBoiler-main2 {
+    z-index: 100;
+    position: absolute;
+    top: 5rem;
+    left: 11.6rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    // background-color: #007bff;
+    cursor: pointer;
+    opacity: 0.4;
+    transform-style: preserve-3d;
+  }
+  .steamHeatingBoiler-img1 {
+    z-index: 10;
+    position: absolute;
+    top: 4.42rem;
+    left: 10.6rem;
+    width: 0.35rem;
+    height: 0.35rem;
+    transform-style: preserve-3d;
+    transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+  }
+  .steamHeatingBoiler-img2 {
+    z-index: 10;
+    position: absolute;
+    top: 4.88rem;
+    left: 11.94rem;
+    width: 0.35rem;
+    height: 0.35rem;
+    transform-style: preserve-3d;
+    transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+  }
+  .steamHeatingPump1 {
+    cursor: pointer;
+    z-index: 10;
+    font-size: 0.15rem;
+    font-weight: bold;
+    color: #46f1e3;
+    position: absolute;
+    top: 4.67rem;
+    left: 11.3rem;
+  }
+  .steamHeatingPump2 {
+    cursor: pointer;
+    z-index: 10;
+    font-size: 0.15rem;
+    font-weight: bold;
+    color: #46f1e3;
+    position: absolute;
+    top: 4.8rem;
+    left: 11.78rem;
+  }
+  .steamHeatingPump3 {
+    cursor: pointer;
+    z-index: 10;
+    font-size: 0.15rem;
+    font-weight: bold;
+    color: #46f1e3;
+    position: absolute;
+    top: 4.95rem;
+    left: 12.3rem;
+  }
+  .steamHeatingPump-main1 {
+    z-index: 100;
+    position: absolute;
+    top: 4.3rem;
+    left: 11.25rem;
+    width: 0.3rem;
+    height: 0.55rem;
+    // background-color: #007bff;
+    cursor: pointer;
+    opacity: 0.4;
+    transform-style: preserve-3d;
+  }
+  .steamHeatingPump-main2 {
+    z-index: 100;
+    position: absolute;
+    top: 4.39rem;
+    left: 11.75rem;
+    width: 0.3rem;
+    height: 0.55rem;
+    // background-color: #007bff;
+    cursor: pointer;
+    opacity: 0.4;
+    transform-style: preserve-3d;
+  }
+  .steamHeatingPump-main3 {
+    z-index: 100;
+    position: absolute;
+    top: 4.5rem;
+    left: 12.25rem;
+    width: 0.3rem;
+    height: 0.55rem;
+    // background-color: #007bff;
+    cursor: pointer;
+    opacity: 0.4;
+    transform-style: preserve-3d;
+  }
+  .steamHeatingPump-img1 {
+    z-index: 10;
+    position: absolute;
+    top: 4.23rem;
+    left: 11.4rem;
+    width: 0.35rem;
+    height: 0.35rem;
+    transform-style: preserve-3d;
+    transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+  }
+  .steamHeatingPump-img2 {
+    z-index: 10;
+    position: absolute;
+    top: 4.4rem;
+    left: 11.9rem;
+    width: 0.35rem;
+    height: 0.35rem;
+    transform-style: preserve-3d;
+    transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+  }
+  .steamHeatingPump-img3 {
+    z-index: 10;
+    position: absolute;
+    top: 4.55rem;
+    left: 12.4rem;
+    width: 0.35rem;
+    height: 0.35rem;
+    transform-style: preserve-3d;
+    transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+  }
+  .steamHeatingPump-hz1 {
+    z-index: 10;
+    position: absolute;
+    top: 4.18rem;
+    left: 11.05rem;
+    font-size: 0.16rem;
+    font-weight: bold;
+  }
+  .steamHeatingPump-hz2 {
+    z-index: 10;
+    position: absolute;
+    top: 4.35rem;
+    left: 11.62rem;
+    font-size: 0.16rem;
+    font-weight: bold;
+  }
+  .steamHeatingPump-hz3 {
+    z-index: 10;
+    position: absolute;
+    top: 4.5rem;
+    left: 12.15rem;
+    font-size: 0.16rem;
+    font-weight: bold;
+  }
+  .steamHeatingInTem {
+    z-index: 10;
+    position: absolute;
+    top: 4.87rem;
+    right: 2.35rem;
+    font-size: 0.16rem;
+    font-weight: bold;
+  }
+  .steamHeatingOutTem {
+    z-index: 10;
+    position: absolute;
+    top: 4.7rem;
+    right: 2.95rem;
+    font-size: 0.16rem;
+    font-weight: bold;
+  }
+}
+// @media (min-width: 1240px) and (max-width: 1440px) {
+// }
+@media (max-width: 1440px) {
+  .monitor-content {
+    transform: scale(0.9);
+  }
+}
+.detail-data-bottom {
+  position: absolute;
+  top: 1rem;
+  left: 2.3rem;
+  width: 4rem;
+  padding: 0rem 0.3rem;
+  z-index: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+}
+</style>
+<style scoped>
+.monitor-dialog {
+  margin-top: 5% !important;
+}
+</style>
diff --git a/src/views/newCenterairC/sysMonitor/performance.vue b/src/views/newCenterairC/sysMonitor/performance.vue
new file mode 100644
index 0000000..2106178
--- /dev/null
+++ b/src/views/newCenterairC/sysMonitor/performance.vue
@@ -0,0 +1,736 @@
+<template>
+  <div class="monitor" v-loading="loading">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        src="../../../assets/images/title-center.png"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title" @click="goSys">铭汉高效冷源站管理系统</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
+    <div class="host-detail">
+      <div class="detail-top">
+        <div class="detail-top-left">
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img4.png"
+              alt=""
+            />
+            <div class="host-name">1号螺旋机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img4.png"
+              alt=""
+            />
+            <div class="host-name">2号螺旋机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img3.png"
+              alt=""
+            />
+            <div class="host-name">3号磁悬浮机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-top-right">
+          <div class="detail-data hostparams">
+            <div class="detail-data-top">
+              <title-img></title-img>
+              <div class="details-title">系统性能</div>
+              <title-img></title-img>
+            </div>
+            <div class="detail-data-bottom">
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日EER:</span>
+                    <span class="dotData">6.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日用电:</span>
+                    <span class="dotData">367</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日供冷:</span>
+                    <span class="dotData">2397</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当月EER:</span>
+                    <span class="dotData">6.131</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今月用电:</span>
+                    <span class="dotData">27840</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当月供冷:</span>
+                    <span class="dotData">172069</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年EER:</span>
+                    <span class="dotData">6.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年用电:</span>
+                    <span class="dotData">105771</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年供冷:</span>
+                    <span class="dotData">744519</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计EER:</span>
+                    <span class="dotData">5.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计用电:</span>
+                    <span class="dotData">1096628</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计供冷:</span>
+                    <span class="dotData">6107983</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="detail-bottom">
+        <performance-chart :temArray="temArray"></performance-chart>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  hostDetailsData,
+  hostTemData,
+  runTime,
+} from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import titleImg from "./components/titleImg.vue";
+import { format } from "@/utils/datetime";
+import PerformanceChart from "./components/performanceChart.vue";
+export default {
+  name: "sysControl",
+  components: { titleImg, PerformanceChart },
+  data() {
+    return {
+      loading: false,
+
+      currentDate: new Date(),
+      nowTimer: null,
+      deviceName: "", //主机名称
+      hostData: [], //冷机性能
+      rightHostData: [], //右
+      automaticObj: {}, //手自动状态
+      localObj: {}, //本地远程状态
+      badObj: {}, //故障状态
+      timeObj: {}, //累计运行时间
+      compressorData: [], //压缩机参数
+      temArray: [], //冷冻冷却水温度
+      isMagnetic: false,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+    };
+  },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+  },
+  created() {},
+  mounted() {
+    this.getHostDetailsData();
+    this.getDayData();
+    // 在组件挂载后尝试进入全屏
+    setTimeout(() => {
+      this.requestFullscreen();
+    }, 100); // 延迟 100 毫秒执行全屏操作
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      // this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      this.$router.back();
+    },
+    getHostDetailsData() {
+      // 请求数据
+      // this.getHostParams(deviceLedgerId);
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  background-color: black;
+  color: #fff;
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+    .title-center {
+      width: 9.46rem;
+      height: 0.8rem;
+    }
+    .title-right {
+      width: 5.04rem;
+      height: 0.78rem;
+    }
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      cursor: pointer;
+    }
+    .nowTime {
+      position: absolute;
+      top: 0.37rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .icon_warning {
+      position: absolute;
+      top: 0.39rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+    }
+    .icon_home {
+      position: absolute;
+      top: 0.39rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+    .back-icon {
+      position: absolute;
+      top: 0.39rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      cursor: pointer;
+    }
+  }
+  .host-detail {
+    padding: 0.2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .detail-top {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .detail-top-left {
+        width: 14rem;
+        // background-color: aquamarine;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        .host-li {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin-left: 0.3rem;
+          position: relative;
+          .host-img {
+            width: 3.5rem;
+            height: 2.6rem;
+            margin-bottom: 0.1rem;
+          }
+          .host-name {
+            position: absolute;
+            top: 0.8rem;
+            left: 1.6rem;
+            color: #3520f8;
+            font-size: 0.18rem;
+            font-weight: bold;
+          }
+        }
+      }
+      .detail-top-right {
+        width: calc(100% - 14rem);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .detail-data {
+        display: flex;
+        flex-direction: column;
+        width: 4.5rem;
+        position: relative;
+        .detail-data-top {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          color: #c0dffc;
+          font-weight: bold;
+          font-size: 0.18rem;
+          width: 100%;
+          text-align: center;
+          z-index: 10;
+          .details-title {
+            margin: 0 0.15rem;
+          }
+        }
+        .detail-data-bottom {
+          width: 100%;
+          padding: 0rem 0.3rem;
+          z-index: 0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: flex-start;
+          justify-content: center;
+        }
+        .line1 {
+          position: absolute;
+          top: 0.53rem;
+        }
+      }
+    }
+    .detail-bottom {
+      // margin: 0.3rem 0.5rem 0 0.5rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      height: 3rem;
+      // background-color: #217df5;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/alarmManage/index.vue b/src/views/newLifeWater/alarmManage/index.vue
new file mode 100644
index 0000000..e04788a
--- /dev/null
+++ b/src/views/newLifeWater/alarmManage/index.vue
@@ -0,0 +1,1752 @@
+<template>
+  <div class="alarm-manage">
+    <!-- 告警统计卡片 -->
+    <div class="alarm-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.total }}</div>
+          <div class="stat-label">告警总数</div>
+        </div>
+      </div>
+      <div class="stat-card pending">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.pending }}</div>
+          <div class="stat-label">待处理</div>
+        </div>
+      </div>
+      <div class="stat-card processing">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.processing }}</div>
+          <div class="stat-label">处理中</div>
+        </div>
+      </div>
+      <div class="stat-card resolved">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.resolved }}</div>
+          <div class="stat-label">已解决</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工单系统对接配置 -->
+    <div class="workorder-config">
+      <div class="config-header">
+        <div class="config-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+          </svg>
+          工单系统对接配置
+        </div>
+        <el-switch
+          v-model="workOrderConfig.enabled"
+          active-text="已启用"
+          inactive-text="已禁用"
+          class="custom-switch"
+        ></el-switch>
+      </div>
+
+    <div class="config-content" v-if="workOrderConfig.enabled">
+      <div class="config-row">
+        <div class="config-item">
+          <label>工单系统类型</label>
+          <el-select v-model="workOrderConfig.systemType" class="custom-select">
+            <el-option label="业主工单系统A" value="systemA"></el-option>
+            <el-option label="业主工单系统B" value="systemB"></el-option>
+            <el-option label="第三方工单平台" value="thirdParty"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>API地址</label>
+          <el-input v-model="workOrderConfig.apiUrl" placeholder="https://api.workorder.com" class="custom-input"></el-input>
+        </div>
+        <div class="config-item">
+          <label>API密钥</label>
+          <el-input v-model="workOrderConfig.apiKey" placeholder="请输入API密钥" show-password class="custom-input"></el-input>
+        </div>
+      </div>
+      <div class="config-row">
+        <div class="config-item">
+          <label>自动推送</label>
+          <el-switch v-model="workOrderConfig.autoPush" class="custom-switch"></el-switch>
+        </div>
+        <div class="config-item">
+          <label>推送告警等级</label>
+          <el-select v-model="workOrderConfig.pushLevel" class="custom-select" multiple>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>工单优先级映射</label>
+          <el-select v-model="workOrderConfig.priorityMapping" class="custom-select">
+            <el-option label="告警等级=工单优先级" value="direct"></el-option>
+            <el-option label="根据规则映射" value="rule"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="config-actions">
+        <el-button type="primary" @click="testConnection" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          测试连接
+        </el-button>
+        <el-button type="success" @click="saveConfig" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          保存配置
+        </el-button>
+      </div>
+    </div>
+    </div>
+
+    <!-- 告警筛选 -->
+    <div class="alarm-filter">
+      <div class="filter-group">
+        <div class="filter-item">
+          <label>告警级别</label>
+          <el-select v-model="filterForm.level" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警状态</label>
+          <el-select v-model="filterForm.status" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待处理" value="pending"></el-option>
+            <el-option label="处理中" value="processing"></el-option>
+            <el-option label="已解决" value="resolved"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>工单状态</label>
+          <el-select v-model="filterForm.workOrderStatus" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="未创建" value="notCreated"></el-option>
+            <el-option label="待派发" value="pending"></el-option>
+            <el-option label="进行中" value="inProgress"></el-option>
+            <el-option label="已完成" value="completed"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警时间</label>
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="filter-actions">
+        <el-input
+          v-model="filterForm.keyword"
+          placeholder="搜索水泵/区域/描述"
+          clearable
+          class="search-input custom-input"
+        ></el-input>
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
+      </div>
+    </div>
+
+    <!-- 告警列表 -->
+    <div class="alarm-list">
+      <div class="list-header">
+        <div class="list-title">告警列表</div>
+        <div class="list-info">
+          共 {{ filteredAlarms.length }} 条告警
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="alarm-table">
+          <thead>
+            <tr>
+              <th>告警ID</th>
+              <th>告警级别</th>
+              <th>告警标题</th>
+              <th>设备名称</th>
+              <th>告警时间</th>
+              <th>告警状态</th>
+              <th>工单编号</th>
+              <th>工单状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="alarm in paginatedAlarms" :key="alarm.id">
+              <td>{{ alarm.id }}</td>
+              <td>
+                <span class="level-badge" :class="alarm.level">
+                  {{ getLevelText(alarm.level) }}
+                </span>
+              </td>
+              <td class="title-cell">{{ alarm.title }}</td>
+              <td>{{ alarm.deviceName }}</td>
+              <td>{{ alarm.alarmTime }}</td>
+              <td>
+                <span class="status-badge" :class="alarm.status">
+                  {{ getStatusText(alarm.status) }}
+                </span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderId" class="workorder-link" @click="viewWorkOrder(alarm)">
+                  {{ alarm.workOrderId }}
+                </span>
+                <span v-else class="no-workorder">未创建</span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderStatus" class="workorder-status" :class="alarm.workOrderStatus">
+                  {{ getWorkOrderStatusText(alarm.workOrderStatus) }}
+                </span>
+                <span v-else>-</span>
+              </td>
+              <td class="action-cell">
+                <div class="action-buttons">
+                  <el-button
+                    v-if="!alarm.workOrderId"
+                    type="primary"
+                    size="small"
+                    @click="createWorkOrder(alarm)"
+                    class="action-btn"
+                  >
+                    创建工单
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="viewAlarmDetail(alarm)"
+                    class="action-btn"
+                  >
+                    详情
+                  </el-button>
+                  <el-dropdown @command="(cmd) => handleAlarmCommand(cmd, alarm)" class="action-dropdown">
+                    <el-button size="small" class="action-btn">
+                      更多
+                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                      </svg>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu class="custom-dropdown-menu">
+                        <el-dropdown-item command="viewWorkOrder" v-if="alarm.workOrderId">查看工单</el-dropdown-item>
+                        <el-dropdown-item command="createWorkOrder" v-if="!alarm.workOrderId">创建工单</el-dropdown-item>
+                        <el-dropdown-item command="resolve" v-if="alarm.status !== 'resolved'" divided>标记已解决</el-dropdown-item>
+                        <el-dropdown-item command="close" v-if="alarm.status !== 'resolved'">关闭告警</el-dropdown-item>
+                        <el-dropdown-item command="reopen" v-if="alarm.status === 'resolved'">重新打开</el-dropdown-item>
+                        <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="filteredAlarms.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 告警详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="告警详情"
+      width="800px"
+      class="custom-dialog"
+    >
+      <div class="detail-content" v-if="selectedAlarm">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">告警ID:</span>
+              <span class="item-value">{{ selectedAlarm.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警级别:</span>
+              <span class="item-value level-badge" :class="selectedAlarm.level">
+                {{ getLevelText(selectedAlarm.level) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警标题:</span>
+              <span class="item-value">{{ selectedAlarm.title }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警状态:</span>
+              <span class="item-value status-badge" :class="selectedAlarm.status">
+                {{ getStatusText(selectedAlarm.status) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedAlarm.deviceName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警时间:</span>
+              <span class="item-value">{{ selectedAlarm.alarmTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">告警描述:</span>
+              <span class="item-value">{{ selectedAlarm.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedAlarm.workOrderId">
+          <div class="section-title">关联工单</div>
+          <div class="workorder-info">
+            <div class="info-row">
+              <span class="info-label">工单编号:</span>
+              <span class="info-value workorder-link" @click="viewWorkOrder(selectedAlarm)">
+                {{ selectedAlarm.workOrderId }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单状态:</span>
+              <span class="info-value workorder-status" :class="selectedAlarm.workOrderStatus">
+                {{ getWorkOrderStatusText(selectedAlarm.workOrderStatus) }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单类型:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderType }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">创建时间:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderCreateTime }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">处理人:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderHandler }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">处理记录</div>
+          <div class="process-timeline">
+            <div
+              v-for="(record, index) in selectedAlarm.processRecords"
+              :key="index"
+              class="timeline-item"
+            >
+              <div class="timeline-dot" :class="record.type"></div>
+              <div class="timeline-content">
+                <div class="timeline-title">{{ record.title }}</div>
+                <div class="timeline-time">{{ record.time }}</div>
+                <div class="timeline-desc" v-if="record.description">{{ record.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 创建工单弹窗 -->
+    <el-dialog
+      v-model="workOrderDialogVisible"
+      title="创建工单"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="workOrderForm" :rules="workOrderRules" ref="workOrderFormRef" label-width="100px">
+        <el-form-item label="工单标题" prop="title">
+          <el-input v-model="workOrderForm.title" placeholder="请输入工单标题" class="custom-input"></el-input>
+        </el-form-item>
+        <el-form-item label="工单类型" prop="type">
+          <el-select v-model="workOrderForm.type" class="custom-select">
+        <el-option label="水泵故障" value="pumpFault"></el-option>
+        <el-option label="系统异常" value="systemError"></el-option>
+        <el-option label="维护保养" value="maintenance"></el-option>
+        <el-option label="其他" value="other"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-select v-model="workOrderForm.priority" class="custom-select">
+            <el-option label="紧急" value="urgent"></el-option>
+            <el-option label="高" value="high"></el-option>
+            <el-option label="中" value="medium"></el-option>
+            <el-option label="低" value="low"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指派人" prop="assignee">
+          <el-select v-model="workOrderForm.assignee" class="custom-select">
+            <el-option label="张三" value="user1"></el-option>
+            <el-option label="李四" value="user2"></el-option>
+            <el-option label="王五" value="user3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单描述" prop="description">
+          <el-input
+            v-model="workOrderForm.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入工单描述"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="workOrderDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="submitWorkOrder" class="custom-btn">提交工单</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AlarmManage",
+  data() {
+    return {
+      alarmStats: {
+        total: 156,
+        pending: 12,
+        processing: 28,
+        resolved: 116
+      },
+      workOrderConfig: {
+        enabled: true,
+        systemType: "systemA",
+        apiUrl: "https://api.workorder.example.com",
+        apiKey: "",
+        autoPush: true,
+        pushLevel: ["critical", "warning"],
+        priorityMapping: "direct"
+      },
+      filterForm: {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      alarmList: [],
+      detailDialogVisible: false,
+      workOrderDialogVisible: false,
+      selectedAlarm: null,
+      workOrderForm: {
+        title: "",
+        type: "",
+        priority: "",
+        assignee: "",
+        description: ""
+      },
+      workOrderRules: {
+        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
+        type: [{ required: true, message: "请选择工单类型", trigger: "change" }],
+        priority: [{ required: true, message: "请选择优先级", trigger: "change" }],
+        assignee: [{ required: true, message: "请选择指派人", trigger: "change" }],
+        description: [{ required: true, message: "请输入工单描述", trigger: "blur" }]
+      }
+    };
+  },
+  computed: {
+    filteredAlarms() {
+      let alarms = [...this.alarmList];
+      
+      if (this.filterForm.level) {
+        alarms = alarms.filter(a => a.level === this.filterForm.level);
+      }
+      
+      if (this.filterForm.status) {
+        alarms = alarms.filter(a => a.status === this.filterForm.status);
+      }
+      
+      if (this.filterForm.workOrderStatus) {
+        alarms = alarms.filter(a => a.workOrderStatus === this.filterForm.workOrderStatus);
+      }
+      
+      if (this.filterForm.keyword) {
+        const keyword = this.filterForm.keyword.toLowerCase();
+        alarms = alarms.filter(a => 
+          a.title.toLowerCase().includes(keyword) ||
+          a.deviceName.toLowerCase().includes(keyword) ||
+          a.description.toLowerCase().includes(keyword)
+        );
+      }
+      
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        const [start, end] = this.filterForm.dateRange;
+        alarms = alarms.filter(a => a.alarmTime >= start && a.alarmTime <= end);
+      }
+      
+      return alarms;
+    },
+    paginatedAlarms() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredAlarms.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initAlarmList();
+  },
+  methods: {
+    initAlarmList() {
+      const now = new Date();
+      this.alarmList = [
+        {
+          id: "ALM202403040001",
+          level: "critical",
+          title: "高区1#泵过载告警",
+          description: "高区1#泵负载超过额定值110%，出口压力0.48MPa，设定压力0.45MPa",
+          deviceName: "高区1#泵",
+          deviceCode: "WP-H-001",
+          alarmTime: "2024-03-04 10:30:25",
+          status: "pending",
+          workOrderId: "WO202403040001",
+          workOrderStatus: "inProgress",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 10:35:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 10:30:25", description: "系统检测到高区1#泵过载" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 10:30:30", description: "成功创建工单WO202403040001" },
+            { type: "process", title: "工单已派发", time: "2024-03-04 10:45:00", description: "指派给运维人员张三" },
+            { type: "processing", title: "运维人员已接单", time: "2024-03-04 11:00:00", description: "开始检查水泵过载原因" }
+          ]
+        },
+        {
+          id: "ALM202403040002",
+          level: "critical",
+          title: "中区2#泵电机故障告警",
+          description: "中区2#泵电机温度过高，电流超过额定值120%，建议立即停机检查",
+          deviceName: "中区2#泵",
+          deviceCode: "WP-M-002",
+          alarmTime: "2024-03-04 09:15:42",
+          status: "processing",
+          workOrderId: "WO202403040002",
+          workOrderStatus: "pending",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 09:20:00",
+          workOrderHandler: "李四",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 09:15:42", description: "检测到中区2#泵电机故障" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 09:15:45", description: "成功创建工单WO202403040002" },
+            { type: "pending", title: "等待派发", time: "2024-03-04 09:20:00", description: "工单待派发" }
+          ]
+        },
+        {
+          id: "ALM202403040003",
+          level: "warning",
+          title: "低区1#泵流量异常下降",
+          description: "低区1#泵瞬时流量从95m³/h降至65m³/h，持续运行时间超过2小时",
+          deviceName: "低区1#泵",
+          deviceCode: "WP-L-001",
+          alarmTime: "2024-03-04 08:45:18",
+          status: "pending",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 08:45:18", description: "检测到水泵流量异常下降" }
+          ]
+        },
+        {
+          id: "ALM202403040004",
+          level: "info",
+          title: "消防区1#泵自检完成",
+          description: "消防区1#泵定期自检完成，各项参数正常",
+          deviceName: "消防区1#泵",
+          deviceCode: "WP-F-001",
+          alarmTime: "2024-03-04 07:30:55",
+          status: "resolved",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "自检启动", time: "2024-03-04 07:00:00", description: "消防泵定期自检" },
+            { type: "resolve", title: "自检完成", time: "2024-03-04 07:30:55", description: "各项参数正常，自检完成" }
+          ]
+        },
+        {
+          id: "ALM202403030005",
+          level: "critical",
+          title: "高区2#泵密封泄漏告警",
+          description: "高区2#泵检测到机械密封泄漏，泄漏量超过允许值，需紧急维修",
+          deviceName: "高区2#泵",
+          deviceCode: "WP-H-002",
+          alarmTime: "2024-03-03 16:22:33",
+          status: "resolved",
+          workOrderId: "WO202403030001",
+          workOrderStatus: "completed",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-03 16:30:00",
+          workOrderHandler: "王五",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 16:22:33", description: "检测到机械密封泄漏" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 16:22:40", description: "成功创建工单WO202403030001" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 16:45:00", description: "指派给运维人员王五" },
+            { type: "processing", title: "维修进行中", time: "2024-03-03 17:00:00", description: "更换机械密封" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 18:30:00", description: "密封更换完成，水泵正常运行" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 18:35:00", description: "工单已归档" }
+          ]
+        },
+        {
+          id: "ALM202403030006",
+          level: "warning",
+          title: "中区1#泵吨水能耗异常升高",
+          description: "中区1#泵吨水能耗从0.72 kWh/m³升至0.95 kWh/m³，超出历史均值32%",
+          deviceName: "中区1#泵",
+          deviceCode: "WP-M-001",
+          alarmTime: "2024-03-03 14:10:22",
+          status: "resolved",
+          workOrderId: "WO202403030002",
+          workOrderStatus: "completed",
+          workOrderType: "systemError",
+          workOrderCreateTime: "2024-03-03 14:20:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 14:10:22", description: "吨水能耗异常升高" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 14:10:30", description: "成功创建工单WO202403030002" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 14:30:00", description: "指派给运维人员张三" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 15:45:00", description: "调整供水压力后能耗恢复正常" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 15:50:00", description: "工单已归档" }
+          ]
+        }
+      ];
+      
+      // 添加更多模拟数据
+      for (let i = 7; i <= 20; i++) {
+        const levels = ["critical", "warning", "info"];
+        const statuses = ["pending", "processing", "resolved"];
+        const workOrderStatuses = ["notCreated", "pending", "inProgress", "completed"];
+        const date = new Date(now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000);
+        
+        const zones = ["高区", "中区", "低区", "消防区"];
+        const pumpTypes = ["1#泵", "2#泵", "3#泵"];
+        const alarmTypes = ["水泵过载", "压力异常", "流量异常", "温度过高", "振动异常", "密封泄漏", "电机故障"];
+        
+        this.alarmList.push({
+          id: `ALM2024030${String(i).padStart(5, '0')}`,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          title: `${zones[Math.floor(Math.random() * zones.length)]}${pumpTypes[Math.floor(Math.random() * pumpTypes.length)]}${alarmTypes[Math.floor(Math.random() * alarmTypes.length)]}`,
+          description: `${zones[Math.floor(Math.random() * zones.length)]}供水系统告警`,
+          deviceName: `${zones[Math.floor(Math.random() * zones.length)]}${pumpTypes[Math.floor(Math.random() * pumpTypes.length)]}`,
+          deviceCode: `WP-${String(i).padStart(3, '0')}`,
+          alarmTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          status: statuses[Math.floor(Math.random() * statuses.length)],
+          workOrderId: Math.random() > 0.5 ? `WO2024030${String(i).padStart(5, '0')}` : null,
+          workOrderStatus: Math.random() > 0.3 ? workOrderStatuses[Math.floor(Math.random() * workOrderStatuses.length)] : null,
+          workOrderType: "deviceFault",
+          workOrderCreateTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          workOrderHandler: ["张三", "李四", "王五"][Math.floor(Math.random() * 3)],
+          processRecords: [
+            { type: "create", title: "告警产生", time: date.toISOString().slice(0, 19).replace('T', ' '), description: "水泵告警已产生" }
+          ]
+        });
+      }
+    },
+    getLevelText(level) {
+      const map = {
+        critical: "严重",
+        warning: "警告",
+        info: "信息"
+      };
+      return map[level] || level;
+    },
+    getStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已解决"
+      };
+      return map[status] || status;
+    },
+    getWorkOrderStatusText(status) {
+      const map = {
+        notCreated: "未创建",
+        pending: "待派发",
+        inProgress: "进行中",
+        completed: "已完成"
+      };
+      return map[status] || status;
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.filterForm = {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      };
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("告警列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewAlarmDetail(alarm) {
+      this.selectedAlarm = alarm;
+      this.detailDialogVisible = true;
+    },
+    createWorkOrder(alarm) {
+      this.workOrderForm.title = `[告警] ${alarm.title} - ${alarm.deviceName}`;
+      this.workOrderForm.type = "pumpFault";
+      this.workOrderForm.priority = alarm.level === "critical" ? "urgent" : alarm.level === "warning" ? "high" : "medium";
+      this.workOrderForm.assignee = "";
+      this.workOrderForm.description = alarm.description;
+      this.workOrderDialogVisible = true;
+    },
+    submitWorkOrder() {
+      this.$refs.workOrderFormRef.validate((valid) => {
+        if (valid) {
+          const alarm = this.alarmList.find(a => a === this.selectedAlarm);
+          if (alarm) {
+            alarm.workOrderId = `WO${new Date().getTime()}`;
+            alarm.workOrderStatus = "pending";
+            alarm.workOrderType = this.workOrderForm.type;
+            alarm.workOrderCreateTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
+            alarm.workOrderHandler = this.workOrderForm.assignee;
+            alarm.status = "processing";
+            alarm.processRecords.push({
+              type: "push",
+              title: "手动创建工单",
+              time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+              description: `成功创建工单${alarm.workOrderId}`
+            });
+          }
+          this.$message.success("工单创建成功");
+          this.workOrderDialogVisible = false;
+        }
+      });
+    },
+    viewWorkOrder(alarm) {
+      this.$message.info(`查看工单: ${alarm.workOrderId}`);
+    },
+    handleAlarmCommand(command, alarm) {
+      if (command === "resolve") {
+        alarm.status = "resolved";
+        alarm.processRecords.push({
+          type: "resolve",
+          title: "标记为已解决",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户手动标记为已解决"
+        });
+        this.$message.success("已标记为已解决");
+      } else if (command === "close") {
+        alarm.status = "resolved";
+        this.$message.success("告警已关闭");
+      } else if (command === "reopen") {
+        alarm.status = "pending";
+        alarm.processRecords.push({
+          type: "reopen",
+          title: "重新打开告警",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户重新打开告警"
+        });
+        this.$message.success("告警已重新打开");
+      } else if (command === "createWorkOrder") {
+        this.createWorkOrder(alarm);
+      } else if (command === "viewWorkOrder") {
+        this.viewWorkOrder(alarm);
+      } else if (command === "export") {
+        this.$message.success(`导出告警${alarm.id}的报告成功`);
+      }
+    },
+    testConnection() {
+      this.$message.success("工单系统连接测试成功");
+    },
+    saveConfig() {
+      this.$message.success("配置已保存");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.alarm-manage {
+  padding: 0.16rem;
+}
+
+.alarm-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.pending {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.processing {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.resolved {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.workorder-config {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .config-header {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+
+    .config-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+  }
+}
+
+.config-content {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .config-row {
+    display: flex;
+    gap: 0.15rem;
+    margin-bottom: 0.15rem;
+    flex-wrap: wrap;
+
+    .config-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-input {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+
+      ::v-deep .custom-switch {
+        .el-switch__core {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  }
+
+  .config-actions {
+    display: flex;
+    gap: 0.1rem;
+    margin-top: 0.15rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+
+      svg {
+        width: 0.14rem;
+        height: 0.14rem;
+        fill: #ffffff;
+        margin-right: 0.04rem;
+      }
+    }
+  }
+}
+
+.alarm-filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .filter-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 1.8rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    gap: 0.1rem;
+
+    .search-input {
+      width: 2.5rem;
+    }
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.alarm-list {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border-radius: 0.04rem;
+    background: rgba(255, 255, 255, 0.02);
+
+    .alarm-table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 10rem;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+          th {
+            padding: 0.14rem 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: 600;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            white-space: nowrap;
+
+            &:first-child {
+              padding-left: 0.15rem;
+              border-top-left-radius: 0.04rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+              border-top-right-radius: 0.04rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          transition: all 0.3s ease;
+          background: rgba(255, 255, 255, 0.02);
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.04);
+          }
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.1);
+            transform: translateX(0.02rem);
+          }
+
+          td {
+            padding: 0.14rem 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            vertical-align: middle;
+
+            &:first-child {
+              padding-left: 0.15rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+            }
+
+            .level-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.critical {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.warning {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.info {
+                background: linear-gradient(135deg, rgba(84, 112, 198, 0.25) 0%, rgba(103, 126, 234, 0.25) 100%);
+                color: #90CAF9;
+                border: 1px solid rgba(84, 112, 198, 0.4);
+              }
+            }
+
+            .status-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.processing {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.resolved {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+              font-weight: 500;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #91CC75;
+                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.5);
+              }
+            }
+
+            .no-workorder {
+              color: #ffffff;
+              opacity: 0.5;
+              font-style: italic;
+            }
+
+            .workorder-status {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.notCreated {
+                background: rgba(255, 255, 255, 0.1);
+                color: #ffffff;
+                opacity: 0.5;
+              }
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.inProgress {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.completed {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .title-cell {
+              max-width: 2.5rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              cursor: pointer;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #15e1fd;
+              }
+            }
+
+            .action-buttons {
+              display: flex;
+              align-items: center;
+              gap: 0.08rem;
+              flex-wrap: nowrap;
+
+              .action-btn {
+                padding: 0.05rem 0.12rem;
+                font-size: 0.12rem;
+                border-radius: 0.04rem;
+                font-weight: 500;
+                transition: all 0.3s ease;
+                white-space: nowrap;
+
+                &.el-button--primary {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                  }
+                }
+
+                &.el-button--success {
+                  background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(145, 204, 117, 0.4);
+                  }
+                }
+
+                &.el-button--default {
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+                }
+
+                &:active {
+                  transform: translateY(0);
+                }
+
+                svg {
+                  width: 0.1rem;
+                  height: 0.1rem;
+                  fill: #ffffff;
+                }
+              }
+
+              .action-dropdown {
+                ::v-deep .el-button--small {
+                  padding: 0.05rem 0.1rem;
+                  font-size: 0.12rem;
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+
+                  svg {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    fill: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.warning {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.info {
+                background: rgba(84, 112, 198, 0.2);
+                color: #5470C6;
+              }
+            }
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.processing {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.resolved {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .workorder-info {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        padding: 0.15rem;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.1rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .info-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .info-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+
+              &:hover {
+                color: #91CC75;
+              }
+            }
+
+            &.workorder-status {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.inProgress {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.completed {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .process-timeline {
+        .timeline-item {
+          display: flex;
+          margin-bottom: 0.2rem;
+
+          .timeline-dot {
+            width: 0.1rem;
+            height: 0.1rem;
+            border-radius: 50%;
+            margin-right: 0.15rem;
+            margin-top: 0.03rem;
+
+            &.create {
+              background: #5470C6;
+            }
+
+            &.push {
+              background: #91CC75;
+            }
+
+            &.process,
+            &.processing {
+              background: #FAC858;
+            }
+
+            &.resolve {
+              background: #73C0DE;
+            }
+
+            &.complete {
+              background: #3BA272;
+            }
+
+            &.pending {
+              background: #EE6666;
+            }
+
+            &.reopen {
+              background: #F37336;
+            }
+          }
+
+          .timeline-content {
+            flex: 1;
+
+            .timeline-title {
+              font-size: 0.14rem;
+              color: #ffffff;
+              font-weight: bold;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-time {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.6;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-desc {
+              font-size: 0.13rem;
+              color: #ffffff;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item__label {
+    color: #ffffff;
+    opacity: 0.7;
+  }
+
+  .custom-input,
+  .custom-select {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .alarm-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .alarm-filter {
+    flex-direction: column;
+  }
+
+  .filter-actions {
+    width: 100%;
+    margin-top: 0.1rem;
+
+    .search-input {
+      flex: 1;
+    }
+  }
+
+  .table-container {
+    .alarm-table {
+      thead tr th,
+      tbody tr td {
+        font-size: 0.12rem;
+        padding: 0.08rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/deviceManage/info/index.vue b/src/views/newLifeWater/deviceManage/info/index.vue
new file mode 100644
index 0000000..40316eb
--- /dev/null
+++ b/src/views/newLifeWater/deviceManage/info/index.vue
@@ -0,0 +1,1546 @@
+<template>
+  <div class="device-manage">
+    <!-- 搜索筛选区域 -->
+    <div class="search-filter-area">
+      <div class="search-group">
+        <div class="search-item">
+          <label>设备名称</label>
+          <el-input
+            v-model="searchForm.deviceName"
+            placeholder="请输入水泵/仪表/网关名称或编号"
+            clearable
+            class="custom-input"
+            @clear="handleSearch"
+          >
+            <template #prefix>
+              <svg class="search-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M909.6 854.5L649.9 594.8c41.3-54.3 65.9-121.4 65.9-194.1C715.8 262.2 560.6 107 370.4 107S25 262.2 25 452.4s155.2 345.4 345.4 345.4c72.7 0 139.8-24.6 194.1-65.9l259.7 259.7c11.1 11.1 29.1 11.1 40.2 0l45.2-45.2c11.1-11.1 11.1-29.1 0-40.2zM370.4 705c-139.1 0-252.6-113.5-252.6-252.6s113.5-252.6 252.6-252.6 252.6 113.5 252.6 252.6-113.5 252.6-252.6 252.6z" fill="currentColor"/>
+              </svg>
+            </template>
+          </el-input>
+        </div>
+        <div class="search-item">
+          <label>设备状态</label>
+          <el-select
+            v-model="searchForm.deviceStatus"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option label="运行中" value="running"></el-option>
+            <el-option label="离线" value="offline"></el-option>
+            <el-option label="故障" value="fault"></el-option>
+          </el-select>
+        </div>
+        <div class="search-item">
+          <label>设备子类型</label>
+          <el-select
+            v-model="searchForm.deviceType"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option
+              v-for="type in getSubDeviceTypes()"
+              :key="type.value"
+              :label="type.label"
+              :value="type.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="action-group">
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">
+          <svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
+          </svg>
+          导出列表
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 设备统计卡片 -->
+    <div class="device-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.total }}</div>
+          <div class="stat-label">设备总数</div>
+        </div>
+      </div>
+      <div class="stat-card running">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.running }}</div>
+          <div class="stat-label">运行中</div>
+        </div>
+      </div>
+      <div class="stat-card offline">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.offline }}</div>
+          <div class="stat-label">离线</div>
+        </div>
+      </div>
+      <div class="stat-card fault">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.fault }}</div>
+          <div class="stat-label">故障</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备分类标签页 -->
+    <div class="category-tabs">
+      <div
+        v-for="(category, index) in deviceCategories"
+        :key="index"
+        :class="['category-tab', { active: activeCategory === index }]"
+        @click="handleCategoryChange(index)"
+      >
+        <span class="tab-icon">{{ getCategoryIcon(category.value) }}</span>
+        <span class="tab-label">{{ category.label }}</span>
+        <span class="tab-count">({{ category.count }})</span>
+      </div>
+    </div>
+
+    <!-- 设备列表 -->
+    <div class="device-list-container">
+      <div class="list-header">
+        <div class="list-title">设备列表</div>
+        <div class="list-info">
+          共 {{ filteredDevices.length }} 台设备
+        </div>
+      </div>
+      <div class="device-grid">
+        <div
+          v-for="(device, index) in paginatedDevices"
+          :key="index"
+          :class="['device-card', device.status]"
+          @click="viewDeviceDetail(device)"
+        >
+          <div class="card-header">
+            <div class="device-icon" :style="{ background: device.iconBg }">
+              <span class="icon-emoji">{{ getDeviceIconEmoji(device.type) }}</span>
+            </div>
+            <div class="device-header-info">
+              <div class="device-name">{{ device.name }}</div>
+              <div class="device-code">{{ device.code }}</div>
+            </div>
+            <div class="status-badge" :class="device.status">
+              {{ getStatusText(device.status) }}
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="device-info-row">
+              <span class="info-label">型号:</span>
+              <span class="info-value">{{ device.model }}</span>
+            </div>
+            <div class="device-info-row">
+              <span class="info-label">安装日期:</span>
+              <span class="info-value">{{ device.installDate }}</span>
+            </div>
+            <div class="device-info-row" v-if="device.area">
+              <span class="info-label">所在区域:</span>
+              <span class="info-value">{{ device.area }}</span>
+            </div>
+            <div class="device-info-row" v-if="device.status === 'running' && device.currentPressure !== undefined">
+              <span class="info-label">当前压力:</span>
+              <span class="info-value highlight">{{ device.currentPressure }} MPa</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="device-params" v-if="device.parameters && device.parameters.length > 0">
+              <div
+                v-for="(param, pIndex) in device.parameters.slice(0, 3)"
+                :key="pIndex"
+                class="param-item"
+              >
+                <span class="param-label">{{ param.label }}:</span>
+                <span class="param-value">{{ param.value }}{{ param.unit }}</span>
+              </div>
+              <div v-if="device.parameters.length > 3" class="param-more">
+                +{{ device.parameters.length - 3 }}项
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[12, 24, 48, 96]"
+          :total="filteredDevices.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 设备详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      :title="selectedDevice ? selectedDevice.name + ' - 设备详情' : '设备详情'"
+      width="900px"
+      class="custom-dialog"
+      @close="closeDetailDialog"
+    >
+      <div class="detail-content" v-if="selectedDevice">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">设备编号:</span>
+              <span class="item-value">{{ selectedDevice.code }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedDevice.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备型号:</span>
+              <span class="item-value">{{ selectedDevice.model }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备类型:</span>
+              <span class="item-value">{{ getDeviceTypeName(selectedDevice.type) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">安装日期:</span>
+              <span class="item-value">{{ selectedDevice.installDate }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备状态:</span>
+              <span class="item-value status-badge" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="info-item" v-if="selectedDevice.area">
+              <span class="item-label">所在区域:</span>
+              <span class="item-value">{{ selectedDevice.area }}</span>
+            </div>
+            <div class="info-item" v-if="selectedDevice.location">
+              <span class="item-label">具体位置:</span>
+              <span class="item-value">{{ selectedDevice.location }}</span>
+            </div>
+            <div class="info-item full-width" v-if="selectedDevice.spec">
+              <span class="item-label">设备参数:</span>
+              <span class="item-value">{{ selectedDevice.spec }}</span>
+            </div>
+            <div class="info-item full-width" v-if="selectedDevice.description">
+              <span class="item-label">设备描述:</span>
+              <span class="item-value">{{ selectedDevice.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedDevice.parameters && selectedDevice.parameters.length > 0">
+          <div class="section-title">运行参数</div>
+          <div class="params-grid">
+            <div
+              v-for="(param, index) in selectedDevice.parameters"
+              :key="index"
+              class="param-card"
+            >
+              <div class="param-label">{{ param.label }}</div>
+              <div class="param-value">{{ param.value }}</div>
+              <div class="param-unit">{{ param.unit }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">运行状态</div>
+          <div class="status-info">
+            <div class="status-item">
+              <span class="status-label">当前状态:</span>
+              <span class="status-text" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'running' && selectedDevice.runtime">
+              <span class="status-label">运行时长:</span>
+              <span class="status-text">{{ selectedDevice.runtime }}</span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'fault'">
+              <span class="status-label">故障信息:</span>
+              <span class="status-text fault">{{ selectedDevice.faultInfo || '未知故障' }}</span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.lastUpdate">
+              <span class="status-label">最后更新:</span>
+              <span class="status-text">{{ selectedDevice.lastUpdate }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedDevice.type === 'pump'">
+          <div class="section-title">控制信息</div>
+          <div class="control-grid">
+            <div class="control-item">
+              <span class="control-label">设定压力:</span>
+              <el-slider v-model="selectedDevice.setPressure" :min="0.2" :max="0.8" :step="0.05" :disabled="selectedDevice.status !== 'running'"></el-slider>
+              <span class="control-value">{{ selectedDevice.setPressure }} MPa</span>
+            </div>
+            <div class="control-item" v-if="selectedDevice.frequency">
+              <span class="control-label">运行频率:</span>
+              <el-slider v-model="selectedDevice.frequency" :min="0" :max="50" :step="0.5" :disabled="selectedDevice.status !== 'running'"></el-slider>
+              <span class="control-value">{{ selectedDevice.frequency }} Hz</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">
+            <span>历史运行数据趋势</span>
+            <div class="section-actions">
+              <el-select v-model="historyTimeRange" @change="updateHistoryChart" size="small" class="custom-select" style="width: 1.2rem;">
+                <el-option label="近24小时" value="24h"></el-option>
+                <el-option label="近7天" value="7d"></el-option>
+                <el-option label="近30天" value="30d"></el-option>
+              </el-select>
+              <el-button size="small" @click="exportHistoryData" class="custom-btn">导出数据</el-button>
+            </div>
+          </div>
+          <div class="chart-container">
+            <div ref="historyChart" class="chart"></div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">
+            <span>维护记录</span>
+            <div class="section-actions">
+              <el-button size="small" type="primary" @click="showMaintenanceDialog" class="custom-btn">新增记录</el-button>
+              <el-button size="small" @click="exportMaintenanceRecords" class="custom-btn">导出记录</el-button>
+            </div>
+          </div>
+          <div class="maintenance-list">
+            <div
+              v-for="(record, index) in maintenanceRecords"
+              :key="index"
+              class="maintenance-item"
+            >
+              <div class="maintenance-header">
+                <div class="maintenance-type" :class="record.type">{{ getMaintenanceTypeText(record.type) }}</div>
+                <div class="maintenance-date">{{ record.date }}</div>
+              </div>
+              <div class="maintenance-content">
+                <div class="maintenance-title">{{ record.title }}</div>
+                <div class="maintenance-desc">{{ record.description }}</div>
+                <div class="maintenance-operator">
+                  <span class="operator-label">维护人:</span>
+                  <span class="operator-name">{{ record.operator }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="no-maintenance" v-if="maintenanceRecords.length === 0">
+              <div class="no-data-icon">📋</div>
+              <div class="no-data-text">暂无维护记录</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDetailDialog" class="custom-btn">关闭</el-button>
+          <el-button type="primary" @click="saveControl" class="custom-btn" v-if="selectedDevice && selectedDevice.type === 'pump'">保存控制</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 维护记录弹窗 -->
+    <el-dialog
+      v-model="maintenanceDialogVisible"
+      title="新增维护记录"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="maintenanceForm" :rules="maintenanceRules" ref="maintenanceFormRef" label-width="100px" class="custom-form">
+        <el-form-item label="维护类型" prop="type">
+          <el-select v-model="maintenanceForm.type" placeholder="请选择维护类型" class="custom-select">
+            <el-option label="定期保养" value="regular"></el-option>
+            <el-option label="故障维修" value="repair"></el-option>
+            <el-option label="预防性维护" value="preventive"></el-option>
+            <el-option label="升级改造" value="upgrade"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="维护标题" prop="title">
+          <el-input v-model="maintenanceForm.title" placeholder="请输入维护标题" class="custom-input"></el-input>
+        </el-form-item>
+        <el-form-item label="维护描述" prop="description">
+          <el-input
+            v-model="maintenanceForm.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入维护描述"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="维护人员">
+          <el-input v-model="maintenanceForm.operator" placeholder="请输入维护人员姓名" class="custom-input"></el-input>
+        </el-form-item>
+        <el-form-item label="维护时间">
+          <el-date-picker
+            v-model="maintenanceForm.date"
+            type="datetime"
+            placeholder="选择维护时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            class="custom-picker"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="维护结果">
+          <el-radio-group v-model="maintenanceForm.result" class="custom-radio">
+            <el-radio label="success">正常完成</el-radio>
+            <el-radio label="partial">部分完成</el-radio>
+            <el-radio label="failed">未完成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="maintenanceDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="saveMaintenanceRecord" class="custom-btn">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "DeviceManage",
+  data() {
+    return {
+      searchForm: {
+        deviceName: "",
+        deviceStatus: "",
+        deviceType: ""
+      },
+      deviceCategories: [
+        { label: "全部设备", value: "all", count: 26 },
+        { label: "水泵组", value: "pump", count: 16 },
+        { label: "仪表", value: "meter", count: 4 },
+        { label: "网关", value: "gateway", count: 3 },
+        { label: "传感器", value: "sensor", count: 3 }
+      ],
+      activeCategory: 0,
+      currentPage: 1,
+      pageSize: 12,
+      deviceList: [],
+      deviceStats: {
+        total: 26,
+        running: 22,
+        offline: 3,
+        fault: 1
+      },
+      detailDialogVisible: false,
+      selectedDevice: null,
+      historyTimeRange: "24h",
+      historyChart: null,
+      maintenanceDialogVisible: false,
+      maintenanceForm: {
+        type: "regular",
+        title: "",
+        description: "",
+        operator: "",
+        date: "",
+        result: "success"
+      },
+      maintenanceRules: {
+        type: [{ required: true, message: "请选择维护类型", trigger: "change" }],
+        title: [{ required: true, message: "请输入维护标题", trigger: "blur" }],
+        description: [{ required: true, message: "请输入维护描述", trigger: "blur" }]
+      },
+      maintenanceRecords: []
+    };
+  },
+  computed: {
+    filteredDevices() {
+      let devices = [...this.deviceList];
+      const category = this.deviceCategories[this.activeCategory];
+      if (category.value !== "all") {
+        devices = devices.filter(d => d.type === category.value);
+      }
+      if (this.searchForm.deviceName) {
+        const keyword = this.searchForm.deviceName.toLowerCase();
+        devices = devices.filter(d => 
+          d.name.toLowerCase().includes(keyword) || 
+          d.code.toLowerCase().includes(keyword)
+        );
+      }
+      if (this.searchForm.deviceStatus) {
+        devices = devices.filter(d => d.status === this.searchForm.deviceStatus);
+      }
+      if (this.searchForm.deviceType) {
+        devices = devices.filter(d => d.subType === this.searchForm.deviceType);
+      }
+      return devices;
+    },
+    paginatedDevices() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredDevices.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initDeviceList();
+  },
+  methods: {
+    initDeviceList() {
+      const pumpIcons = ["#FFD700", "#FFA500", "#FF6B6B", "#4ECDC4"];
+      const gatewayIcons = ["#667eea", "#764ba2"];
+      const meterIcons = ["#f093fb", "#f5576c"];
+      const sensorIcons = ["#30cfd0", "#330867"];
+      
+      // 水泵设备
+      const pumpTypes = [
+        { label: "高区水泵", value: "highZonePump", zone: "高区" },
+        { label: "中区水泵", value: "middleZonePump", zone: "中区" },
+        { label: "低区水泵", value: "lowZonePump", zone: "低区" },
+        { label: "消防水泵", value: "fireZonePump", zone: "消防区" }
+      ];
+      
+      const pumpModels = [
+        { model: "SBP-45-30", power: 45, pressure: 0.6, flow: 180 },
+        { model: "SBP-37-25", power: 37, pressure: 0.5, flow: 150 },
+        { model: "SBP-22-18", power: 22, pressure: 0.4, flow: 120 },
+        { model: "SBP-55-40", power: 55, pressure: 0.7, flow: 200 }
+      ];
+      
+      for (let i = 1; i <= 16; i++) {
+        const typeIndex = i % pumpTypes.length;
+        const modelIndex = i % pumpModels.length;
+        const iconIndex = i % pumpIcons.length;
+        
+        this.deviceList.push({
+          code: `WP-${pumpTypes[typeIndex].zone === '高区' ? 'H' : pumpTypes[typeIndex].zone === '中区' ? 'M' : pumpTypes[typeIndex].zone === '低区' ? 'L' : 'F'}-${String(i).padStart(3, '0')}`,
+          name: `${pumpTypes[typeIndex].zone}${i}#${pumpTypes[typeIndex].label.replace('区', '').replace('消防', '')}`,
+          type: "pump",
+          subType: pumpTypes[typeIndex].value,
+          model: pumpModels[modelIndex].model,
+          spec: `额定功率: ${pumpModels[modelIndex].power}kW, 额定压力: ${pumpModels[modelIndex].pressure}MPa, 额定流量: ${pumpModels[modelIndex].flow}m³/h`,
+          installDate: this.getRandomDate(2020, 2023),
+          status: i <= 14 ? "running" : i <= 15 ? "offline" : "fault",
+          faultInfo: i > 15 ? "水泵过载" : undefined,
+          area: pumpTypes[typeIndex].zone,
+          location: `设备房-${Math.ceil(i / 4)}层`,
+          description: `${pumpTypes[typeIndex].label}，用于${pumpTypes[typeIndex].zone}供水系统`,
+          iconBg: `linear-gradient(135deg, ${pumpIcons[iconIndex]} 0%, ${pumpIcons[(iconIndex + 1) % pumpIcons.length]} 100%)`,
+          currentPressure: (pumpModels[modelIndex].pressure * (0.85 + Math.random() * 0.2)).toFixed(2),
+          currentFlow: (pumpModels[modelIndex].flow * (0.8 + Math.random() * 0.3)).toFixed(1),
+          currentPower: (pumpModels[modelIndex].power * (0.75 + Math.random() * 0.2)).toFixed(1),
+          setPressure: pumpModels[modelIndex].pressure,
+          frequency: (35 + Math.random() * 15).toFixed(1),
+          runtime: `${Math.floor(1000 + Math.random() * 2000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: [
+            { label: "出口压力", value: (pumpModels[modelIndex].pressure * (0.85 + Math.random() * 0.2)).toFixed(2), unit: "MPa" },
+            { label: "流量", value: (pumpModels[modelIndex].flow * (0.8 + Math.random() * 0.3)).toFixed(1), unit: "m³/h" },
+            { label: "功率", value: (pumpModels[modelIndex].power * (0.75 + Math.random() * 0.2)).toFixed(1), unit: "kW" },
+            { label: "频率", value: (35 + Math.random() * 15).toFixed(1), unit: "Hz" },
+            { label: "电流", value: (pumpModels[modelIndex].power / 380 * (2 + Math.random() * 0.5)).toFixed(2), unit: "A" },
+            { label: "电压", value: (380 + Math.random() * 10).toFixed(1), unit: "V" }
+          ]
+        });
+      }
+      
+      // 网关设备
+      for (let i = 1; i <= 3; i++) {
+        const iconIndex = i % gatewayIcons.length;
+        const areaIndex = i % 4;
+        
+        const areas = ["高区", "中区", "低区", "消防区"];
+        
+        this.deviceList.push({
+          code: `GW-00${i}`,
+          name: `${i}号水泵网关`,
+          type: "gateway",
+          subType: "pumpGateway",
+          model: "LGT-GW1000",
+          spec: "支持50个节点, Modbus/RS485, 供电: 24V/2A",
+          installDate: this.getRandomDate(2020, 2021),
+          status: i <= 2 ? "running" : "offline",
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-机房`,
+          description: "水泵系统智能网关，负责数据采集和控制指令下发",
+          iconBg: `linear-gradient(135deg, #${gatewayIcons[iconIndex]} 0%, #${gatewayIcons[(iconIndex + 1) % gatewayIcons.length]} 100%)`,
+          runtime: `${Math.floor(2000 + Math.random() * 3000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: [
+            { label: "在线设备数", value: `${5 + Math.floor(Math.random() * 6)}`, unit: "台" },
+            { label: "网络延迟", value: `${Math.floor(10 + Math.random() * 20)}`, unit: "ms" },
+            { label: "信号强度", value: `-40 - ${Math.floor(Math.random() * 20)}`, unit: "dBm" },
+            { label: "CPU使用率", value: `${Math.floor(20 + Math.random() * 30)}`, unit: "%" }
+          ]
+        });
+      }
+      
+      // 仪表设备（流量计、压力表）
+      for (let i = 1; i <= 4; i++) {
+        const iconIndex = i % meterIcons.length;
+        const areaIndex = i % 4;
+        const meterTypes = ["流量计", "压力表", "电表", "液位计"];
+        
+        const areas = ["高区", "中区", "低区", "消防区"];
+        
+        this.deviceList.push({
+          code: `MT-${String(i).padStart(3, '0')}`,
+          name: `${areas[areaIndex]}${meterTypes[i-1]}-${i}`,
+          type: "meter",
+          subType: `pump${meterTypes[i-1]}`,
+          model: i === 3 ? "DTS666" : "LGT-MT100",
+          spec: i === 3 ? "三相四线, 3(6)A, 0.5S级, RS485通信" : "精度±0.5%, 4-20mA/RS485",
+          installDate: this.getRandomDate(2020, 2021),
+          status: i <= 3 ? "running" : "offline",
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-设备房`,
+          description: `${meterTypes[i-1]}，用于${areas[areaIndex]}数据监测`,
+          iconBg: `linear-gradient(135deg, #${meterIcons[iconIndex]} 0%, #${meterIcons[(iconIndex + 1) % meterIcons.length]} 100%)`,
+          runtime: `${Math.floor(2000 + Math.random() * 3000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: this.getMeterParameters(i)
+        });
+      }
+      
+      // 传感器设备
+      const sensorTypes = [
+        { label: "压力传感器", value: "pressureSensor", spec: "量程: 0-1.6MPa, 精度: ±0.25%FS" },
+        { label: "液位传感器", value: "levelSensor", spec: "量程: 0-10m, 精度: ±1%FS" },
+        { label: "流量传感器", value: "flowSensor", spec: "量程: 0-500m³/h, 精度: ±0.5%" }
+      ];
+      
+      for (let i = 1; i <= 3; i++) {
+        const typeIndex = (i - 1) % sensorTypes.length;
+        const iconIndex = i % sensorIcons.length;
+        const areaIndex = i % 4;
+        
+        const areas = ["高区", "中区", "低区", "消防区"];
+        
+        this.deviceList.push({
+          code: `SN-${String(i).padStart(3, '0')}`,
+          name: `${areas[areaIndex]}${sensorTypes[typeIndex].label}-${i}`,
+          type: "sensor",
+          subType: sensorTypes[typeIndex].value,
+          model: "LGT-SN200",
+          spec: sensorTypes[typeIndex].spec,
+          installDate: this.getRandomDate(2020, 2022),
+          status: i <= 2 ? "running" : "offline",
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-水箱房`,
+          description: `${sensorTypes[typeIndex].label}，用于${areas[areaIndex]}监测`,
+          iconBg: `linear-gradient(135deg, #${sensorIcons[iconIndex]} 0%, #${sensorIcons[(iconIndex + 1) % sensorIcons.length]} 100%)`,
+          runtime: `${Math.floor(1000 + Math.random() * 2000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: this.getSensorParameters(sensorTypes[typeIndex].value)
+        });
+      }
+    },
+    getSensorParameters(type) {
+      switch (type) {
+        case "pressureSensor":
+          return [
+            { label: "当前压力", value: `${(0.3 + Math.random() * 0.5).toFixed(2)}`, unit: "MPa" },
+            { label: "信号强度", value: `-45 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        case "levelSensor":
+          return [
+            { label: "当前液位", value: `${Math.floor(3 + Math.random() * 5)}`, unit: "m" },
+            { label: "信号强度", value: `-48 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        case "flowSensor":
+          return [
+            { label: "瞬时流量", value: `${(100 + Math.random() * 200).toFixed(1)}`, unit: "m³/h" },
+            { label: "累计流量", value: `${Math.floor(10000 + Math.random() * 50000)}`, unit: "m³" },
+            { label: "信号强度", value: `-50 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        default:
+          return [];
+      }
+    },
+    getMeterParameters(index) {
+      // TODO: 根据区域(area)参数返回不同区域的仪表数据
+      switch (index) {
+        case 1: // 流量计
+          return [
+            { label: "瞬时流量", value: `${(120 + Math.random() * 80).toFixed(1)}`, unit: "m³/h" },
+            { label: "累计流量", value: `${Math.floor(50000 + Math.random() * 100000)}`, unit: "m³" },
+            { label: "信号强度", value: `-42 - ${Math.floor(Math.random() * 12)}`, unit: "dBm" }
+          ];
+        case 2: // 压力表
+          return [
+            { label: "当前压力", value: `${(0.35 + Math.random() * 0.35).toFixed(2)}`, unit: "MPa" },
+            { label: "信号强度", value: `-45 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        case 3: // 电表
+          return [
+            { label: "总有功电能", value: `${Math.floor(20000 + Math.random() * 80000)}`, unit: "kWh" },
+            { label: "总功率", value: `${Math.floor(80 + Math.random() * 150)}`, unit: "kW" },
+            { label: "A相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" },
+            { label: "B相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" },
+            { label: "C相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" }
+          ];
+        case 4: // 液位计
+          return [
+            { label: "当前液位", value: `${Math.floor(4 + Math.random() * 4)}`, unit: "m" },
+            { label: "水箱容积", value: `${Math.floor(80 + Math.random() * 40)}`, unit: "%" },
+            { label: "信号强度", value: `-48 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        default:
+          return [];
+      }
+    },
+    getRandomDate(startYear, endYear) {
+      const start = new Date(startYear, 0, 1);
+      const end = new Date(endYear, 11, 31);
+      const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+      return date.toISOString().split('T')[0];
+    },
+    getRecentTime() {
+      const now = new Date();
+      return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+    },
+    getSubDeviceTypes() {
+      const category = this.deviceCategories[this.activeCategory];
+      switch (category.value) {
+        case "pump":
+          return [
+            { label: "高区水泵", value: "highZonePump" },
+            { label: "中区水泵", value: "middleZonePump" },
+            { label: "低区水泵", value: "lowZonePump" },
+            { label: "消防水泵", value: "fireZonePump" }
+          ];
+        case "gateway":
+          return [
+            { label: "水泵网关", value: "pumpGateway" }
+          ];
+        case "meter":
+          return [
+            { label: "流量计", value: "pumpFlowMeter" },
+            { label: "压力表", value: "pumpPressureMeter" },
+            { label: "电表", value: "pumpEnergyMeter" },
+            { label: "液位计", value: "pumpLevelMeter" }
+          ];
+        case "sensor":
+          return [
+            { label: "压力传感器", value: "pressureSensor" },
+            { label: "液位传感器", value: "levelSensor" },
+            { label: "流量传感器", value: "flowSensor" }
+          ];
+        default:
+          return [];
+      }
+    },
+    getStatusText(status) {
+      const statusMap = {
+        running: "运行中",
+        offline: "离线",
+        fault: "故障"
+      };
+      return statusMap[status] || status;
+    },
+    getDeviceIconEmoji(type) {
+      const iconMap = {
+        pump: "🔧",
+        gateway: "📡",
+        meter: "⚡",
+        sensor: "📊"
+      };
+      return iconMap[type] || "📱";
+    },
+    getDeviceTypeName(type) {
+      const typeMap = {
+        pump: "水泵",
+        gateway: "网关",
+        meter: "仪表",
+        sensor: "传感器"
+      };
+      return typeMap[type] || type;
+    },
+    getCategoryIcon(value) {
+      const iconMap = {
+        all: "📋",
+        pump: "🔧",
+        gateway: "📡",
+        meter: "⚡",
+        sensor: "📊"
+      };
+      return iconMap[value] || "📱";
+    },
+    handleCategoryChange(index) {
+      this.activeCategory = index;
+      this.currentPage = 1;
+      this.searchForm.deviceType = "";
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.searchForm = { deviceName: "", deviceStatus: "", deviceType: "" };
+      this.activeCategory = 0;
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("设备列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewDeviceDetail(device) {
+      this.selectedDevice = { ...device };
+      this.detailDialogVisible = true;
+    },
+    closeDetailDialog() {
+      this.detailDialogVisible = false;
+      this.selectedDevice = null;
+    },
+    saveControl() {
+      this.$message.success("控制参数保存成功");
+      this.closeDetailDialog();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-manage {
+  padding: 0.16rem;
+  background: rgba(11, 30, 48, 0.6);
+}
+
+.search-filter-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .search-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .search-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-input,
+      ::v-deep .custom-select {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: none;
+
+          &:hover {
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+
+        .search-icon {
+          width: 0.16rem;
+          height: 0.16rem;
+          fill: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+  }
+
+  .action-group {
+    display: flex;
+    gap: 0.1rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        .btn-icon {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.device-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-radius: 0.08rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.2rem rgba(21, 225, 253, 0.15);
+    }
+
+    &.total {
+      border-left: 0.04rem solid #5470C6;
+    }
+
+    &.running {
+      border-left: 0.04rem solid #91CC75;
+    }
+
+    &.offline {
+      border-left: 0.04rem solid #EE6666;
+    }
+
+    &.fault {
+      border-left: 0.04rem solid #FAC858;
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.category-tabs {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  overflow-x: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .category-tab {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.1rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.06rem;
+    transition: all 0.3s;
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+
+    .tab-icon {
+      font-size: 0.16rem;
+    }
+
+    .tab-label {
+      flex: 1;
+    }
+
+    .tab-count {
+      font-size: 0.12rem;
+      opacity: 0.8;
+    }
+  }
+}
+
+.device-list-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+    gap: 0.15rem;
+    margin-bottom: 0.2rem;
+
+    .device-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      cursor: pointer;
+      transition: all 0.3s;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-0.03rem);
+        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2);
+      }
+
+      &.running {
+        border-left: 3px solid #91CC75;
+      }
+
+      &.offline {
+        border-left: 3px solid #EE6666;
+      }
+
+      &.fault {
+        border-left: 3px solid #FAC858;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.15rem;
+
+        .device-icon {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.12rem;
+          font-size: 0.24rem;
+          color: #ffffff;
+        }
+
+        .device-header-info {
+          flex: 1;
+
+          .device-name {
+            font-size: 0.15rem;
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .device-code {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .status-badge {
+          padding: 0.04rem 0.12rem;
+          border-radius: 0.04rem;
+          font-size: 0.11rem;
+
+          &.running {
+            background: rgba(145, 204, 117, 0.2);
+            color: #91CC75;
+            border: 1px solid rgba(145, 204, 117, 0.3);
+          }
+
+          &.offline {
+            background: rgba(238, 102, 102, 0.2);
+            color: #EE6666;
+            border: 1px solid rgba(238, 102, 102, 0.3);
+          }
+
+          &.fault {
+            background: rgba(250, 200, 88, 0.2);
+            color: #FAC858;
+            border: 1px solid rgba(250, 200, 88, 0.3);
+          }
+        }
+      }
+
+      .card-body {
+        margin-bottom: 0.15rem;
+
+        .device-info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.08rem;
+          font-size: 0.13rem;
+
+          .info-label {
+            color: #ffffff;
+            opacity: 0.6;
+          }
+
+          .info-value {
+            color: #ffffff;
+            opacity: 0.9;
+
+            &.highlight {
+              color: #15e1fd;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+
+      .card-footer {
+        .device-params {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.08rem;
+
+          .param-item {
+            padding: 0.06rem 0.1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 0.04rem;
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.8;
+
+            .param-label {
+              opacity: 0.7;
+            }
+
+            .param-value {
+              color: #15e1fd;
+              font-weight: bold;
+              margin: 0 0.04rem;
+            }
+          }
+
+          .param-more {
+            padding: 0.06rem 0.1rem;
+            background: rgba(21, 225, 253, 0.1);
+            border-radius: 0.04rem;
+            font-size: 0.11rem;
+            color: #15e1fd;
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: linear-gradient(135deg, rgba(11, 30, 48, 0.98) 0%, rgba(20, 45, 65, 0.98) 100%);
+    border: 1px solid rgba(21, 225, 253, 0.3);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.running {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+
+              &.offline {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.fault {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+            }
+          }
+        }
+      }
+
+      .params-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(1.5rem, 1fr));
+        gap: 0.15rem;
+
+        .param-card {
+          padding: 0.2rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.06rem;
+          text-align: center;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-0.02rem);
+          }
+
+          .param-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.08rem;
+          }
+
+          .param-value {
+            font-size: 0.2rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .param-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      .status-info {
+        .status-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+          margin-bottom: 0.1rem;
+
+          .status-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .status-text {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.running {
+              color: #91CC75;
+            }
+
+            &.offline {
+              color: #EE6666;
+            }
+
+            &.fault {
+              color: #FAC858;
+            }
+          }
+        }
+      }
+
+      .control-grid {
+        .control-item {
+          display: flex;
+          align-items: center;
+          gap: 0.15rem;
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+          margin-bottom: 0.1rem;
+
+          .control-label {
+            min-width: 1rem;
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .el-slider {
+            flex: 1;
+          }
+
+          .control-value {
+            min-width: 0.8rem;
+            text-align: right;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.1rem;
+  }
+}
+
+::v-deep .el-slider {
+  .el-slider__runway {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .el-slider__bar {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .el-slider__button {
+    border-color: #667eea;
+  }
+}
+
+@media (max-width: 1485px) {
+  .device-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid {
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .search-filter-area {
+    flex-direction: column;
+
+    .search-group {
+      width: 100%;
+      flex-direction: column;
+
+      .search-item {
+        width: 100%;
+
+        ::v-deep .custom-input,
+        ::v-deep .custom-select {
+          width: 100%;
+        }
+      }
+    }
+
+    .action-group {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .device-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .category-tabs {
+    flex-wrap: wrap;
+  }
+
+  .detail-content {
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/energyManage/energyConsumptionEfficiencyTrend/index.vue b/src/views/newLifeWater/energyManage/energyConsumptionEfficiencyTrend/index.vue
new file mode 100644
index 0000000..4ca4226
--- /dev/null
+++ b/src/views/newLifeWater/energyManage/energyConsumptionEfficiencyTrend/index.vue
@@ -0,0 +1,2174 @@
+<template>
+  <div class="water-energy-trend">
+    <!-- 时间选择器 -->
+    <div class="time-selector">
+      <div class="selector-label">时间段选择</div>
+      <div class="time-periods">
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          :class="['period-item', { active: activePeriod === index }]"
+          @click="handlePeriodChange(index)"
+        >
+          {{ period }}
+        </div>
+      </div>
+      <div class="date-range" v-if="activePeriod === 3">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="custom-picker"
+        />
+      </div>
+    </div>
+
+    <!-- 对比控制 -->
+    <div class="compare-control">
+      <el-checkbox v-model="enableCompare">开启对比模式</el-checkbox>
+      <div class="compare-range" v-if="enableCompare">
+        <span class="compare-label">对比时间段：</span>
+        <el-date-picker
+          v-model="compareRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          size="small"
+        />
+      </div>
+      <el-checkbox v-model="showWarningMarkers" style="margin-left: 0.2rem;">显示预警标记</el-checkbox>
+    </div>
+
+    <!-- 核心指标卡片 -->
+    <div class="indicator-cards">
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #5470C6 0%, #91CAFC 100%);">
+          <span>总用电</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.totalElectricity }}</div>
+          <div class="card-label">总用电量(kWh)</div>
+          <div class="card-change" :class="indicators.electricityChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.electricityChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.electricityChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <span>总供水</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.totalWaterSupply }}</div>
+          <div class="card-label">总供水量(m³)</div>
+          <div class="card-change" :class="indicators.waterSupplyChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.waterSupplyChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.waterSupplyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #91CC75 0%, #F5A623 100%);">
+          <span>节能率</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.savingRate }}%</div>
+          <div class="card-label">综合节能率</div>
+          <div class="card-change" :class="indicators.savingRateChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.savingRateChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.savingRateChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #FAC858 0%, #F59E0B 100%);">
+          <span>吨水能耗</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.unitWaterEnergy }}</div>
+          <div class="card-label">吨水能耗(kWh/m³)</div>
+          <div class="card-change" :class="indicators.unitWaterEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.unitWaterEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.unitWaterEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #73C0DE 0%, #3BA272 100%);">
+          <span>节电金额</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.savingMoney }}万元</div>
+          <div class="card-label">累计节电金额</div>
+          <div class="card-change" :class="indicators.savingMoneyChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.savingMoneyChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.savingMoneyChange) }}%
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 水泵系统总用电量趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #15e1fd;"></span>
+          <span>水泵系统总用电量趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #15e1fd;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>对比时段</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #EE6666;"></span>
+            <span>预警时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="totalElectricityChartRef"></div>
+    </div>
+
+    <!-- 水泵系统总供水量趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #4facfe;"></span>
+          <span>水泵系统总供水量趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #4facfe;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #5470C6;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="totalWaterSupplyChartRef"></div>
+    </div>
+
+    <!-- 分区用电量趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #FAC858;"></span>
+          <span>分区用电量趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #667eea;"></span>
+            <span>高区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #f093fb;"></span>
+            <span>中区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #4facfe;"></span>
+            <span>低区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #fa709a;"></span>
+            <span>消防区</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="zoneElectricityChartRef"></div>
+    </div>
+
+    <!-- 分区供水量趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #91CC75;"></span>
+          <span>分区供水量趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #667eea;"></span>
+            <span>高区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #f093fb;"></span>
+            <span>中区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #4facfe;"></span>
+            <span>低区</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #fa709a;"></span>
+            <span>消防区</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="zoneWaterSupplyChartRef"></div>
+    </div>
+
+    <!-- 吨水能耗对比图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #5470C6;"></span>
+          <span>吨水能耗对比</span>
+        </div>
+        <div class="chart-controls">
+          <el-select v-model="waterEnergyChartType" @change="updateWaterEnergyChart" size="small" class="custom-select" style="width: 1rem;">
+            <el-option label="柱状图" value="bar"></el-option>
+            <el-option label="折线图" value="line"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="chart" ref="waterEnergyChartRef"></div>
+    </div>
+
+    <!-- 节能效果对比分析 -->
+    <div class="compare-analysis">
+      <div class="analysis-header">
+        <div class="analysis-title">节能效果对比分析</div>
+      </div>
+      <div class="analysis-content" v-if="enableCompare">
+        <div class="analysis-item">
+          <div class="analysis-label">用电量变化</div>
+          <div class="analysis-value" :class="compareAnalysis.electricityDiff <= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.electricityDiff > 0 ? '+' : '' }}{{ compareAnalysis.electricityDiff }}kWh
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.electricityRate <= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.electricityRate > 0 ? '+' : '' }}{{ compareAnalysis.electricityRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">供水量变化</div>
+          <div class="analysis-value" :class="compareAnalysis.waterSupplyDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.waterSupplyDiff > 0 ? '+' : '' }}{{ compareAnalysis.waterSupplyDiff }}m³
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.waterSupplyRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.waterSupplyRate > 0 ? '+' : '' }}{{ compareAnalysis.waterSupplyRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">节能率变化</div>
+          <div class="analysis-value" :class="compareAnalysis.savingRateDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.savingRateDiff > 0 ? '+' : '' }}{{ compareAnalysis.savingRateDiff }}%
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.savingRateRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.savingRateRate > 0 ? '+' : '' }}{{ compareAnalysis.savingRateRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">节电金额变化</div>
+          <div class="analysis-value" :class="compareAnalysis.moneyDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.moneyDiff > 0 ? '+' : '' }}{{ compareAnalysis.moneyDiff }}万元
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.moneyRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.moneyRate > 0 ? '+' : '' }}{{ compareAnalysis.moneyRate }}%)
+          </div>
+        </div>
+      </div>
+      <div class="analysis-hint" v-else>
+        <svg class="hint-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+          <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+        </svg>
+        <span>开启对比模式后可查看两个时间段的用电量、供水量及节能效果对比分析</span>
+      </div>
+    </div>
+
+    <!-- 能耗预警与关联分析 -->
+    <div class="warning-energy-analysis">
+      <div class="section-header">
+        <div class="section-title">能耗预警与关联分析</div>
+        <div class="section-actions">
+          <el-select v-model="warningFilter.level" placeholder="预警级别" clearable size="small" class="custom-select" style="width: 1.2rem;">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="重要" value="major"></el-option>
+            <el-option label="一般" value="minor"></el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 预警时间轴与能耗影响 -->
+      <div class="warning-timeline-chart">
+        <div class="timeline-header">
+          <div class="header-item">
+            <span class="label">预警次数</span>
+            <span class="value">{{ warningStats.total }}</span>
+          </div>
+          <div class="header-item">
+            <span class="label">用电损失</span>
+            <span class="value warning-impact">{{ warningStats.electricityLoss }}kWh</span>
+          </div>
+          <div class="header-item">
+            <span class="label">节能率下降</span>
+            <span class="value warning-impact">{{ warningStats.savingRateDrop }}%</span>
+          </div>
+          <div class="header-item">
+            <span class="label">影响时长</span>
+            <span class="value">{{ warningStats.impactDuration }}小时</span>
+          </div>
+        </div>
+        <div class="timeline-chart" ref="warningTimelineChartRef"></div>
+      </div>
+
+      <!-- 预警影响详情表格 -->
+      <div class="warning-impact-table">
+        <div class="table-header">
+          <div class="table-title">预警影响详情</div>
+        </div>
+        <div class="table-container">
+          <table class="impact-table">
+            <thead>
+              <tr>
+                <th>预警时间</th>
+                <th>预警级别</th>
+                <th>预警标题</th>
+                <th>区域</th>
+                <th>状态</th>
+                <th>用电影响</th>
+                <th>供水影响</th>
+                <th>节能率影响</th>
+                <th>影响时长</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="warning in filteredWarnings" :key="warning.id">
+                <td>{{ warning.warningTime }}</td>
+                <td>
+                  <span class="level-badge" :class="warning.level">{{ getWarningLevelText(warning.level) }}</span>
+                </td>
+                <td class="title-cell">{{ warning.title }}</td>
+                <td>{{ warning.zoneName }}</td>
+                <td>
+                  <span class="status-badge" :class="warning.status">{{ getWarningStatusText(warning.status) }}</span>
+                </td>
+                <td :class="warning.electricityImpact > 0 ? 'energy-loss' : 'energy-save'">
+                  {{ warning.electricityImpact > 0 ? '+' : '' }}{{ warning.electricityImpact }}kWh
+                </td>
+                <td :class="warning.waterSupplyImpact >= 0 ? 'water-up' : 'water-down'">
+                  {{ warning.waterSupplyImpact > 0 ? '+' : '' }}{{ warning.waterSupplyImpact }}m³
+                </td>
+                <td :class="warning.savingRateImpact < 0 ? 'saving-drop' : 'saving-rise'">
+                  {{ warning.savingRateImpact > 0 ? '+' : '' }}{{ warning.savingRateImpact }}%
+                </td>
+                <td>{{ warning.impactDuration }}h</td>
+                <td>
+                  <div class="action-buttons">
+                    <el-button
+                      size="small"
+                      type="primary"
+                      @click="viewWarningDetail(warning)"
+                      class="action-btn"
+                    >
+                      详情
+                    </el-button>
+                    <el-button
+                      v-if="warning.status === 'pending' || warning.status === 'processing'"
+                      size="small"
+                      type="success"
+                      @click="handleWarningResolve(warning)"
+                      class="action-btn"
+                    >
+                      处理
+                    </el-button>
+                    <el-dropdown @command="(cmd) => handleWarningCommand(cmd, warning)" class="action-dropdown">
+                      <el-button size="small" class="action-btn">
+                        更多
+                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                          <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                        </svg>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu class="custom-dropdown-menu">
+                          <el-dropdown-item command="markResolved" v-if="warning.status !== 'resolved'">标记已处理</el-dropdown-item>
+                          <el-dropdown-item command="close" v-if="warning.status !== 'resolved'">关闭预警</el-dropdown-item>
+                          <el-dropdown-item command="reopen" v-if="warning.status === 'resolved'">重新打开</el-dropdown-item>
+                          <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预警详情弹窗 -->
+    <el-dialog
+      v-model="warningDetailDialogVisible"
+      title="预警与能耗关联详情"
+      width="900px"
+      class="custom-dialog"
+    >
+      <div class="warning-detail-content" v-if="selectedWarning">
+        <div class="detail-section">
+          <div class="section-title">预警信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">预警ID:</span>
+              <span class="item-value">{{ selectedWarning.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警级别:</span>
+              <span class="item-value level-badge" :class="selectedWarning.level">{{ getWarningLevelText(selectedWarning.level) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">区域名称:</span>
+              <span class="item-value">{{ selectedWarning.zoneName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警时间:</span>
+              <span class="item-value">{{ selectedWarning.warningTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">预警描述:</span>
+              <span class="item-value">{{ selectedWarning.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗影响分析</div>
+          <div class="impact-cards">
+            <div class="impact-card">
+              <div class="card-label">用电增加</div>
+              <div class="card-value energy-impact">{{ selectedWarning.electricityImpact }}kWh</div>
+              <div class="card-desc">相比正常运行时段</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">供水减少</div>
+              <div class="card-value water-impact">{{ selectedWarning.waterSupplyImpact }}m³</div>
+              <div class="card-desc">系统供水量减少</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">节能率下降</div>
+              <div class="card-value saving-impact">{{ selectedWarning.savingRateImpact }}%</div>
+              <div class="card-desc">系统节能率降低</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">经济损失</div>
+              <div class="card-value cost-impact">{{ selectedWarning.costImpact }}元</div>
+              <div class="card-desc">电费损失估算</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗与供水趋势对比</div>
+          <div class="energy-comparison-chart" ref="energyComparisonChartRef"></div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="warningDetailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "WaterEnergyConsumptionEfficiencyTrend",
+  data() {
+    return {
+      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
+      activePeriod: 0,
+      dateRange: [],
+      compareRange: [],
+      enableCompare: false,
+      showWarningMarkers: true,
+      indicators: {
+        totalElectricity: 285600,
+        electricityChange: -8.5,
+        totalWaterSupply: 125000,
+        waterSupplyChange: 5.2,
+        savingRate: 25.8,
+        savingRateChange: 6.8,
+        unitWaterEnergy: 0.73,
+        unitWaterEnergyChange: -12.5,
+        savingMoney: 28.6,
+        savingMoneyChange: 9.3
+      },
+      compareAnalysis: {
+        electricityDiff: -26500,
+        electricityRate: -8.5,
+        waterSupplyDiff: 6200,
+        waterSupplyRate: 5.2,
+        savingRateDiff: 1.8,
+        savingRateRate: 7.5,
+        moneyDiff: 2.5,
+        moneyRate: 9.6
+      },
+      warningStats: {
+        total: 15,
+        electricityLoss: 3850,
+        savingRateDrop: -4.8,
+        impactDuration: 72
+      },
+      warningFilter: {
+        level: ""
+      },
+      warningList: [],
+      waterEnergyChartType: "bar",
+      totalElectricityChart: null,
+      totalWaterSupplyChart: null,
+      zoneElectricityChart: null,
+      zoneWaterSupplyChart: null,
+      waterEnergyChart: null,
+      warningTimelineChart: null,
+      energyComparisonChart: null,
+      warningDetailDialogVisible: false,
+      selectedWarning: null
+    };
+  },
+  computed: {
+    filteredWarnings() {
+      let warnings = [...this.warningList];
+      if (this.warningFilter.level) {
+        warnings = warnings.filter(w => w.level === this.warningFilter.level);
+      }
+      return warnings;
+    }
+  },
+  mounted() {
+    this.initTotalElectricityChart();
+    this.initTotalWaterSupplyChart();
+    this.initZoneElectricityChart();
+    this.initZoneWaterSupplyChart();
+    this.initWaterEnergyChart();
+    this.initWarningTimelineChart();
+    this.initWarningList();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.totalElectricityChart) this.totalElectricityChart.dispose();
+    if (this.totalWaterSupplyChart) this.totalWaterSupplyChart.dispose();
+    if (this.zoneElectricityChart) this.zoneElectricityChart.dispose();
+    if (this.zoneWaterSupplyChart) this.zoneWaterSupplyChart.dispose();
+    if (this.waterEnergyChart) this.waterEnergyChart.dispose();
+    if (this.warningTimelineChart) this.warningTimelineChart.dispose();
+    if (this.energyComparisonChart) this.energyComparisonChart.dispose();
+  },
+  watch: {
+    activePeriod() {
+      this.updateAllCharts();
+    },
+    enableCompare() {
+      this.updateAllCharts();
+    },
+    compareRange() {
+      if (this.enableCompare) {
+        this.updateAllCharts();
+      }
+    },
+    showWarningMarkers() {
+      this.updateAllCharts();
+    },
+    "warningFilter.level"() {
+      this.updateWarningTimelineChart();
+    }
+  },
+  methods: {
+    handlePeriodChange(index) {
+      this.activePeriod = index;
+    },
+    handleDateChange(value) {
+      this.updateAllCharts();
+    },
+    initTotalElectricityChart() {
+      this.totalElectricityChart = echarts.init(this.$refs.totalElectricityChartRef);
+      this.updateTotalElectricityChart();
+    },
+    updateTotalElectricityChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
+          compare: [46000, 49000, 47000, 52000, 55000, 50000, 48000],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [410000, 450000, 430000, 480000, 510000, 460000, 440000],
+          compare: [450000, 490000, 470000, 520000, 550000, 500000, 480000],
+          warningData: [3, 5, 2, 8, 6, 4, 3]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          current: [12500000, 13800000, 13200000],
+          compare: [13600000, 15000000, 14400000],
+          warningData: [45, 62, 38]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
+          compare: [46000, 49000, 47000, 52000, 55000, 50000, 48000],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: { color: "#15e1fd" },
+          lineStyle: { color: "#15e1fd", width: 3 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(21, 225, 253, 0.5)" },
+              { offset: 1, color: "rgba(21, 225, 253, 0)" }
+            ])
+          }
+        }
+      ];
+
+      if (this.showWarningMarkers) {
+        const warningPoints = currentData.warningData.map((value, index) => {
+          if (value > 0) {
+            return {
+              name: currentData.xData[index],
+              value: value,
+              xAxis: index,
+              yAxis: this.activePeriod === 2 ? 14000000 : 50000,
+              itemStyle: { color: "#EE6666" }
+            };
+          }
+          return null;
+        }).filter(item => item !== null);
+        
+        if (warningPoints.length > 0) {
+          series[0].markPoint = {
+            data: warningPoints,
+            symbol: "pin",
+            symbolSize: 30,
+            label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" }
+          };
+        }
+      }
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: { color: "#91CC75" },
+          lineStyle: { color: "#91CC75", width: 2, type: "dashed" }
+        });
+      }
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: series
+      };
+      this.totalElectricityChart.setOption(option);
+    },
+    initTotalWaterSupplyChart() {
+      this.totalWaterSupplyChart = echarts.init(this.$refs.totalWaterSupplyChartRef);
+      this.updateTotalWaterSupplyChart();
+    },
+    updateTotalWaterSupplyChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
+          compare: [17500, 18500, 17800, 20000, 21500, 19000, 18000]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [180000, 190000, 183000, 205000, 220000, 195000, 185000],
+          compare: [170000, 180000, 173000, 195000, 210000, 185000, 175000]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          current: [5500000, 5800000, 5650000],
+          compare: [5200000, 5500000, 5350000]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
+          compare: [17500, 18500, 17800, 20000, 21500, 19000, 18000]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: { color: "#4facfe" },
+          lineStyle: { color: "#4facfe", width: 3 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(79, 172, 254, 0.5)" },
+              { offset: 1, color: "rgba(79, 172, 254, 0)" }
+            ])
+          }
+        }
+      ];
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: { color: "#5470C6" },
+          lineStyle: { color: "#5470C6", width: 2, type: "dashed" }
+        });
+      }
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "m³",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: series
+      };
+      this.totalWaterSupplyChart.setOption(option);
+    },
+    initZoneElectricityChart() {
+      this.zoneElectricityChart = echarts.init(this.$refs.zoneElectricityChartRef);
+      this.updateZoneElectricityChart();
+    },
+    updateZoneElectricityChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [12500, 13500, 12800, 14500, 15500, 13800, 13000],
+          middleZone: [9200, 9800, 9400, 10500, 11200, 10100, 9500],
+          lowZone: [18000, 19000, 18500, 20500, 22000, 19500, 18500],
+          fireZone: [2300, 2200, 2300, 2500, 2300, 2400, 2500]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          highZone: [120000, 135000, 128000, 145000, 155000, 138000, 130000],
+          middleZone: [88000, 94000, 90000, 101000, 108000, 97000, 91000],
+          middleZone: [172000, 182000, 177000, 197000, 212000, 187000, 177000],
+          fireZone: [22000, 21000, 22000, 24000, 22000, 23000, 24000]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          highZone: [3750000, 4200000, 4000000],
+          middleZone: [2750000, 2920000, 2820000],
+          lowZone: [5380000, 5700000, 5550000],
+          fireZone: [680000, 650000, 680000]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [12500, 13500, 12800, 14500, 15500, 13800, 13000],
+          middleZone: [9200, 9800, 9400, 10500, 11200, 10100, 9500],
+          lowZone: [18000, 19000, 18500, 20500, 22000, 19500, 18500],
+          fireZone: [2300, 2200, 2300, 2500, 2300, 2400, 2500]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: [
+          {
+            name: "高区",
+            type: "bar",
+            stack: "zone",
+            data: currentData.highZone,
+            itemStyle: { color: "#667eea" }
+          },
+          {
+            name: "中区",
+            type: "bar",
+            stack: "zone",
+            data: currentData.middleZone,
+            itemStyle: { color: "#f093fb" }
+          },
+          {
+            name: "低区",
+            type: "bar",
+            stack: "zone",
+            data: currentData.lowZone,
+            itemStyle: { color: "#4facfe" }
+          },
+          {
+            name: "消防区",
+            type: "bar",
+            stack: "zone",
+            data: currentData.fireZone,
+            itemStyle: { color: "#fa709a" }
+          }
+        ]
+      };
+      this.zoneElectricityChart.setOption(option);
+    },
+    initZoneWaterSupplyChart() {
+      this.zoneWaterSupplyChart = echarts.init(this.$refs.zoneWaterSupplyChartRef);
+      this.updateZoneWaterSupplyChart();
+    },
+    updateZoneWaterSupplyChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [5500, 5800, 5600, 6300, 6800, 6100, 5700],
+          middleZone: [4100, 4300, 4200, 4700, 5100, 4600, 4300],
+          lowZone: [8000, 8500, 8200, 9200, 9800, 8800, 8200],
+          fireZone: [900, 900, 900, 1000, 900, 950, 1000]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          highZone: [52000, 56000, 54000, 61000, 66000, 59000, 55000],
+          middleZone: [39000, 41000, 40000, 45000, 49000, 44000, 41000],
+          lowZone: [76000, 81000, 78000, 88000, 94000, 84000, 78000],
+          fireZone: [8500, 8500, 8500, 9500, 8500, 9000, 9500]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          highZone: [1620000, 1820000, 1740000],
+          middleZone: [1210000, 1280000, 1230000],
+          lowZone: [2360000, 2520000, 2420000],
+          fireZone: [265000, 250000, 265000]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [5500, 5800, 5600, 6300, 6800, 6100, 5700],
+          middleZone: [4100, 4300, 4200, 4700, 5100, 4600, 4300],
+          lowZone: [8000, 8500, 8200, 9200, 9800, 8800, 8200],
+          fireZone: [900, 900, 900, 1000, 900, 950, 1000]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "m³",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: [
+          {
+            name: "高区",
+            type: "line",
+            smooth: true,
+            data: currentData.highZone,
+            itemStyle: { color: "#667eea" },
+            lineStyle: { color: "#667eea", width: 2 }
+          },
+          {
+            name: "中区",
+            type: "line",
+            smooth: true,
+            data: currentData.middleZone,
+            itemStyle: { color: "#f093fb" },
+            lineStyle: { color: "#f093fb", width: 2 }
+          },
+          {
+            name: "低区",
+            type: "line",
+            smooth: true,
+            data: currentData.lowZone,
+            itemStyle: { color: "#4facfe" },
+            lineStyle: { color: "#4facfe", width: 2 }
+          },
+          {
+            name: "消防区",
+            type: "line",
+            smooth: true,
+            data: currentData.fireZone,
+            itemStyle: { color: "#fa709a" },
+            lineStyle: { color: "#fa709a", width: 2 }
+          }
+        ]
+      };
+      this.zoneWaterSupplyChart.setOption(option);
+    },
+    initWaterEnergyChart() {
+      this.waterEnergyChart = echarts.init(this.$refs.waterEnergyChartRef);
+      this.updateWaterEnergyChart();
+    },
+    updateWaterEnergyChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [0.72, 0.73, 0.71, 0.74, 0.75, 0.72, 0.73],
+          compare: [0.78, 0.79, 0.77, 0.80, 0.81, 0.78, 0.79]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [0.71, 0.72, 0.70, 0.73, 0.74, 0.71, 0.72],
+          compare: [0.76, 0.77, 0.75, 0.78, 0.79, 0.76, 0.77]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          current: [0.73, 0.74, 0.73],
+          compare: [0.78, 0.79, 0.78]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [0.72, 0.73, 0.71, 0.74, 0.75, 0.72, 0.73],
+          compare: [0.78, 0.79, 0.77, 0.80, 0.81, 0.78, 0.79]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      if (this.waterEnergyChartType === "bar") {
+        const series = [
+          {
+            name: "当前时段",
+            type: "bar",
+            data: currentData.current,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#5470C6" },
+                { offset: 1, color: "#3E5F8A" }
+              ])
+            }
+          }
+        ];
+
+        if (this.enableCompare) {
+          series.push({
+            name: "对比时段",
+            type: "bar",
+            data: currentData.compare,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#91CC75" },
+                { offset: 1, color: "#66BB6A" }
+              ])
+            }
+          });
+        }
+
+        const option = {
+          tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+          xAxis: {
+            type: "category",
+            data: currentData.xData,
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            axisTick: { show: false }
+          },
+          yAxis: {
+            type: "value",
+            name: "kWh/m³",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+          },
+          series: series
+        };
+        this.waterEnergyChart.setOption(option);
+      } else {
+        const series = [
+          {
+            name: "当前时段",
+            type: "line",
+            smooth: true,
+            data: currentData.current,
+            itemStyle: { color: "#5470C6" },
+            lineStyle: { color: "#5470C6", width: 3 }
+          }
+        ];
+
+        if (this.enableCompare) {
+          series.push({
+            name: "对比时段",
+            type: "line",
+            smooth: true,
+            data: currentData.compare,
+            itemStyle: { color: "#91CC75" },
+            lineStyle: { color: "#91CC75", width: 2, type: "dashed" }
+          });
+        }
+
+        const option = {
+          tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: currentData.xData,
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            axisTick: { show: false }
+          },
+          yAxis: {
+            type: "value",
+            name: "kWh/m³",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+          },
+          series: series
+        };
+        this.waterEnergyChart.setOption(option);
+      }
+    },
+    updateAllCharts() {
+      this.updateTotalElectricityChart();
+      this.updateTotalWaterSupplyChart();
+      this.updateZoneElectricityChart();
+      this.updateZoneWaterSupplyChart();
+      this.updateWaterEnergyChart();
+      this.updateWarningTimelineChart();
+    },
+    handleResize() {
+      if (this.totalElectricityChart) this.totalElectricityChart.resize();
+      if (this.totalWaterSupplyChart) this.totalWaterSupplyChart.resize();
+      if (this.zoneElectricityChart) this.zoneElectricityChart.resize();
+      if (this.zoneWaterSupplyChart) this.zoneWaterSupplyChart.resize();
+      if (this.waterEnergyChart) this.waterEnergyChart.resize();
+      if (this.warningTimelineChart) this.warningTimelineChart.resize();
+      if (this.energyComparisonChart) this.energyComparisonChart.resize();
+    },
+    initWarningList() {
+      this.warningList = [
+        {
+          id: "WRN202403050001",
+          level: "critical",
+          title: "高区水泵能耗超标",
+          description: "高区水泵系统能耗超出阈值28.56%",
+          zoneName: "高区供水",
+          warningTime: "2024-03-05 10:30:25",
+          status: "pending",
+          electricityImpact: 520,
+          waterSupplyImpact: -85,
+          savingRateImpact: -9.2,
+          impactDuration: 8,
+          costImpact: 624,
+          energyData: { before: [12500, 12200, 12400, 12300], after: [13200, 12900, 13100, 13000] }
+        },
+        {
+          id: "WRN202403050002",
+          level: "critical",
+          title: "中区水泵异常",
+          description: "中区水泵系统能耗超出阈值35.68%",
+          zoneName: "中区供水",
+          warningTime: "2024-03-05 09:15:42",
+          status: "processing",
+          electricityImpact: 680,
+          waterSupplyImpact: -120,
+          savingRateImpact: -11.5,
+          impactDuration: 6,
+          costImpact: 816,
+          energyData: { before: [9200, 9100, 9300, 9200], after: [9950, 9850, 10050, 9950] }
+        },
+        {
+          id: "WRN202403050003",
+          level: "major",
+          title: "低区水泵运行异常",
+          description: "低区水泵系统能耗超出阈值15.25%",
+          zoneName: "低区供水",
+          warningTime: "2024-03-05 08:45:18",
+          status: "pending",
+          electricityImpact: 380,
+          waterSupplyImpact: -65,
+          savingRateImpact: -7.8,
+          impactDuration: 5,
+          costImpact: 456,
+          energyData: { before: [18000, 17800, 17900, 17800], after: [18550, 18350, 18450, 18350] }
+        },
+        {
+          id: "WRN202403040004",
+          level: "major",
+          title: "消防区泵能耗异常",
+          description: "消防区水泵能耗超出时长超标12.35%",
+          zoneName: "消防供水",
+          warningTime: "2024-03-04 16:22:33",
+          status: "resolved",
+          electricityImpact: 220,
+          waterSupplyImpact: 0,
+          savingRateImpact: -5.5,
+          impactDuration: 4,
+          costImpact: 264,
+          energyData: { before: [2300, 2250, 2280, 2270], after: [2480, 2430, 2460, 2450] }
+        },
+        {
+          id: "WRN202403040005",
+          level: "minor",
+          title: "系统吨水能耗轻微超标",
+          description: "系统吨水能耗超出阈值6.80%",
+          zoneName: "全系统",
+          warningTime: "2024-03-04 14:10:22",
+          status: "resolved",
+          electricityImpact: 180,
+          waterSupplyImpact: -25,
+          savingRateImpact: -4.2,
+          impactDuration: 3,
+          costImpact: 216,
+          energyData: { before: [42000, 41500, 41800, 41700], after: [42300, 41800, 42100, 42000] }
+        }
+      ];
+    },
+    getWarningLevelText(level) {
+      const map = { critical: "严重", major: "重要", minor: "一般" };
+      return map[level] || level;
+    },
+    getWarningStatusText(status) {
+      const map = { pending: "待处理", processing: "处理中", resolved: "已处理" };
+      return map[status] || status;
+    },
+    initWarningTimelineChart() {
+      this.warningTimelineChart = echarts.init(this.$refs.warningTimelineChartRef);
+      this.updateWarningTimelineChart();
+    },
+    updateWarningTimelineChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          electricityData: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
+          waterSupplyData: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
+          savingRateData: [25.5, 26.2, 25.8, 24.5, 23.8, 25.0, 25.3],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          electricityData: [410000, 450000, 430000, 480000, 510000, 460000, 440000],
+          waterSupplyData: [180000, 190000, 183000, 205000, 220000, 195000, 185000],
+          savingRateData: [25.0, 26.0, 25.5, 24.8, 24.0, 25.2, 25.5],
+          warningData: [3, 5, 2, 8, 6, 4, 3]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          electricityData: [12500000, 13800000, 13200000],
+          waterSupplyData: [5500000, 5800000, 5650000],
+          savingRateData: [24.5, 26.0, 25.5],
+          warningData: [45, 62, 38]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          electricityData: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
+          waterSupplyData: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
+          savingRateData: [25.5, 26.2, 25.8, 24.5, 23.8, 25.0, 25.3],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+        legend: {
+          data: ["用电量", "供水量", "节能率", "预警次数"],
+          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          top: 0
+        },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "15%" },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用电量(kWh)",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+          },
+          {
+            type: "value",
+            name: "供水量(m³)",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { show: false }
+          },
+          {
+            type: "value",
+            name: "节能率/预警数",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { show: false }
+          }
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "line",
+            smooth: true,
+            data: currentData.electricityData,
+            itemStyle: { color: "#15e1fd" },
+            lineStyle: { color: "#15e1fd", width: 3 }
+          },
+          {
+            name: "供水量",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: currentData.waterSupplyData,
+            itemStyle: { color: "#4facfe" },
+            lineStyle: { color: "#4facfe", width: 2 }
+          },
+          {
+            name: "节能率",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 2,
+            data: currentData.savingRateData,
+            itemStyle: { color: "#91CC75" },
+            lineStyle: { color: "#91CC75", width: 2 }
+          },
+          {
+            name: "预警次数",
+            type: "bar",
+            yAxisIndex: 2,
+            data: currentData.warningData,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.8)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.3)" }
+              ])
+            }
+          }
+        ]
+      };
+      this.warningTimelineChart.setOption(option);
+    },
+    viewWarningDetail(warning) {
+      this.selectedWarning = warning;
+      this.warningDetailDialogVisible = true;
+      this.$nextTick(() => {
+        this.initEnergyComparisonChart();
+      });
+    },
+    handleWarningResolve(warning) {
+      warning.status = "processing";
+      this.$message.success("预警已开始处理");
+    },
+    handleWarningCommand(command, warning) {
+      if (command === "markResolved") {
+        warning.status = "resolved";
+        this.$message.success("已标记为已处理");
+      } else if (command === "close") {
+        warning.status = "resolved";
+        this.$message.success("预警已关闭");
+      } else if (command === "reopen") {
+        warning.status = "pending";
+        this.$message.success("预警已重新打开");
+      } else if (command === "export") {
+        this.$message.success("预警报告导出成功");
+      }
+    },
+    initEnergyComparisonChart() {
+      if (!this.$refs.energyComparisonChartRef || !this.selectedWarning) return;
+      this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
+      const { energyData } = this.selectedWarning;
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        legend: {
+          data: ["预警前", "预警后"],
+          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          top: 0
+        },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "10%" },
+        xAxis: {
+          type: "category",
+          data: ["时段1", "时段2", "时段3", "时段4", "时段5"],
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: [
+          {
+            name: "预警前",
+            type: "bar",
+            data: energyData.before,
+            itemStyle: { color: "#91CC75" }
+          },
+          {
+            name: "预警后",
+            type: "bar",
+            data: energyData.after,
+            itemStyle: { color: "#EE6666" }
+          }
+        ]
+      };
+      this.energyComparisonChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.water-energy-trend {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.15rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .selector-label {
+    font-size: 0.14rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .time-periods {
+    display: flex;
+    gap: 0.08rem;
+
+    .period-item {
+      padding: 0.06rem 0.15rem;
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.6;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        opacity: 0.9;
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &.active {
+        opacity: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-color: transparent;
+      }
+    }
+  }
+
+  .date-range {
+    ::v-deep .custom-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.compare-control {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.15rem 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .compare-range {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+
+    .compare-label {
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+
+    ::v-deep .el-date-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-checkbox {
+    .el-checkbox__label {
+      color: #ffffff;
+    }
+  }
+}
+
+.indicator-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+    }
+
+    .card-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 0.06rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      color: #ffffff;
+      font-size: 0.18rem;
+      font-weight: bold;
+    }
+
+    .card-content {
+      flex: 1;
+
+      .card-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-label {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-change {
+        font-size: 0.12rem;
+        font-weight: 500;
+
+        &.positive {
+          color: #91CC75;
+        }
+
+        &.negative {
+          color: #EE6666;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .chart-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      .title-icon {
+        width: 0.04rem;
+        height: 0.16rem;
+        border-radius: 0.02rem;
+      }
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.15rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.05rem;
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .chart-controls {
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3.5rem;
+  }
+}
+
+.compare-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .analysis-header {
+    margin-bottom: 0.2rem;
+
+    .analysis-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .analysis-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+    gap: 0.15rem;
+
+    .analysis-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      .analysis-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+      }
+
+      .analysis-value {
+        font-size: 0.18rem;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+
+        &.up {
+          color: #91CC75;
+        }
+
+        &.down {
+          color: #EE6666;
+        }
+      }
+
+      .analysis-percentage {
+        font-size: 0.12rem;
+
+        &.up {
+          color: #91CC75;
+        }
+
+        &.down {
+          color: #EE6666;
+        }
+      }
+    }
+  }
+
+  .analysis-hint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem;
+    color: #ffffff;
+    opacity: 0.6;
+
+    .hint-icon {
+      margin-right: 0.1rem;
+      font-size: 0.18rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      fill: currentColor;
+    }
+  }
+}
+
+.warning-energy-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .warning-timeline-chart {
+    .timeline-header {
+      display: flex;
+      gap: 0.3rem;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+      margin-bottom: 0.2rem;
+
+      .header-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+
+        .label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.05rem;
+        }
+
+        .value {
+          font-size: 0.18rem;
+          font-weight: bold;
+          color: #15e1fd;
+
+          &.warning-impact {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+
+    .timeline-chart {
+      height: 3.5rem;
+    }
+  }
+
+  .warning-impact-table {
+    margin-top: 0.2rem;
+
+    .table-header {
+      margin-bottom: 0.15rem;
+
+      .table-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .impact-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 14rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.12rem 0.1rem;
+              text-align: left;
+              font-size: 0.13rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.12rem 0.1rem;
+              font-size: 0.12rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+
+              &.energy-loss {
+                color: #EE6666;
+              }
+
+              &.energy-save {
+                color: #91CC75;
+              }
+
+              &.water-up {
+                color: #4facfe;
+              }
+
+              &.water-down {
+                color: #EE6666;
+              }
+
+              &.saving-drop {
+                color: #EE6666;
+              }
+
+              &.saving-rise {
+                color: #91CC75;
+              }
+
+              .title-cell {
+                max-width: 2rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                cursor: pointer;
+
+                &:hover {
+                  color: #15e1fd;
+                }
+              }
+
+              .level-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.critical {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                  box-shadow: 0 0.04rem 0.08rem rgba(238, 102, 102, 0.2);
+                }
+
+                &.major {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                  box-shadow: 0 0.04rem 0.08rem rgba(250, 200, 88, 0.2);
+                }
+
+                &.minor {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.2);
+                }
+              }
+
+              .status-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.pending {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                }
+
+                &.processing {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                }
+
+                &.resolved {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                }
+              }
+
+              .action-buttons {
+                display: flex;
+                gap: 0.06rem;
+
+                .action-btn {
+                  font-size: 0.11rem;
+                  padding: 0.04rem 0.1rem;
+                }
+
+                .action-dropdown {
+                  ::v-deep .el-dropdown-menu.custom-dropdown-menu {
+                    background: rgba(30, 30, 50, 0.95);
+                    border: 1px solid rgba(21, 225, 253, 0.3);
+
+                    .el-dropdown-menu__item {
+                      color: #ffffff;
+
+                      &:hover {
+                        background: rgba(21, 225, 253, 0.1);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(21, 225, 253, 0.3);
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__body {
+    color: #ffffff;
+  }
+
+  .custom-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: #ffffff;
+  }
+}
+
+.warning-detail-content {
+  .detail-section {
+    margin-bottom: 0.3rem;
+
+    .section-title {
+      font-size: 0.14rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.1rem;
+      border-left: 0.03rem solid #15e1fd;
+      margin-bottom: 0.15rem;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.15rem;
+
+      .info-item {
+        display: flex;
+        align-items: center;
+        padding: 0.1rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 0.04rem;
+
+        &.full-width {
+          grid-column: span 2;
+        }
+
+        .item-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-right: 0.1rem;
+          min-width: 0.8rem;
+        }
+
+        .item-value {
+          font-size: 0.13rem;
+          color: #ffffff;
+          flex: 1;
+
+          &.level-badge {
+            display: inline-block;
+            padding: 0.03rem 0.1rem;
+            border-radius: 0.03rem;
+            font-size: 0.11rem;
+            font-weight: 500;
+
+            &.critical {
+              background: rgba(238, 102, 102, 0.2);
+              color: #EE6666;
+            }
+
+            &.major {
+              background: rgba(250, 200, 88, 0.2);
+              color: #FAC858;
+            }
+
+            &.minor {
+              background: rgba(145, 204, 117, 0.2);
+              color: #91CC75;
+            }
+          }
+        }
+      }
+    }
+
+    .impact-cards {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.15rem;
+
+      .impact-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 0.06rem;
+
+        .card-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.1rem;
+        }
+
+        .card-value {
+          font-size: 0.2rem;
+          font-weight: bold;
+          margin-bottom: 0.05rem;
+
+          &.energy-impact {
+            color: #EE6666;
+          }
+
+          &.water-impact {
+            color: #4facfe;
+          }
+
+          &.saving-impact {
+            color: #EE6666;
+          }
+
+          &.cost-impact {
+            color: #FAC858;
+          }
+        }
+
+        .card-desc {
+          font-size: 0.11rem;
+          color: #ffffff;
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+
+  .energy-comparison-chart {
+    height: 3rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .indicator-cards {
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  }
+
+  .analysis-content {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .impact-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .indicator-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .analysis-content {
+    grid-template-columns: 1fr;
+  }
+
+  .impact-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/energyManage/energyWater/index.vue b/src/views/newLifeWater/energyManage/energyWater/index.vue
new file mode 100644
index 0000000..7f52c30
--- /dev/null
+++ b/src/views/newLifeWater/energyManage/energyWater/index.vue
@@ -0,0 +1,1774 @@
+<template>
+  <div class="water-energy-analysis">
+    <!-- 时间选择器 -->
+    <div class="time-selector">
+      <div class="selector-label">时间维度</div>
+      <div class="time-periods">
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          :class="['period-item', { active: activePeriod === index }]"
+          @click="handlePeriodChange(index)"
+        >
+          {{ period }}
+        </div>
+      </div>
+      <div class="date-range" v-if="activePeriod === 3">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="custom-picker"
+        />
+      </div>
+    </div>
+
+    <!-- 异常阈值设置 -->
+    <div class="threshold-config">
+      <div class="config-item">
+        <span class="config-label">吨水能耗预警阈值(kWh/m³)</span>
+        <el-input-number
+          v-model="thresholdConfig.warningThreshold"
+          :min="0.5"
+          :max="2.0"
+          :step="0.05"
+          :precision="2"
+          size="small"
+          class="custom-input-number"
+        />
+      </div>
+      <div class="config-item">
+        <span class="config-label">吨水能耗严重阈值(kWh/m³)</span>
+        <el-input-number
+          v-model="thresholdConfig.criticalThreshold"
+          :min="0.6"
+          :max="2.5"
+          :step="0.05"
+          :precision="2"
+          size="small"
+          class="custom-input-number"
+        />
+      </div>
+      <el-button type="primary" size="small" @click="applyThresholdConfig" class="apply-btn">应用配置</el-button>
+    </div>
+
+    <!-- 总体吨水能耗概览 -->
+    <div class="overview-cards">
+      <div class="overview-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <span>系统</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ overview.systemWaterEnergy }}</div>
+          <div class="card-label">系统平均吨水能耗(kWh/m³)</div>
+          <div class="card-change" :class="overview.systemEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="overview.systemEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(overview.systemEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="overview-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <span>高区</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ overview.highZoneEnergy }}</div>
+          <div class="card-label">高区吨水能耗(kWh/m³)</div>
+          <div class="card-change" :class="overview.highZoneEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="overview.highZoneEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(overview.highZoneEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="overview-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+          <span>中区</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ overview.middleZoneEnergy }}</div>
+          <div class="card-label">中区吨水能耗(kWh/m³)</div>
+          <div class="card-change" :class="overview.middleZoneEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="overview.middleZoneEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(overview.middleZoneEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="overview-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <span>低区</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ overview.lowZoneEnergy }}</div>
+          <div class="card-label">低区吨水能耗(kWh/m³)</div>
+          <div class="card-change" :class="overview.lowZoneEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="overview.lowZoneEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(overview.lowZoneEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 各区域吨水能耗对比 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #15e1fd;"></span>
+          <span>各区域吨水能耗对比</span>
+        </div>
+        <div class="chart-controls">
+          <el-select v-model="zoneChartType" @change="updateZoneChart" size="small" class="custom-select" style="width: 1rem;">
+            <el-option label="柱状图" value="bar"></el-option>
+            <el-option label="折线图" value="line"></el-option>
+          </el-select>
+          <el-button size="small" @click="showZoneOptimizationSuggestions = true" class="suggest-btn">优化建议</el-button>
+        </div>
+      </div>
+      <div class="chart" ref="zoneChartRef"></div>
+    </div>
+
+    <!-- 异常标记与详情 -->
+    <div class="anomaly-section">
+      <div class="section-header">
+        <div class="section-title">吨水能耗异常标记</div>
+        <div class="section-actions">
+          <el-select v-model="anomalyFilter.level" placeholder="异常级别" clearable size="small" class="custom-select" style="width: 1.2rem;">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="预警" value="warning"></el-option>
+          </el-select>
+          <el-select v-model="anomalyFilter.zone" placeholder="区域筛选" clearable size="small" class="custom-select" style="width: 1.2rem;">
+            <el-option label="全部区域" value=""></el-option>
+            <el-option label="高区" value="highZone"></el-option>
+            <el-option label="中区" value="middleZone"></el-option>
+            <el-option label="低区" value="lowZone"></el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 异常统计卡片 -->
+      <div class="anomaly-stats">
+        <div class="stat-item critical">
+          <div class="stat-icon">!</div>
+          <div class="stat-content">
+            <div class="stat-value">{{ anomalyStats.criticalCount }}</div>
+            <div class="stat-label">严重异常</div>
+          </div>
+        </div>
+        <div class="stat-item warning">
+          <div class="stat-icon">⚠</div>
+          <div class="stat-content">
+            <div class="stat-value">{{ anomalyStats.warningCount }}</div>
+            <div class="stat-label">预警异常</div>
+          </div>
+        </div>
+        <div class="stat-item info">
+          <div class="stat-icon">ℹ</div>
+          <div class="stat-content">
+            <div class="stat-value">{{ anomalyStats.totalAbnormal }}</div>
+            <div class="stat-label">异常时段数</div>
+          </div>
+        </div>
+        <div class="stat-item energy">
+          <div class="stat-icon">⚡</div>
+          <div class="stat-content">
+            <div class="stat-value">{{ anomalyStats.estimatedLoss }}kWh</div>
+            <div class="stat-label">估算能耗损失</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 异常详情表格 -->
+      <div class="anomaly-table">
+        <div class="table-container">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th>日期</th>
+                <th>区域</th>
+                <th>吨水能耗</th>
+                <th>阈值</th>
+                <th>偏差</th>
+                <th>异常级别</th>
+                <th>用电量(kWh)</th>
+                <th>供水量(m³)</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="anomaly in filteredAnomalies" :key="anomaly.id">
+                <td>{{ anomaly.date }}</td>
+                <td>{{ anomaly.zoneName }}</td>
+                <td :class="getWaterEnergyClass(anomaly.waterEnergy)">{{ anomaly.waterEnergy }}</td>
+                <td>{{ anomaly.threshold }}</td>
+                <td :class="anomaly.deviation > 0 ? 'deviation-high' : 'deviation-low'">
+                  {{ anomaly.deviation > 0 ? '+' : '' }}{{ anomaly.deviation.toFixed(2) }}%
+                </td>
+                <td>
+                  <span class="level-badge" :class="anomaly.level">{{ getAnomalyLevelText(anomaly.level) }}</span>
+                </td>
+                <td>{{ anomaly.electricity }}</td>
+                <td>{{ anomaly.waterSupply }}</td>
+                <td>
+                  <span class="status-badge" :class="anomaly.status">{{ getAnomalyStatusText(anomaly.status) }}</span>
+                </td>
+                <td>
+                  <div class="action-buttons">
+                    <el-button size="small" type="primary" @click="viewAnomalyDetail(anomaly)" class="action-btn">详情</el-button>
+                    <el-button size="small" @click="handleAnomaly(anomaly)" v-if="anomaly.status === 'pending'" class="action-btn">处理</el-button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="table-pagination">
+          <el-pagination
+            v-model:current-page="pagination.currentPage"
+            v-model:page-size="pagination.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="pagination.total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="custom-pagination"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 吨水能耗优化建议弹窗 -->
+    <el-dialog
+      v-model="showZoneOptimizationSuggestions"
+      title="区域吨水能耗优化建议"
+      width="900px"
+      class="custom-dialog"
+    >
+      <div class="optimization-suggestions">
+        <div class="suggestion-card" v-for="(suggestion, index) in optimizationSuggestions" :key="index">
+          <div class="suggestion-header">
+            <div class="zone-badge" :class="suggestion.zone">{{ suggestion.zoneName }}</div>
+            <div class="priority-badge" :class="suggestion.priority">{{ suggestion.priorityText }}</div>
+          </div>
+          <div class="suggestion-content">
+            <div class="suggestion-title">{{ suggestion.title }}</div>
+            <div class="suggestion-description">{{ suggestion.description }}</div>
+            <div class="suggestion-metrics">
+              <div class="metric-item">
+                <span class="metric-label">当前吨水能耗:</span>
+                <span class="metric-value current">{{ suggestion.currentEnergy }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">目标吨水能耗:</span>
+                <span class="metric-value target">{{ suggestion.targetEnergy }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">预估节电:</span>
+                <span class="metric-value saving">{{ suggestion.estimatedSaving }}kWh/月</span>
+              </div>
+            </div>
+            <div class="suggestion-actions">
+              <div class="action-item" v-for="(action, actionIndex) in suggestion.actions" :key="actionIndex">
+                <div class="action-icon">✓</div>
+                <span class="action-text">{{ action }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="showZoneOptimizationSuggestions = false" class="custom-btn">关闭</el-button>
+        <el-button type="primary" @click="exportOptimizationReport" class="custom-btn">导出优化方案</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 异常详情弹窗 -->
+    <el-dialog
+      v-model="anomalyDetailDialogVisible"
+      title="吨水能耗异常详情"
+      width="800px"
+      class="custom-dialog"
+    >
+      <div class="anomaly-detail-content" v-if="selectedAnomaly">
+        <div class="detail-grid">
+          <div class="detail-item">
+            <span class="detail-label">日期:</span>
+            <span class="detail-value">{{ selectedAnomaly.date }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">区域:</span>
+            <span class="detail-value">{{ selectedAnomaly.zoneName }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">吨水能耗:</span>
+            <span class="detail-value" :class="getWaterEnergyClass(selectedAnomaly.waterEnergy)">{{ selectedAnomaly.waterEnergy }} kWh/m³</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">阈值:</span>
+            <span class="detail-value">{{ selectedAnomaly.threshold }} kWh/m³</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">偏差:</span>
+            <span class="detail-value" :class="selectedAnomaly.deviation > 0 ? 'deviation-high' : 'deviation-low'">
+              {{ selectedAnomaly.deviation > 0 ? '+' : '' }}{{ selectedAnomaly.deviation.toFixed(2) }}%
+            </span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">异常级别:</span>
+            <span class="detail-value level-badge" :class="selectedAnomaly.level">{{ getAnomalyLevelText(selectedAnomaly.level) }}</span>
+          </div>
+          <div class="detail-item full-width">
+            <span class="detail-label">用电量:</span>
+            <span class="detail-value">{{ selectedAnomaly.electricity }} kWh</span>
+          </div>
+          <div class="detail-item full-width">
+            <span class="detail-label">供水量:</span>
+            <span class="detail-value">{{ selectedAnomaly.waterSupply }} m³</span>
+          </div>
+          <div class="detail-item full-width">
+            <span class="detail-label">异常原因:</span>
+            <span class="detail-value">{{ selectedAnomaly.reason }}</span>
+          </div>
+          <div class="detail-item full-width">
+            <span class="detail-label">建议措施:</span>
+            <span class="detail-value">{{ selectedAnomaly.suggestion }}</span>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="anomalyDetailDialogVisible = false" class="custom-btn">关闭</el-button>
+        <el-button type="primary" @click="handleAnomaly(selectedAnomaly)" v-if="selectedAnomaly && selectedAnomaly.status === 'pending'" class="custom-btn">立即处理</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "WaterEnergyAnalysis",
+  data() {
+    return {
+      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
+      activePeriod: 0,
+      dateRange: [],
+      thresholdConfig: {
+        warningThreshold: 0.85,
+        criticalThreshold: 1.0
+      },
+      overview: {
+        systemWaterEnergy: 0.73,
+        systemEnergyChange: -8.5,
+        highZoneEnergy: 0.82,
+        highZoneEnergyChange: -5.2,
+        middleZoneEnergy: 0.68,
+        middleZoneEnergyChange: -10.5,
+        lowZoneEnergy: 0.78,
+        lowZoneEnergyChange: -6.8
+      },
+      zoneChartType: "bar",
+      anomalyFilter: {
+        level: "",
+        zone: ""
+      },
+      anomalyStats: {
+        criticalCount: 8,
+        warningCount: 15,
+        totalAbnormal: 23,
+        estimatedLoss: 12580
+      },
+      anomalyList: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      zoneChart: null,
+      showZoneOptimizationSuggestions: false,
+      anomalyDetailDialogVisible: false,
+      selectedAnomaly: null,
+      optimizationSuggestions: [
+        {
+          zone: "highZone",
+          zoneName: "高区",
+          priority: "high",
+          priorityText: "高优先级",
+          title: "高区水泵运行效率优化",
+          description: "高区吨水能耗偏高,建议优化水泵运行参数,提高系统效率",
+          currentEnergy: "0.82",
+          targetEnergy: "0.72",
+          estimatedSaving: 2850,
+          actions: [
+            "调整水泵运行频率,避免低效运行",
+            "优化供水压力设定,减少无效能耗",
+            "检查水泵系统是否存在泄漏或堵塞"
+          ]
+        },
+        {
+          zone: "middleZone",
+          zoneName: "中区",
+          priority: "medium",
+          priorityText: "中优先级",
+          title: "中区水泵能效提升",
+          description: "中区吨水能耗表现良好,可进一步优化运行策略",
+          currentEnergy: "0.68",
+          targetEnergy: "0.62",
+          estimatedSaving: 1920,
+          actions: [
+            "根据实际用水需求动态调整水泵启停",
+            "优化水泵组合运行模式",
+            "定期检查水泵维护状态"
+          ]
+        },
+        {
+          zone: "lowZone",
+          zoneName: "低区",
+          priority: "high",
+          priorityText: "高优先级",
+          title: "低区系统能耗异常排查",
+          description: "低区吨水能耗偏高,建议重点排查异常原因",
+          currentEnergy: "0.78",
+          targetEnergy: "0.68",
+          estimatedSaving: 2200,
+          actions: [
+            "检查低区管网是否存在压力异常",
+            "排查水泵运行频率是否合理",
+            "评估供水量与实际需求匹配度"
+          ]
+        }
+      ]
+    };
+  },
+  computed: {
+    filteredAnomalies() {
+      let anomalies = [...this.anomalyList];
+      if (this.anomalyFilter.level) {
+        anomalies = anomalies.filter(a => a.level === this.anomalyFilter.level);
+      }
+      if (this.anomalyFilter.zone) {
+        anomalies = anomalies.filter(a => a.zone === this.anomalyFilter.zone);
+      }
+      return anomalies;
+    }
+  },
+  mounted() {
+    this.initZoneChart();
+    this.initAnomalyList();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.zoneChart) this.zoneChart.dispose();
+  },
+  watch: {
+    activePeriod() {
+      this.updateZoneChart();
+      this.updateOverview();
+      this.initAnomalyList();
+    },
+    zoneChartType() {
+      this.updateZoneChart();
+    }
+  },
+  methods: {
+    handlePeriodChange(index) {
+      this.activePeriod = index;
+    },
+    handleDateChange() {
+      this.updateZoneChart();
+      this.updateOverview();
+      this.initAnomalyList();
+    },
+    applyThresholdConfig() {
+      this.$message.success("阈值配置已应用");
+      this.updateAnomalyList();
+    },
+    initZoneChart() {
+      this.zoneChart = echarts.init(this.$refs.zoneChartRef);
+      this.updateZoneChart();
+    },
+    updateZoneChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [0.85, 0.88, 0.82, 0.92, 0.95, 0.78, 0.76],
+          middleZone: [0.72, 0.75, 0.68, 0.70, 0.65, 0.66, 0.64],
+          lowZone: [0.82, 0.85, 0.78, 0.88, 0.82, 0.76, 0.74]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          highZone: [0.86, 0.89, 0.84, 0.94, 0.97, 0.80, 0.78],
+          middleZone: [0.74, 0.77, 0.70, 0.72, 0.67, 0.68, 0.66],
+          lowZone: [0.84, 0.87, 0.80, 0.90, 0.84, 0.78, 0.76]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          highZone: [0.88, 0.91, 0.86],
+          middleZone: [0.76, 0.79, 0.72],
+          lowZone: [0.86, 0.89, 0.82]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          highZone: [0.85, 0.88, 0.82, 0.92, 0.95, 0.78, 0.76],
+          middleZone: [0.72, 0.75, 0.68, 0.70, 0.65, 0.66, 0.64],
+          lowZone: [0.82, 0.85, 0.78, 0.88, 0.82, 0.76, 0.74]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      if (this.zoneChartType === "bar") {
+        const option = {
+          tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+          legend: {
+            data: ["高区", "中区", "低区"],
+            textStyle: { color: "rgba(255, 255, 255, 0.8)" }
+          },
+          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+          xAxis: {
+            type: "category",
+            data: currentData.xData,
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            axisTick: { show: false }
+          },
+          yAxis: {
+            type: "value",
+            name: "kWh/m³",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } },
+            markLine: {
+              silent: true,
+              data: [
+                { yAxis: this.thresholdConfig.warningThreshold, name: "预警线", lineStyle: { color: "#FAC858", type: "dashed" } },
+                { yAxis: this.thresholdConfig.criticalThreshold, name: "严重线", lineStyle: { color: "#EE6666", type: "dashed" } }
+              ],
+              label: { show: true, color: "#ffffff", fontSize: 10 }
+            }
+          },
+          series: [
+            {
+              name: "高区",
+              type: "bar",
+              data: currentData.highZone,
+              itemStyle: {
+                color: (params) => {
+                  if (params.data >= this.thresholdConfig.criticalThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#EE6666" },
+                      { offset: 1, color: "#C73636" }
+                    ]);
+                  } else if (params.data >= this.thresholdConfig.warningThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#FAC858" },
+                      { offset: 1, color: "#E5A540" }
+                    ]);
+                  } else {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#667eea" },
+                      { offset: 1, color: "#5a67d8" }
+                    ]);
+                  }
+                }
+              }
+            },
+            {
+              name: "中区",
+              type: "bar",
+              data: currentData.middleZone,
+              itemStyle: {
+                color: (params) => {
+                  if (params.data >= this.thresholdConfig.criticalThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#EE6666" },
+                      { offset: 1, color: "#C73636" }
+                    ]);
+                  } else if (params.data >= this.thresholdConfig.warningThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#FAC858" },
+                      { offset: 1, color: "#E5A540" }
+                    ]);
+                  } else {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#f093fb" },
+                      { offset: 1, color: "#d675db" }
+                    ]);
+                  }
+                }
+              }
+            },
+            {
+              name: "低区",
+              type: "bar",
+              data: currentData.lowZone,
+              itemStyle: {
+                color: (params) => {
+                  if (params.data >= this.thresholdConfig.criticalThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#EE6666" },
+                      { offset: 1, color: "#C73636" }
+                    ]);
+                  } else if (params.data >= this.thresholdConfig.warningThreshold) {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#FAC858" },
+                      { offset: 1, color: "#E5A540" }
+                    ]);
+                  } else {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: "#4facfe" },
+                      { offset: 1, color: "#3e9ceb" }
+                    ]);
+                  }
+                }
+              }
+            }
+          ]
+        };
+        this.zoneChart.setOption(option);
+      } else {
+        const option = {
+          tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+          legend: {
+            data: ["高区", "中区", "低区"],
+            textStyle: { color: "rgba(255, 255, 255, 0.8)" }
+          },
+          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: currentData.xData,
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            axisTick: { show: false }
+          },
+          yAxis: {
+            type: "value",
+            name: "kWh/m³",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } },
+            markLine: {
+              silent: true,
+              data: [
+                { yAxis: this.thresholdConfig.warningThreshold, name: "预警线", lineStyle: { color: "#FAC858", type: "dashed" } },
+                { yAxis: this.thresholdConfig.criticalThreshold, name: "严重线", lineStyle: { color: "#EE6666", type: "dashed" } }
+              ],
+              label: { show: true, color: "#ffffff", fontSize: 10 }
+            }
+          },
+          series: [
+            {
+              name: "高区",
+              type: "line",
+              smooth: true,
+              data: currentData.highZone,
+              itemStyle: { color: "#667eea" },
+              lineStyle: { color: "#667eea", width: 3 },
+              markPoint: {
+                data: currentData.highZone.map((value, index) => {
+                  if (value >= this.thresholdConfig.criticalThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#EE6666" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "严重" } };
+                  } else if (value >= this.thresholdConfig.warningThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#FAC858" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" } };
+                  }
+                  return null;
+                }).filter(item => item !== null)
+              }
+            },
+            {
+              name: "中区",
+              type: "line",
+              smooth: true,
+              data: currentData.middleZone,
+              itemStyle: { color: "#f093fb" },
+              lineStyle: { color: "#f093fb", width: 3 },
+              markPoint: {
+                data: currentData.middleZone.map((value, index) => {
+                  if (value >= this.thresholdConfig.criticalThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#EE6666" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "严重" } };
+                  } else if (value >= this.thresholdConfig.warningThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#FAC858" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" } };
+                  }
+                  return null;
+                }).filter(item => item !== null)
+              }
+            },
+            {
+              name: "低区",
+              type: "line",
+              smooth: true,
+              data: currentData.lowZone,
+              itemStyle: { color: "#4facfe" },
+              lineStyle: { color: "#4facfe", width: 3 },
+              markPoint: {
+                data: currentData.lowZone.map((value, index) => {
+                  if (value >= this.thresholdConfig.criticalThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#EE6666" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "严重" } };
+                  } else if (value >= this.thresholdConfig.warningThreshold) {
+                    return { name: currentData.xData[index], value: value, xAxis: index, yAxis: value, itemStyle: { color: "#FAC858" }, symbol: "pin", symbolSize: 40, label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" } };
+                  }
+                  return null;
+                }).filter(item => item !== null)
+              }
+            }
+          ]
+        };
+        this.zoneChart.setOption(option);
+      }
+    },
+    updateOverview() {
+      const dataMap = {
+        0: {
+          systemWaterEnergy: 0.73,
+          systemEnergyChange: -8.5,
+          highZoneEnergy: 0.82,
+          highZoneEnergyChange: -5.2,
+          middleZoneEnergy: 0.68,
+          middleZoneEnergyChange: -10.5,
+          lowZoneEnergy: 0.78,
+          lowZoneEnergyChange: -6.8
+        },
+        1: {
+          systemWaterEnergy: 0.75,
+          systemEnergyChange: -6.2,
+          highZoneEnergy: 0.84,
+          highZoneEnergyChange: -3.8,
+          middleZoneEnergy: 0.70,
+          middleZoneEnergyChange: -8.5,
+          lowZoneEnergy: 0.80,
+          lowZoneEnergyChange: -5.2
+        },
+        2: {
+          systemWaterEnergy: 0.71,
+          systemEnergyChange: -10.5,
+          highZoneEnergy: 0.80,
+          highZoneEnergyChange: -7.5,
+          middleZoneEnergy: 0.66,
+          middleZoneEnergyChange: -12.8,
+          lowZoneEnergy: 0.76,
+          lowZoneEnergyChange: -8.5
+        },
+        3: {
+          systemWaterEnergy: 0.73,
+          systemEnergyChange: -8.5,
+          highZoneEnergy: 0.82,
+          highZoneEnergyChange: -5.2,
+          middleZoneEnergy: 0.68,
+          middleZoneEnergyChange: -10.5,
+          lowZoneEnergy: 0.78,
+          lowZoneEnergyChange: -6.8
+        }
+      };
+      this.overview = { ...dataMap[this.activePeriod] };
+    },
+    initAnomalyList() {
+      this.anomalyList = [
+        {
+          id: 1,
+          date: "2024-03-05",
+          zone: "highZone",
+          zoneName: "高区",
+          waterEnergy: 0.95,
+          threshold: 0.85,
+          deviation: 11.76,
+          level: "critical",
+          electricity: 15680,
+          waterSupply: 16505,
+          status: "pending",
+          reason: "高区水泵运行频率过高,系统能效低下",
+          suggestion: "建议调整水泵运行参数,检查供水管网是否存在异常"
+        },
+        {
+          id: 2,
+          date: "2024-03-05",
+          zone: "lowZone",
+          zoneName: "低区",
+          waterEnergy: 0.92,
+          threshold: 0.85,
+          deviation: 8.24,
+          level: "critical",
+          electricity: 18400,
+          waterSupply: 20000,
+          status: "pending",
+          reason: "低区供水量偏低,导致吨水能耗偏高",
+          suggestion: "检查低区管网压力设置,评估实际用水需求"
+        },
+        {
+          id: 3,
+          date: "2024-03-04",
+          zone: "highZone",
+          zoneName: "高区",
+          waterEnergy: 0.88,
+          threshold: 0.85,
+          deviation: 3.53,
+          level: "warning",
+          electricity: 14850,
+          waterSupply: 16875,
+          status: "processing",
+          reason: "高区水泵运行频率略高",
+          suggestion: "可适当降低水泵运行频率,提高运行效率"
+        },
+        {
+          id: 4,
+          date: "2024-03-04",
+          zone: "lowZone",
+          zoneName: "低区",
+          waterEnergy: 0.86,
+          threshold: 0.85,
+          deviation: 1.18,
+          level: "warning",
+          electricity: 17200,
+          waterSupply: 20000,
+          status: "resolved",
+          reason: "低区吨水能耗轻微超标",
+          suggestion: "持续监测,必要时调整运行参数"
+        },
+        {
+          id: 5,
+          date: "2024-03-03",
+          zone: "middleZone",
+          zoneName: "中区",
+          waterEnergy: 0.72,
+          threshold: 0.85,
+          deviation: -15.29,
+          level: "normal",
+          electricity: 10800,
+          waterSupply: 15000,
+          status: "resolved",
+          reason: "中区运行正常,吨水能耗低于预警阈值",
+          suggestion: "保持当前运行状态"
+        },
+        {
+          id: 6,
+          date: "2024-03-03",
+          zone: "highZone",
+          zoneName: "高区",
+          waterEnergy: 0.76,
+          threshold: 0.85,
+          deviation: -10.59,
+          level: "normal",
+          electricity: 12540,
+          waterSupply: 16500,
+          status: "resolved",
+          reason: "高区运行正常,吨水能耗低于预警阈值",
+          suggestion: "保持当前运行状态"
+        },
+        {
+          id: 7,
+          date: "2024-03-02",
+          zone: "lowZone",
+          zoneName: "低区",
+          waterEnergy: 0.89,
+          threshold: 0.85,
+          deviation: 4.71,
+          level: "warning",
+          electricity: 17800,
+          waterSupply: 20000,
+          status: "pending",
+          reason: "低区水泵运行频率偏高",
+          suggestion: "检查低区水泵运行状态,评估频率设置合理性"
+        },
+        {
+          id: 8,
+          date: "2024-03-02",
+          zone: "highZone",
+          zoneName: "高区",
+          waterEnergy: 0.94,
+          threshold: 0.85,
+          deviation: 10.59,
+          level: "critical",
+          electricity: 15580,
+          waterSupply: 16574,
+          status: "processing",
+          reason: "高区水泵运行效率严重偏低",
+          suggestion: "立即检查高区水泵系统,排查异常原因"
+        },
+        {
+          id: 9,
+          date: "2024-03-01",
+          zone: "middleZone",
+          zoneName: "中区",
+          waterEnergy: 0.78,
+          threshold: 0.85,
+          deviation: -8.24,
+          level: "normal",
+          electricity: 11700,
+          waterSupply: 15000,
+          status: "resolved",
+          reason: "中区运行正常,吨水能耗表现良好",
+          suggestion: "保持当前运行状态"
+        },
+        {
+          id: 10,
+          date: "2024-02-29",
+          zone: "lowZone",
+          zoneName: "低区",
+          waterEnergy: 0.84,
+          threshold: 0.85,
+          deviation: -1.18,
+          level: "normal",
+          electricity: 16800,
+          waterSupply: 20000,
+          status: "resolved",
+          reason: "低区运行正常,吨水能耗略低于预警阈值",
+          suggestion: "保持当前运行状态"
+        }
+      ];
+      this.pagination.total = this.anomalyList.length;
+    },
+    getWaterEnergyClass(value) {
+      if (value >= this.thresholdConfig.criticalThreshold) {
+        return "energy-critical";
+      } else if (value >= this.thresholdConfig.warningThreshold) {
+        return "energy-warning";
+      } else {
+        return "energy-normal";
+      }
+    },
+    getAnomalyLevelText(level) {
+      const map = { critical: "严重", warning: "预警", normal: "正常" };
+      return map[level] || level;
+    },
+    getAnomalyStatusText(status) {
+      const map = { pending: "待处理", processing: "处理中", resolved: "已处理" };
+      return map[status] || status;
+    },
+    viewAnomalyDetail(anomaly) {
+      this.selectedAnomaly = anomaly;
+      this.anomalyDetailDialogVisible = true;
+    },
+    handleAnomaly(anomaly) {
+      anomaly.status = "processing";
+      this.$message.success(`已开始处理${anomaly.zoneName}的异常`);
+    },
+    handleSizeChange(size) {
+      this.pagination.pageSize = size;
+    },
+    handleCurrentChange(page) {
+      this.pagination.currentPage = page;
+    },
+    handleResize() {
+      if (this.zoneChart) this.zoneChart.resize();
+    },
+    exportOptimizationReport() {
+      this.$message.success("优化方案导出成功");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.water-energy-analysis {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.15rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .selector-label {
+    font-size: 0.14rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .time-periods {
+    display: flex;
+    gap: 0.08rem;
+
+    .period-item {
+      padding: 0.06rem 0.15rem;
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.6;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        opacity: 0.9;
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &.active {
+        opacity: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-color: transparent;
+      }
+    }
+  }
+
+  .date-range {
+    ::v-deep .custom-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.threshold-config {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.15rem 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .config-item {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+
+    .config-label {
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.8;
+    }
+
+    ::v-deep .custom-input-number {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .apply-btn {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    border: none;
+  }
+}
+
+.overview-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .overview-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+    }
+
+    .card-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 0.06rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      color: #ffffff;
+      font-size: 0.18rem;
+      font-weight: bold;
+    }
+
+    .card-content {
+      flex: 1;
+
+      .card-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-label {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-change {
+        font-size: 0.12rem;
+        font-weight: 500;
+
+        &.positive {
+          color: #91CC75;
+        }
+
+        &.negative {
+          color: #EE6666;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .chart-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      .title-icon {
+        width: 0.04rem;
+        height: 0.16rem;
+        border-radius: 0.02rem;
+      }
+    }
+
+    .chart-controls {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+
+      .suggest-btn {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 4rem;
+  }
+}
+
+.anomaly-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .anomaly-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.15rem;
+    margin-bottom: 0.2rem;
+
+    .stat-item {
+      display: flex;
+      align-items: center;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      &.critical {
+        border-left: 0.04rem solid #EE6666;
+      }
+
+      &.warning {
+        border-left: 0.04rem solid #FAC858;
+      }
+
+      &.info {
+        border-left: 0.04rem solid #4facfe;
+      }
+
+      &.energy {
+        border-left: 0.04rem solid #91CC75;
+      }
+
+      .stat-icon {
+        width: 0.4rem;
+        height: 0.4rem;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.12rem;
+        font-size: 0.18rem;
+        color: #ffffff;
+      }
+
+      .stat-content {
+        flex: 1;
+
+        .stat-value {
+          font-size: 0.2rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.03rem;
+        }
+
+        .stat-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+
+  .anomaly-table {
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .data-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 12rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.12rem 0.1rem;
+              text-align: left;
+              font-size: 0.13rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.12rem 0.1rem;
+              font-size: 0.12rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+
+              &.energy-critical {
+                color: #EE6666;
+                font-weight: bold;
+              }
+
+              &.energy-warning {
+                color: #FAC858;
+                font-weight: bold;
+              }
+
+              &.energy-normal {
+                color: #91CC75;
+              }
+
+              &.deviation-high {
+                color: #EE6666;
+              }
+
+              &.deviation-low {
+                color: #91CC75;
+              }
+
+              .level-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.critical {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                  box-shadow: 0 0.04rem 0.08rem rgba(238, 102, 102, 0.2);
+                }
+
+                &.warning {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                  box-shadow: 0 0.04rem 0.08rem rgba(250, 200, 88, 0.2);
+                }
+
+                &.normal {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                }
+              }
+
+              .status-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.pending {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                  border: 1px solid rgba(238, 102, 102, 0.4);
+                }
+
+                &.processing {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                  border: 1px solid rgba(250, 200, 88, 0.4);
+                }
+
+                &.resolved {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                  border: 1px solid rgba(145, 204, 117, 0.4);
+                }
+              }
+
+              .action-buttons {
+                display: flex;
+                gap: 0.06rem;
+
+                .action-btn {
+                  font-size: 0.11rem;
+                  padding: 0.04rem 0.1rem;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .table-pagination {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0.2rem 0;
+      background: rgba(255, 255, 255, 0.03);
+
+      ::v-deep .custom-pagination {
+        .el-pagination__total {
+          color: #ffffff;
+        }
+
+        .el-pager li {
+          background: rgba(255, 255, 255, 0.1);
+          color: #ffffff;
+
+          &:hover {
+            color: #15e1fd;
+          }
+
+          &.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #ffffff;
+          }
+        }
+
+        .btn-prev,
+        .btn-next {
+          background: rgba(255, 255, 255, 0.1);
+          color: #ffffff;
+
+          &:hover {
+            color: #15e1fd;
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(21, 225, 253, 0.3);
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__body {
+    color: #ffffff;
+  }
+
+  .custom-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: #ffffff;
+  }
+}
+
+.optimization-suggestions {
+  max-height: 3.5rem;
+  overflow-y: auto;
+
+  .suggestion-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+    padding: 0.2rem;
+    margin-bottom: 0.15rem;
+
+    .suggestion-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.15rem;
+
+      .zone-badge {
+        padding: 0.04rem 0.12rem;
+        border-radius: 0.04rem;
+        font-size: 0.12rem;
+        font-weight: 500;
+
+        &.highZone {
+          background: rgba(102, 126, 234, 0.3);
+          color: #667eea;
+          border: 1px solid rgba(102, 126, 234, 0.5);
+        }
+
+        &.middleZone {
+          background: rgba(240, 147, 251, 0.3);
+          color: #f093fb;
+          border: 1px solid rgba(240, 147, 251, 0.5);
+        }
+
+        &.lowZone {
+          background: rgba(79, 172, 254, 0.3);
+          color: #4facfe;
+          border: 1px solid rgba(79, 172, 254, 0.5);
+        }
+      }
+
+      .priority-badge {
+        padding: 0.04rem 0.12rem;
+        border-radius: 0.04rem;
+        font-size: 0.12rem;
+        font-weight: 500;
+
+        &.high {
+          background: rgba(238, 102, 102, 0.3);
+          color: #EE6666;
+          border: 1px solid rgba(238, 102, 102, 0.5);
+        }
+
+        &.medium {
+          background: rgba(250, 200, 88, 0.3);
+          color: #FAC858;
+          border: 1px solid rgba(250, 200, 88, 0.5);
+        }
+      }
+    }
+
+    .suggestion-content {
+      .suggestion-title {
+        font-size: 0.15rem;
+        color: #ffffff;
+        font-weight: bold;
+        margin-bottom: 0.08rem;
+      }
+
+      .suggestion-description {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.8;
+        margin-bottom: 0.15rem;
+        line-height: 1.6;
+      }
+
+      .suggestion-metrics {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.15rem;
+        padding: 0.15rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 0.04rem;
+        margin-bottom: 0.15rem;
+
+        .metric-item {
+          text-align: center;
+
+          .metric-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            display: block;
+            margin-bottom: 0.05rem;
+          }
+
+          .metric-value {
+            font-size: 0.18rem;
+            font-weight: bold;
+
+            &.current {
+              color: #EE6666;
+            }
+
+            &.target {
+              color: #91CC75;
+            }
+
+            &.saving {
+              color: #15e1fd;
+            }
+          }
+        }
+      }
+
+      .suggestion-actions {
+        .action-item {
+          display: flex;
+          align-items: center;
+          padding: 0.08rem 0;
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.8;
+
+          .action-icon {
+            width: 0.2rem;
+            height: 0.2rem;
+            background: rgba(145, 204, 117, 0.3);
+            color: #91CC75;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 0.1rem;
+            font-size: 0.12rem;
+          }
+
+          .action-text {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+.anomaly-detail-content {
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.15rem;
+
+    .detail-item {
+      display: flex;
+      align-items: center;
+      padding: 0.1rem;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 0.04rem;
+
+      &.full-width {
+        grid-column: span 2;
+      }
+
+      .detail-label {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-right: 0.1rem;
+        min-width: 0.9rem;
+      }
+
+      .detail-value {
+        font-size: 0.13rem;
+        color: #ffffff;
+        flex: 1;
+
+        &.level-badge {
+          display: inline-block;
+          padding: 0.03rem 0.1rem;
+          border-radius: 0.03rem;
+          font-size: 0.11rem;
+          font-weight: 500;
+
+          &.critical {
+            background: rgba(238, 102, 102, 0.2);
+            color: #EE6666;
+          }
+
+          &.warning {
+            background: rgba(250, 200, 88, 0.2);
+            color: #FAC858;
+          }
+
+          &.normal {
+            background: rgba(145, 204, 117, 0.2);
+            color: #91CC75;
+          }
+        }
+
+        &.energy-critical {
+          color: #EE6666;
+          font-weight: bold;
+        }
+
+        &.energy-warning {
+          color: #FAC858;
+          font-weight: bold;
+        }
+
+        &.energy-normal {
+          color: #91CC75;
+        }
+
+        &.deviation-high {
+          color: #EE6666;
+        }
+
+        &.deviation-low {
+          color: #91CC75;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .overview-cards {
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  }
+
+  .anomaly-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .optimization-suggestions {
+    .suggestion-metrics {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .overview-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .anomaly-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .optimization-suggestions {
+    .suggestion-metrics {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/energyManage/retrofitEffectivenessCompariso/index.vue b/src/views/newLifeWater/energyManage/retrofitEffectivenessCompariso/index.vue
new file mode 100644
index 0000000..0c29533
--- /dev/null
+++ b/src/views/newLifeWater/energyManage/retrofitEffectivenessCompariso/index.vue
@@ -0,0 +1,1691 @@
+<template>
+  <div class="retrofit-effectiveness">
+    <!-- 时间段选择 -->
+    <div class="time-selector">
+      <div class="selector-label">对比时间段</div>
+      <div class="time-range-group">
+        <div class="range-item">
+          <div class="range-label">改造前</div>
+          <el-date-picker
+            v-model="beforeDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+        <div class="range-divider">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="range-item">
+          <div class="range-label">改造后</div>
+          <el-date-picker
+            v-model="afterDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+      </div>
+      <div class="selector-actions">
+        <el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
+        <el-button size="small" @click="exportData">导出数据</el-button>
+      </div>
+    </div>
+
+    <!-- 核心指标对比 -->
+    <div class="comparison-indicators">
+      <div class="indicator-card energy">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">用电量对比</div>
+        </div>
+        <div class="card-content">
+          <div class="metric-row">
+            <div class="metric-item before">
+              <div class="metric-label">改造前</div>
+              <div class="metric-value">{{ comparisonIndicators.beforeElectricity }}</div>
+              <div class="metric-unit">kWh</div>
+            </div>
+            <div class="metric-divider">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M690 512l-256-256q-10-10-10-25t10-25l30-30q10-10 25-10t25 10l296 296q10 10 10 25t-10 25L520 816q-10 10-25 10t-25-10l-30-30q-10-10-10-25t10-25l256-256z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="metric-item after">
+              <div class="metric-label">改造后</div>
+              <div class="metric-value">{{ comparisonIndicators.afterElectricity }}</div>
+              <div class="metric-unit">kWh</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card water">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">供水量对比</div>
+        </div>
+        <div class="card-content">
+          <div class="metric-row">
+            <div class="metric-item before">
+              <div class="metric-label">改造前</div>
+              <div class="metric-value">{{ comparisonIndicators.beforeWaterSupply }}</div>
+              <div class="metric-unit">m³</div>
+            </div>
+            <div class="metric-divider">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M690 512l-256-256q-10-10-10-25t10-25l30-30q10-10 25-10t25 10l296 296q10 10 10 25t-10 25L520 816q-10 10-25 10t-25-10l-30-30q-10-10-10-25t10-25l256-256z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="metric-item after">
+              <div class="metric-label">改造后</div>
+              <div class="metric-value">{{ comparisonIndicators.afterWaterSupply }}</div>
+              <div class="metric-unit">m³</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card saving">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">节能成效</div>
+        </div>
+        <div class="card-content">
+          <div class="saving-metrics">
+            <div class="saving-item">
+              <div class="saving-label">节电量</div>
+              <div class="saving-value">{{ comparisonIndicators.electricitySaving }}</div>
+              <div class="saving-unit">kWh</div>
+            </div>
+            <div class="saving-divider"></div>
+            <div class="saving-item">
+              <div class="saving-label">节电率</div>
+              <div class="saving-value highlight">{{ comparisonIndicators.electricitySavingRate }}%</div>
+              <div class="saving-unit">同比降低</div>
+            </div>
+            <div class="saving-divider"></div>
+            <div class="saving-item">
+              <div class="saving-label">节电金额</div>
+              <div class="saving-value">¥{{ comparisonIndicators.costSaving }}</div>
+              <div class="saving-unit">元</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card unit">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">吨水能耗</div>
+        </div>
+        <div class="card-content">
+          <div class="unit-metrics">
+            <div class="unit-metric">
+              <div class="unit-metric-label">改造前</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.beforeUnitEnergy }}</div>
+              <div class="unit-metric-unit">kWh/m³</div>
+            </div>
+            <div class="unit-metric">
+              <div class="unit-metric-label">改造后</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.afterUnitEnergy }}</div>
+              <div class="unit-metric-unit">kWh/m³</div>
+            </div>
+            <div class="unit-metric highlight">
+              <div class="unit-metric-label">降低</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.unitEnergyReduction }}%</div>
+              <div class="unit-metric-unit">吨水能耗</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card carbon">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">碳减排</div>
+        </div>
+        <div class="card-content">
+          <div class="carbon-metrics">
+            <div class="carbon-metric">
+              <div class="carbon-metric-label">碳减排量</div>
+              <div class="carbon-metric-value">{{ comparisonIndicators.carbonReduction }}</div>
+              <div class="carbon-metric-unit">tCO₂e</div>
+            </div>
+            <div class="carbon-metric">
+              <div class="carbon-metric-label">减排率</div>
+              <div class="carbon-metric-value highlight">{{ comparisonIndicators.carbonReductionRate }}%</div>
+              <div class="carbon-metric-unit">同比下降</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日能耗趋势对比图 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">日用电量趋势对比</div>
+        <div class="chart-controls">
+          <el-button-group>
+            <el-button :type="timeRange === 'week' ? 'primary' : ''" size="small" @click="setTimeRange('week')">周</el-button>
+            <el-button :type="timeRange === 'month' ? 'primary' : ''" size="small" @click="setTimeRange('month')">月</el-button>
+            <el-button :type="timeRange === 'quarter' ? 'primary' : ''" size="small" @click="setTimeRange('quarter')">季度</el-button>
+          </el-button-group>
+        </div>
+      </div>
+      <div class="chart" ref="dailyEnergyChartRef"></div>
+    </div>
+
+    <!-- 周期用水量对比 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">周期用水量对比</div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot before"></span>
+            <span>改造前</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot after"></span>
+            <span>改造后</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot saving"></span>
+            <span>节水量</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="periodWaterChartRef"></div>
+    </div>
+
+    <!-- 区域改造效果对比 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">区域改造效果对比</div>
+      </div>
+      <div class="chart" ref="areaComparisonChartRef"></div>
+    </div>
+
+    <!-- 改造成效详情表格 -->
+    <div class="table-section">
+      <div class="section-header">
+        <div class="section-title">改造成效详情</div>
+        <div class="section-actions">
+          <el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
+          <el-button size="small" @click="exportData">导出数据</el-button>
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>区域</th>
+              <th>改造前用电量</th>
+              <th>改造后用电量</th>
+              <th>改造前供水量</th>
+              <th>改造后供水量</th>
+              <th>节电量</th>
+              <th>节电率</th>
+              <th>节电金额</th>
+              <th>改造效果</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in areaEffectiveness" :key="index">
+              <td>{{ item.area }}</td>
+              <td>{{ item.beforeElectricity }} kWh</td>
+              <td>{{ item.afterElectricity }} kWh</td>
+              <td>{{ item.beforeWaterSupply }} m³</td>
+              <td>{{ item.afterWaterSupply }} m³</td>
+              <td class="positive">{{ item.savingElectricity }} kWh</td>
+              <td class="positive">{{ item.savingRate }}%</td>
+              <td class="positive">¥{{ item.savingCost }}</td>
+              <td>
+                <span class="effect-tag" :class="item.effectClass">{{ item.effect }}</span>
+              </td>
+            </tr>
+            <tr class="total-row">
+              <td>总计</td>
+              <td>{{ totalEffectiveness.beforeElectricity }} kWh</td>
+              <td>{{ totalEffectiveness.afterElectricity }} kWh</td>
+              <td>{{ totalEffectiveness.beforeWaterSupply }} m³</td>
+              <td>{{ totalEffectiveness.afterWaterSupply }} m³</td>
+              <td class="positive">{{ totalEffectiveness.savingElectricity }} kWh</td>
+              <td class="positive">{{ totalEffectiveness.savingRate }}%</td>
+              <td class="positive">¥{{ totalEffectiveness.savingCost }}</td>
+              <td>-</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 报告对话框 -->
+    <el-dialog
+      title="水泵系统节能改造效果分析报告"
+      :visible.sync="reportDialogVisible"
+      width="80%"
+      :close-on-click-modal="false"
+      class="report-dialog"
+    >
+      <div class="report-content" v-if="reportDialogVisible">
+        <div class="report-header">
+          <h2>水泵系统节能改造效果分析报告</h2>
+          <p>报告生成时间：{{ reportData.generateTime }}</p>
+        </div>
+        <div class="report-section">
+          <h3>一、对比时间段</h3>
+          <p>改造前：{{ beforeDateRange[0] }} 至 {{ beforeDateRange[1] }}</p>
+          <p>改造后：{{ afterDateRange[0] }} 至 {{ afterDateRange[1] }}</p>
+        </div>
+        <div class="report-section">
+          <h3>二、核心指标对比</h3>
+          <div class="report-metrics">
+            <div class="report-metric">
+              <div class="metric-title">用电量</div>
+              <div class="metric-comparison">
+                <span class="before">{{ comparisonIndicators.beforeElectricity }} kWh</span>
+                <span class="arrow">→</span>
+                <span class="after">{{ comparisonIndicators.afterElectricity }} kWh</span>
+              </div>
+              <div class="metric-change">降低 {{ comparisonIndicators.electricitySavingRate }}%</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">供水量</div>
+              <div class="metric-comparison">
+                <span class="before">{{ comparisonIndicators.beforeWaterSupply }} m³</span>
+                <span class="arrow">→</span>
+                <span class="after">{{ comparisonIndicators.afterWaterSupply }} m³</span>
+              </div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">吨水能耗</div>
+              <div class="metric-comparison">
+                <span class="before">{{ comparisonIndicators.beforeUnitEnergy }} kWh/m³</span>
+                <span class="arrow">→</span>
+                <span class="after">{{ comparisonIndicators.afterUnitEnergy }} kWh/m³</span>
+              </div>
+              <div class="metric-change">降低 {{ comparisonIndicators.unitEnergyReduction }}%</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">节电量</div>
+              <div class="metric-value">{{ comparisonIndicators.electricitySaving }} kWh</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">节电金额</div>
+              <div class="metric-value">¥{{ comparisonIndicators.costSaving }}</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">碳减排量</div>
+              <div class="metric-value">{{ comparisonIndicators.carbonReduction }} tCO₂e</div>
+            </div>
+          </div>
+        </div>
+        <div class="report-section">
+          <h3>三、区域改造成效汇总</h3>
+          <table class="report-table">
+            <thead>
+              <tr>
+                <th>区域</th>
+                <th>节电率</th>
+                <th>节电量</th>
+                <th>节电金额</th>
+                <th>改造效果</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in areaEffectiveness" :key="index">
+                <td>{{ item.area }}</td>
+                <td>{{ item.savingRate }}%</td>
+                <td>{{ item.savingElectricity }} kWh</td>
+                <td>¥{{ item.savingCost }}</td>
+                <td>{{ item.effect }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="report-section">
+          <h3>四、结论与建议</h3>
+          <p>本次水泵系统节能改造项目总体节能效果显著，平均节电率达到{{ comparisonIndicators.electricitySavingRate }}%，累计节电{{ comparisonIndicators.electricitySaving }} kWh，节约电费¥{{ comparisonIndicators.costSaving }}。</p>
+          <p>改造后水泵系统吨水能耗明显降低，平均降低{{ comparisonIndicators.unitEnergyReduction }}%，碳减排{{ comparisonIndicators.carbonReduction }} tCO₂e。</p>
+          <p>建议继续优化水泵运行策略，根据实际用水需求动态调整水泵启停，进一步挖掘节能潜力。</p>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="reportDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="downloadReport">下载报告</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "RetrofitEffectivenessComparison",
+  data() {
+    return {
+      // 日期范围
+      beforeDateRange: [],
+      afterDateRange: [],
+      // 时间范围
+      timeRange: 'week',
+      // 报告对话框
+      reportDialogVisible: false,
+      // 对比指标
+      comparisonIndicators: {
+        beforeElectricity: 528000,
+        afterElectricity: 356000,
+        beforeWaterSupply: 145000,
+        afterWaterSupply: 125000,
+        electricitySaving: 172000,
+        electricitySavingRate: 32.6,
+        costSaving: 206400,
+        beforeUnitEnergy: 3.64,
+        afterUnitEnergy: 2.85,
+        unitEnergyReduction: 21.7,
+        carbonReduction: 85.7,
+        carbonReductionRate: 32.6
+      },
+      // 区域改造成效
+      areaEffectiveness: [
+        { area: "高区", beforeElectricity: 165000, afterElectricity: 110000, beforeWaterSupply: 45000, afterWaterSupply: 40000, savingElectricity: 55000, savingRate: 33.3, savingCost: 66000, effect: "显著改善", effectClass: "excellent" },
+        { area: "中区", beforeElectricity: 135000, afterElectricity: 91000, beforeWaterSupply: 38000, afterWaterSupply: 35000, savingElectricity: 44000, savingRate: 32.6, savingCost: 52800, effect: "显著改善", effectClass: "excellent" },
+        { area: "低区", beforeElectricity: 198000, afterElectricity: 135000, beforeWaterSupply: 58000, afterWaterSupply: 50000, savingElectricity: 63000, savingRate: 31.8, savingCost: 75600, effect: "显著改善", effectClass: "excellent" },
+        { area: "消防区", beforeElectricity: 30000, afterElectricity: 20000, beforeWaterSupply: 4000, afterWaterSupply: 0, savingElectricity: 10000, savingRate: 33.3, savingCost: 12000, effect: "改善", effectClass: "good" }
+      ],
+      // 总计
+      totalEffectiveness: {
+        beforeElectricity: 528000,
+        afterElectricity: 356000,
+        beforeWaterSupply: 145000,
+        afterWaterSupply: 125000,
+        savingElectricity: 172000,
+        savingRate: 32.6,
+        savingCost: 206400
+      },
+      // 报告数据
+      reportData: {
+        generateTime: ""
+      },
+      // 图表实例
+      dailyEnergyChart: null,
+      periodWaterChart: null,
+      areaComparisonChart: null
+    };
+  },
+  mounted() {
+    this.initDateRanges();
+    this.initDailyEnergyChart();
+    this.initPeriodWaterChart();
+    this.initAreaComparisonChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.dailyEnergyChart) this.dailyEnergyChart.dispose();
+    if (this.periodWaterChart) this.periodWaterChart.dispose();
+    if (this.areaComparisonChart) this.areaComparisonChart.dispose();
+  },
+  methods: {
+    // 初始化日期范围
+    initDateRanges() {
+      const today = new Date();
+      const lastYearStart = new Date(today.getFullYear() - 1, 0, 1);
+      const lastYearEnd = new Date(today.getFullYear() - 1, 11, 31);
+      const currentYearStart = new Date(today.getFullYear(), 0, 1);
+      const currentYearEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+      this.beforeDateRange = [
+        this.formatDate(lastYearStart),
+        this.formatDate(lastYearEnd)
+      ];
+      this.afterDateRange = [
+        this.formatDate(currentYearStart),
+        this.formatDate(currentYearEnd)
+      ];
+    },
+    // 格式化日期
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    },
+    // 设置时间范围
+    setTimeRange(range) {
+      this.timeRange = range;
+      this.updateDailyEnergyChart();
+    },
+    // 日期范围变化
+    handleDateChange(value) {
+      console.log("日期范围变化:", value);
+      this.updateAllCharts();
+    },
+    // 生成报告
+    generateReport() {
+      this.reportData.generateTime = new Date().toLocaleString();
+      this.reportDialogVisible = true;
+    },
+    // 导出数据
+    exportData() {
+      this.$message.success("数据导出成功");
+    },
+    // 下载报告
+    downloadReport() {
+      this.$message.success("报告下载成功");
+    },
+    // 初始化日用电量趋势对比图
+    initDailyEnergyChart() {
+      this.dailyEnergyChart = echarts.init(this.$refs.dailyEnergyChartRef);
+      this.updateDailyEnergyChart();
+    },
+    // 更新日用电量趋势对比图
+    updateDailyEnergyChart() {
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后", "节电量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: this.getDailyEnergyXData(),
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: this.getDailyEnergyBeforeData(),
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#EE6666" },
+                  { offset: 1, color: "#E53935" }
+                ]
+              }
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: this.getDailyEnergyAfterData(),
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#91CC75" },
+                  { offset: 1, color: "#66BB6A" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节电量",
+            type: "line",
+            data: this.getDailyEnergySavingData(),
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd",
+              width: 2
+            },
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ],
+              itemStyle: {
+                color: "#15e1fd"
+              }
+            }
+          }
+        ]
+      };
+      this.dailyEnergyChart.setOption(option);
+    },
+    // 获取日用电量X轴数据
+    getDailyEnergyXData() {
+      const data = {
+        week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        month: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+        quarter: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取改造前日用电量数据
+    getDailyEnergyBeforeData() {
+      const data = {
+        week: [14500, 15200, 14800, 15500, 16000, 12500, 12000],
+        month: [146000, 148000, 150000, 152000, 155000, 158000, 162000],
+        quarter: [44000, 47000, 50000, 54000, 58000, 61000, 64000, 67000, 71000, 75000, 79000, 82000]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取改造后日用电量数据
+    getDailyEnergyAfterData() {
+      const data = {
+        week: [9800, 10200, 10000, 10500, 10800, 9500, 9000],
+        month: [98000, 100000, 102000, 104000, 106000, 108000, 110000],
+        quarter: [29600, 31600, 33600, 36300, 39000, 41000, 43000, 45000, 47000, 49000, 51000, 53000]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取节电量数据
+    getDailyEnergySavingData() {
+      const beforeData = this.getDailyEnergyBeforeData();
+      const afterData = this.getDailyEnergyAfterData();
+      return beforeData.map((val, idx) => val - afterData[idx]);
+    },
+    // 初始化周期用水量对比图
+    initPeriodWaterChart() {
+      this.periodWaterChart = echarts.init(this.$refs.periodWaterChartRef);
+      this.updatePeriodWaterChart();
+    },
+    // 更新周期用水量对比图
+    updatePeriodWaterChart() {
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后", "节水量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用水量(m³)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "节水量(m³)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: [12500, 12800, 13000, 13200, 13500, 13800, 14200, 12600, 12000, 11800, 11600, 11400],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#EE6666" },
+                  { offset: 1, color: "#E53935" }
+                ]
+              }
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: [10800, 11000, 11200, 11400, 11600, 11800, 12000, 10900, 10400, 10200, 10000, 9800],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#91CC75" },
+                  { offset: 1, color: "#66BB6A" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节水量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [1700, 1800, 1800, 1800, 1900, 2000, 2200, 1700, 1600, 1600, 1600, 1600],
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 2
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "rgba(145, 204, 117, 0.3)" },
+                  { offset: 1, color: "rgba(145, 204, 117, 0)" }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.periodWaterChart.setOption(option);
+    },
+    // 初始化区域改造效果对比图
+    initAreaComparisonChart() {
+      this.areaComparisonChart = echarts.init(this.$refs.areaComparisonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["节电率", "节电量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["高区", "中区", "低区", "消防区"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "节电率(%)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "节电量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "节电率",
+            type: "bar",
+            data: [33.3, 32.6, 31.8, 33.3],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#667eea" },
+                  { offset: 1, color: "#5a67d8" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节电量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [55000, 44000, 63000, 10000],
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 2
+            }
+          }
+        ]
+      };
+      this.areaComparisonChart.setOption(option);
+    },
+    // 更新所有图表
+    updateAllCharts() {
+      this.updateDailyEnergyChart();
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.dailyEnergyChart) this.dailyEnergyChart.resize();
+      if (this.periodWaterChart) this.periodWaterChart.resize();
+      if (this.areaComparisonChart) this.areaComparisonChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.retrofit-effectiveness {
+  padding: 0.16rem;
+  background: rgba(11, 30, 48, 0.6);
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .selector-label {
+    font-size: 0.15rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .time-range-group {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+
+    .range-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      .range-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-picker {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: none;
+
+          &:hover {
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .range-divider {
+      display: flex;
+      align-items: center;
+      padding: 0 0.15rem;
+
+      svg {
+        width: 0.24rem;
+        height: 0.24rem;
+        fill: #ffffff;
+        opacity: 0.5;
+      }
+    }
+
+    .selector-actions {
+      display: flex;
+      gap: 0.1rem;
+    }
+  }
+}
+
+.comparison-indicators {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.2rem rgba(21, 225, 253, 0.2);
+    }
+
+    &.energy {
+      border-left: 0.04rem solid #EE6666;
+    }
+
+    &.water {
+      border-left: 0.04rem solid #4facfe;
+    }
+
+    &.saving {
+      border-left: 0.04rem solid #91CC75;
+    }
+
+    &.unit {
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    &.carbon {
+      border-left: 0.04rem solid #FAC858;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.1rem;
+      margin-bottom: 0.15rem;
+
+      .card-icon {
+        width: 0.32rem;
+        height: 0.32rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.1);
+
+        svg {
+          width: 0.16rem;
+          height: 0.16rem;
+          fill: #ffffff;
+        }
+      }
+
+      .card-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+
+    .card-content {
+      .metric-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .metric-item {
+          text-align: center;
+          flex: 1;
+
+          &.before {
+            .metric-value {
+              color: #EE6666;
+            }
+          }
+
+          &.after {
+            .metric-value {
+              color: #91CC75;
+            }
+          }
+        }
+
+        .metric-divider {
+          width: 0.24rem;
+          height: 0.24rem;
+
+          svg {
+            width: 100%;
+            height: 100%;
+            fill: #ffffff;
+            opacity: 0.4;
+          }
+        }
+
+        .metric-label {
+          font-size: 0.11rem;
+          color: #ffffff;
+          opacity: 0.6;
+          display: block;
+          margin-bottom: 0.05rem;
+        }
+
+        .metric-value {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #ffffff;
+          margin-bottom: 0.03rem;
+        }
+
+        .metric-unit {
+          font-size: 0.11rem;
+          color: #ffffff;
+          opacity: 0.6;
+        }
+      }
+
+      .saving-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .saving-item {
+          text-align: center;
+          flex: 1;
+
+          .saving-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            display: block;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #91CC75;
+            margin-bottom: 0.03rem;
+
+            &.highlight {
+              font-size: 0.2rem;
+            }
+          }
+
+          .saving-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .saving-divider {
+          width: 1px;
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      .unit-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .unit-metric {
+          text-align: center;
+          flex: 1;
+
+          .unit-metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            display: block;
+            margin-bottom: 0.05rem;
+          }
+
+          .unit-metric-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #ffffff;
+            margin-bottom: 0.03rem;
+          }
+
+          .unit-metric-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+
+          &.highlight {
+            .unit-metric-value {
+              color: #15e1fd;
+              font-size: 0.2rem;
+            }
+          }
+        }
+      }
+
+      .carbon-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .carbon-metric {
+          text-align: center;
+          flex: 1;
+
+          .carbon-metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            display: block;
+            margin-bottom: 0.05rem;
+          }
+
+          .carbon-metric-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #FAC858;
+            margin-bottom: 0.03rem;
+
+            &.highlight {
+              color: #91CC75;
+            }
+          }
+
+          .carbon-metric-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  &.full-width {
+    width: 100%;
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .chart-controls {
+      ::v-deep .el-button-group {
+        .el-button {
+          background: rgba(255, 255, 255, 0.1);
+          border-color: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          &.el-button--primary {
+            background: rgba(21, 225, 253, 0.2);
+            border-color: #15e1fd;
+            color: #15e1fd;
+          }
+        }
+      }
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.15rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.8;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+          margin-right: 0.06rem;
+
+          &.before {
+            background: #EE6666;
+          }
+
+          &.after {
+            background: #91CC75;
+          }
+
+          &.saving {
+            background: #15e1fd;
+          }
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3.5rem;
+  }
+}
+
+.table-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      display: flex;
+      gap: 0.1rem;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      position: relative;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(21, 225, 253, 0.05) 100%);
+
+          th {
+            padding: 0.14rem 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: bold;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            background: transparent;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.08);
+            transform: translateX(0.02rem);
+          }
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.02);
+          }
+
+          &.total-row {
+            background: linear-gradient(135deg, rgba(145, 204, 117, 0.15) 0%, rgba(145, 204, 117, 0.05) 100%);
+            border-top: 2px solid rgba(145, 204, 117, 0.3);
+            font-weight: bold;
+
+            td {
+              color: #91CC75;
+              font-weight: bold;
+            }
+          }
+
+          td {
+            padding: 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.8;
+
+            &.positive {
+              color: #91CC75;
+              font-weight: bold;
+            }
+
+            .effect-tag {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+              display: inline-block;
+
+              &.excellent {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.3) 0%, rgba(145, 204, 117, 0.1) 100%);
+                color: #91CC75;
+                border: 1px solid rgba(145, 204, 117, 0.5);
+                box-shadow: 0 0.02rem 0.06rem rgba(145, 204, 117, 0.2);
+              }
+
+              &.good {
+                background: linear-gradient(135deg, rgba(84, 112, 198, 0.3) 0%, rgba(84, 112, 198, 0.1) 100%);
+                color: #5470C6;
+                border: 1px solid rgba(84, 112, 198, 0.5);
+                box-shadow: 0 0.02rem 0.06rem rgba(84, 112, 198, 0.2);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 报告对话框
+::v-deep .report-dialog {
+  .el-dialog {
+    background: linear-gradient(135deg, rgba(11, 30, 48, 0.95) 0%, rgba(20, 45, 65, 0.95) 100%);
+    border: 1px solid rgba(21, 225, 253, 0.2);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    .el-dialog__title {
+      color: #ffffff;
+      font-size: 0.18rem;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0.3rem;
+  }
+}
+
+.report-content {
+  color: #ffffff;
+
+  .report-header {
+    text-align: center;
+    margin-bottom: 0.3rem;
+    padding-bottom: 0.2rem;
+    border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+
+    h2 {
+      font-size: 0.24rem;
+      color: #15e1fd;
+      margin: 0 0 0.1rem 0;
+    }
+
+    p {
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+      margin: 0;
+    }
+  }
+
+  .report-section {
+    margin-bottom: 0.3rem;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.06rem;
+    border-left: 0.04rem solid #91CC75;
+
+    h3 {
+      font-size: 0.16rem;
+      color: #91CC75;
+      margin: 0 0 0.15rem 0;
+    }
+
+    p {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.9;
+      margin: 0.08rem 0;
+      line-height: 1.6;
+    }
+  }
+
+  .report-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.15rem;
+    margin-top: 0.15rem;
+
+    .report-metric {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 0.15rem;
+      border-radius: 0.06rem;
+      text-align: center;
+
+      .metric-title {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+      }
+
+      .metric-comparison {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.08rem;
+        margin-bottom: 0.08rem;
+
+        .before {
+          color: #EE6666;
+          font-size: 0.13rem;
+        }
+
+        .arrow {
+          color: #ffffff;
+          opacity: 0.5;
+          font-size: 0.12rem;
+        }
+
+        .after {
+          color: #91CC75;
+          font-size: 0.13rem;
+        }
+      }
+
+      .metric-change {
+        font-size: 0.13rem;
+        color: #91CC75;
+        font-weight: 500;
+      }
+
+      .metric-value {
+        font-size: 0.18rem;
+        font-weight: bold;
+        color: #15e1fd;
+        margin-bottom: 0.05rem;
+      }
+    }
+  }
+
+  .report-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 0.15rem;
+
+    thead {
+      tr {
+        background: rgba(21, 225, 253, 0.15);
+
+        th {
+          padding: 0.1rem;
+          text-align: left;
+          font-size: 0.13rem;
+          color: #ffffff;
+          font-weight: bold;
+          border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(even) {
+          background: rgba(255, 255, 255, 0.02);
+        }
+
+        td {
+          padding: 0.1rem;
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.8;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    text-align: right;
+    padding-top: 0.2rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .comparison-indicators {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .chart-section {
+    .chart {
+      height: 3rem;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .comparison-indicators {
+    grid-template-columns: 1fr;
+  }
+
+  .time-selector {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .time-range-group {
+      width: 100%;
+      flex-direction: column;
+
+      .range-item {
+        width: 100%;
+
+        ::v-deep .custom-picker {
+          width: 100%;
+        }
+      }
+    }
+
+    .selector-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .chart-section {
+    .chart-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.1rem;
+    }
+
+    .chart {
+      height: 2.5rem;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/energyManage/warning/index.vue b/src/views/newLifeWater/energyManage/warning/index.vue
new file mode 100644
index 0000000..064ac5d
--- /dev/null
+++ b/src/views/newLifeWater/energyManage/warning/index.vue
@@ -0,0 +1,1732 @@
+<template>
+  <div class="energy-warning">
+    <!-- 预警统计卡片 -->
+    <div class="warning-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.total }}</div>
+          <div class="stat-label">预警总数</div>
+        </div>
+      </div>
+      <div class="stat-card critical">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.critical }}</div>
+          <div class="stat-label">严重预警</div>
+        </div>
+      </div>
+      <div class="stat-card major">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.major }}</div>
+          <div class="stat-label">重要预警</div>
+        </div>
+      </div>
+      <div class="stat-card minor">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.minor }}</div>
+          <div class="stat-label">一般预警</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预警筛选 -->
+    <div class="filter-section">
+      <div class="filter-group">
+        <div class="filter-item">
+          <label>预警级别</label>
+          <el-select v-model="filterForm.level" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="重要" value="major"></el-option>
+            <el-option label="一般" value="minor"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>处理状态</label>
+          <el-select v-model="filterForm.status" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待处理" value="pending"></el-option>
+            <el-option label="处理中" value="processing"></el-option>
+            <el-option label="已处理" value="resolved"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>供水区域</label>
+          <el-select v-model="filterForm.zone" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="高区" value="high"></el-option>
+            <el-option label="中区" value="middle"></el-option>
+            <el-option label="低区" value="low"></el-option>
+            <el-option label="消防区" value="fire"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>预警类型</label>
+          <el-select v-model="filterForm.warningType" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="吨水能耗异常" value="energyAbnormal"></el-option>
+            <el-option label="能耗超标" value="energyExceed"></el-option>
+            <el-option label="供水量异常" value="supplyAbnormal"></el-option>
+            <el-option label="水泵故障" value="pumpFault"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>预警时间</label>
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="filter-actions">
+        <el-input
+          v-model="filterForm.keyword"
+          placeholder="搜索水泵/区域"
+          clearable
+          class="search-input custom-input"
+        ></el-input>
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
+      </div>
+    </div>
+
+    <!-- 预警列表 -->
+    <div class="warning-list">
+  <div class="list-header">
+    <div class="list-title">水泵预警列表</div>
+    <div class="list-info">
+      共 {{ filteredWarnings.length }} 条预警
+    </div>
+  </div>
+      <div class="table-container">
+        <table class="warning-table">
+          <thead>
+            <tr>
+              <th>预警ID</th>
+              <th>预警级别</th>
+              <th>供水区域</th>
+              <th>水泵名称</th>
+              <th>预警类型</th>
+              <th>吨水能耗</th>
+              <th>历史均值</th>
+              <th>超出比例</th>
+              <th>供水量</th>
+              <th>预警时间</th>
+              <th>处理状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="warning in paginatedWarnings" :key="warning.id">
+              <td>{{ warning.id }}</td>
+              <td>
+                <span class="level-badge" :class="warning.level">
+                  {{ getLevelText(warning.level) }}
+                </span>
+              </td>
+              <td>{{ warning.zone }}</td>
+              <td>{{ warning.pumpName }}</td>
+              <td>{{ warning.warningType }}</td>
+              <td class="value-cell">{{ warning.unitEnergy }} kWh/m³</td>
+              <td class="value-cell">{{ warning.historicalAvg }} kWh/m³</td>
+              <td>
+                <span class="exceed-badge">{{ warning.exceedRatio }}%</span>
+              </td>
+              <td class="value-cell">{{ warning.waterSupply }} m³</td>
+              <td>{{ warning.warningTime }}</td>
+              <td>
+                <span class="status-badge" :class="warning.status">
+                  {{ getStatusText(warning.status) }}
+                </span>
+              </td>
+              <td class="action-cell">
+                <div class="action-buttons">
+                  <el-button
+                    v-if="warning.status === 'pending'"
+                    type="primary"
+                    size="small"
+                    @click="handleWarning(warning)"
+                    class="action-btn"
+                  >
+                    处理
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="viewDetail(warning)"
+                    class="action-btn"
+                  >
+                    详情
+                  </el-button>
+                  <el-dropdown @command="(cmd) => handleCommand(cmd, warning)" class="action-dropdown">
+                    <el-button size="small" class="action-btn">
+                      更多
+                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                      </svg>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu class="custom-dropdown-menu">
+                        <el-dropdown-item command="markResolved" v-if="warning.status !== 'resolved'">标记已处理</el-dropdown-item>
+                        <el-dropdown-item command="exportReport" divided>导出报告</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="filteredWarnings.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 预警趋势图 -->
+    <div class="chart-section">
+  <div class="section-header">
+    <div class="section-title">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+      </svg>
+      水泵系统预警趋势
+    </div>
+  </div>
+      <div class="chart-container">
+        <div ref="warningTrendChart" class="chart"></div>
+      </div>
+    </div>
+
+    <!-- 预警详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="预警详情"
+      width="700px"
+      class="custom-dialog"
+    >
+      <div class="detail-content" v-if="selectedWarning">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">预警ID:</span>
+              <span class="item-value">{{ selectedWarning.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警级别:</span>
+              <span class="item-value level-badge" :class="selectedWarning.level">
+                {{ getLevelText(selectedWarning.level) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">供水区域:</span>
+              <span class="item-value">{{ selectedWarning.zone }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">水泵名称:</span>
+              <span class="item-value">{{ selectedWarning.pumpName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警类型:</span>
+              <span class="item-value">{{ selectedWarning.warningType }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警时间:</span>
+              <span class="item-value">{{ selectedWarning.warningTime }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">吨水能耗:</span>
+              <span class="item-value">{{ selectedWarning.unitEnergy }} kWh/m³</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">历史均值:</span>
+              <span class="item-value">{{ selectedWarning.historicalAvg }} kWh/m³</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">供水量:</span>
+              <span class="item-value">{{ selectedWarning.waterSupply }} m³</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">用电量:</span>
+              <span class="item-value">{{ selectedWarning.electricity }} kWh</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">超出比例:</span>
+              <span class="item-value exceed-badge">{{ selectedWarning.exceedRatio }}%</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">预警描述:</span>
+              <span class="item-value">{{ selectedWarning.description }}</span>
+            </div>
+            <div class="info-item full-width" v-if="selectedWarning.suggestion">
+              <span class="item-label">处理建议:</span>
+              <span class="item-value suggestion">{{ selectedWarning.suggestion }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 水泵运行参数 -->
+        <div class="detail-section" v-if="selectedWarning.pumpParams">
+          <div class="section-title">水泵运行参数</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">设定压力:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.setPressure }} MPa</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">出口压力:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.outletPressure }} MPa</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">运行频率:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.frequency }} Hz</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">瞬时流量:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.instantFlow }} m³/h</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">累计流量:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.cumulativeFlow }} m³</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">功率:</span>
+              <span class="item-value">{{ selectedWarning.pumpParams.power }} kW</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedWarning.handleRecord">
+          <div class="section-title">处理记录</div>
+          <div class="process-timeline">
+            <div
+              v-for="(record, index) in selectedWarning.handleRecord"
+              :key="index"
+              class="timeline-item"
+            >
+              <div class="timeline-dot" :class="record.type"></div>
+              <div class="timeline-content">
+                <div class="timeline-title">{{ record.title }}</div>
+                <div class="timeline-time">{{ record.time }}</div>
+                <div class="timeline-desc" v-if="record.description">{{ record.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 处理预警弹窗 -->
+    <el-dialog
+      v-model="handleDialogVisible"
+      title="处理预警"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="handleForm" :rules="handleRules" ref="handleFormRef" label-width="100px">
+        <el-form-item label="处理方式" prop="handleType">
+          <el-select v-model="handleForm.handleType" class="custom-select">
+            <el-option label="调整水泵参数" value="adjust"></el-option>
+            <el-option label="检查水泵状态" value="check"></el-option>
+            <el-option label="切换备用泵" value="switch"></el-option>
+            <el-option label="调整供水压力" value="pressure"></el-option>
+            <el-option label="通知维保人员" value="notify"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="处理说明" prop="handleDescription">
+          <el-input
+            v-model="handleForm.handleDescription"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入处理说明"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="处理人" prop="handler">
+          <el-input v-model="handleForm.handler" placeholder="请输入处理人" class="custom-input"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="handleDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="submitHandle" class="custom-btn">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "EnergyWarning",
+  data() {
+    return {
+      warningStats: {
+        total: 56,
+        critical: 8,
+        major: 18,
+        minor: 30
+      },
+      filterForm: {
+        level: "",
+        status: "",
+        zone: "",
+        warningType: "",
+        keyword: "",
+        dateRange: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      warningList: [],
+      detailDialogVisible: false,
+      handleDialogVisible: false,
+      selectedWarning: null,
+      handleForm: {
+        handleType: "",
+        handleDescription: "",
+        handler: ""
+      },
+      handleRules: {
+        handleType: [{ required: true, message: "请选择处理方式", trigger: "change" }],
+        handleDescription: [{ required: true, message: "请输入处理说明", trigger: "blur" }],
+        handler: [{ required: true, message: "请输入处理人", trigger: "blur" }]
+      },
+      warningTrendChart: null
+    };
+  },
+  computed: {
+    filteredWarnings() {
+      let warnings = [...this.warningList];
+
+      if (this.filterForm.level) {
+        warnings = warnings.filter(w => w.level === this.filterForm.level);
+      }
+
+      if (this.filterForm.status) {
+        warnings = warnings.filter(w => w.status === this.filterForm.status);
+      }
+
+      if (this.filterForm.zone) {
+        warnings = warnings.filter(w => w.zoneCode === this.filterForm.zone);
+      }
+
+      if (this.filterForm.warningType) {
+        warnings = warnings.filter(w => w.warningTypeCode === this.filterForm.warningType);
+      }
+
+      if (this.filterForm.keyword) {
+        const keyword = this.filterForm.keyword.toLowerCase();
+        warnings = warnings.filter(w =>
+          w.pumpName.toLowerCase().includes(keyword) ||
+          w.zone.toLowerCase().includes(keyword) ||
+          w.id.toLowerCase().includes(keyword)
+        );
+      }
+
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        const [start, end] = this.filterForm.dateRange;
+        warnings = warnings.filter(w => w.warningDate >= start && w.warningDate <= end);
+      }
+
+      return warnings;
+    },
+    paginatedWarnings() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredWarnings.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initWarningList();
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    getLevelText(level) {
+      const map = {
+        critical: "严重",
+        major: "重要",
+        minor: "一般"
+      };
+      return map[level] || level;
+    },
+    getStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已处理"
+      };
+      return map[status] || status;
+    },
+    initWarningList() {
+      const now = new Date();
+      this.warningList = [
+        {
+          id: "WRN202403040001",
+          level: "critical",
+          zone: "高区",
+          zoneCode: "high",
+          pumpName: "高区1#泵",
+          warningType: "吨水能耗异常",
+          warningTypeCode: "energyAbnormal",
+          unitEnergy: 0.95,
+          historicalAvg: 0.75,
+          exceedRatio: 26.67,
+          waterSupply: 125.6,
+          electricity: 119.32,
+          warningTime: "2024-03-04 10:30:25",
+          warningDate: "2024-03-04",
+          status: "pending",
+          description: "高区1#泵吨水能耗超出历史均值26.67%，当前能耗0.95 kWh/m³，历史均值0.75 kWh/m³",
+          suggestion: "建议检查水泵运行状态，调整供水压力设定，检查管路是否有泄漏",
+          pumpParams: {
+            setPressure: 0.45,
+            outletPressure: 0.48,
+            frequency: 48.5,
+            instantFlow: 85.2,
+            cumulativeFlow: 12568,
+            power: 24.5
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 10:30:25", description: "吨水能耗超出历史均值" }
+          ]
+        },
+        {
+          id: "WRN202403040002",
+          level: "critical",
+          zone: "中区",
+          zoneCode: "middle",
+          pumpName: "中区2#泵",
+          warningType: "能耗超标",
+          warningTypeCode: "energyExceed",
+          unitEnergy: 1.08,
+          historicalAvg: 0.82,
+          exceedRatio: 31.71,
+          waterSupply: 98.5,
+          electricity: 106.38,
+          warningTime: "2024-03-04 09:15:42",
+          warningDate: "2024-03-04",
+          status: "processing",
+          description: "中区2#泵吨水能耗严重超标，超出历史均值31.71%，需立即处理",
+          suggestion: "建议立即检查水泵是否过载，检查电机温度，考虑切换备用泵",
+          pumpParams: {
+            setPressure: 0.40,
+            outletPressure: 0.43,
+            frequency: 52.0,
+            instantFlow: 78.5,
+            cumulativeFlow: 9850,
+            power: 28.2
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 09:15:42", description: "能耗严重超标" },
+            { type: "process", title: "开始处理", time: "2024-03-04 09:20:00", description: "已通知维保人员检查" }
+          ]
+        },
+        {
+          id: "WRN202403040003",
+          level: "major",
+          zone: "低区",
+          zoneCode: "low",
+          pumpName: "低区1#泵",
+          warningType: "吨水能耗异常",
+          warningTypeCode: "energyAbnormal",
+          unitEnergy: 0.85,
+          historicalAvg: 0.72,
+          exceedRatio: 18.06,
+          waterSupply: 145.2,
+          electricity: 123.42,
+          warningTime: "2024-03-04 08:45:18",
+          warningDate: "2024-03-04",
+          status: "pending",
+          description: "低区1#泵吨水能耗超出历史均值18.06%，需关注处理",
+          suggestion: "建议检查水泵运行频率，评估是否需要调整供水策略",
+          pumpParams: {
+            setPressure: 0.35,
+            outletPressure: 0.37,
+            frequency: 45.5,
+            instantFlow: 95.8,
+            cumulativeFlow: 14520,
+            power: 22.8
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 08:45:18", description: "吨水能耗异常" }
+          ]
+        },
+        {
+          id: "WRN202403030004",
+          level: "major",
+          zone: "高区",
+          zoneCode: "high",
+          pumpName: "高区2#泵",
+          warningType: "供水量异常",
+          warningTypeCode: "supplyAbnormal",
+          unitEnergy: 0.78,
+          historicalAvg: 0.76,
+          exceedRatio: 2.63,
+          waterSupply: 68.5,
+          electricity: 53.43,
+          warningTime: "2024-03-03 16:22:33",
+          warningDate: "2024-03-03",
+          status: "resolved",
+          description: "高区2#泵供水量异常偏低，吨水能耗略有上升，已处理",
+          suggestion: "建议检查供水阀门状态，确认管路无堵塞",
+          pumpParams: {
+            setPressure: 0.45,
+            outletPressure: 0.46,
+            frequency: 42.0,
+            instantFlow: 58.5,
+            cumulativeFlow: 6850,
+            power: 18.5
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-03 16:22:33", description: "供水量异常" },
+            { type: "process", title: "检查阀门", time: "2024-03-03 16:30:00", description: "发现阀门有异物堵塞" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-03 17:15:00", description: "已清理异物，供水量恢复正常" }
+          ]
+        },
+        {
+          id: "WRN202403030005",
+          level: "minor",
+          zone: "中区",
+          zoneCode: "middle",
+          pumpName: "中区1#泵",
+          warningType: "吨水能耗异常",
+          warningTypeCode: "energyAbnormal",
+          unitEnergy: 0.82,
+          historicalAvg: 0.75,
+          exceedRatio: 9.33,
+          waterSupply: 118.6,
+          electricity: 97.25,
+          warningTime: "2024-03-03 14:10:22",
+          warningDate: "2024-03-03",
+          status: "resolved",
+          description: "中区1#泵吨水能耗略有上升，超出历史均值9.33%，已处理",
+          suggestion: "建议定期监测能耗趋势，优化水泵启停策略",
+          pumpParams: {
+            setPressure: 0.40,
+            outletPressure: 0.41,
+            frequency: 44.5,
+            instantFlow: 82.6,
+            cumulativeFlow: 11860,
+            power: 20.5
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-03 14:10:22", description: "吨水能耗略有上升" },
+            { type: "process", title: "调整参数", time: "2024-03-03 14:20:00", description: "已优化运行频率" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-03 14:30:00", description: "能耗已恢复正常" }
+          ]
+        },
+        {
+          id: "WRN202403020006",
+          level: "minor",
+          zone: "低区",
+          zoneCode: "low",
+          pumpName: "低区2#泵",
+          warningType: "水泵故障",
+          warningTypeCode: "pumpFault",
+          unitEnergy: 0.89,
+          historicalAvg: 0.72,
+          exceedRatio: 23.61,
+          waterSupply: 75.8,
+          electricity: 67.46,
+          warningTime: "2024-03-02 11:30:45",
+          warningDate: "2024-03-02",
+          status: "resolved",
+          description: "低区2#泵检测到异常震动，吨水能耗升高，已处理",
+          suggestion: "建议更换轴承或进行动平衡校正",
+          pumpParams: {
+            setPressure: 0.35,
+            outletPressure: 0.38,
+            frequency: 50.0,
+            instantFlow: 65.8,
+            cumulativePower: 7580,
+            power: 25.2
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-02 11:30:45", description: "检测到异常震动" },
+            { type: "process", title: "停机检查", time: "2024-03-02 11:40:00", description: "发现轴承磨损" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-02 12:00:00", description: "已更换轴承，运行正常" }
+          ]
+        }
+      ];
+
+      // 生成更多模拟数据
+      const zones = [
+        { name: "高区", code: "high" },
+        { name: "中区", code: "middle" },
+        { name: "低区", code: "low" },
+        { name: "消防区", code: "fire" }
+      ];
+      const warningTypes = [
+        { name: "吨水能耗异常", code: "energyAbnormal" },
+        { name: "能耗超标", code: "energyExceed" },
+        { name: "供水量异常", code: "supplyAbnormal" },
+        { name: "水泵故障", code: "pumpFault" }
+      ];
+      const pumpNames = ["1#泵", "2#泵", "3#泵"];
+
+      for (let i = 7; i <= 56; i++) {
+        const levels = ["critical", "major", "minor"];
+        const statuses = ["pending", "processing", "resolved"];
+        const date = new Date(now.getTime() - Math.random() * 30 * 24 * 60 * 60 * 1000);
+
+        const zone = zones[Math.floor(Math.random() * zones.length)];
+        const warningType = warningTypes[Math.floor(Math.random() * warningTypes.length)];
+        const pumpName = `${zone.name}${pumpNames[Math.floor(Math.random() * pumpNames.length)]}`;
+        const historicalAvg = 0.65 + Math.random() * 0.3;
+        const exceedRatioValue = 5 + Math.random() * 30;
+        const unitEnergy = historicalAvg * (1 + exceedRatioValue / 100);
+        const waterSupply = 50 + Math.random() * 150;
+        const electricity = unitEnergy * waterSupply;
+
+        this.warningList.push({
+          id: `WRN2024${String(i).padStart(7, '0')}`,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          zone: zone.name,
+          zoneCode: zone.code,
+          pumpName: pumpName,
+          warningType: warningType.name,
+          warningTypeCode: warningType.code,
+          unitEnergy: unitEnergy.toFixed(2),
+          historicalAvg: historicalAvg.toFixed(2),
+          exceedRatio: exceedRatio.toFixed(2),
+          waterSupply: waterSupply.toFixed(1),
+          electricity: electricity.toFixed(2),
+          warningTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          warningDate: date.toISOString().slice(0, 10),
+          status: statuses[Math.floor(Math.random() * statuses.length)],
+          description: `${zone.name}${pumpName}吨水能耗超出历史均值${exceedRatioValue.toFixed(2)}%，当前${unitEnergy.toFixed(2)} kWh/m³，历史${historicalAvg.toFixed(2)} kWh/m³`,
+          suggestion: this.generateSuggestion(warningType.code),
+          pumpParams: {
+            setPressure: (0.3 + Math.random() * 0.2).toFixed(2),
+            outletPressure: (0.32 + Math.random() * 0.2).toFixed(2),
+            frequency: (40 + Math.random() * 15).toFixed(1),
+            instantFlow: (50 + Math.random() * 100).toFixed(1),
+            cumulativeFlow: Math.floor(5000 + Math.random() * 20000),
+            power: (15 + Math.random() * 15).toFixed(1)
+          },
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: date.toISOString().slice(0, 19).replace('T', ' '), description: "吨水能耗异常" }
+          ]
+        });
+      }
+    },
+    initCharts() {
+      this.initWarningTrendChart();
+    },
+    initWarningTrendChart() {
+      if (!this.$refs.warningTrendChart) return;
+      
+      if (this.warningTrendChart) {
+        this.warningTrendChart.dispose();
+      }
+      
+      this.warningTrendChart = echarts.init(this.$refs.warningTrendChart);
+      
+      const dates = [];
+      const criticalData = [];
+      const majorData = [];
+      const minorData = [];
+      const now = new Date();
+      
+      for (let i = 29; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        dates.push(date.toISOString().slice(5, 10));
+        
+        criticalData.push(Math.round(Math.random() * 5));
+        majorData.push(Math.round(Math.random() * 10));
+        minorData.push(Math.round(Math.random() * 15));
+      }
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["严重预警", "重要预警", "一般预警"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "预警数量",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "严重预警",
+            type: "line",
+            smooth: true,
+            data: criticalData,
+            itemStyle: {
+              color: "#EE6666"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.5)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "重要预警",
+            type: "line",
+            smooth: true,
+            data: majorData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "一般预警",
+            type: "line",
+            smooth: true,
+            data: minorData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.warningTrendChart.setOption(option);
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.filterForm = {
+        level: "",
+        status: "",
+        zone: "",
+        warningType: "",
+        keyword: "",
+        dateRange: []
+      };
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("预警列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewDetail(warning) {
+      this.selectedWarning = warning;
+      this.detailDialogVisible = true;
+    },
+    handleWarning(warning) {
+      this.selectedWarning = warning;
+      this.handleForm = {
+        handleType: "",
+        handleDescription: "",
+        handler: ""
+      };
+      this.handleDialogVisible = true;
+    },
+    submitHandle() {
+      this.$refs.handleFormRef.validate((valid) => {
+        if (valid) {
+          const warning = this.warningList.find(w => w === this.selectedWarning);
+          if (warning) {
+            warning.status = "processing";
+            warning.handleRecord.push({
+              type: "process",
+              title: "开始处理",
+              time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+              description: `${this.handleForm.handler}：${this.handleForm.handleDescription}`
+            });
+          }
+          this.$message.success("预警处理已提交");
+          this.handleDialogVisible = false;
+        }
+      });
+    },
+    handleCommand(command, warning) {
+      if (command === "markResolved") {
+        warning.status = "resolved";
+        warning.handleRecord.push({
+          type: "resolved",
+          title: "标记已处理",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户手动标记为已处理"
+        });
+        this.$message.success("已标记为已处理");
+      } else if (command === "exportReport") {
+        this.$message.success(`导出预警${warning.id}的报告成功`);
+      }
+    },
+    handleResize() {
+      if (this.warningTrendChart) this.warningTrendChart.resize();
+    },
+    destroyCharts() {
+      if (this.warningTrendChart) {
+        this.warningTrendChart.dispose();
+        this.warningTrendChart = null;
+      }
+    },
+    // 生成处理建议
+    generateSuggestion(warningTypeCode) {
+      const suggestions = {
+        energyAbnormal: "建议检查水泵运行状态，调整供水压力设定，评估管路是否存在泄漏",
+        energyExceed: "建议立即检查水泵是否过载，检查电机温度，考虑切换备用泵",
+        supplyAbnormal: "建议检查供水阀门状态，确认管路无堵塞，检查用水端是否有异常",
+        pumpFault: "建议停机检查水泵机械部件，检查轴承、密封件等，必要时联系维保人员"
+      };
+      return suggestions[warningTypeCode] || "建议全面检查水泵系统运行状态";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.energy-warning {
+  padding: 0.16rem;
+}
+
+.warning-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.critical {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.major {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.minor {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.filter-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .filter-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 1.5rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    gap: 0.1rem;
+
+    .search-input {
+      width: 2rem;
+    }
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.warning-list {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border-radius: 0.04rem;
+    background: rgba(255, 255, 255, 0.02);
+
+    .warning-table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 12rem;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+          th {
+            padding: 0.12rem 0.1rem;
+            text-align: left;
+            font-size: 0.13rem;
+            color: #15e1fd;
+            font-weight: 600;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            white-space: nowrap;
+
+            &:first-child {
+              padding-left: 0.15rem;
+              border-top-left-radius: 0.04rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+              border-top-right-radius: 0.04rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          transition: all 0.3s ease;
+          background: rgba(255, 255, 255, 0.02);
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.04);
+          }
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.1);
+            transform: translateX(0.02rem);
+          }
+
+          td {
+            padding: 0.12rem 0.1rem;
+            font-size: 0.12rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            vertical-align: middle;
+
+            &:first-child {
+              padding-left: 0.15rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+            }
+
+            .value-cell {
+              font-weight: 500;
+              color: #FAC858;
+            }
+
+            .level-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.critical {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.major {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.minor {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .status-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.processing {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.resolved {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .exceed-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              color: #EE6666;
+              background: rgba(238, 102, 102, 0.2);
+              border: 1px solid rgba(238, 102, 102, 0.4);
+            }
+
+            .action-cell {
+              display: flex;
+              align-items: center;
+              gap: 0.06rem;
+              flex-wrap: nowrap;
+
+              .action-btn,
+              .action-dropdown {
+                ::v-deep .el-button--small {
+                  padding: 0.04rem 0.1rem;
+                  font-size: 0.11rem;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+                  transition: all 0.3s ease;
+                  white-space: nowrap;
+
+                  &:not(.el-button--primary):not(.el-button--default) {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: #ffffff;
+
+                    &:hover {
+                      background: rgba(255, 255, 255, 0.2);
+                    }
+                  }
+
+                  &.el-button--primary {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    border: none;
+                    color: #ffffff;
+                    box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                    &:hover {
+                      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                      transform: translateY(-0.02rem);
+                      box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                    }
+
+                    &:active {
+                      transform: translateY(0);
+                    }
+                  }
+
+                  svg {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    fill: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+  }
+
+  .chart-container {
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 0.04rem;
+    padding: 0.1rem;
+
+    .chart {
+      width: 100%;
+      height: 4rem;
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.13rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.03rem 0.1rem;
+              border-radius: 0.03rem;
+              font-size: 0.11rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.major {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.minor {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+
+            &.exceed-badge {
+              padding: 0.03rem 0.1rem;
+              border-radius: 0.03rem;
+              font-size: 0.11rem;
+              color: #EE6666;
+              background: rgba(238, 102, 102, 0.2);
+            }
+
+            &.suggestion {
+              padding: 0.05rem 0.1rem;
+              background: rgba(145, 204, 117, 0.15);
+              color: #91CC75;
+              border-radius: 0.03rem;
+              font-style: italic;
+            }
+          }
+        }
+      }
+
+      /* 水泵运行参数部分 */
+      .pump-params-section {
+        margin-top: 0.2rem;
+        padding: 0.15rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        border-left: 0.03rem solid #15e1fd;
+
+        .pump-params-title {
+          font-size: 0.14rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.1rem;
+        }
+
+        .pump-params-grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 0.1rem;
+
+          .param-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.08rem;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 0.04rem;
+
+            .param-label {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.7;
+            }
+
+            .param-value {
+              font-size: 0.12rem;
+              color: #ffffff;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      .process-timeline {
+        .timeline-item {
+          display: flex;
+          margin-bottom: 0.2rem;
+
+          .timeline-dot {
+            width: 0.1rem;
+            height: 0.1rem;
+            border-radius: 50%;
+            margin-right: 0.15rem;
+            margin-top: 0.03rem;
+
+            &.warning {
+              background: #EE6666;
+            }
+
+            &.process {
+              background: #FAC858;
+            }
+
+            &.resolved {
+              background: #91CC75;
+            }
+          }
+
+          .timeline-content {
+            flex: 1;
+
+            .timeline-title {
+              font-size: 0.13rem;
+              color: #ffffff;
+              font-weight: bold;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-time {
+              font-size: 0.11rem;
+              color: #ffffff;
+              opacity: 0.6;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-desc {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item__label {
+    color: #ffffff;
+    opacity: 0.7;
+  }
+
+  .custom-input,
+  .custom-select {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .warning-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .filter-section {
+    flex-direction: column;
+  }
+
+  .filter-actions {
+    width: 100%;
+    margin-top: 0.1rem;
+
+    .search-input {
+      flex: 1;
+    }
+  }
+
+  .table-container {
+    .warning-table {
+      thead tr th,
+      tbody tr td {
+        font-size: 0.11rem;
+        padding: 0.08rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newLifeWater/home/index.vue b/src/views/newLifeWater/home/index.vue
new file mode 100644
index 0000000..b2f04a8
--- /dev/null
+++ b/src/views/newLifeWater/home/index.vue
@@ -0,0 +1,1470 @@
+<template>
+  <div class="water-pump-home">
+    <!-- 基础信息展示 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">基础信息</div>
+      </div>
+      <div class="basic-info">
+        <div class="info-item">
+          <div class="info-label">项目名称</div>
+          <div class="info-value">{{ basicInfo.projectName }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">项目位置</div>
+          <div class="info-value">{{ basicInfo.location }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">项目面积</div>
+          <div class="info-value">{{ basicInfo.area }}m²</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">业务类型</div>
+          <div class="info-value">{{ basicInfo.businessType }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">项目负责人</div>
+          <div class="info-value">{{ basicInfo.manager }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">设备安装日期</div>
+          <div class="info-value">{{ basicInfo.installDate }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">电费单价</div>
+          <div class="info-value">¥{{ basicInfo.electricPrice }}/kWh</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">水泵组总数</div>
+          <div class="info-value">{{ basicInfo.pumpGroupCount }}组</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">仪表总数</div>
+          <div class="info-value">{{ basicInfo.meterCount }}台</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">网关总数</div>
+          <div class="info-value">{{ basicInfo.gatewayCount }}台</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关键指标统计 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">关键指标统计</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in timeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeTimeTab === index }]"
+            @click="handleTimeTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="key-indicators">
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <span class="icon-text">节能</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.energySavingRate }}%</div>
+            <div class="indicator-label">节能率</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+            <span class="icon-text">金额</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">¥{{ keyIndicators.totalSaving }}</div>
+            <div class="indicator-label">综合节电金额</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+            <span class="icon-text">减碳</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.carbonReduction }}t</div>
+            <div class="indicator-label">综合减碳量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+            <span class="icon-text">碳排放</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.carbonEmission }}t</div>
+            <div class="indicator-label">碳排放量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+            <span class="icon-text">用电</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.totalElectricity }}kWh</div>
+            <div class="indicator-label">总用电量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+            <span class="icon-text">供水</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.totalWaterSupply }}m³</div>
+            <div class="indicator-label">总供水量</div>
+          </div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <span class="icon-text">设备</span>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ keyIndicators.deviceCount }}台</div>
+            <div class="indicator-label">设备总数</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分区运行状态展示 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">分区运行状态</div>
+      </div>
+      <div class="zone-status">
+        <div class="zone-section" v-for="(zone, zoneIndex) in zoneStatus" :key="zoneIndex">
+          <div class="zone-header">
+            <div class="zone-icon" :style="{ background: zone.iconBg }">
+              <span class="zone-icon-text">{{ zone.icon }}</span>
+            </div>
+            <div class="zone-info">
+              <div class="zone-name">{{ zone.name }}</div>
+              <div class="zone-desc">{{ zone.description }}</div>
+            </div>
+            <div class="zone-badge" :class="zone.statusClass">
+              {{ zone.statusText }}
+            </div>
+          </div>
+          <div class="pump-grid">
+            <div class="pump-card" v-for="(pump, pumpIndex) in zone.pumps" :key="pumpIndex">
+              <div class="pump-header">
+                <div class="pump-name">{{ pump.name }}</div>
+                <div class="pump-status" :class="pump.status">
+                  {{ pump.statusText }}
+                </div>
+              </div>
+              <div class="pump-params">
+                <div class="param-row">
+                  <span class="param-label">设定压力</span>
+                  <span class="param-value">{{ pump.setPressure }}MPa</span>
+                </div>
+                <div class="param-row">
+                  <span class="param-label">出口压力</span>
+                  <span class="param-value highlight">{{ pump.outletPressure }}MPa</span>
+                </div>
+                <div class="param-row">
+                  <span class="param-label">频率</span>
+                  <span class="param-value">{{ pump.frequency }}Hz</span>
+                </div>
+                <div class="param-row">
+                  <span class="param-label">功率</span>
+                  <span class="param-value">{{ pump.power }}kW</span>
+                </div>
+                <div class="param-row">
+                  <span class="param-label">瞬时流量</span>
+                  <span class="param-value">{{ pump.instantFlow }}m³/h</span>
+                </div>
+                <div class="param-row">
+                  <span class="param-label">累计流量</span>
+                  <span class="param-value">{{ pump.cumulativeFlow }}m³</span>
+                </div>
+              </div>
+              <div class="pump-chart-mini" :ref="'pumpChart' + zoneIndex + pumpIndex"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 多维度数据可视化 -->
+    <div class="charts-section">
+      <div class="chart-row">
+        <!-- 用电与节电趋势图 -->
+        <div class="special-div chart-card">
+          <div class="special-top">
+            <div class="special-title">用电与节电趋势</div>
+            <div class="time-switch">
+              <div
+                v-for="(type, index) in timeTypes"
+                :key="index"
+                :class="['switch-item', { active: activeTimeType === index }]"
+                @click="handleTimeTypeChange(index)"
+              >
+                {{ type }}
+              </div>
+            </div>
+          </div>
+          <div class="chart-container" ref="energyTrendChartRef"></div>
+        </div>
+        <!-- 吨水能耗趋势图 -->
+        <div class="special-div chart-card">
+          <div class="special-top">
+            <div class="special-title">吨水能耗趋势</div>
+          </div>
+          <div class="chart-container" ref="waterEnergyChartRef"></div>
+        </div>
+      </div>
+      <!-- 各区域运行对比 -->
+      <div class="special-div chart-card full-width">
+        <div class="special-top">
+          <div class="special-title">各区域运行对比</div>
+        </div>
+        <div class="chart-container" ref="zoneComparisonChartRef"></div>
+      </div>
+    </div>
+
+    <!-- 实时运行状态全景展示 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">系统实时运行状态</div>
+      </div>
+      <div class="operation-status">
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot online"></div>
+            <div class="status-title">系统实时用电量</div>
+          </div>
+          <div class="status-value">{{ operationStatus.realtimeElectricity }}kW</div>
+          <div class="status-chart-mini" ref="miniChart1"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot water"></div>
+            <div class="status-title">系统实时供水量</div>
+          </div>
+          <div class="status-value">{{ operationStatus.realtimeWaterSupply }}m³/h</div>
+          <div class="status-chart-mini" ref="miniChart2"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot energy"></div>
+            <div class="status-title">吨水能耗</div>
+          </div>
+          <div class="status-value">{{ operationStatus.waterEnergyCost }}kWh/m³</div>
+          <div class="status-chart-mini" ref="miniChart3"></div>
+        </div>
+        <div class="status-card">
+          <div class="status-header">
+            <div class="status-dot warning" :class="getEnergyEfficiencyClass(operationStatus.efficiencyRate)">
+              <div class="status-title">水泵运行能效</div>
+            </div>
+          </div>
+          <div class="status-value" :class="getEnergyEfficiencyClass(operationStatus.efficiencyRate)">
+            {{ operationStatus.efficiencyRate }}%
+          </div>
+          <div class="status-indicator">
+            <div class="indicator-bar">
+              <div
+                class="indicator-fill"
+                :style="{ width: operationStatus.efficiencyRate + '%' }"
+                :class="getEnergyEfficiencyClass(operationStatus.efficiencyRate)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 设备运行状态 -->
+      <div class="device-status-grid">
+        <div class="device-status-item" v-for="device in deviceStatus" :key="device.name">
+          <div class="device-status-icon" :class="device.status"></div>
+          <div class="device-info">
+            <div class="device-name">{{ device.name }}</div>
+            <div class="device-state">{{ device.statusText }}</div>
+          </div>
+          <div class="device-value">{{ device.value }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "WaterPumpHome",
+  data() {
+    return {
+      // 基础信息
+      basicInfo: {
+        projectName: "XX小区生活水泵系统",
+        location: "北京市朝阳区建国路88号",
+        area: 85000,
+        businessType: "基础物业-住宅",
+        manager: "张三",
+        installDate: "2020-06-15",
+        electricPrice: 0.85,
+        pumpGroupCount: 12,
+        meterCount: 8,
+        gatewayCount: 2
+      },
+      // 时间选项
+      timeTabs: ["近七日", "当月", "当年", "自定义"],
+      activeTimeTab: 0,
+      // 关键指标
+      keyIndicators: {
+        energySavingRate: 25.8,
+        totalSaving: 68500,
+        carbonReduction: 39.2,
+        carbonEmission: 112.5,
+        totalElectricity: 265000,
+        totalWaterSupply: 125000,
+        deviceCount: 22
+      },
+      // 分区运行状态
+      zoneStatus: [
+        {
+          name: "高区供水",
+          description: "18-30层供水系统",
+          icon: "⬆️",
+          iconBg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          statusClass: "normal",
+          statusText: "正常",
+          pumps: [
+            { name: "高区1#泵", status: "running", statusText: "运行中", setPressure: 0.45, outletPressure: 0.42, frequency: 45.0, power: 22.5, instantFlow: 85.2, cumulativeFlow: 12568 },
+            { name: "高区2#泵", status: "running", statusText: "运行中", setPressure: 0.45, outletPressure: 0.43, frequency: 42.5, power: 21.8, instantFlow: 83.5, cumulativeFlow: 12456 },
+            { name: "高区3#泵", status: "standby", statusText: "待机", setPressure: 0.45, outletPressure: 0, frequency: 0, power: 0, instantFlow: 0, cumulativeFlow: 8956 }
+          ]
+        },
+        {
+          name: "中区供水",
+          description: "9-17层供水系统",
+          icon: "⬇️",
+          iconBg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+          statusClass: "normal",
+          statusText: "正常",
+          pumps: [
+            { name: "中区1#泵", status: "running", statusText: "运行中", setPressure: 0.38, outletPressure: 0.36, frequency: 40.0, power: 18.5, instantFlow: 72.3, cumulativeFlow: 10856 },
+            { name: "中区2#泵", status: "running", statusText: "运行中", setPressure: 0.38, outletPressure: 0.37, frequency: 38.5, power: 17.8, instantFlow: 70.5, cumulativeFlow: 10568 }
+          ]
+        },
+        {
+          name: "低区供水",
+          description: "1-8层供水系统",
+          icon: "⬇️",
+          iconBg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+          statusClass: "warning",
+          statusText: "异常",
+          pumps: [
+            { name: "低区1#泵", status: "running", statusText: "运行中", setPressure: 0.32, outletPressure: 0.30, frequency: 35.0, power: 15.5, instantFlow: 58.6, cumulativeFlow: 9256 },
+            { name: "低区2#泵", status: "stopped", statusText: "停止", setPressure: 0.32, outletPressure: 0, frequency: 0, power: 0, instantFlow: 0, cumulativeFlow: 7456 }
+          ]
+        },
+        {
+          name: "消防供水",
+          description: "消防系统专用",
+          icon: "🚒",
+          iconBg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
+          statusClass: "normal",
+          statusText: "正常",
+          pumps: [
+            { name: "消防1#泵", status: "standby", statusText: "待机", setPressure: 0.50, outletPressure: 0, frequency: 0, power: 0, instantFlow: 0, cumulativeFlow: 3256 }
+          ]
+        }
+      ],
+      // 用电趋势时间类型
+      timeTypes: ["日", "周", "月"],
+      activeTimeType: 0,
+      // 运行状态
+      operationStatus: {
+        realtimeElectricity: 185,
+        realtimeWaterSupply: 254.5,
+        waterEnergyCost: 0.73,
+        efficiencyRate: 85.2
+      },
+      // 设备运行状态
+      deviceStatus: [
+        { name: "水泵组", status: "running", statusText: "运行中", value: "10/12" },
+        { name: "仪表", status: "running", statusText: "运行中", value: "8/8" },
+        { name: "网关", status: "running", statusText: "运行中", value: "2/2" },
+        { name: "压力传感器", status: "running", statusText: "运行中", value: "24/24" }
+      ],
+      // 图表实例
+      energyTrendChart: null,
+      waterEnergyChart: null,
+      zoneComparisonChart: null,
+      miniCharts: []
+    };
+  },
+  mounted() {
+    this.initEnergyTrendChart();
+    this.initWaterEnergyChart();
+    this.initZoneComparisonChart();
+    this.initMiniCharts();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.energyTrendChart) this.energyTrendChart.dispose();
+    if (this.waterEnergyChart) this.waterEnergyChart.dispose();
+    if (this.zoneComparisonChart) this.zoneComparisonChart.dispose();
+    this.miniCharts.forEach(chart => chart && chart.dispose());
+  },
+  watch: {
+    activeTimeType() {
+      this.updateEnergyTrendChart();
+    },
+    activeTimeTab() {
+      this.updateKeyIndicators();
+    }
+  },
+  methods: {
+    // 时间切换
+    handleTimeTabChange(index) {
+      this.activeTimeTab = index;
+    },
+    // 用电趋势时间类型切换
+    handleTimeTypeChange(index) {
+      this.activeTimeType = index;
+    },
+    // 获取能效样式
+    getEnergyEfficiencyClass(value) {
+      if (value >= 85) return "good";
+      if (value >= 70) return "warning";
+      return "danger";
+    },
+    // 初始化用电与节电趋势图
+    initEnergyTrendChart() {
+      this.energyTrendChart = echarts.init(this.$refs.energyTrendChartRef);
+      this.updateEnergyTrendChart();
+    },
+    // 更新用电与节电趋势图
+    updateEnergyTrendChart() {
+      const dataMap = {
+        0: { // 日
+          xData: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
+          electricity: [120, 105, 245, 368, 395, 335, 158],
+          saving: [45, 39, 92, 138, 148, 125, 59]
+        },
+        1: { // 周
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          electricity: [2800, 2920, 3100, 2970, 3060, 2500, 2240],
+          saving: [1050, 1100, 1170, 1120, 1150, 940, 840]
+        },
+        2: { // 月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          electricity: [12000, 13700, 15000, 14200, 13300, 12400, 11600],
+          saving: [4500, 5140, 5630, 5320, 4970, 4640, 4330]
+        }
+      };
+
+      const currentData = dataMap[this.activeTimeType];
+      const unit = this.activeTimeType === 0 ? "kW" : "kWh";
+
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["用电量", "节电量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: unit,
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "用电量",
+            type: "line",
+            smooth: true,
+            data: currentData.electricity,
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(21, 225, 253, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(21, 225, 253, 0)"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "节电量",
+            type: "bar",
+            data: currentData.saving,
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#91CC75"
+                  },
+                  {
+                    offset: 1,
+                    color: "#66BB6A"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.energyTrendChart.setOption(option);
+    },
+    // 初始化吨水能耗趋势图
+    initWaterEnergyChart() {
+      this.waterEnergyChart = echarts.init(this.$refs.waterEnergyChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["高区", "中区", "低区"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh/m³",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "高区",
+            type: "line",
+            smooth: true,
+            data: [0.85, 0.82, 0.78, 0.75, 0.72, 0.70, 0.68, 0.67, 0.66, 0.65, 0.64],
+            itemStyle: {
+              color: "#667eea"
+            },
+            lineStyle: {
+              color: "#667eea"
+            }
+          },
+          {
+            name: "中区",
+            type: "line",
+            smooth: true,
+            data: [0.78, 0.76, 0.74, 0.72, 0.70, 0.68, 0.66, 0.65, 0.64, 0.63, 0.62, 0.61],
+            itemStyle: {
+              color: "#f093fb"
+            },
+            lineStyle: {
+              color: "#f093fb"
+            }
+          },
+          {
+            name: "低区",
+            type: "line",
+            smooth: true,
+            data: [0.92, 0.88, 0.85, 0.82, 0.80, 0.78, 0.75, 0.73, 0.71, 0.69, 0.67],
+            itemStyle: {
+              color: "#4facfe"
+            },
+            lineStyle: {
+              color: "#4facfe"
+            }
+          }
+        ]
+      };
+      this.waterEnergyChart.setOption(option);
+    },
+    // 初始化各区域运行对比图
+    initZoneComparisonChart() {
+      this.zoneComparisonChart = echarts.init(this.$refs.zoneComparisonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["用电量", "供水量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["高区", "中区", "低区"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用电量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "供水量(m³)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            data: [85000, 62000, 118000],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#667eea"
+                  },
+                  {
+                    offset: 1,
+                    color: "#5a67d8"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "供水量",
+            type: "bar",
+            yAxisIndex: 1,
+            data: [56800, 42500, 89000],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#4facfe"
+                  },
+                  {
+                    offset: 1,
+                    color: "#00f2fe"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.zoneComparisonChart.setOption(option);
+    },
+    // 初始化迷你图表
+    initMiniCharts() {
+      const chartRefs = [
+        this.$refs.miniChart1,
+        this.$refs.miniChart2,
+        this.$refs.miniChart3
+      ];
+
+      const dataSeries = [
+        [180, 182, 184, 183, 185, 185, 184],
+        [252, 254, 255, 254, 255, 255, 254.5],
+        [0.73, 0.74, 0.72, 0.73, 0.74, 0.75, 0.74]
+      ];
+
+      chartRefs.forEach((ref, index) => {
+        if (ref) {
+          const chart = echarts.init(ref);
+          const option = {
+            grid: {
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0
+            },
+            xAxis: {
+              type: "category",
+              show: false,
+              data: ["1", "2", "3", "4", "5", "6", "7"]
+            },
+            yAxis: {
+              type: "value",
+              show: false
+            },
+            series: [
+              {
+                type: "line",
+                smooth: true,
+                data: dataSeries[index],
+                showSymbol: false,
+                lineStyle: {
+                  width: 2,
+                  color: index === 0 ? "#15e1fd" : index === 1 ? "#91CC75" : "#FAC858"
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: index === 0 ? "rgba(21, 225, 253, 0.3)" : index === 1 ? "rgba(145, 204, 117, 0.3)" : "rgba(250, 200, 88, 0.3)"
+                      },
+                      {
+                        offset: 1,
+                        color: index === 0 ? "rgba(21, 225, 253, 0)" : index === 1 ? "rgba(145, 204, 117, 0)" : "rgba(250, 200, 88, 0)"
+                      }
+                    ]
+                  }
+                }
+              }
+            ]
+          };
+          chart.setOption(option);
+          this.miniCharts.push(chart);
+        }
+      });
+    },
+    // 更新关键指标
+    updateKeyIndicators() {
+      const dataMap = {
+        0: {
+          energySavingRate: 25.8,
+          totalSaving: 68500,
+          carbonReduction: 39.2,
+          carbonEmission: 112.5,
+          totalElectricity: 265000,
+          totalWaterSupply: 125000,
+          deviceCount: 22
+        },
+        1: {
+          energySavingRate: 26.5,
+          totalSaving: 274000,
+          carbonReduction: 157.0,
+          carbonEmission: 450.0,
+          totalElectricity: 1060000,
+          totalWaterSupply: 500000,
+          deviceCount: 22
+        },
+        2: {
+          energySavingRate: 24.2,
+          totalSaving: 6580000,
+          carbonReduction: 3750.5,
+          carbonEmission: 10750.0,
+          totalElectricity: 7950000,
+          totalWaterSupply: 3750000,
+          deviceCount: 22
+        },
+        3: {
+          energySavingRate: 25.3,
+          totalSaving: 95800,
+          carbonReduction: 54.9,
+          carbonEmission: 157.2,
+          totalElectricity: 370000,
+          totalWaterSupply: 175000,
+          deviceCount: 22
+        }
+      };
+
+      this.keyIndicators = { ...dataMap[this.activeTimeTab] };
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.energyTrendChart) this.energyTrendChart.resize();
+      if (this.waterEnergyChart) this.waterEnergyChart.resize();
+      if (this.zoneComparisonChart) this.zoneComparisonChart.resize();
+      this.miniCharts.forEach(chart => chart && chart.resize());
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.water-pump-home {
+  padding: 0.16rem;
+}
+
+.basic-info {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.2rem;
+  gap: 0.15rem;
+
+  .info-item {
+    flex: 1;
+    min-width: 2rem;
+    padding: 0.15rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+
+    .info-label {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+      margin-bottom: 0.08rem;
+    }
+
+    .info-value {
+      font-size: 0.18rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+}
+
+.time-tabs {
+  display: flex;
+  gap: 0.08rem;
+
+  .time-tab {
+    padding: 0.05rem 0.15rem;
+    font-size: 0.13rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.key-indicators {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.2rem;
+  gap: 0.15rem;
+
+  .indicator-item {
+    flex: 1;
+    min-width: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .indicator-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+
+      .icon-text {
+        font-size: 0.2rem;
+        color: #ffffff;
+      }
+    }
+
+    .indicator-content {
+      flex: 1;
+
+      .indicator-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .indicator-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.zone-status {
+  padding: 0.2rem;
+
+  .zone-section {
+    margin-bottom: 0.2rem;
+
+    .zone-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.15rem;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      .zone-icon {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.12rem;
+
+        .zone-icon-text {
+          font-size: 0.24rem;
+        }
+      }
+
+      .zone-info {
+        flex: 1;
+
+        .zone-name {
+          font-size: 0.15rem;
+          color: #ffffff;
+          font-weight: bold;
+          margin-bottom: 0.03rem;
+        }
+
+        .zone-desc {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.6;
+        }
+      }
+
+      .zone-badge {
+        padding: 0.04rem 0.12rem;
+        border-radius: 0.04rem;
+        font-size: 0.11rem;
+        color: #ffffff;
+
+        &.normal {
+          background: rgba(145, 204, 117, 0.3);
+          color: #91CC75;
+          border: 1px solid rgba(145, 204, 117, 0.5);
+        }
+
+        &.warning {
+          background: rgba(250, 200, 88, 0.3);
+          color: #FAC858;
+          border: 1px solid rgba(250, 200, 88, 0.5);
+        }
+
+        &.danger {
+          background: rgba(238, 102, 102, 0.3);
+          color: #EE6666;
+          border: 1px solid rgba(238, 102, 102, 0.5);
+        }
+      }
+    }
+  }
+
+  .pump-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+    gap: 0.12rem;
+  }
+
+  .pump-card {
+    padding: 0.15rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+
+    .pump-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.1rem;
+
+      .pump-name {
+        font-size: 0.14rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+
+      .pump-status {
+        padding: 0.04rem 0.1rem;
+        border-radius: 0.04rem;
+        font-size: 0.11rem;
+        color: #ffffff;
+
+        &.running {
+          background: rgba(145, 204, 117, 0.3);
+          color: #91CC75;
+        }
+
+        &.stopped {
+          background: rgba(238, 102, 102, 0.3);
+          color: #EE6666;
+        }
+
+        &.standby {
+          background: rgba(250, 200, 88, 0.3);
+          color: #FAC858;
+        }
+      }
+    }
+
+    .pump-params {
+      margin-bottom: 0.12rem;
+
+      .param-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 0.06rem;
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.8;
+
+        .param-label {
+          opacity: 0.7;
+        }
+
+        .param-value {
+          color: #ffffff;
+          opacity: 0.9;
+
+          &.highlight {
+            color: #15e1fd;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .pump-chart-mini {
+      width: 100%;
+      height: 0.6rem;
+    }
+  }
+}
+
+.charts-section {
+  margin-top: 0.16rem;
+
+  .chart-row {
+    display: flex;
+    gap: 0.16rem;
+    margin-bottom: 0.16rem;
+
+    .chart-card {
+      flex: 1;
+    }
+  }
+
+  .full-width {
+    width: 100%;
+  }
+}
+
+.time-switch {
+  display: flex;
+  gap: 0.08rem;
+
+  .switch-item {
+    padding: 0.05rem 0.2rem;
+    font-size: 0.13rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.chart-container {
+  width: 100%;
+  height: 2.8rem;
+}
+
+.operation-status {
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.2rem;
+  flex-wrap: wrap;
+
+  .status-card {
+    flex: 1;
+    min-width: 2.5rem;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .status-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.15rem;
+
+      .status-dot {
+        width: 0.08rem;
+        height: 0.08rem;
+        border-radius: 50%;
+        margin-right: 0.1rem;
+
+        &.online {
+          background: #91CC75;
+        }
+
+        &.water {
+          background: #15e1fd;
+        }
+
+        &.energy {
+          background: #FAC858;
+        }
+
+        &.good {
+          background: #91CC75;
+        }
+
+        &.warning {
+          background: #FAC858;
+        }
+
+        &.danger {
+          background: #EE6666;
+        }
+      }
+
+      .status-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.8;
+      }
+    }
+
+    .status-value {
+      font-size: 0.32rem;
+      color: #15e1fd;
+      font-weight: bold;
+      margin-bottom: 0.1rem;
+
+      &.good {
+        color: #91CC75;
+      }
+
+      &.warning {
+        color: #FAC858;
+      }
+
+      &.danger {
+        color: #EE6666;
+      }
+    }
+
+    .status-chart-mini {
+      width: 100%;
+      height: 0.5rem;
+    }
+
+    .status-indicator {
+      .indicator-bar {
+        width: 100%;
+        height: 0.08rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 0.04rem;
+        overflow: hidden;
+
+        .indicator-fill {
+          height: 100%;
+          border-radius: 0.04rem;
+          transition: all 0.3s;
+
+          &.good {
+            background: linear-gradient(90deg, #91CC75, #66BB6A);
+          }
+
+          &.warning {
+            background: linear-gradient(90deg, #FAC858, #FFB300);
+          }
+
+          &.danger {
+            background: linear-gradient(90deg, #EE6666, #E53935);
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+  gap: 0.12rem;
+  padding: 0.2rem;
+
+  .device-status-item {
+    display: flex;
+    align-items: center;
+    padding: 0.15rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.06rem;
+
+    .device-status-icon {
+      width: 0.08rem;
+      height: 0.08rem;
+      border-radius: 50%;
+      margin-right: 0.12rem;
+
+      &.running {
+        background: #91CC75;
+        box-shadow: 0 0 0.1rem rgba(145, 204, 117, 0.5);
+      }
+
+      &.stopped {
+        background: #EE6666;
+      }
+
+      &.standby {
+        background: #FAC858;
+      }
+    }
+
+    .device-info {
+      flex: 1;
+
+      .device-name {
+        font-size: 0.14rem;
+        color: #ffffff;
+        margin-bottom: 0.03rem;
+      }
+
+      .device-state {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.6;
+      }
+    }
+
+    .device-value {
+      font-size: 0.18rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .basic-info {
+    .info-item {
+      min-width: 1.5rem;
+    }
+  }
+
+  .key-indicators {
+    .indicator-item {
+      min-width: 2rem;
+    }
+  }
+
+  .zone-status {
+    .pump-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .operation-status {
+    .status-card {
+      min-width: 2rem;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .basic-info {
+    .info-item {
+      min-width: 1rem;
+    }
+  }
+
+  .key-indicators {
+    .indicator-item {
+      min-width: 1.5rem;
+    }
+  }
+
+  .chart-row {
+    flex-direction: column;
+  }
+
+  .zone-status {
+    .pump-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .operation-status {
+    .status-card {
+      min-width: 1.5rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/newLifeWater/reportManage/base/index.vue b/src/views/newLifeWater/reportManage/base/index.vue
new file mode 100644
index 0000000..765c0d9
--- /dev/null
+++ b/src/views/newLifeWater/reportManage/base/index.vue
@@ -0,0 +1,1425 @@
+<template>
+  <div class="base-report">
+    <!-- 查询条件 -->
+    <div class="filter-section">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>统计周期</label>
+          <el-select v-model="reportForm.periodType" class="custom-select" @change="handlePeriodChange">
+            <el-option label="日" value="day"></el-option>
+            <el-option label="月" value="month"></el-option>
+            <el-option label="季" value="quarter"></el-option>
+            <el-option label="年" value="year"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>开始时间</label>
+          <el-date-picker
+            v-model="reportForm.startTime"
+            :type="datePickerType"
+            placeholder="选择开始时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>结束时间</label>
+          <el-date-picker
+            v-model="reportForm.endTime"
+            :type="datePickerType"
+            placeholder="选择结束时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>项目名称</label>
+          <el-select v-model="reportForm.projectId" placeholder="全部项目" clearable class="custom-select">
+            <el-option label="全部项目" value=""></el-option>
+            <el-option label="生活水泵系统项目A" value="WP001"></el-option>
+            <el-option label="生活水泵系统项目B" value="WP002"></el-option>
+            <el-option label="生活水泵系统项目C" value="WP003"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-actions">
+          <el-button type="primary" @click="generateReport" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
+              <path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
+              <path d="M800 352H592v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v128c0 17.7 14.3 32 32 32h240c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32v-64c0-52.9-43.1-96-96-96z" fill="currentColor"/>
+              <path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
+            </svg>
+            生成报表
+          </el-button>
+          <el-button type="success" @click="exportToExcel" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+              <path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            导出Excel
+          </el-button>
+          <el-button type="warning" @click="exportToPDF" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+            </svg>
+            导出PDF
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报表内容 -->
+    <div class="report-content" v-if="reportData">
+      <!-- 项目基础信息 -->
+      <div class="info-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            水泵项目基础信息
+          </div>
+        </div>
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="info-label">项目编码</span>
+            <span class="info-value">{{ reportData.projectInfo.projectCode }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目名称</span>
+            <span class="info-value">{{ reportData.projectInfo.projectName }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目主体</span>
+            <span class="info-value">{{ reportData.projectInfo.projectOwner }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目地址</span>
+            <span class="info-value">{{ reportData.projectInfo.address }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">安装日期</span>
+            <span class="info-value">{{ reportData.projectInfo.installDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">投产日期</span>
+            <span class="info-value">{{ reportData.projectInfo.productionDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">合同金额</span>
+            <span class="info-value">{{ reportData.projectInfo.contractAmount }}万元</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">建筑面积</span>
+            <span class="info-value">{{ reportData.projectInfo.buildingArea }}m²</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设计供水能力</span>
+            <span class="info-value">{{ reportData.projectInfo.designWaterSupplyCapacity }}m³/h</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">服务层数量</span>
+            <span class="info-value">{{ reportData.projectInfo.servedFloors }}层</span>
+          </div>
+          <div class="info-item full-width">
+            <span class="info-label">项目描述</span>
+            <span class="info-value">{{ reportData.projectInfo.description }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 水泵设备统计 -->
+      <div class="device-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            水泵设备统计
+          </div>
+        </div>
+        <div class="device-grid">
+          <div class="device-card high-zone">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.highZonePump }}</div>
+              <div class="device-label">高区水泵</div>
+            </div>
+          </div>
+          <div class="device-card middle-zone">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.middleZonePump }}</div>
+              <div class="device-label">中区水泵</div>
+            </div>
+          </div>
+          <div class="device-card low-zone">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.lowZonePump }}</div>
+              <div class="device-label">低区水泵</div>
+            </div>
+          </div>
+          <div class="device-card fire-zone">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.fireZonePump }}</div>
+              <div class="device-label">消防水泵</div>
+            </div>
+          </div>
+          <div class="device-card gateway">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.gateway }}</div>
+              <div class="device-label">网关</div>
+            </div>
+          </div>
+          <div class="device-card meter">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.meter }}</div>
+              <div class="device-label">电表</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能改造相关数据 -->
+      <div class="retrofit-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能改造相关数据
+          </div>
+        </div>
+        <div class="retrofit-grid">
+          <div class="retrofit-item">
+            <div class="retrofit-label">改造前日能耗</div>
+            <div class="retrofit-value">{{ reportData.retrofitData.preRetrofitDailyEnergy }}</div>
+            <div class="retrofit-unit">kWh/天</div>
+          </div>
+          <div class="retrofit-item">
+            <div class="retrofit-label">周期内改造前用电量</div>
+            <div class="retrofit-value">{{ reportData.retrofitData.periodPreRetrofitEnergy }}</div>
+            <div class="retrofit-unit">kWh</div>
+          </div>
+          <div class="retrofit-item">
+            <div class="retrofit-label">周期内改造后用电量</div>
+            <div class="retrofit-value">{{ reportData.retrofitData.periodPostRetrofitEnergy }}</div>
+            <div class="retrofit-unit">kWh</div>
+          </div>
+          <div class="retrofit-item highlight">
+            <div class="retrofit-label">周期内节电量</div>
+            <div class="retrofit-value">{{ reportData.retrofitData.periodEnergySaving }}</div>
+            <div class="retrofit-unit">kWh</div>
+            <div class="retrofit-rate">节能率 {{ reportData.retrofitData.savingRate }}%</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 经济收益数据 -->
+      <div class="economic-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            经济收益数据
+          </div>
+        </div>
+        <div class="economic-grid">
+          <div class="economic-item">
+            <div class="economic-label">电单价</div>
+            <div class="economic-value">¥{{ reportData.economicData.electricityPrice }}</div>
+            <div class="economic-unit">元/kWh</div>
+          </div>
+          <div class="economic-item highlight">
+            <div class="economic-label">周期内节能收益</div>
+            <div class="economic-value">¥{{ reportData.economicData.periodSavingBenefit }}</div>
+            <div class="economic-unit">万元</div>
+            <div class="economic-trend" :class="reportData.economicData.trend >= 0 ? 'up' : 'down'">
+              <svg v-if="reportData.economicData.trend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              {{ reportData.economicData.trend >= 0 ? '+' : '' }}{{ reportData.economicData.trend }}%
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能收益卡片 -->
+      <div class="saving-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能收益累计
+          </div>
+        </div>
+        <div class="saving-grid">
+          <div class="saving-card energy-rate">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.energyRate }}%</div>
+              <div class="saving-label">综合节能率</div>
+              <div class="saving-trend" :class="reportData.saving.energyRateTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.energyRateTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.energyRateTrend >= 0 ? '+' : '' }}{{ reportData.saving.energyRateTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card money">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.savingMoney }}万元</div>
+              <div class="saving-label">累计节电金额</div>
+              <div class="saving-trend" :class="reportData.saving.savingMoneyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.savingMoneyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.savingMoneyTrend >= 0 ? '+' : '' }}{{ reportData.saving.savingMoneyTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card carbon">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.carbonReduction }}吨</div>
+              <div class="saving-label">累计碳减排量</div>
+              <div class="saving-trend" :class="reportData.saving.carbonReductionTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.carbonReductionTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.carbonReductionTrend >= 0 ? '+' : '' }}{{ reportData.saving.carbonReductionTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card total-energy">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.totalEnergy }}万kWh</div>
+              <div class="saving-label">累计节电量</div>
+              <div class="saving-trend" :class="reportData.saving.totalEnergyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.totalEnergyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.totalEnergyTrend >= 0 ? '+' : '' }}{{ reportData.saving.totalEnergyTrend }}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能趋势图表 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能趋势分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="savingChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 设备详细清单 -->
+      <div class="table-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            设备详细清单
+          </div>
+        </div>
+        <div class="table-container">
+          <table class="device-detail-table">
+            <thead>
+              <tr>
+                <th>设备编号</th>
+                <th>设备名称</th>
+                <th>设备类型</th>
+                <th>规格型号</th>
+                <th>额定功率</th>
+                <th>数量</th>
+                <th>安装日期</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in reportData.deviceDetail" :key="index">
+                <td>{{ item.deviceCode }}</td>
+                <td>{{ item.deviceName }}</td>
+                <td>{{ item.deviceType }}</td>
+                <td>{{ item.model }}</td>
+                <td>{{ item.ratedPower }} kW</td>
+                <td>{{ item.quantity }}</td>
+                <td>{{ item.installDate }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div class="empty-state" v-if="!reportData">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+        <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+      </svg>
+      <div class="empty-text">请选择时间范围并点击"生成报表"按钮</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "BaseReport",
+  data() {
+    return {
+      reportForm: {
+        periodType: "month",
+        startTime: "",
+        endTime: "",
+        projectId: ""
+      },
+      reportData: null,
+      savingChart: null
+    };
+  },
+  computed: {
+    datePickerType() {
+      const map = {
+        day: "date",
+        month: "month",
+        quarter: "month",
+        year: "year"
+      };
+      return map[this.reportForm.periodType];
+    }
+  },
+  mounted() {
+    this.initDefaultDate();
+    this.$nextTick(() => {
+      this.generateReport();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    initDefaultDate() {
+      const now = new Date();
+      const end = new Date(now);
+      const start = new Date(now);
+      
+      if (this.reportForm.periodType === "day") {
+        start.setDate(start.getDate() - 30);
+        this.reportForm.startTime = start.toISOString().slice(0, 10);
+        this.reportForm.endTime = end.toISOString().slice(0, 10);
+      } else if (this.reportForm.periodType === "month") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else if (this.reportForm.periodType === "quarter") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else {
+        start.setFullYear(start.getFullYear() - 3);
+        this.reportForm.startTime = start.toISOString().slice(0, 4);
+        this.reportForm.endTime = end.toISOString().slice(0, 4);
+      }
+    },
+    handlePeriodChange() {
+      this.initDefaultDate();
+    },
+    generateReport() {
+      if (!this.reportForm.startTime || !this.reportForm.endTime) {
+        this.$message.warning("请选择时间范围");
+        return;
+      }
+
+      const startDate = new Date(this.reportForm.startTime);
+      const endDate = new Date(this.reportForm.endTime);
+      
+      if (startDate > endDate) {
+        this.$message.warning("开始时间不能大于结束时间");
+        return;
+      }
+
+      this.reportData = {
+        projectInfo: {
+          projectCode: "PROJ-2024-001",
+          projectName: "生活水泵系统项目A",
+          projectOwner: "某某科技有限公司",
+          address: "广东省深圳市南山区科技园南区",
+          installDate: "2023-06-15",
+          productionDate: "2023-08-01",
+          contractAmount: 1250,
+          buildingArea: 85000,
+          designWaterSupplyCapacity: "450",
+          servedFloors: 28,
+          description: "本项目为某科技园区生活水泵系统节能改造项目，涵盖3栋写字楼和2栋研发楼，采用高效变频水泵系统，通过智能控制系统实现整体能效提升。"
+        },
+        deviceStats: {
+          highZonePump: 4,
+          middleZonePump: 4,
+          lowZonePump: 6,
+          fireZonePump: 2,
+          gateway: 3,
+          meter: 8
+        },
+        retrofitData: {
+          preRetrofitDailyEnergy: 1250,
+          periodPreRetrofitEnergy: 45000,
+          periodPostRetrofitEnergy: 32175,
+          periodEnergySaving: 12825,
+          savingRate: 28.5
+        },
+        economicData: {
+          electricityPrice: 0.95,
+          periodSavingBenefit: 121.83,
+          trend: 12.5
+        },
+        saving: {
+          energyRate: 28.5,
+          energyRateTrend: 5.2,
+          savingMoney: 156.8,
+          savingMoneyTrend: 8.5,
+          carbonReduction: 892.5,
+          carbonReductionTrend: 7.8,
+          totalEnergy: 185.6,
+          totalEnergyTrend: 8.5
+        },
+        deviceDetail: [
+          { deviceCode: "WP-H-001", deviceName: "高区1#水泵", deviceType: "高区水泵", model: "SBP-45-30", ratedPower: 45, quantity: 2, installDate: "2023-06-15" },
+          { deviceCode: "WP-H-002", deviceName: "高区2#水泵", deviceType: "高区水泵", model: "SBP-45-30", ratedPower: 45, quantity: 2, installDate: "2023-06-15" },
+          { deviceCode: "WP-M-001", deviceName: "中区1#水泵", deviceType: "中区水泵", model: "SBP-37-25", ratedPower: 37, quantity: 2, installDate: "2023-06-18" },
+          { deviceCode: "WP-M-002", deviceName: "中区2#水泵", deviceType: "中区水泵", model: "SBP-37-25", ratedPower: 37, quantity: 2, installDate: "2023-06-18" },
+          { deviceCode: "WP-L-001", deviceName: "低区1#水泵", deviceType: "低区水泵", model: "SBP-22-18", ratedPower: 22, quantity: 3, installDate: "2023-06-20" },
+          { deviceCode: "WP-L-002", deviceName: "低区2#水泵", deviceType: "低区水泵", model: "SBP-22-18", ratedPower: 22, quantity: 3, installDate: "2023-06-20" },
+          { deviceCode: "WP-F-001", deviceName: "消防1#水泵", deviceType: "消防水泵", model: "SBP-55-40", ratedPower: 55, quantity: 2, installDate: "2023-06-22" },
+          { deviceCode: "GW-001", deviceName: "生活水泵网关", deviceType: "网关", model: "GW-1000", ratedPower: 20, quantity: 3, installDate: "2023-06-25" },
+          { deviceCode: "EM-001", deviceName: "水泵电表1-4", deviceType: "电表", model: "EM-500", ratedPower: 0.1, quantity: 4, installDate: "2023-06-26" },
+          { deviceCode: "EM-002", deviceName: "水泵电表5-8", deviceType: "电表", model: "EM-500", ratedPower: 0.1, quantity: 4, installDate: "2023-06-26" }
+        ],
+        savingTrend: this.generateSavingTrend()
+      };
+
+      this.$nextTick(() => {
+        this.initCharts();
+      });
+    },
+    generateSavingTrend() {
+      const trend = [];
+      const now = new Date();
+      const months = 12;
+      
+      for (let i = months; i >= 0; i--) {
+        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        
+        trend.push({
+          period: `${year}-${month}`,
+          energyRate: (25 + Math.random() * 5).toFixed(1),
+          savingMoney: (100 + Math.random() * 80).toFixed(1),
+          carbonReduction: (500 + Math.random() * 500).toFixed(1),
+          totalEnergy: (150 + Math.random() * 50).toFixed(1)
+        });
+      }
+      
+      return trend;
+    },
+    initCharts() {
+      this.initSavingChart();
+    },
+    initSavingChart() {
+      if (!this.$refs.savingChart) return;
+      
+      if (this.savingChart) {
+        this.savingChart.dispose();
+      }
+      
+      this.savingChart = echarts.init(this.$refs.savingChart);
+      
+      const periods = this.reportData.savingTrend.map(item => item.period);
+      const energyRateData = this.reportData.savingTrend.map(item => item.energyRate);
+      const savingMoneyData = this.reportData.savingTrend.map(item => item.savingMoney);
+      const carbonData = this.reportData.savingTrend.map(item => item.carbonReduction);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["节能率", "节电金额", "碳减排量"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: periods,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff",
+            rotate: 45
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "节能率 (%)",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "left",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.1)"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "金额(万元)/减排量(吨)",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "节能率",
+            type: "line",
+            smooth: true,
+            data: energyRateData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "节电金额",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: savingMoneyData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "碳减排量",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: carbonData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(84, 112, 198, 0.5)" },
+                { offset: 1, color: "rgba(84, 112, 198, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.savingChart.setOption(option);
+    },
+    exportToExcel() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为Excel格式");
+    },
+    exportToPDF() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为PDF格式");
+    },
+    handleResize() {
+      if (this.savingChart) this.savingChart.resize();
+    },
+    destroyCharts() {
+      if (this.savingChart) {
+        this.savingChart.dispose();
+        this.savingChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.base-report {
+  padding: 0.16rem;
+  min-height: calc(100vh - 0.32rem);
+}
+
+.filter-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .filter-row {
+    display: flex;
+    gap: 0.15rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .filter-actions {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-btn {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+
+        &.el-button--primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+          }
+        }
+
+        &.el-button--success {
+          background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+          }
+        }
+
+        &.el-button--warning {
+          background: linear-gradient(135deg, #FAC858 0%, #FFA726 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
+          }
+        }
+
+        svg {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+      }
+    }
+  }
+}
+
+.report-content {
+  .info-section,
+  .device-section,
+  .retrofit-section,
+  .economic-section,
+  .saving-section,
+  .chart-section,
+  .table-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+
+      .section-title {
+        font-size: 0.16rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+
+        svg {
+          width: 0.18rem;
+          height: 0.18rem;
+          fill: #15e1fd;
+        }
+      }
+    }
+  }
+
+  .info-section {
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.15rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.08);
+          transform: translateX(0.02rem);
+        }
+
+        &.full-width {
+          grid-column: 1 / -1;
+        }
+
+        .info-label {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+        }
+
+        .info-value {
+          font-size: 0.14rem;
+          color: #15e1fd;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .device-section {
+    .device-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+      gap: 0.15rem;
+
+      .device-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.high-zone {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.middle-zone {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.low-zone {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.fire-zone {
+          background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        &.gateway {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        &.meter {
+          background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, rgba(255, 105, 180, 0.2) 100%);
+          border: 1px solid rgba(238, 130, 238, 0.3);
+        }
+
+        .device-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .device-content {
+          flex: 1;
+
+          .device-count {
+            font-size: 0.28rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .device-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+  }
+
+  .retrofit-section {
+    .retrofit-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+      gap: 0.15rem;
+
+      .retrofit-item {
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+        text-align: center;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        &.highlight {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+
+          &:hover {
+            background: linear-gradient(135deg, rgba(145, 204, 117, 0.3) 0%, rgba(102, 187, 106, 0.3) 100%);
+          }
+        }
+
+        .retrofit-label {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.1rem;
+        }
+
+        .retrofit-value {
+          font-size: 0.32rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.05rem;
+        }
+
+        .retrofit-unit {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.5;
+          margin-bottom: 0.08rem;
+        }
+
+        .retrofit-rate {
+          font-size: 0.12rem;
+          color: #91CC75;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .economic-section {
+    .economic-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+      gap: 0.15rem;
+
+      .economic-item {
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+        text-align: center;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        &.highlight {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+
+          &:hover {
+            background: linear-gradient(135deg, rgba(250, 200, 88, 0.3) 0%, rgba(255, 179, 0, 0.3) 100%);
+          }
+        }
+
+        .economic-label {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.1rem;
+        }
+
+        .economic-value {
+          font-size: 0.32rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.05rem;
+        }
+
+        .economic-unit {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.5;
+          margin-bottom: 0.08rem;
+        }
+
+        .economic-trend {
+          display: inline-flex;
+          align-items: center;
+          font-size: 0.12rem;
+          font-weight: 500;
+
+          svg {
+            width: 0.12rem;
+            height: 0.12rem;
+            margin-right: 0.03rem;
+          }
+
+          &.up {
+            color: #91CC75;
+          }
+
+          &.down {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+  }
+
+  .saving-section {
+    .saving-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .saving-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.energy-rate {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.money {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.carbon {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.total-energy {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        .saving-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .saving-content {
+          flex: 1;
+
+          .saving-value {
+            font-size: 0.22rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-trend {
+            display: flex;
+            align-items: center;
+            font-size: 0.12rem;
+            font-weight: 500;
+
+            svg {
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.03rem;
+            }
+
+            &.up {
+              color: #91CC75;
+            }
+
+            &.down {
+              color: #EE6666;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chart-section {
+    .chart-container {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0.04rem;
+      padding: 0.1rem;
+
+      .chart {
+        width: 100%;
+        height: 4.5rem;
+      }
+    }
+  }
+
+  .table-section {
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .device-detail-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 10rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.14rem 0.12rem;
+              text-align: left;
+              font-size: 0.14rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.14rem 0.12rem;
+              font-size: 0.13rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #ffffff;
+  opacity: 0.5;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: #ffffff;
+    margin-bottom: 0.2rem;
+  }
+
+  .empty-text {
+    font-size: 0.16rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .filter-section {
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+
+      .filter-item {
+        width: 100%;
+      }
+
+      .filter-actions {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid,
+  .saving-grid,
+  .retrofit-grid,
+  .economic-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newLighting/alarmManage/index.vue b/src/views/newLighting/alarmManage/index.vue
new file mode 100644
index 0000000..d8d503b
--- /dev/null
+++ b/src/views/newLighting/alarmManage/index.vue
@@ -0,0 +1,1748 @@
+<template>
+  <div class="alarm-manage">
+    <!-- 告警统计卡片 -->
+    <div class="alarm-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.total }}</div>
+          <div class="stat-label">告警总数</div>
+        </div>
+      </div>
+      <div class="stat-card pending">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.pending }}</div>
+          <div class="stat-label">待处理</div>
+        </div>
+      </div>
+      <div class="stat-card processing">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.processing }}</div>
+          <div class="stat-label">处理中</div>
+        </div>
+      </div>
+      <div class="stat-card resolved">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ alarmStats.resolved }}</div>
+          <div class="stat-label">已解决</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工单系统对接配置 -->
+    <div class="workorder-config">
+      <div class="config-header">
+        <div class="config-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+          </svg>
+          工单系统对接配置
+        </div>
+        <el-switch
+          v-model="workOrderConfig.enabled"
+          active-text="已启用"
+          inactive-text="已禁用"
+          class="custom-switch"
+        ></el-switch>
+      </div>
+
+    <div class="config-content" v-if="workOrderConfig.enabled">
+      <div class="config-row">
+        <div class="config-item">
+          <label>工单系统类型</label>
+          <el-select v-model="workOrderConfig.systemType" class="custom-select">
+            <el-option label="业主工单系统A" value="systemA"></el-option>
+            <el-option label="业主工单系统B" value="systemB"></el-option>
+            <el-option label="第三方工单平台" value="thirdParty"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>API地址</label>
+          <el-input v-model="workOrderConfig.apiUrl" placeholder="https://api.workorder.com" class="custom-input"></el-input>
+        </div>
+        <div class="config-item">
+          <label>API密钥</label>
+          <el-input v-model="workOrderConfig.apiKey" placeholder="请输入API密钥" show-password class="custom-input"></el-input>
+        </div>
+      </div>
+      <div class="config-row">
+        <div class="config-item">
+          <label>自动推送</label>
+          <el-switch v-model="workOrderConfig.autoPush" class="custom-switch"></el-switch>
+        </div>
+        <div class="config-item">
+          <label>推送告警等级</label>
+          <el-select v-model="workOrderConfig.pushLevel" class="custom-select" multiple>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="config-item">
+          <label>工单优先级映射</label>
+          <el-select v-model="workOrderConfig.priorityMapping" class="custom-select">
+            <el-option label="告警等级=工单优先级" value="direct"></el-option>
+            <el-option label="根据规则映射" value="rule"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="config-actions">
+        <el-button type="primary" @click="testConnection" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          测试连接
+        </el-button>
+        <el-button type="success" @click="saveConfig" class="custom-btn">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
+          </svg>
+          保存配置
+        </el-button>
+      </div>
+    </div>
+    </div>
+
+    <!-- 告警筛选 -->
+    <div class="alarm-filter">
+      <div class="filter-group">
+        <div class="filter-item">
+          <label>告警级别</label>
+          <el-select v-model="filterForm.level" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="警告" value="warning"></el-option>
+            <el-option label="信息" value="info"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警状态</label>
+          <el-select v-model="filterForm.status" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待处理" value="pending"></el-option>
+            <el-option label="处理中" value="processing"></el-option>
+            <el-option label="已解决" value="resolved"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>工单状态</label>
+          <el-select v-model="filterForm.workOrderStatus" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="未创建" value="notCreated"></el-option>
+            <el-option label="待派发" value="pending"></el-option>
+            <el-option label="进行中" value="inProgress"></el-option>
+            <el-option label="已完成" value="completed"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>告警时间</label>
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="filter-actions">
+        <el-input
+          v-model="filterForm.keyword"
+          placeholder="搜索告警标题/设备/描述"
+          clearable
+          class="search-input custom-input"
+        ></el-input>
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
+      </div>
+    </div>
+
+    <!-- 告警列表 -->
+    <div class="alarm-list">
+      <div class="list-header">
+        <div class="list-title">告警列表</div>
+        <div class="list-info">
+          共 {{ filteredAlarms.length }} 条告警
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="alarm-table">
+          <thead>
+            <tr>
+              <th>告警ID</th>
+              <th>告警级别</th>
+              <th>告警标题</th>
+              <th>设备名称</th>
+              <th>告警时间</th>
+              <th>告警状态</th>
+              <th>工单编号</th>
+              <th>工单状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="alarm in paginatedAlarms" :key="alarm.id">
+              <td>{{ alarm.id }}</td>
+              <td>
+                <span class="level-badge" :class="alarm.level">
+                  {{ getLevelText(alarm.level) }}
+                </span>
+              </td>
+              <td class="title-cell">{{ alarm.title }}</td>
+              <td>{{ alarm.deviceName }}</td>
+              <td>{{ alarm.alarmTime }}</td>
+              <td>
+                <span class="status-badge" :class="alarm.status">
+                  {{ getStatusText(alarm.status) }}
+                </span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderId" class="workorder-link" @click="viewWorkOrder(alarm)">
+                  {{ alarm.workOrderId }}
+                </span>
+                <span v-else class="no-workorder">未创建</span>
+              </td>
+              <td>
+                <span v-if="alarm.workOrderStatus" class="workorder-status" :class="alarm.workOrderStatus">
+                  {{ getWorkOrderStatusText(alarm.workOrderStatus) }}
+                </span>
+                <span v-else>-</span>
+              </td>
+              <td class="action-cell">
+                <div class="action-buttons">
+                  <el-button
+                    v-if="!alarm.workOrderId"
+                    type="primary"
+                    size="small"
+                    @click="createWorkOrder(alarm)"
+                    class="action-btn"
+                  >
+                    创建工单
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="viewAlarmDetail(alarm)"
+                    class="action-btn"
+                  >
+                    详情
+                  </el-button>
+                  <el-dropdown @command="(cmd) => handleAlarmCommand(cmd, alarm)" class="action-dropdown">
+                    <el-button size="small" class="action-btn">
+                      更多
+                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                      </svg>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu class="custom-dropdown-menu">
+                        <el-dropdown-item command="viewWorkOrder" v-if="alarm.workOrderId">查看工单</el-dropdown-item>
+                        <el-dropdown-item command="createWorkOrder" v-if="!alarm.workOrderId">创建工单</el-dropdown-item>
+                        <el-dropdown-item command="resolve" v-if="alarm.status !== 'resolved'" divided>标记已解决</el-dropdown-item>
+                        <el-dropdown-item command="close" v-if="alarm.status !== 'resolved'">关闭告警</el-dropdown-item>
+                        <el-dropdown-item command="reopen" v-if="alarm.status === 'resolved'">重新打开</el-dropdown-item>
+                        <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="filteredAlarms.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 告警详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="告警详情"
+      width="800px"
+      class="custom-dialog"
+    >
+      <div class="detail-content" v-if="selectedAlarm">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">告警ID:</span>
+              <span class="item-value">{{ selectedAlarm.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警级别:</span>
+              <span class="item-value level-badge" :class="selectedAlarm.level">
+                {{ getLevelText(selectedAlarm.level) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警标题:</span>
+              <span class="item-value">{{ selectedAlarm.title }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警状态:</span>
+              <span class="item-value status-badge" :class="selectedAlarm.status">
+                {{ getStatusText(selectedAlarm.status) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedAlarm.deviceName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">告警时间:</span>
+              <span class="item-value">{{ selectedAlarm.alarmTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">告警描述:</span>
+              <span class="item-value">{{ selectedAlarm.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedAlarm.workOrderId">
+          <div class="section-title">关联工单</div>
+          <div class="workorder-info">
+            <div class="info-row">
+              <span class="info-label">工单编号:</span>
+              <span class="info-value workorder-link" @click="viewWorkOrder(selectedAlarm)">
+                {{ selectedAlarm.workOrderId }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单状态:</span>
+              <span class="info-value workorder-status" :class="selectedAlarm.workOrderStatus">
+                {{ getWorkOrderStatusText(selectedAlarm.workOrderStatus) }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单类型:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderType }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">创建时间:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderCreateTime }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">处理人:</span>
+              <span class="item-value">{{ selectedAlarm.workOrderHandler }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">处理记录</div>
+          <div class="process-timeline">
+            <div
+              v-for="(record, index) in selectedAlarm.processRecords"
+              :key="index"
+              class="timeline-item"
+            >
+              <div class="timeline-dot" :class="record.type"></div>
+              <div class="timeline-content">
+                <div class="timeline-title">{{ record.title }}</div>
+                <div class="timeline-time">{{ record.time }}</div>
+                <div class="timeline-desc" v-if="record.description">{{ record.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 创建工单弹窗 -->
+    <el-dialog
+      v-model="workOrderDialogVisible"
+      title="创建工单"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="workOrderForm" :rules="workOrderRules" ref="workOrderFormRef" label-width="100px">
+        <el-form-item label="工单标题" prop="title">
+          <el-input v-model="workOrderForm.title" placeholder="请输入工单标题" class="custom-input"></el-input>
+        </el-form-item>
+        <el-form-item label="工单类型" prop="type">
+          <el-select v-model="workOrderForm.type" class="custom-select">
+            <el-option label="设备故障" value="deviceFault"></el-option>
+            <el-option label="系统异常" value="systemError"></el-option>
+            <el-option label="维护保养" value="maintenance"></el-option>
+            <el-option label="其他" value="other"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-select v-model="workOrderForm.priority" class="custom-select">
+            <el-option label="紧急" value="urgent"></el-option>
+            <el-option label="高" value="high"></el-option>
+            <el-option label="中" value="medium"></el-option>
+            <el-option label="低" value="low"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指派人" prop="assignee">
+          <el-select v-model="workOrderForm.assignee" class="custom-select">
+            <el-option label="张三" value="user1"></el-option>
+            <el-option label="李四" value="user2"></el-option>
+            <el-option label="王五" value="user3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工单描述" prop="description">
+          <el-input
+            v-model="workOrderForm.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入工单描述"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="workOrderDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="submitWorkOrder" class="custom-btn">提交工单</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AlarmManage",
+  data() {
+    return {
+      alarmStats: {
+        total: 156,
+        pending: 12,
+        processing: 28,
+        resolved: 116
+      },
+      workOrderConfig: {
+        enabled: true,
+        systemType: "systemA",
+        apiUrl: "https://api.workorder.example.com",
+        apiKey: "",
+        autoPush: true,
+        pushLevel: ["critical", "warning"],
+        priorityMapping: "direct"
+      },
+      filterForm: {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      alarmList: [],
+      detailDialogVisible: false,
+      workOrderDialogVisible: false,
+      selectedAlarm: null,
+      workOrderForm: {
+        title: "",
+        type: "",
+        priority: "",
+        assignee: "",
+        description: ""
+      },
+      workOrderRules: {
+        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
+        type: [{ required: true, message: "请选择工单类型", trigger: "change" }],
+        priority: [{ required: true, message: "请选择优先级", trigger: "change" }],
+        assignee: [{ required: true, message: "请选择指派人", trigger: "change" }],
+        description: [{ required: true, message: "请输入工单描述", trigger: "blur" }]
+      }
+    };
+  },
+  computed: {
+    filteredAlarms() {
+      let alarms = [...this.alarmList];
+      
+      if (this.filterForm.level) {
+        alarms = alarms.filter(a => a.level === this.filterForm.level);
+      }
+      
+      if (this.filterForm.status) {
+        alarms = alarms.filter(a => a.status === this.filterForm.status);
+      }
+      
+      if (this.filterForm.workOrderStatus) {
+        alarms = alarms.filter(a => a.workOrderStatus === this.filterForm.workOrderStatus);
+      }
+      
+      if (this.filterForm.keyword) {
+        const keyword = this.filterForm.keyword.toLowerCase();
+        alarms = alarms.filter(a => 
+          a.title.toLowerCase().includes(keyword) ||
+          a.deviceName.toLowerCase().includes(keyword) ||
+          a.description.toLowerCase().includes(keyword)
+        );
+      }
+      
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        const [start, end] = this.filterForm.dateRange;
+        alarms = alarms.filter(a => a.alarmTime >= start && a.alarmTime <= end);
+      }
+      
+      return alarms;
+    },
+    paginatedAlarms() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredAlarms.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initAlarmList();
+  },
+  methods: {
+    initAlarmList() {
+      const now = new Date();
+      this.alarmList = [
+        {
+          id: "ALM202403040001",
+          level: "critical",
+          title: "主机过载告警",
+          description: "1号主机负载超过额定值105%，持续运行10分钟",
+          deviceName: "1号主机",
+          deviceCode: "CH-001",
+          alarmTime: "2024-03-04 10:30:25",
+          status: "pending",
+          workOrderId: "WO202403040001",
+          workOrderStatus: "inProgress",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 10:35:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 10:30:25", description: "系统检测到1号主机过载" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 10:30:30", description: "成功创建工单WO202403040001" },
+            { type: "process", title: "工单已派发", time: "2024-03-04 10:45:00", description: "指派给运维人员张三" },
+            { type: "processing", title: "运维人员已接单", time: "2024-03-04 11:00:00", description: "开始处理主机过载问题" }
+          ]
+        },
+        {
+          id: "ALM202403040002",
+          level: "critical",
+          title: "冷冻泵故障告警",
+          description: "4号冷冻泵电机过载保护触发",
+          deviceName: "4号冷冻泵",
+          deviceCode: "CP-004",
+          alarmTime: "2024-03-04 09:15:42",
+          status: "processing",
+          workOrderId: "WO202403040002",
+          workOrderStatus: "pending",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-04 09:20:00",
+          workOrderHandler: "李四",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 09:15:42", description: "检测到冷冻泵电机过载" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-04 09:15:45", description: "成功创建工单WO202403040002" },
+            { type: "pending", title: "等待派发", time: "2024-03-04 09:20:00", description: "工单待派发" }
+          ]
+        },
+        {
+          id: "ALM202403040003",
+          level: "warning",
+          title: "冷却塔风机效率下降",
+          description: "1号冷却塔风机效率低于设计值15%",
+          deviceName: "1号冷却塔",
+          deviceCode: "CT-001",
+          alarmTime: "2024-03-04 08:45:18",
+          status: "pending",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 08:45:18", description: "检测到风机效率下降" }
+          ]
+        },
+        {
+          id: "ALM202403040004",
+          level: "info",
+          title: "温度传感器数据异常",
+          description: "18号温度传感器读数波动较大",
+          deviceName: "18号温度传感器",
+          deviceCode: "TS-018",
+          alarmTime: "2024-03-04 07:30:55",
+          status: "resolved",
+          workOrderId: null,
+          workOrderStatus: null,
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-04 07:30:55", description: "传感器读数异常" },
+            { type: "resolve", title: "告警已解决", time: "2024-03-04 08:15:00", description: "传感器已恢复正常" }
+          ]
+        },
+        {
+          id: "ALM202403030005",
+          level: "critical",
+          title: "主机冷却水流量异常",
+          description: "2号主机冷却水流量低于设定值50%",
+          deviceName: "2号主机",
+          deviceCode: "CH-002",
+          alarmTime: "2024-03-03 16:22:33",
+          status: "resolved",
+          workOrderId: "WO202403030001",
+          workOrderStatus: "completed",
+          workOrderType: "deviceFault",
+          workOrderCreateTime: "2024-03-03 16:30:00",
+          workOrderHandler: "王五",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 16:22:33", description: "检测到冷却水流量异常" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 16:22:40", description: "成功创建工单WO202403030001" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 16:45:00", description: "指派给运维人员王五" },
+            { type: "processing", title: "运维人员已接单", time: "2024-03-03 17:00:00", description: "开始处理冷却水流量问题" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 18:30:00", description: "冷却水流量恢复正常" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 18:35:00", description: "工单已归档" }
+          ]
+        },
+        {
+          id: "ALM202403030006",
+          level: "warning",
+          title: "系统EER值低于阈值",
+          description: "机房整体EER值为4.2，低于设定值5.0",
+          deviceName: "机房系统",
+          deviceCode: "SYS-001",
+          alarmTime: "2024-03-03 14:10:22",
+          status: "resolved",
+          workOrderId: "WO202403030002",
+          workOrderStatus: "completed",
+          workOrderType: "systemError",
+          workOrderCreateTime: "2024-03-03 14:20:00",
+          workOrderHandler: "张三",
+          processRecords: [
+            { type: "create", title: "告警产生", time: "2024-03-03 14:10:22", description: "系统能效低于阈值" },
+            { type: "push", title: "自动推送到工单系统", time: "2024-03-03 14:10:30", description: "成功创建工单WO202403030002" },
+            { type: "process", title: "工单已派发", time: "2024-03-03 14:30:00", description: "指派给运维人员张三" },
+            { type: "resolve", title: "问题已解决", time: "2024-03-03 15:45:00", description: "EER值已恢复到6.5" },
+            { type: "complete", title: "工单已完成", time: "2024-03-03 15:50:00", description: "工单已归档" }
+          ]
+        }
+      ];
+      
+      // 添加更多模拟数据
+      for (let i = 7; i <= 20; i++) {
+        const levels = ["critical", "warning", "info"];
+        const statuses = ["pending", "processing", "resolved"];
+        const workOrderStatuses = ["notCreated", "pending", "inProgress", "completed"];
+        const date = new Date(now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000);
+        
+        this.alarmList.push({
+          id: `ALM2024030${String(i).padStart(5, '0')}`,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          title: ["设备温度异常", "传感器离线", "电流波动异常", "冷却塔效率下降", "泵运行异常"][Math.floor(Math.random() * 5)],
+          description: `告警描述详情 ${i}`,
+          deviceName: `${["主机", "冷冻泵", "冷却泵", "冷却塔", "温度传感器"][Math.floor(Math.random() * 5)]}`,
+          deviceCode: `DEV-${String(i).padStart(3, '0')}`,
+          alarmTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          status: statuses[Math.floor(Math.random() * statuses.length)],
+          workOrderId: Math.random() > 0.5 ? `WO2024030${String(i).padStart(5, '0')}` : null,
+          workOrderStatus: Math.random() > 0.3 ? workOrderStatuses[Math.floor(Math.random() * workOrderStatuses.length)] : null,
+          workOrderType: "deviceFault",
+          workOrderCreateTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          workOrderHandler: ["张三", "李四", "王五"][Math.floor(Math.random() * 3)],
+          processRecords: [
+            { type: "create", title: "告警产生", time: date.toISOString().slice(0, 19).replace('T', ' '), description: "告警已产生" }
+          ]
+        });
+      }
+    },
+    getLevelText(level) {
+      const map = {
+        critical: "严重",
+        warning: "警告",
+        info: "信息"
+      };
+      return map[level] || level;
+    },
+    getStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已解决"
+      };
+      return map[status] || status;
+    },
+    getWorkOrderStatusText(status) {
+      const map = {
+        notCreated: "未创建",
+        pending: "待派发",
+        inProgress: "进行中",
+        completed: "已完成"
+      };
+      return map[status] || status;
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.filterForm = {
+        level: "",
+        status: "",
+        workOrderStatus: "",
+        keyword: "",
+        dateRange: []
+      };
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("告警列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewAlarmDetail(alarm) {
+      this.selectedAlarm = alarm;
+      this.detailDialogVisible = true;
+    },
+    createWorkOrder(alarm) {
+      this.workOrderForm.title = `[告警] ${alarm.title} - ${alarm.deviceName}`;
+      this.workOrderForm.type = "deviceFault";
+      this.workOrderForm.priority = alarm.level === "critical" ? "urgent" : alarm.level === "warning" ? "high" : "medium";
+      this.workOrderForm.assignee = "";
+      this.workOrderForm.description = alarm.description;
+      this.workOrderDialogVisible = true;
+    },
+    submitWorkOrder() {
+      this.$refs.workOrderFormRef.validate((valid) => {
+        if (valid) {
+          const alarm = this.alarmList.find(a => a === this.selectedAlarm);
+          if (alarm) {
+            alarm.workOrderId = `WO${new Date().getTime()}`;
+            alarm.workOrderStatus = "pending";
+            alarm.workOrderType = this.workOrderForm.type;
+            alarm.workOrderCreateTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
+            alarm.workOrderHandler = this.workOrderForm.assignee;
+            alarm.status = "processing";
+            alarm.processRecords.push({
+              type: "push",
+              title: "手动创建工单",
+              time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+              description: `成功创建工单${alarm.workOrderId}`
+            });
+          }
+          this.$message.success("工单创建成功");
+          this.workOrderDialogVisible = false;
+        }
+      });
+    },
+    viewWorkOrder(alarm) {
+      this.$message.info(`查看工单: ${alarm.workOrderId}`);
+    },
+    handleAlarmCommand(command, alarm) {
+      if (command === "resolve") {
+        alarm.status = "resolved";
+        alarm.processRecords.push({
+          type: "resolve",
+          title: "标记为已解决",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户手动标记为已解决"
+        });
+        this.$message.success("已标记为已解决");
+      } else if (command === "close") {
+        alarm.status = "resolved";
+        this.$message.success("告警已关闭");
+      } else if (command === "reopen") {
+        alarm.status = "pending";
+        alarm.processRecords.push({
+          type: "reopen",
+          title: "重新打开告警",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户重新打开告警"
+        });
+        this.$message.success("告警已重新打开");
+      } else if (command === "createWorkOrder") {
+        this.createWorkOrder(alarm);
+      } else if (command === "viewWorkOrder") {
+        this.viewWorkOrder(alarm);
+      } else if (command === "export") {
+        this.$message.success(`导出告警${alarm.id}的报告成功`);
+      }
+    },
+    testConnection() {
+      this.$message.success("工单系统连接测试成功");
+    },
+    saveConfig() {
+      this.$message.success("配置已保存");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.alarm-manage {
+  padding: 0.16rem;
+}
+
+.alarm-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.pending {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.processing {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.resolved {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.workorder-config {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .config-header {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+
+    .config-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+  }
+}
+
+.config-content {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .config-row {
+    display: flex;
+    gap: 0.15rem;
+    margin-bottom: 0.15rem;
+    flex-wrap: wrap;
+
+    .config-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-input {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+
+      ::v-deep .custom-switch {
+        .el-switch__core {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  }
+
+  .config-actions {
+    display: flex;
+    gap: 0.1rem;
+    margin-top: 0.15rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+
+      svg {
+        width: 0.14rem;
+        height: 0.14rem;
+        fill: #ffffff;
+        margin-right: 0.04rem;
+      }
+    }
+  }
+}
+
+.alarm-filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .filter-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 1.8rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    gap: 0.1rem;
+
+    .search-input {
+      width: 2.5rem;
+    }
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.alarm-list {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border-radius: 0.04rem;
+    background: rgba(255, 255, 255, 0.02);
+
+    .alarm-table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 10rem;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+          th {
+            padding: 0.14rem 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: 600;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            white-space: nowrap;
+
+            &:first-child {
+              padding-left: 0.15rem;
+              border-top-left-radius: 0.04rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+              border-top-right-radius: 0.04rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          transition: all 0.3s ease;
+          background: rgba(255, 255, 255, 0.02);
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.04);
+          }
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.1);
+            transform: translateX(0.02rem);
+          }
+
+          td {
+            padding: 0.14rem 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            vertical-align: middle;
+
+            &:first-child {
+              padding-left: 0.15rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+            }
+
+            .level-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.critical {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.warning {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.info {
+                background: linear-gradient(135deg, rgba(84, 112, 198, 0.25) 0%, rgba(103, 126, 234, 0.25) 100%);
+                color: #90CAF9;
+                border: 1px solid rgba(84, 112, 198, 0.4);
+              }
+            }
+
+            .status-badge {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.processing {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.resolved {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+              font-weight: 500;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #91CC75;
+                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.5);
+              }
+            }
+
+            .no-workorder {
+              color: #ffffff;
+              opacity: 0.5;
+              font-style: italic;
+            }
+
+            .workorder-status {
+              display: inline-block;
+              padding: 0.05rem 0.15rem;
+              border-radius: 0.05rem;
+              font-size: 0.12rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.notCreated {
+                background: rgba(255, 255, 255, 0.1);
+                color: #ffffff;
+                opacity: 0.5;
+              }
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.inProgress {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.completed {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .title-cell {
+              max-width: 2.5rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              cursor: pointer;
+              transition: all 0.3s ease;
+
+              &:hover {
+                color: #15e1fd;
+              }
+            }
+
+            .action-buttons {
+              display: flex;
+              align-items: center;
+              gap: 0.08rem;
+              flex-wrap: nowrap;
+
+              .action-btn {
+                padding: 0.05rem 0.12rem;
+                font-size: 0.12rem;
+                border-radius: 0.04rem;
+                font-weight: 500;
+                transition: all 0.3s ease;
+                white-space: nowrap;
+
+                &.el-button--primary {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                  }
+                }
+
+                &.el-button--success {
+                  background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+                  border: none;
+                  color: #ffffff;
+                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.3);
+
+                  &:hover {
+                    background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+                    transform: translateY(-0.02rem);
+                    box-shadow: 0 0.06rem 0.12rem rgba(145, 204, 117, 0.4);
+                  }
+                }
+
+                &.el-button--default {
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+                }
+
+                &:active {
+                  transform: translateY(0);
+                }
+
+                svg {
+                  width: 0.1rem;
+                  height: 0.1rem;
+                  fill: #ffffff;
+                }
+              }
+
+              .action-dropdown {
+                ::v-deep .el-button--small {
+                  padding: 0.05rem 0.1rem;
+                  font-size: 0.12rem;
+                  background: rgba(255, 255, 255, 0.1);
+                  border: 1px solid rgba(255, 255, 255, 0.2);
+                  color: #ffffff;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+
+                  &:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                  }
+
+                  svg {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    fill: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.warning {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.info {
+                background: rgba(84, 112, 198, 0.2);
+                color: #5470C6;
+              }
+            }
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.processing {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.resolved {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .workorder-info {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        padding: 0.15rem;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.1rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .info-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .info-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.workorder-link {
+              color: #15e1fd;
+              cursor: pointer;
+              text-decoration: underline;
+
+              &:hover {
+                color: #91CC75;
+              }
+            }
+
+            &.workorder-status {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.pending {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.inProgress {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.completed {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+          }
+        }
+      }
+
+      .process-timeline {
+        .timeline-item {
+          display: flex;
+          margin-bottom: 0.2rem;
+
+          .timeline-dot {
+            width: 0.1rem;
+            height: 0.1rem;
+            border-radius: 50%;
+            margin-right: 0.15rem;
+            margin-top: 0.03rem;
+
+            &.create {
+              background: #5470C6;
+            }
+
+            &.push {
+              background: #91CC75;
+            }
+
+            &.process,
+            &.processing {
+              background: #FAC858;
+            }
+
+            &.resolve {
+              background: #73C0DE;
+            }
+
+            &.complete {
+              background: #3BA272;
+            }
+
+            &.pending {
+              background: #EE6666;
+            }
+
+            &.reopen {
+              background: #F37336;
+            }
+          }
+
+          .timeline-content {
+            flex: 1;
+
+            .timeline-title {
+              font-size: 0.14rem;
+              color: #ffffff;
+              font-weight: bold;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-time {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.6;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-desc {
+              font-size: 0.13rem;
+              color: #ffffff;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item__label {
+    color: #ffffff;
+    opacity: 0.7;
+  }
+
+  .custom-input,
+  .custom-select {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .alarm-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .alarm-filter {
+    flex-direction: column;
+  }
+
+  .filter-actions {
+    width: 100%;
+    margin-top: 0.1rem;
+
+    .search-input {
+      flex: 1;
+    }
+  }
+
+  .table-container {
+    .alarm-table {
+      thead tr th,
+      tbody tr td {
+        font-size: 0.12rem;
+        padding: 0.08rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newLighting/deviceManage/info/index.vue b/src/views/newLighting/deviceManage/info/index.vue
new file mode 100644
index 0000000..1dcc4b8
--- /dev/null
+++ b/src/views/newLighting/deviceManage/info/index.vue
@@ -0,0 +1,1378 @@
+<template>
+  <div class="device-manage">
+    <!-- 搜索筛选区域 -->
+    <div class="search-filter-area">
+      <div class="search-group">
+        <div class="search-item">
+          <label>设备名称</label>
+          <el-input
+            v-model="searchForm.deviceName"
+            placeholder="请输入设备名称或编号"
+            clearable
+            class="custom-input"
+            @clear="handleSearch"
+          >
+            <template #prefix>
+              <svg class="search-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M909.6 854.5L649.9 594.8c41.3-54.3 65.9-121.4 65.9-194.1C715.8 262.2 560.6 107 370.4 107S25 262.2 25 452.4s155.2 345.4 345.4 345.4c72.7 0 139.8-24.6 194.1-65.9l259.7 259.7c11.1 11.1 29.1 11.1 40.2 0l45.2-45.2c11.1-11.1 11.1-29.1 0-40.2zM370.4 705c-139.1 0-252.6-113.5-252.6-252.6s113.5-252.6 252.6-252.6 252.6 113.5 252.6 252.6-113.5 252.6-252.6 252.6z" fill="currentColor"/>
+              </svg>
+            </template>
+          </el-input>
+        </div>
+        <div class="search-item">
+          <label>设备状态</label>
+          <el-select
+            v-model="searchForm.deviceStatus"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option label="运行中" value="running"></el-option>
+            <el-option label="离线" value="offline"></el-option>
+            <el-option label="故障" value="fault"></el-option>
+          </el-select>
+        </div>
+        <div class="search-item">
+          <label>设备子类型</label>
+          <el-select
+            v-model="searchForm.deviceType"
+            placeholder="全部"
+            clearable
+            class="custom-select"
+            @change="handleSearch"
+          >
+            <el-option label="全部" value=""></el-option>
+            <el-option
+              v-for="type in getSubDeviceTypes()"
+              :key="type.value"
+              :label="type.label"
+              :value="type.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="action-group">
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">
+          <svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
+          </svg>
+          导出列表
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 设备统计卡片 -->
+    <div class="device-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.total }}</div>
+          <div class="stat-label">设备总数</div>
+        </div>
+      </div>
+      <div class="stat-card running">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            <path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.running }}</div>
+          <div class="stat-label">运行中</div>
+        </div>
+      </div>
+      <div class="stat-card offline">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.offline }}</div>
+          <div class="stat-label">离线</div>
+        </div>
+      </div>
+      <div class="stat-card fault">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ deviceStats.fault }}</div>
+          <div class="stat-label">故障</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备分类标签页 -->
+    <div class="category-tabs">
+      <div
+        v-for="(category, index) in deviceCategories"
+        :key="index"
+        :class="['category-tab', { active: activeCategory === index }]"
+        @click="handleCategoryChange(index)"
+      >
+        <span class="tab-icon">{{ getCategoryIcon(category.value) }}</span>
+        <span class="tab-label">{{ category.label }}</span>
+        <span class="tab-count">({{ category.count }})</span>
+      </div>
+    </div>
+
+    <!-- 设备列表 -->
+    <div class="device-list-container">
+      <div class="list-header">
+        <div class="list-title">设备列表</div>
+        <div class="list-info">
+          共 {{ filteredDevices.length }} 台设备
+        </div>
+      </div>
+      <div class="device-grid">
+        <div
+          v-for="(device, index) in paginatedDevices"
+          :key="index"
+          :class="['device-card', device.status]"
+          @click="viewDeviceDetail(device)"
+        >
+          <div class="card-header">
+            <div class="device-icon" :style="{ background: device.iconBg }">
+              <span class="icon-emoji">{{ getDeviceIconEmoji(device.type) }}</span>
+            </div>
+            <div class="device-header-info">
+              <div class="device-name">{{ device.name }}</div>
+              <div class="device-code">{{ device.code }}</div>
+            </div>
+            <div class="status-badge" :class="device.status">
+              {{ getStatusText(device.status) }}
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="device-info-row">
+              <span class="info-label">型号:</span>
+              <span class="info-value">{{ device.model }}</span>
+            </div>
+            <div class="device-info-row">
+              <span class="info-label">安装日期:</span>
+              <span class="info-value">{{ device.installDate }}</span>
+            </div>
+            <div class="device-info-row" v-if="device.area">
+              <span class="info-label">所在区域:</span>
+              <span class="info-value">{{ device.area }}</span>
+            </div>
+            <div class="device-info-row" v-if="device.status === 'running' && device.brightness !== undefined">
+              <span class="info-label">当前亮度:</span>
+              <span class="info-value highlight">{{ device.brightness }}%</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="device-params" v-if="device.parameters && device.parameters.length > 0">
+              <div
+                v-for="(param, pIndex) in device.parameters.slice(0, 3)"
+                :key="pIndex"
+                class="param-item"
+              >
+                <span class="param-label">{{ param.label }}:</span>
+                <span class="param-value">{{ param.value }}{{ param.unit }}</span>
+              </div>
+              <div v-if="device.parameters.length > 3" class="param-more">
+                +{{ device.parameters.length - 3 }}项
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[12, 24, 48, 96]"
+          :total="filteredDevices.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 设备详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      :title="selectedDevice ? selectedDevice.name + ' - 设备详情' : '设备详情'"
+      width="900px"
+      class="custom-dialog"
+      @close="closeDetailDialog"
+    >
+      <div class="detail-content" v-if="selectedDevice">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">设备编号:</span>
+              <span class="item-value">{{ selectedDevice.code }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备名称:</span>
+              <span class="item-value">{{ selectedDevice.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备型号:</span>
+              <span class="item-value">{{ selectedDevice.model }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备类型:</span>
+              <span class="item-value">{{ getDeviceTypeName(selectedDevice.type) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">安装日期:</span>
+              <span class="item-value">{{ selectedDevice.installDate }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">设备状态:</span>
+              <span class="item-value status-badge" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="info-item" v-if="selectedDevice.area">
+              <span class="item-label">所在区域:</span>
+              <span class="item-value">{{ selectedDevice.area }}</span>
+            </div>
+            <div class="info-item" v-if="selectedDevice.location">
+              <span class="item-label">具体位置:</span>
+              <span class="item-value">{{ selectedDevice.location }}</span>
+            </div>
+            <div class="info-item full-width" v-if="selectedDevice.spec">
+              <span class="item-label">设备参数:</span>
+              <span class="item-value">{{ selectedDevice.spec }}</span>
+            </div>
+            <div class="info-item full-width" v-if="selectedDevice.description">
+              <span class="item-label">设备描述:</span>
+              <span class="item-value">{{ selectedDevice.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedDevice.parameters && selectedDevice.parameters.length > 0">
+          <div class="section-title">运行参数</div>
+          <div class="params-grid">
+            <div
+              v-for="(param, index) in selectedDevice.parameters"
+              :key="index"
+              class="param-card"
+            >
+              <div class="param-label">{{ param.label }}</div>
+              <div class="param-value">{{ param.value }}</div>
+              <div class="param-unit">{{ param.unit }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">运行状态</div>
+          <div class="status-info">
+            <div class="status-item">
+              <span class="status-label">当前状态:</span>
+              <span class="status-text" :class="selectedDevice.status">
+                {{ getStatusText(selectedDevice.status) }}
+              </span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'running' && selectedDevice.runtime">
+              <span class="status-label">运行时长:</span>
+              <span class="status-text">{{ selectedDevice.runtime }}</span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.status === 'fault'">
+              <span class="status-label">故障信息:</span>
+              <span class="status-text fault">{{ selectedDevice.faultInfo || '未知故障' }}</span>
+            </div>
+            <div class="status-item" v-if="selectedDevice.lastUpdate">
+              <span class="status-label">最后更新:</span>
+              <span class="status-text">{{ selectedDevice.lastUpdate }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedDevice.type === 'lighting'">
+          <div class="section-title">控制信息</div>
+          <div class="control-grid">
+            <div class="control-item">
+              <span class="control-label">当前亮度:</span>
+              <el-slider v-model="selectedDevice.brightness" :min="0" :max="100" :disabled="selectedDevice.status !== 'running'"></el-slider>
+              <span class="control-value">{{ selectedDevice.brightness }}%</span>
+            </div>
+            <div class="control-item" v-if="selectedDevice.colorTemp">
+              <span class="control-label">色温调节:</span>
+              <el-slider v-model="selectedDevice.colorTemp" :min="2700" :max="6500" :step="100" :disabled="selectedDevice.status !== 'running'"></el-slider>
+              <span class="control-value">{{ selectedDevice.colorTemp }}K</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDetailDialog" class="custom-btn">关闭</el-button>
+          <el-button type="primary" @click="saveControl" class="custom-btn" v-if="selectedDevice && selectedDevice.type === 'lighting'">保存控制</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeviceManage",
+  data() {
+    return {
+      searchForm: {
+        deviceName: "",
+        deviceStatus: "",
+        deviceType: ""
+      },
+      deviceCategories: [
+        { label: "全部设备", value: "all", count: 156 },
+        { label: "灯具", value: "lighting", count: 120 },
+        { label: "网关", value: "gateway", count: 8 },
+        { label: "电表", value: "meter", count: 12 },
+        { label: "传感器", value: "sensor", count: 16 }
+      ],
+      activeCategory: 0,
+      currentPage: 1,
+      pageSize: 12,
+      deviceList: [],
+      deviceStats: {
+        total: 156,
+        running: 138,
+        offline: 12,
+        fault: 6
+      },
+      detailDialogVisible: false,
+      selectedDevice: null
+    };
+  },
+  computed: {
+    filteredDevices() {
+      let devices = [...this.deviceList];
+      const category = this.deviceCategories[this.activeCategory];
+      if (category.value !== "all") {
+        devices = devices.filter(d => d.type === category.value);
+      }
+      if (this.searchForm.deviceName) {
+        const keyword = this.searchForm.deviceName.toLowerCase();
+        devices = devices.filter(d => 
+          d.name.toLowerCase().includes(keyword) || 
+          d.code.toLowerCase().includes(keyword)
+        );
+      }
+      if (this.searchForm.deviceStatus) {
+        devices = devices.filter(d => d.status === this.searchForm.deviceStatus);
+      }
+      if (this.searchForm.deviceType) {
+        devices = devices.filter(d => d.subType === this.searchForm.deviceType);
+      }
+      return devices;
+    },
+    paginatedDevices() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredDevices.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initDeviceList();
+  },
+  methods: {
+    initDeviceList() {
+      const lightingIcons = ["#FFD700", "#FFA500", "#FF6B6B", "#4ECDC4"];
+      const gatewayIcons = ["#667eea", "#764ba2"];
+      const meterIcons = ["#f093fb", "#f5576c"];
+      const sensorIcons = ["#30cfd0", "#330867"];
+      
+      // 灯具设备
+      const lightingTypes = [
+        { label: "LED筒灯", value: "ledDownlight" },
+        { label: "LED射灯", value: "ledSpotlight" },
+        { label: "LED面板灯", value: "ledPanel" },
+        { label: "LED灯管", value: "ledTube" }
+      ];
+      
+      const areas = ["办公区A", "办公区B", "商场区域", "停车场", "公共区域"];
+      
+      for (let i = 1; i <= 120; i++) {
+        const typeIndex = Math.floor(Math.random() * lightingTypes.length);
+        const areaIndex = Math.floor(Math.random() * areas.length);
+        const iconIndex = i % lightingIcons.length;
+        
+        this.deviceList.push({
+          code: `LT-${String(i).padStart(3, '0')}`,
+          name: `${lightingTypes[typeIndex].label}-${i}`,
+          type: "lighting",
+          subType: lightingTypes[typeIndex].value,
+          model: `LED-${200 + typeIndex}`,
+          spec: `功率: ${15 + Math.floor(Math.random() * 30)}W, 色温: 3000-6000K, 寿命: 50000h`,
+          installDate: this.getRandomDate(2020, 2023),
+          status: i <= 105 ? "running" : i <= 115 ? "offline" : "fault",
+          faultInfo: i > 115 ? "灯具故障" : undefined,
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-${Math.ceil(i / areas.length)}层`,
+          description: `${lightingTypes[typeIndex].label}，用于${areas[areaIndex]}照明`,
+          iconBg: `linear-gradient(135deg, ${lightingIcons[iconIndex]} 0%, ${lightingIcons[(iconIndex + 1) % lightingIcons.length]} 100%)`,
+          brightness: Math.floor(60 + Math.random() * 40),
+          colorTemp: 3000 + Math.floor(Math.random() * 3500),
+          runtime: `${Math.floor(1000 + Math.random() * 2000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: [
+            { label: "功率", value: (15 + Math.floor(Math.random() * 30)).toFixed(1), unit: "W" },
+            { label: "电压", value: (220 + Math.random() * 5).toFixed(1), unit: "V" },
+            { label: "电流", value: (0.06 + Math.random() * 0.15).toFixed(2), unit: "A" },
+            { label: "功率因数", value: (0.9 + Math.random() * 0.09).toFixed(2), unit: "" }
+          ]
+        });
+      }
+      
+      // 网关设备
+      for (let i = 1; i <= 8; i++) {
+        const iconIndex = i % gatewayIcons.length;
+        const areaIndex = i % areas.length;
+        
+        this.deviceList.push({
+          code: `GW-00${i}`,
+          name: `${i}号智能网关`,
+          type: "gateway",
+          subType: "smartGateway",
+          model: "LGT-GW1000",
+          spec: "支持100个节点, ZigBee/WiFi/蓝牙, 供电: 12V/2A",
+          installDate: this.getRandomDate(2020, 2021),
+          status: i <= 7 ? "running" : "offline",
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-机房`,
+          description: "照明系统智能网关，负责数据采集和控制指令下发",
+          iconBg: `linear-gradient(135deg, #${gatewayIcons[iconIndex]} 0%, #${gatewayIcons[(iconIndex + 1) % gatewayIcons.length]} 100%)`,
+          runtime: `${Math.floor(2000 + Math.random() * 3000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: [
+            { label: "在线设备数", value: `${12 + Math.floor(Math.random() * 8)}`, unit: "台" },
+            { label: "网络延迟", value: `${Math.floor(10 + Math.random() * 20)}`, unit: "ms" },
+            { label: "信号强度", value: `-40 - ${Math.floor(Math.random() * 20)}`, unit: "dBm" },
+            { label: "CPU使用率", value: `${Math.floor(20 + Math.random() * 30)}`, unit: "%" }
+          ]
+        });
+      }
+      
+      // 电表设备
+      for (let i = 1; i <= 12; i++) {
+        const iconIndex = i % meterIcons.length;
+        const areaIndex = i % areas.length;
+        
+        this.deviceList.push({
+          code: `EM-${String(i).padStart(3, '0')}`,
+          name: `${areas[areaIndex]}电表-${i}`,
+          type: "meter",
+          subType: "energyMeter",
+          model: "DTS666",
+          spec: "三相四线, 3(6)A, 0.5S级, RS485通信",
+          installDate: this.getRandomDate(2020, 2021),
+          status: i <= 11 ? "running" : "offline",
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-配电室`,
+          description: "智能电表，用于能耗数据采集",
+          iconBg: `linear-gradient(135deg, #${meterIcons[iconIndex]} 0%, #${meterIcons[(iconIndex + 1) % meterIcons.length]} 100%)`,
+          runtime: `${Math.floor(2000 + Math.random() * 3000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: [
+            { label: "总有功电能", value: `${Math.floor(10000 + Math.random() * 50000)}`, unit: "kWh" },
+            { label: "总功率", value: `${Math.floor(50 + Math.random() * 100)}`, unit: "kW" },
+            { label: "A相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" },
+            { label: "B相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" },
+            { label: "C相电压", value: `${(218 + Math.random() * 5).toFixed(1)}`, unit: "V" }
+          ]
+        });
+      }
+      
+      // 传感器设备
+      const sensorTypes = [
+        { label: "光照传感器", value: "lightSensor", spec: "量程: 0-200000lux, 精度: +/-5%" },
+        { label: "人体感应", value: "motionSensor", spec: "感应距离: 8m, 感应角度: 360°" },
+        { label: "温湿度传感器", value: "tempHumSensor", spec: "温度: -40~80℃, 湿度: 0~100%RH" }
+      ];
+      
+      for (let i = 1; i <= 16; i++) {
+        const typeIndex = i % sensorTypes.length;
+        const iconIndex = i % sensorIcons.length;
+        const areaIndex = i % areas.length;
+        
+        this.deviceList.push({
+          code: `SN-${String(i).padStart(3, '0')}`,
+          name: `${sensorTypes[typeIndex].label}-${i}`,
+          type: "sensor",
+          subType: sensorTypes[typeIndex].value,
+          model: "LGT-SN200",
+          spec: sensorTypes[typeIndex].spec,
+          installDate: this.getRandomDate(2020, 2022),
+          status: i <= 13 ? "running" : i <= 15 ? "offline" : "fault",
+          faultInfo: i > 15 ? "传感器漂移" : undefined,
+          area: areas[areaIndex],
+          location: `${areas[areaIndex]}-${Math.ceil(i / areas.length)}层`,
+          description: `${sensorTypes[typeIndex].label}，用于环境监测`,
+          iconBg: `linear-gradient(135deg, #${sensorIcons[iconIndex]} 0%, #${sensorIcons[(iconIndex + 1) % sensorIcons.length]} 100%)`,
+          runtime: `${Math.floor(1000 + Math.random() * 2000)}小时`,
+          lastUpdate: this.getRecentTime(),
+          parameters: this.getSensorParameters(sensorTypes[typeIndex].value)
+        });
+      }
+    },
+    getSensorParameters(type) {
+      switch (type) {
+        case "lightSensor":
+          return [
+            { label: "当前照度", value: `${Math.floor(300 + Math.random() * 500)}`, unit: "lux" },
+            { label: "信号强度", value: `-45 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        case "motionSensor":
+          return [
+            { label: "检测状态", value: Math.random() > 0.5 ? "有人" : "无人", unit: "" },
+            { label: "灵敏度", value: `${Math.floor(70 + Math.random() * 20)}`, unit: "%" },
+            { label: "信号强度", value: `-50 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        case "tempHumSensor":
+          return [
+            { label: "温度", value: `${(22 + Math.random() * 6).toFixed(1)}`, unit: "℃" },
+            { label: "湿度", value: `${Math.floor(40 + Math.random() * 30)}`, unit: "%RH" },
+            { label: "信号强度", value: `-48 - ${Math.floor(Math.random() * 10)}`, unit: "dBm" }
+          ];
+        default:
+          return [];
+      }
+    },
+    getRandomDate(startYear, endYear) {
+      const start = new Date(startYear, 0, 1);
+      const end = new Date(endYear, 11, 31);
+      const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+      return date.toISOString().split('T')[0];
+    },
+    getRecentTime() {
+      const now = new Date();
+      return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+    },
+    getSubDeviceTypes() {
+      const category = this.deviceCategories[this.activeCategory];
+      switch (category.value) {
+        case "lighting":
+          return [
+            { label: "LED筒灯", value: "ledDownlight" },
+            { label: "LED射灯", value: "ledSpotlight" },
+            { label: "LED面板灯", value: "ledPanel" },
+            { label: "LED灯管", value: "ledTube" }
+          ];
+        case "gateway":
+          return [
+            { label: "智能网关", value: "smartGateway" }
+          ];
+        case "meter":
+          return [
+            { label: "智能电表", value: "energyMeter" }
+          ];
+        case "sensor":
+          return [
+            { label: "光照传感器", value: "lightSensor" },
+            { label: "人体感应", value: "motionSensor" },
+            { label: "温湿度传感器", value: "tempHumSensor" }
+          ];
+        default:
+          return [];
+      }
+    },
+    getStatusText(status) {
+      const statusMap = {
+        running: "运行中",
+        offline: "离线",
+        fault: "故障"
+      };
+      return statusMap[status] || status;
+    },
+    getDeviceIconEmoji(type) {
+      const iconMap = {
+        lighting: "💡",
+        gateway: "📡",
+        meter: "⚡",
+        sensor: "📊"
+      };
+      return iconMap[type] || "📱";
+    },
+    getDeviceTypeName(type) {
+      const typeMap = {
+        lighting: "灯具",
+        gateway: "网关",
+        meter: "电表",
+        sensor: "传感器"
+      };
+      return typeMap[type] || type;
+    },
+    getCategoryIcon(value) {
+      const iconMap = {
+        all: "📋",
+        lighting: "💡",
+        gateway: "📡",
+        meter: "⚡",
+        sensor: "📊"
+      };
+      return iconMap[value] || "📱";
+    },
+    handleCategoryChange(index) {
+      this.activeCategory = index;
+      this.currentPage = 1;
+      this.searchForm.deviceType = "";
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.searchForm = { deviceName: "", deviceStatus: "", deviceType: "" };
+      this.activeCategory = 0;
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("设备列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewDeviceDetail(device) {
+      this.selectedDevice = { ...device };
+      this.detailDialogVisible = true;
+    },
+    closeDetailDialog() {
+      this.detailDialogVisible = false;
+      this.selectedDevice = null;
+    },
+    saveControl() {
+      this.$message.success("控制参数保存成功");
+      this.closeDetailDialog();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-manage {
+  padding: 0.16rem;
+  background: rgba(11, 30, 48, 0.6);
+}
+
+.search-filter-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .search-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .search-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 2rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-input,
+      ::v-deep .custom-select {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: none;
+
+          &:hover {
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+
+        .search-icon {
+          width: 0.16rem;
+          height: 0.16rem;
+          fill: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+  }
+
+  .action-group {
+    display: flex;
+    gap: 0.1rem;
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        .btn-icon {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.device-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-radius: 0.08rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.2rem rgba(21, 225, 253, 0.15);
+    }
+
+    &.total {
+      border-left: 0.04rem solid #5470C6;
+    }
+
+    &.running {
+      border-left: 0.04rem solid #91CC75;
+    }
+
+    &.offline {
+      border-left: 0.04rem solid #EE6666;
+    }
+
+    &.fault {
+      border-left: 0.04rem solid #FAC858;
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.category-tabs {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  overflow-x: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .category-tab {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.1rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.06rem;
+    transition: all 0.3s;
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+
+    .tab-icon {
+      font-size: 0.16rem;
+    }
+
+    .tab-label {
+      flex: 1;
+    }
+
+    .tab-count {
+      font-size: 0.12rem;
+      opacity: 0.8;
+    }
+  }
+}
+
+.device-list-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+    gap: 0.15rem;
+    margin-bottom: 0.2rem;
+
+    .device-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      cursor: pointer;
+      transition: all 0.3s;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-0.03rem);
+        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2);
+      }
+
+      &.running {
+        border-left: 3px solid #91CC75;
+      }
+
+      &.offline {
+        border-left: 3px solid #EE6666;
+      }
+
+      &.fault {
+        border-left: 3px solid #FAC858;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.15rem;
+
+        .device-icon {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.12rem;
+          font-size: 0.24rem;
+          color: #ffffff;
+        }
+
+        .device-header-info {
+          flex: 1;
+
+          .device-name {
+            font-size: 0.15rem;
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .device-code {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .status-badge {
+          padding: 0.04rem 0.12rem;
+          border-radius: 0.04rem;
+          font-size: 0.11rem;
+
+          &.running {
+            background: rgba(145, 204, 117, 0.2);
+            color: #91CC75;
+            border: 1px solid rgba(145, 204, 117, 0.3);
+          }
+
+          &.offline {
+            background: rgba(238, 102, 102, 0.2);
+            color: #EE6666;
+            border: 1px solid rgba(238, 102, 102, 0.3);
+          }
+
+          &.fault {
+            background: rgba(250, 200, 88, 0.2);
+            color: #FAC858;
+            border: 1px solid rgba(250, 200, 88, 0.3);
+          }
+        }
+      }
+
+      .card-body {
+        margin-bottom: 0.15rem;
+
+        .device-info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 0.08rem;
+          font-size: 0.13rem;
+
+          .info-label {
+            color: #ffffff;
+            opacity: 0.6;
+          }
+
+          .info-value {
+            color: #ffffff;
+            opacity: 0.9;
+
+            &.highlight {
+              color: #15e1fd;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+
+      .card-footer {
+        .device-params {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.08rem;
+
+          .param-item {
+            padding: 0.06rem 0.1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 0.04rem;
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.8;
+
+            .param-label {
+              opacity: 0.7;
+            }
+
+            .param-value {
+              color: #15e1fd;
+              font-weight: bold;
+              margin: 0 0.04rem;
+            }
+          }
+
+          .param-more {
+            padding: 0.06rem 0.1rem;
+            background: rgba(21, 225, 253, 0.1);
+            border-radius: 0.04rem;
+            font-size: 0.11rem;
+            color: #15e1fd;
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: linear-gradient(135deg, rgba(11, 30, 48, 0.98) 0%, rgba(20, 45, 65, 0.98) 100%);
+    border: 1px solid rgba(21, 225, 253, 0.3);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.status-badge {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+
+              &.running {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+
+              &.offline {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.fault {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+            }
+          }
+        }
+      }
+
+      .params-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(1.5rem, 1fr));
+        gap: 0.15rem;
+
+        .param-card {
+          padding: 0.2rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.06rem;
+          text-align: center;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-0.02rem);
+          }
+
+          .param-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.08rem;
+          }
+
+          .param-value {
+            font-size: 0.2rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .param-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      .status-info {
+        .status-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+          margin-bottom: 0.1rem;
+
+          .status-label {
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .status-text {
+            font-size: 0.14rem;
+            color: #ffffff;
+
+            &.running {
+              color: #91CC75;
+            }
+
+            &.offline {
+              color: #EE6666;
+            }
+
+            &.fault {
+              color: #FAC858;
+            }
+          }
+        }
+      }
+
+      .control-grid {
+        .control-item {
+          display: flex;
+          align-items: center;
+          gap: 0.15rem;
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+          margin-bottom: 0.1rem;
+
+          .control-label {
+            min-width: 1rem;
+            font-size: 0.14rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .el-slider {
+            flex: 1;
+          }
+
+          .control-value {
+            min-width: 0.8rem;
+            text-align: right;
+            font-size: 0.14rem;
+            color: #15e1fd;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.1rem;
+  }
+}
+
+::v-deep .el-slider {
+  .el-slider__runway {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .el-slider__bar {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .el-slider__button {
+    border-color: #667eea;
+  }
+}
+
+@media (max-width: 1485px) {
+  .device-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid {
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .search-filter-area {
+    flex-direction: column;
+
+    .search-group {
+      width: 100%;
+      flex-direction: column;
+
+      .search-item {
+        width: 100%;
+
+        ::v-deep .custom-input,
+        ::v-deep .custom-select {
+          width: 100%;
+        }
+      }
+    }
+
+    .action-group {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .device-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .category-tabs {
+    flex-wrap: wrap;
+  }
+
+  .detail-content {
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLighting/deviceManage/strategy/index.vue b/src/views/newLighting/deviceManage/strategy/index.vue
new file mode 100644
index 0000000..9174f0a
--- /dev/null
+++ b/src/views/newLighting/deviceManage/strategy/index.vue
@@ -0,0 +1,1201 @@
+<template>
+  <div class="strategy-manage">
+    <!-- 策略总览 -->
+    <div class="strategy-overview">
+      <div class="overview-title">策略总览</div>
+      <div class="strategy-grid">
+        <div 
+          v-for="(strategy, index) in strategies" 
+          :key="index"
+          :class="['strategy-card', { active: currentStrategy === index, 'custom': strategy.isCustom }]"
+          @click="selectStrategy(index)"
+        >
+          <div class="strategy-header">
+            <div class="strategy-icon" :style="{ background: strategy.iconBg }">
+              <span class="icon-emoji">{{ strategy.icon }}</span>
+            </div>
+            <div class="strategy-info">
+              <div class="strategy-name">{{ strategy.name }}</div>
+              <div class="strategy-desc">{{ strategy.description }}</div>
+            </div>
+            <div class="strategy-status" :class="{ active: strategy.enabled }">
+              {{ strategy.enabled ? '已启用' : '未启用' }}
+            </div>
+          </div>
+          <div class="strategy-params">
+            <div class="param-item">
+              <span class="param-label">低亮亮度:</span>
+              <span class="param-value">{{ strategy.config.lowBrightness }}%</span>
+            </div>
+            <div class="param-item">
+              <span class="param-label">中亮亮度:</span>
+              <span class="param-value">{{ strategy.config.mediumBrightness }}%</span>
+            </div>
+            <div class="param-item">
+              <span class="param-label">高亮亮度:</span>
+              <span class="param-value">{{ strategy.config.highBrightness }}%</span>
+            </div>
+            <div class="param-item">
+              <span class="param-label">高亮时长:</span>
+              <span class="param-value">{{ strategy.config.highDuration }}s</span>
+            </div>
+          </div>
+          <div class="strategy-actions">
+            <el-button 
+              v-if="!strategy.isCustom" 
+              :type="strategy.enabled ? 'default' : 'primary'" 
+              size="small" 
+              @click.stop="toggleStrategy(index)"
+            >
+              {{ strategy.enabled ? '禁用' : '启用' }}
+            </el-button>
+            <el-button 
+              v-if="strategy.isCustom" 
+              type="primary" 
+              size="small" 
+              @click.stop="editStrategy(index)"
+            >
+              编辑
+            </el-button>
+            <el-button 
+              v-if="strategy.isCustom" 
+              type="danger" 
+              size="small" 
+              @click.stop="deleteStrategy(index)"
+            >
+              删除
+            </el-button>
+          </div>
+        </div>
+        <div class="strategy-card add-strategy" @click="openAddDialog">
+          <div class="add-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="add-text">添加策略</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 场景配置 -->
+    <div class="scene-config">
+      <div class="section-header">
+        <div class="section-title">场景配置</div>
+        <div class="section-actions">
+          <el-button type="primary" size="small" @click="openSceneDialog">
+            <svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            添加场景
+          </el-button>
+        </div>
+      </div>
+      <div class="scene-grid">
+        <div 
+          v-for="(scene, index) in scenes" 
+          :key="index"
+          :class="['scene-card', { active: currentStrategy === scene.strategyIndex }]"
+          @click="applyScene(index)"
+        >
+          <div class="scene-header">
+            <div class="scene-icon" :style="{ background: scene.iconBg }">
+              <span class="icon-emoji">{{ scene.icon }}</span>
+            </div>
+            <div class="scene-info">
+              <div class="scene-name">{{ scene.name }}</div>
+              <div class="scene-desc">{{ scene.description }}</div>
+            </div>
+          </div>
+          <div class="scene-time">
+            <svg class="time-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            <span>{{ scene.timeRange }}</span>
+          </div>
+          <div class="scene-actions">
+            <el-button size="small" @click.stop="editScene(index)">编辑</el-button>
+            <el-button type="danger" size="small" @click.stop="deleteScene(index)" v-if="scene.isCustom">删除</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 策略执行状态 -->
+    <div class="execution-status">
+      <div class="section-header">
+        <div class="section-title">策略执行状态</div>
+        <div class="status-refresh">
+          <el-button size="small" @click="refreshStatus">
+            <svg class="refresh-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            刷新
+          </el-button>
+        </div>
+      </div>
+      <div class="status-grid">
+        <div class="status-card">
+          <div class="status-icon current">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-label">当前策略</div>
+            <div class="status-value">{{ currentStrategyName }}</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon devices">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-label">执行设备</div>
+            <div class="status-value">{{ executionStats.deviceCount }} 台</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon online">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-label">在线设备</div>
+            <div class="status-value">{{ executionStats.onlineCount }} 台</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon success">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="status-info">
+            <div class="status-label">执行成功率</div>
+            <div class="status-value">{{ executionStats.successRate }}%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加/编辑策略对话框 -->
+    <el-dialog
+      v-model="strategyDialogVisible"
+      :title="isEditStrategy ? '编辑策略' : '添加策略'"
+      width="700px"
+      class="custom-dialog"
+      @close="closeStrategyDialog"
+    >
+      <el-form :model="strategyForm" :rules="strategyRules" ref="strategyFormRef" label-width="120px">
+        <el-form-item label="策略名称" prop="name">
+          <el-input v-model="strategyForm.name" placeholder="请输入策略名称"></el-input>
+        </el-form-item>
+        <el-form-item label="策略描述" prop="description">
+          <el-input v-model="strategyForm.description" type="textarea" rows="2" placeholder="请输入策略描述"></el-input>
+        </el-form-item>
+        <div class="form-section-title">亮度配置</div>
+        <el-form-item label="低亮亮度" prop="config.lowBrightness">
+          <el-input-number 
+            v-model="strategyForm.config.lowBrightness" 
+            :min="0" 
+            :max="100" 
+            :step="5"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">%</span>
+        </el-form-item>
+        <el-form-item label="中亮亮度" prop="config.mediumBrightness">
+          <el-input-number 
+            v-model="strategyForm.config.mediumBrightness" 
+            :min="0" 
+            :max="100" 
+            :step="5"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">%</span>
+        </el-form-item>
+        <el-form-item label="高亮亮度" prop="config.highBrightness">
+          <el-input-number 
+            v-model="strategyForm.config.highBrightness" 
+            :min="0" 
+            :max="100" 
+            :step="5"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">%</span>
+        </el-form-item>
+        <div class="form-section-title">时间配置</div>
+        <el-form-item label="高亮时长" prop="config.highDuration">
+          <el-input-number 
+            v-model="strategyForm.config.highDuration" 
+            :min="1" 
+            :max="3600" 
+            :step="10"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">秒</span>
+        </el-form-item>
+        <el-form-item label="缓亮时长" prop="config.fadeDuration">
+          <el-input-number 
+            v-model="strategyForm.config.fadeDuration" 
+            :min="1" 
+            :max="300" 
+            :step="1"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">秒</span>
+        </el-form-item>
+        <div class="form-section-title">感应配置</div>
+        <el-form-item label="亮灯距离" prop="config.detectDistance">
+          <el-input-number 
+            v-model="strategyForm.config.detectDistance" 
+            :min="1" 
+            :max="20" 
+            :step="0.5"
+            controls-position="right"
+          ></el-input-number>
+          <span class="unit">米</span>
+        </el-form-item>
+        <el-form-item label="感应灵敏度" prop="config.sensitivity">
+          <el-slider 
+            v-model="strategyForm.config.sensitivity" 
+            :min="1" 
+            :max="100"
+            show-input
+          ></el-slider>
+          <span class="unit">%</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="closeStrategyDialog">取消</el-button>
+        <el-button type="primary" @click="saveStrategy">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 添加/编辑场景对话框 -->
+    <el-dialog
+      v-model="sceneDialogVisible"
+      :title="isEditScene ? '编辑场景' : '添加场景'"
+      width="600px"
+      class="custom-dialog"
+      @close="closeSceneDialog"
+    >
+      <el-form :model="sceneForm" :rules="sceneRules" ref="sceneFormRef" label-width="100px">
+        <el-form-item label="场景名称" prop="name">
+          <el-input v-model="sceneForm.name" placeholder="请输入场景名称"></el-input>
+        </el-form-item>
+        <el-form-item label="场景描述" prop="description">
+          <el-input v-model="sceneForm.description" type="textarea" rows="2" placeholder="请输入场景描述"></el-input>
+        </el-form-item>
+        <el-form-item label="绑定策略" prop="strategyIndex">
+          <el-select v-model="sceneForm.strategyIndex" placeholder="请选择策略">
+            <el-option 
+              v-for="(strategy, index) in strategies" 
+              :key="index"
+              :label="strategy.name" 
+              :value="index"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间段" prop="timeRange">
+          <el-time-picker
+            v-model="sceneForm.timeRange"
+            is-range
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="HH:mm"
+            value-format="HH:mm"
+          ></el-time-picker>
+        </el-form-item>
+        <el-form-item label="执行日期" prop="weekdays">
+          <el-checkbox-group v-model="sceneForm.weekdays">
+            <el-checkbox label="1">周一</el-checkbox>
+            <el-checkbox label="2">周二</el-checkbox>
+            <el-checkbox label="3">周三</el-checkbox>
+            <el-checkbox label="4">周四</el-checkbox>
+            <el-checkbox label="5">周五</el-checkbox>
+            <el-checkbox label="6">周六</el-checkbox>
+            <el-checkbox label="0">周日</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="启用状态">
+          <el-switch v-model="sceneForm.enabled"></el-switch>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="closeSceneDialog">取消</el-button>
+        <el-button type="primary" @click="saveScene">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StrategyManage",
+  data() {
+    return {
+      currentStrategy: 0,
+      strategyDialogVisible: false,
+      sceneDialogVisible: false,
+      isEditStrategy: false,
+      isEditScene: false,
+      editStrategyIndex: -1,
+      editSceneIndex: -1,
+      strategyForm: {
+        name: "",
+        description: "",
+        config: {
+          lowBrightness: 20,
+          mediumBrightness: 50,
+          highBrightness: 80,
+          highDuration: 600,
+          fadeDuration: 3,
+          detectDistance: 5,
+          sensitivity: 70
+        }
+      },
+      strategyRules: {
+        name: [{ required: true, message: "请输入策略名称", trigger: "blur" }],
+        description: [{ required: true, message: "请输入策略描述", trigger: "blur" }],
+        "config.lowBrightness": [{ required: true, message: "请输入低亮亮度", trigger: "blur" }],
+        "config.mediumBrightness": [{ required: true, message: "请输入中亮亮度", trigger: "blur" }],
+        "config.highBrightness": [{ required: true, message: "请输入高亮亮度", trigger: "blur" }],
+        "config.highDuration": [{ required: true, message: "请输入高亮时长", trigger: "blur" }],
+        "config.fadeDuration": [{ required: true, message: "请输入缓亮时长", trigger: "blur" }],
+        "config.detectDistance": [{ required: true, message: "请输入亮灯距离", trigger: "blur" }],
+        "config.sensitivity": [{ required: true, message: "请输入感应灵敏度", trigger: "blur" }]
+      },
+      sceneForm: {
+        name: "",
+        description: "",
+        strategyIndex: 0,
+        timeRange: ["09:00", "18:00"],
+        weekdays: ["1", "2", "3", "4", "5"],
+        enabled: true
+      },
+      sceneRules: {
+        name: [{ required: true, message: "请输入场景名称", trigger: "blur" }],
+        description: [{ required: true, message: "请输入场景描述", trigger: "blur" }],
+        strategyIndex: [{ required: true, message: "请选择绑定策略", trigger: "change" }],
+        timeRange: [{ required: true, message: "请选择时间段", trigger: "change" }],
+        weekdays: [{ required: true, message: "请选择执行日期", trigger: "change" }]
+      },
+      strategies: [],
+      scenes: [],
+      executionStats: {
+        deviceCount: 120,
+        onlineCount: 105,
+        successRate: 98.5
+      }
+    };
+  },
+  computed: {
+    currentStrategyName() {
+      return this.strategies[this.currentStrategy]?.name || "无";
+    }
+  },
+  mounted() {
+    this.initStrategies();
+    this.initScenes();
+  },
+  methods: {
+    initStrategies() {
+      this.strategies = [
+        {
+          name: "常规办公模式",
+          description: "适用于日常办公场景，平衡节能与舒适度",
+          icon: "🏢",
+          iconBg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          enabled: true,
+          isCustom: false,
+          config: {
+            lowBrightness: 20,
+            mediumBrightness: 50,
+            highBrightness: 80,
+            highDuration: 600,
+            fadeDuration: 3,
+            detectDistance: 5,
+            sensitivity: 70
+          }
+        },
+        {
+          name: "会议模式",
+          description: "适用于会议室场景，提供充足的照明",
+          icon: "👥",
+          iconBg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+          enabled: false,
+          isCustom: false,
+          config: {
+            lowBrightness: 40,
+            mediumBrightness: 70,
+            highBrightness: 100,
+            highDuration: 900,
+            fadeDuration: 2,
+            detectDistance: 3,
+            sensitivity: 80
+          }
+        },
+        {
+          name: "节能模式",
+          description: "最大限度节能，适用于非工作时间",
+          icon: "🌱",
+          iconBg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+          enabled: false,
+          isCustom: false,
+          config: {
+            lowBrightness: 10,
+            mediumBrightness: 30,
+            highBrightness: 50,
+            highDuration: 300,
+            fadeDuration: 5,
+            detectDistance: 8,
+            sensitivity: 60
+          }
+        },
+        {
+          name: "深夜模式",
+          description: "适用于深夜时段，保持最低照明",
+          icon: "🌙",
+          iconBg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
+          enabled: false,
+          isCustom: false,
+          config: {
+            lowBrightness: 5,
+            mediumBrightness: 15,
+            highBrightness: 30,
+            highDuration: 180,
+            fadeDuration: 8,
+            detectDistance: 10,
+            sensitivity: 50
+          }
+        },
+        {
+          name: "自定义策略1",
+          description: "用户自定义节能策略",
+          icon: "⚙️",
+          iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)",
+          enabled: false,
+          isCustom: true,
+          config: {
+            lowBrightness: 25,
+            mediumBrightness: 55,
+            highBrightness: 85,
+            highDuration: 720,
+            fadeDuration: 4,
+            detectDistance: 6,
+            sensitivity: 75
+          }
+        }
+      ];
+    },
+    initScenes() {
+      this.scenes = [
+        {
+          name: "上午办公",
+          description: "工作日上午办公时间",
+          icon: "☀️",
+          iconBg: "linear-gradient(135deg, #FFD700 0%, #FFA500 100%)",
+          strategyIndex: 0,
+          timeRange: ["08:00", "12:00"],
+          weekdays: ["1", "2", "3", "4", "5"],
+          enabled: true,
+          isCustom: false
+        },
+        {
+          name: "下午办公",
+          description: "工作日下午办公时间",
+          icon: "🌤️",
+          iconBg: "linear-gradient(135deg, #87CEEB 0%, #4682B4 100%)",
+          strategyIndex: 0,
+          timeRange: ["13:00", "18:00"],
+          weekdays: ["1", "2", "3", "4", "5"],
+          enabled: true,
+          isCustom: false
+        },
+        {
+          name: "午休时间",
+          description: "工作日午休时间段",
+          icon: "😴",
+          iconBg: "linear-gradient(135deg, #DDA0DD 0%, #BA55D3 100%)",
+          strategyIndex: 2,
+          timeRange: ["12:00", "13:00"],
+          weekdays: ["1", "2", "3", "4", "5"],
+          enabled: true,
+          isCustom: false
+        },
+        {
+          name: "夜间节能",
+          description: "非工作时间的节能时段",
+          icon: "🌃",
+          iconBg: "linear-gradient(135deg, #4B0082 0%, #800080 100%)",
+          strategyIndex: 3,
+          timeRange: ["19:00", "07:00"],
+          weekdays: ["0", "1", "2", "3", "4", "5", "6"],
+          enabled: true,
+          isCustom: false
+        },
+        {
+          name: "周末节能",
+          description: "周末全天节能模式",
+          icon: "🎉",
+          iconBg: "linear-gradient(135deg, #FF6B6B 0%, #EE5A24 100%)",
+          strategyIndex: 2,
+          timeRange: ["00:00", "23:59"],
+          weekdays: ["0", "6"],
+          enabled: true,
+          isCustom: false
+        }
+      ];
+    },
+    selectStrategy(index) {
+      this.currentStrategy = index;
+      this.$message.success(`已切换到${this.strategies[index].name}`);
+    },
+    toggleStrategy(index) {
+      this.strategies[index].enabled = !this.strategies[index].enabled;
+      const status = this.strategies[index].enabled ? "启用" : "禁用";
+      this.$message.success(`${this.strategies[index].name}已${status}`);
+    },
+    openAddDialog() {
+      this.isEditStrategy = false;
+      this.resetStrategyForm();
+      this.strategyDialogVisible = true;
+    },
+    editStrategy(index) {
+      this.isEditStrategy = true;
+      this.editStrategyIndex = index;
+      this.strategyForm = JSON.parse(JSON.stringify(this.strategies[index]));
+      this.strategyDialogVisible = true;
+    },
+    deleteStrategy(index) {
+      this.$confirm("确定要删除该策略吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.strategies.splice(index, 1);
+        this.$message.success("策略删除成功");
+      }).catch(() => {});
+    },
+    saveStrategy() {
+      this.$refs.strategyFormRef.validate((valid) => {
+        if (valid) {
+          if (this.isEditStrategy) {
+            this.strategies[this.editStrategyIndex] = { ...this.strategyForm, icon: "⚙️", iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", enabled: false, isCustom: true };
+            this.$message.success("策略更新成功");
+          } else {
+            this.strategies.push({ ...this.strategyForm, icon: "⚙️", iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", enabled: false, isCustom: true });
+            this.$message.success("策略添加成功");
+          }
+          this.closeStrategyDialog();
+        }
+      });
+    },
+    closeStrategyDialog() {
+      this.strategyDialogVisible = false;
+      this.isEditStrategy = false;
+      this.editStrategyIndex = -1;
+    },
+    resetStrategyForm() {
+      this.strategyForm = {
+        name: "",
+        description: "",
+        config: {
+          lowBrightness: 20,
+          mediumBrightness: 50,
+          highBrightness: 80,
+          highDuration: 600,
+          fadeDuration: 3,
+          detectDistance: 5,
+          sensitivity: 70
+        }
+      };
+    },
+    openSceneDialog() {
+      this.isEditScene = false;
+      this.resetSceneForm();
+      this.sceneDialogVisible = true;
+    },
+    editScene(index) {
+      this.isEditScene = true;
+      this.editSceneIndex = index;
+      this.sceneForm = JSON.parse(JSON.stringify(this.scenes[index]));
+      this.sceneDialogVisible = true;
+    },
+    deleteScene(index) {
+      this.$confirm("确定要删除该场景吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.scenes.splice(index, 1);
+        this.$message.success("场景删除成功");
+      }).catch(() => {});
+    },
+    applyScene(index) {
+      const scene = this.scenes[index];
+      this.currentStrategy = scene.strategyIndex;
+      this.$message.success(`已应用场景: ${scene.name}`);
+    },
+    saveScene() {
+      this.$refs.sceneFormRef.validate((valid) => {
+        if (valid) {
+          if (this.isEditScene) {
+            this.scenes[this.editSceneIndex] = { ...this.sceneForm, icon: "🎯", iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)", isCustom: true };
+            this.$message.success("场景更新成功");
+          } else {
+            this.scenes.push({ ...this.sceneForm, icon: "🎯", iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)", isCustom: true });
+            this.$message.success("场景添加成功");
+          }
+          this.closeSceneDialog();
+        }
+      });
+    },
+    closeSceneDialog() {
+      this.sceneDialogVisible = false;
+      this.isEditScene = false;
+      this.editSceneIndex = -1;
+    },
+    resetSceneForm() {
+      this.sceneForm = {
+        name: "",
+        description: "",
+        strategyIndex: 0,
+        timeRange: ["09:00", "18:00"],
+        weekdays: ["1", "2", "3", "4", "5"],
+        enabled: true
+      };
+    },
+    refreshStatus() {
+      this.executionStats = {
+        deviceCount: 120 + Math.floor(Math.random() * 10),
+        onlineCount: 105 + Math.floor(Math.random() * 10),
+        successRate: (95 + Math.random() * 4).toFixed(1)
+      };
+      this.$message.success("状态刷新成功");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.strategy-manage {
+  padding: 0.16rem;
+  background: rgba(11, 30, 48, 0.6);
+}
+
+.strategy-overview {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .overview-title {
+    font-size: 0.16rem;
+    color: #ffffff;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.12rem;
+    border-left: 0.04rem solid #15e1fd;
+  }
+
+  .strategy-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
+    gap: 0.15rem;
+
+    .strategy-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-0.02rem);
+        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2);
+      }
+
+      &.active {
+        border: 2px solid #15e1fd;
+        background: rgba(21, 225, 253, 0.1);
+      }
+
+      &.custom {
+        border-left: 0.04rem solid #F093FB;
+      }
+
+      .strategy-header {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 0.15rem;
+
+        .strategy-icon {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.12rem;
+
+          .icon-emoji {
+            font-size: 0.24rem;
+          }
+        }
+
+        .strategy-info {
+          flex: 1;
+
+          .strategy-name {
+            font-size: 0.15rem;
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 0.04rem;
+          }
+
+          .strategy-desc {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .strategy-status {
+          padding: 0.04rem 0.1rem;
+          border-radius: 0.04rem;
+          font-size: 0.11rem;
+          color: #ffffff;
+          opacity: 0.8;
+
+          &.active {
+            background: rgba(145, 204, 117, 0.3);
+            color: #91CC75;
+          }
+        }
+      }
+
+      .strategy-params {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.1rem;
+        margin-bottom: 0.15rem;
+
+        .param-item {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.8;
+
+          .param-label {
+            opacity: 0.6;
+          }
+
+          .param-value {
+            color: #15e1fd;
+            font-weight: bold;
+            margin-left: 0.05rem;
+          }
+        }
+      }
+
+      .strategy-actions {
+        display: flex;
+        gap: 0.08rem;
+        justify-content: flex-end;
+      }
+    }
+
+    .add-strategy {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 2rem;
+      border: 2px dashed rgba(255, 255, 255, 0.2);
+      background: transparent;
+
+      &:hover {
+        border-color: #15e1fd;
+        background: rgba(21, 225, 253, 0.05);
+      }
+
+      .add-icon {
+        width: 0.5rem;
+        height: 0.5rem;
+        margin-bottom: 0.1rem;
+
+        svg {
+          width: 100%;
+          height: 100%;
+          fill: rgba(255, 255, 255, 0.5);
+        }
+      }
+
+      .add-text {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.6;
+      }
+    }
+  }
+}
+
+.scene-config {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      .btn-icon {
+        width: 0.14rem;
+        height: 0.14rem;
+        margin-right: 0.04rem;
+      }
+    }
+  }
+
+  .scene-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+    gap: 0.15rem;
+
+    .scene-card {
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateY(-0.02rem);
+        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2);
+      }
+
+      &.active {
+        border: 2px solid #15e1fd;
+        background: rgba(21, 225, 253, 0.1);
+      }
+
+      .scene-header {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 0.12rem;
+
+        .scene-icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.1rem;
+
+          .icon-emoji {
+            font-size: 0.2rem;
+          }
+        }
+
+        .scene-info {
+          flex: 1;
+
+          .scene-name {
+            font-size: 0.14rem;
+            color: #ffffff;
+            font-weight: bold;
+            margin-bottom: 0.03rem;
+          }
+
+          .scene-desc {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+      }
+
+      .scene-time {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.12rem;
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.8;
+
+        .time-icon {
+          width: 0.14rem;
+          height: 0.14rem;
+          margin-right: 0.05rem;
+          fill: rgba(255, 255, 255, 0.6);
+        }
+      }
+
+      .scene-actions {
+        display: flex;
+        gap: 0.08rem;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+.execution-status {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .status-refresh {
+      .refresh-icon {
+        width: 0.14rem;
+        height: 0.14rem;
+        margin-right: 0.04rem;
+      }
+    }
+  }
+
+  .status-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.15rem;
+
+    .status-card {
+      display: flex;
+      align-items: center;
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-0.02rem);
+        box-shadow: 0 0.08rem 0.2rem rgba(21, 225, 253, 0.2);
+      }
+
+      .status-icon {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.15rem;
+        background: rgba(255, 255, 255, 0.1);
+
+        svg {
+          width: 0.24rem;
+          height: 0.24rem;
+          fill: #ffffff;
+        }
+
+        &.current {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.3) 0%, rgba(21, 225, 253, 0.1) 100%);
+        }
+
+        &.devices {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.3) 0%, rgba(84, 112, 198, 0.1) 100%);
+        }
+
+        &.online {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.3) 0%, rgba(145, 204, 117, 0.1) 100%);
+        }
+
+        &.success {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.3) 0%, rgba(250, 200, 88, 0.1) 100%);
+        }
+      }
+
+      .status-info {
+        flex: 1;
+
+        .status-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.6;
+          margin-bottom: 0.05rem;
+        }
+
+        .status-value {
+          font-size: 0.2rem;
+          color: #15e1fd;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: linear-gradient(135deg, rgba(11, 30, 48, 0.98) 0%, rgba(20, 45, 65, 0.98) 100%);
+    border: 1px solid rgba(21, 225, 253, 0.3);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .el-form {
+    .el-form-item__label {
+      color: #ffffff;
+      opacity: 0.8;
+    }
+  }
+
+  .el-input,
+  .el-input-number,
+  .el-textarea,
+  .el-select,
+  .el-date-editor {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-shadow: none;
+
+      &:hover {
+        border-color: rgba(21, 225, 253, 0.5);
+      }
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .el-input-number {
+    width: 100%;
+  }
+
+  .el-slider {
+    width: 100%;
+  }
+
+  .el-slider__runway {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .el-slider__bar {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .el-slider__button {
+    border-color: #667eea;
+  }
+
+  .el-checkbox {
+    color: #ffffff;
+    opacity: 0.8;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #15e1fd;
+    border-color: #15e1fd;
+  }
+
+  .el-switch {
+    .el-switch__core {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    &.is-checked .el-switch__core {
+      background: #15e1fd;
+    }
+  }
+
+  .unit {
+    margin-left: 0.08rem;
+    color: #ffffff;
+    opacity: 0.6;
+  }
+
+  .form-section-title {
+    font-size: 0.14rem;
+    color: #15e1fd;
+    font-weight: bold;
+    margin: 0.2rem 0 0.15rem 0;
+    padding-bottom: 0.08rem;
+    border-bottom: 1px solid rgba(21, 225, 253, 0.3);
+  }
+}
+
+@media (max-width: 1485px) {
+  .strategy-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .scene-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .status-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .strategy-grid,
+  .scene-grid,
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/newLighting/energyManage/energyConsumptionEfficiencyTrend/index.vue b/src/views/newLighting/energyManage/energyConsumptionEfficiencyTrend/index.vue
new file mode 100644
index 0000000..3f71346
--- /dev/null
+++ b/src/views/newLighting/energyManage/energyConsumptionEfficiencyTrend/index.vue
@@ -0,0 +1,1854 @@
+<template>
+  <div class="lighting-energy-trend">
+    <!-- 时间选择器 -->
+    <div class="time-selector">
+      <div class="selector-label">时间段选择</div>
+      <div class="time-periods">
+        <div
+          v-for="(period, index) in timePeriods"
+          :key="index"
+          :class="['period-item', { active: activePeriod === index }]"
+          @click="handlePeriodChange(index)"
+        >
+          {{ period }}
+        </div>
+      </div>
+      <div class="date-range" v-if="activePeriod === 3">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="handleDateChange"
+          class="custom-picker"
+        />
+      </div>
+    </div>
+
+    <!-- 对比控制 -->
+    <div class="compare-control">
+      <el-checkbox v-model="enableCompare">开启对比模式</el-checkbox>
+      <div class="compare-range" v-if="enableCompare">
+        <span class="compare-label">对比时间段：</span>
+        <el-date-picker
+          v-model="compareRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          size="small"
+        />
+      </div>
+      <el-checkbox v-model="showWarningMarkers" style="margin-left: 0.2rem;">显示预警标记</el-checkbox>
+    </div>
+
+    <!-- 核心指标卡片 -->
+    <div class="indicator-cards">
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #5470C6 0%, #91CAFC 100%);">
+          <span>总能耗</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.totalEnergy }}</div>
+          <div class="card-label">总能耗(kWh)</div>
+          <div class="card-change" :class="indicators.energyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.energyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.energyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #91CC75 0%, #F5A623 100%);">
+          <span>节能率</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.savingRate }}%</div>
+          <div class="card-label">综合节能率</div>
+          <div class="card-change" :class="indicators.savingRateChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.savingRateChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.savingRateChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #FAC858 0%, #F59E0B 100%);">
+          <span>单位能耗</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.unitEnergy }}</div>
+          <div class="card-label">单位面积能耗(kWh/m²)</div>
+          <div class="card-change" :class="indicators.unitEnergyChange <= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.unitEnergyChange > 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.unitEnergyChange) }}%
+          </div>
+        </div>
+      </div>
+      <div class="indicator-card">
+        <div class="card-icon" style="background: linear-gradient(135deg, #73C0DE 0%, #3BA272 100%);">
+          <span>节电金额</span>
+        </div>
+        <div class="card-content">
+          <div class="card-value">{{ indicators.savingMoney }}万元</div>
+          <div class="card-label">累计节电金额</div>
+          <div class="card-change" :class="indicators.savingMoneyChange >= 0 ? 'positive' : 'negative'">
+            <span v-if="indicators.savingMoneyChange >= 0">↑</span>
+            <span v-else>↓</span>
+            {{ Math.abs(indicators.savingMoneyChange) }}%
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 照明系统能耗趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #15e1fd;"></span>
+          <span>照明系统总能耗趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #15e1fd;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #91CC75;"></span>
+            <span>对比时段</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #EE6666;"></span>
+            <span>预警时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="totalEnergyChartRef"></div>
+    </div>
+
+    <!-- 单位面积能耗趋势图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #FAC858;"></span>
+          <span>单位面积能耗趋势</span>
+        </div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot" style="background: #FAC858;"></span>
+            <span>当前时段</span>
+          </div>
+          <div class="legend-item" v-if="enableCompare">
+            <span class="legend-dot" style="background: #5470C6;"></span>
+            <span>对比时段</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="unitEnergyChartRef"></div>
+    </div>
+
+    <!-- 各区域能耗对比图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #91CC75;"></span>
+          <span>各区域能耗对比</span>
+        </div>
+        <div class="chart-controls">
+          <el-select v-model="areaChartType" @change="updateAreaChart" size="small" class="custom-select" style="width: 1rem;">
+            <el-option label="柱状图" value="bar"></el-option>
+            <el-option label="饼图" value="pie"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="chart" ref="areaEnergyChartRef"></div>
+    </div>
+
+    <!-- 照明类型能耗占比图 -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <div class="chart-title">
+          <span class="title-icon" style="background: #5470C6;"></span>
+          <span>照明类型能耗占比</span>
+        </div>
+      </div>
+      <div class="chart" ref="lightingTypeChartRef"></div>
+    </div>
+
+    <!-- 节能效果对比分析 -->
+    <div class="compare-analysis">
+      <div class="analysis-header">
+        <div class="analysis-title">节能效果对比分析</div>
+      </div>
+      <div class="analysis-content" v-if="enableCompare">
+        <div class="analysis-item">
+          <div class="analysis-label">能耗变化</div>
+          <div class="analysis-value" :class="compareAnalysis.energyDiff <= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.energyDiff > 0 ? '+' : '' }}{{ compareAnalysis.energyDiff }}kWh
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.energyRate <= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.energyRate > 0 ? '+' : '' }}{{ compareAnalysis.energyRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">节能率变化</div>
+          <div class="analysis-value" :class="compareAnalysis.savingRateDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.savingRateDiff > 0 ? '+' : '' }}{{ compareAnalysis.savingRateDiff }}%
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.savingRateRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.savingRateRate > 0 ? '+' : '' }}{{ compareAnalysis.savingRateRate }}%)
+          </div>
+        </div>
+        <div class="analysis-item">
+          <div class="analysis-label">节电金额变化</div>
+          <div class="analysis-value" :class="compareAnalysis.moneyDiff >= 0 ? 'up' : 'down'">
+            {{ compareAnalysis.moneyDiff > 0 ? '+' : '' }}{{ compareAnalysis.moneyDiff }}万元
+          </div>
+          <div class="analysis-percentage" :class="compareAnalysis.moneyRate >= 0 ? 'up' : 'down'">
+            ({{ compareAnalysis.moneyRate > 0 ? '+' : '' }}{{ compareAnalysis.moneyRate }}%)
+          </div>
+        </div>
+      </div>
+      <div class="analysis-hint" v-else>
+        <svg class="hint-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+          <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
+        </svg>
+        <span>开启对比模式后可查看两个时间段的能耗及节能效果对比分析</span>
+      </div>
+    </div>
+
+    <!-- 能耗预警与关联分析 -->
+    <div class="warning-energy-analysis">
+      <div class="section-header">
+        <div class="section-title">能耗预警与关联分析</div>
+        <div class="section-actions">
+          <el-select v-model="warningFilter.level" placeholder="预警级别" clearable size="small" class="custom-select" style="width: 1.2rem;">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="重要" value="major"></el-option>
+            <el-option label="一般" value="minor"></el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <!-- 预警时间轴与能耗影响 -->
+      <div class="warning-timeline-chart">
+        <div class="timeline-header">
+          <div class="header-item">
+            <span class="label">预警次数</span>
+            <span class="value">{{ warningStats.total }}</span>
+          </div>
+          <div class="header-item">
+            <span class="label">能耗损失</span>
+            <span class="value warning-impact">{{ warningStats.energyLoss }}kWh</span>
+          </div>
+          <div class="header-item">
+            <span class="label">节能率下降</span>
+            <span class="value warning-impact">{{ warningStats.savingRateDrop }}%</span>
+          </div>
+          <div class="header-item">
+            <span class="label">影响时长</span>
+            <span class="value">{{ warningStats.impactDuration }}小时</span>
+          </div>
+        </div>
+        <div class="timeline-chart" ref="warningTimelineChartRef"></div>
+      </div>
+
+      <!-- 预警影响详情表格 -->
+      <div class="warning-impact-table">
+        <div class="table-header">
+          <div class="table-title">预警影响详情</div>
+        </div>
+        <div class="table-container">
+          <table class="impact-table">
+            <thead>
+              <tr>
+                <th>预警时间</th>
+                <th>预警级别</th>
+                <th>预警标题</th>
+                <th>区域</th>
+                <th>状态</th>
+                <th>能耗影响</th>
+                <th>节能率影响</th>
+                <th>影响时长</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="warning in filteredWarnings" :key="warning.id">
+                <td>{{ warning.warningTime }}</td>
+                <td>
+                  <span class="level-badge" :class="warning.level">{{ getWarningLevelText(warning.level) }}</span>
+                </td>
+                <td class="title-cell">{{ warning.title }}</td>
+                <td>{{ warning.areaName }}</td>
+                <td>
+                  <span class="status-badge" :class="warning.status">{{ getWarningStatusText(warning.status) }}</span>
+                </td>
+                <td :class="warning.energyImpact > 0 ? 'energy-loss' : 'energy-save'">
+                  {{ warning.energyImpact > 0 ? '+' : '' }}{{ warning.energyImpact }}kWh
+                </td>
+                <td :class="warning.savingRateImpact < 0 ? 'saving-drop' : 'saving-rise'">
+                  {{ warning.savingRateImpact > 0 ? '+' : '' }}{{ warning.savingRateImpact }}%
+                </td>
+                <td>{{ warning.impactDuration }}h</td>
+                <td>
+                  <div class="action-buttons">
+                    <el-button
+                      size="small"
+                      type="primary"
+                      @click="viewWarningDetail(warning)"
+                      class="action-btn"
+                    >
+                      详情
+                    </el-button>
+                    <el-button
+                      v-if="warning.status === 'pending' || warning.status === 'processing'"
+                      size="small"
+                      type="success"
+                      @click="handleWarningResolve(warning)"
+                      class="action-btn"
+                    >
+                      处理
+                    </el-button>
+                    <el-dropdown @command="(cmd) => handleWarningCommand(cmd, warning)" class="action-dropdown">
+                      <el-button size="small" class="action-btn">
+                        更多
+                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                          <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                        </svg>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu class="custom-dropdown-menu">
+                          <el-dropdown-item command="markResolved" v-if="warning.status !== 'resolved'">标记已处理</el-dropdown-item>
+                          <el-dropdown-item command="close" v-if="warning.status !== 'resolved'">关闭预警</el-dropdown-item>
+                          <el-dropdown-item command="reopen" v-if="warning.status === 'resolved'">重新打开</el-dropdown-item>
+                          <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预警详情弹窗 -->
+    <el-dialog
+      v-model="warningDetailDialogVisible"
+      title="预警与能耗关联详情"
+      width="900px"
+      class="custom-dialog"
+    >
+      <div class="warning-detail-content" v-if="selectedWarning">
+        <div class="detail-section">
+          <div class="section-title">预警信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">预警ID:</span>
+              <span class="item-value">{{ selectedWarning.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警级别:</span>
+              <span class="item-value level-badge" :class="selectedWarning.level">{{ getWarningLevelText(selectedWarning.level) }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">区域名称:</span>
+              <span class="item-value">{{ selectedWarning.areaName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警时间:</span>
+              <span class="item-value">{{ selectedWarning.warningTime }}</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">预警描述:</span>
+              <span class="item-value">{{ selectedWarning.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗影响分析</div>
+          <div class="impact-cards">
+            <div class="impact-card">
+              <div class="card-label">能耗增加</div>
+              <div class="card-value energy-impact">{{ selectedWarning.energyImpact }}kWh</div>
+              <div class="card-desc">相比正常运行时段</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">节能率下降</div>
+              <div class="card-value saving-impact">{{ selectedWarning.savingRateImpact }}%</div>
+              <div class="card-desc">系统节能率降低</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">影响时长</div>
+              <div class="card-value">{{ selectedWarning.impactDuration }}h</div>
+              <div class="card-desc">预警持续时间</div>
+            </div>
+            <div class="impact-card">
+              <div class="card-label">经济损失</div>
+              <div class="card-value cost-impact">{{ selectedWarning.costImpact }}元</div>
+              <div class="card-desc">电费损失估算</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">能耗趋势对比</div>
+          <div class="energy-comparison-chart" ref="energyComparisonChartRef"></div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="warningDetailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "LightingEnergyConsumptionEfficiencyTrend",
+  data() {
+    return {
+      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
+      activePeriod: 0,
+      dateRange: [],
+      compareRange: [],
+      enableCompare: false,
+      showWarningMarkers: true,
+      indicators: {
+        totalEnergy: 28560,
+        energyChange: -12.5,
+        savingRate: 35.8,
+        savingRateChange: 8.5,
+        unitEnergy: 0.49,
+        unitEnergyChange: -15.2,
+        savingMoney: 48.6,
+        savingMoneyChange: 12.3
+      },
+      compareAnalysis: {
+        energyDiff: -3850,
+        energyRate: -11.9,
+        savingRateDiff: 2.8,
+        savingRateRate: 8.5,
+        moneyDiff: 5.2,
+        moneyRate: 12.0
+      },
+      warningStats: {
+        total: 12,
+        energyLoss: 2850,
+        savingRateDrop: -5.2,
+        impactDuration: 48
+      },
+      warningFilter: {
+        level: ""
+      },
+      warningList: [],
+      areaChartType: "bar",
+      totalEnergyChart: null,
+      unitEnergyChart: null,
+      areaEnergyChart: null,
+      lightingTypeChart: null,
+      warningTimelineChart: null,
+      energyComparisonChart: null,
+      warningDetailDialogVisible: false,
+      selectedWarning: null
+    };
+  },
+  computed: {
+    filteredWarnings() {
+      let warnings = [...this.warningList];
+      if (this.warningFilter.level) {
+        warnings = warnings.filter(w => w.level === this.warningFilter.level);
+      }
+      return warnings;
+    }
+  },
+  mounted() {
+    this.initTotalEnergyChart();
+    this.initUnitEnergyChart();
+    this.initAreaEnergyChart();
+    this.initLightingTypeChart();
+    this.initWarningTimelineChart();
+    this.initWarningList();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.totalEnergyChart) this.totalEnergyChart.dispose();
+    if (this.unitEnergyChart) this.unitEnergyChart.dispose();
+    if (this.areaEnergyChart) this.areaEnergyChart.dispose();
+    if (this.lightingTypeChart) this.lightingTypeChart.dispose();
+    if (this.warningTimelineChart) this.warningTimelineChart.dispose();
+    if (this.energyComparisonChart) this.energyComparisonChart.dispose();
+  },
+  watch: {
+    activePeriod() {
+      this.updateAllCharts();
+    },
+    enableCompare() {
+      this.updateAllCharts();
+    },
+    compareRange() {
+      if (this.enableCompare) {
+        this.updateAllCharts();
+      }
+    },
+    showWarningMarkers() {
+      this.updateAllCharts();
+    },
+    "warningFilter.level"() {
+      this.updateWarningTimelineChart();
+    }
+  },
+  methods: {
+    handlePeriodChange(index) {
+      this.activePeriod = index;
+    },
+    handleDateChange(value) {
+      this.updateAllCharts();
+    },
+    initTotalEnergyChart() {
+      this.totalEnergyChart = echarts.init(this.$refs.totalEnergyChartRef);
+      this.updateTotalEnergyChart();
+    },
+    updateTotalEnergyChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [4200, 4500, 4300, 4800, 5100, 4600, 4400],
+          compare: [4800, 5200, 5000, 5600, 5900, 5300, 5100],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [41000, 45000, 43000, 48000, 51000, 46000, 44000],
+          compare: [47000, 52000, 50000, 56000, 59000, 53000, 51000],
+          warningData: [3, 5, 2, 8, 6, 4, 3]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          current: [1250000, 1380000, 1320000],
+          compare: [1420000, 1580000, 1500000],
+          warningData: [45, 62, 38]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [4200, 4500, 4300, 4800, 5100, 4600, 4400],
+          compare: [4800, 5200, 5000, 5600, 5900, 5300, 5100],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+      const series = [
+        {
+          name: "当前时段",
+          type: "line",
+          smooth: true,
+          data: currentData.current,
+          itemStyle: { color: "#15e1fd" },
+          lineStyle: { color: "#15e1fd", width: 3 },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(21, 225, 253, 0.5)" },
+              { offset: 1, color: "rgba(21, 225, 253, 0)" }
+            ])
+          }
+        }
+      ];
+
+      if (this.showWarningMarkers) {
+        const warningPoints = currentData.warningData.map((value, index) => {
+          if (value > 0) {
+            return {
+              name: currentData.xData[index],
+              value: value,
+              xAxis: index,
+              yAxis: this.activePeriod === 2 ? 1400000 : 5000,
+              itemStyle: { color: "#EE6666" }
+            };
+          }
+          return null;
+        }).filter(item => item !== null);
+        
+        if (warningPoints.length > 0) {
+          series[0].markPoint = {
+            data: warningPoints,
+            symbol: "pin",
+            symbolSize: 30,
+            label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" }
+          };
+        }
+      }
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "line",
+          smooth: true,
+          data: currentData.compare,
+          itemStyle: { color: "#91CC75" },
+          lineStyle: { color: "#91CC75", width: 2, type: "dashed" }
+        });
+      }
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: series
+      };
+      this.totalEnergyChart.setOption(option);
+    },
+    initUnitEnergyChart() {
+      this.unitEnergyChart = echarts.init(this.$refs.unitEnergyChartRef);
+      this.updateUnitEnergyChart();
+    },
+    updateUnitEnergyChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [0.48, 0.52, 0.49, 0.55, 0.58, 0.53, 0.50],
+          compare: [0.56, 0.60, 0.58, 0.65, 0.68, 0.62, 0.59]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          current: [0.47, 0.51, 0.49, 0.55, 0.58, 0.53, 0.50],
+          compare: [0.54, 0.58, 0.56, 0.63, 0.66, 0.61, 0.57]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          current: [0.49, 0.53, 0.51],
+          compare: [0.56, 0.60, 0.58]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          current: [0.48, 0.52, 0.49, 0.55, 0.58, 0.53, 0.50],
+          compare: [0.56, 0.60, 0.58, 0.65, 0.68, 0.62, 0.59]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+      const series = [
+        {
+          name: "当前时段",
+          type: "bar",
+          data: currentData.current,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#FAC858" },
+              { offset: 1, color: "#F59E0B" }
+            ])
+          }
+        }
+      ];
+
+      if (this.enableCompare) {
+        series.push({
+          name: "对比时段",
+          type: "bar",
+          data: currentData.compare,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#5470C6" },
+              { offset: 1, color: "#3E5F8A" }
+            ])
+          }
+        });
+      }
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+        xAxis: {
+          type: "category",
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh/m²",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: series
+      };
+      this.unitEnergyChart.setOption(option);
+    },
+    initAreaEnergyChart() {
+      this.areaEnergyChart = echarts.init(this.$refs.areaEnergyChartRef);
+      this.updateAreaChart();
+    },
+    updateAreaChart() {
+      const areaData = [
+        { name: "办公楼A", value: 8560 },
+        { name: "办公楼B", value: 7240 },
+        { name: "商场区域", value: 12580 },
+        { name: "停车场", value: 1180 },
+        { name: "公共区域", value: 2100 }
+      ];
+
+      if (this.areaChartType === "bar") {
+        const option = {
+          tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
+          xAxis: {
+            type: "category",
+            data: areaData.map(item => item.name),
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            axisTick: { show: false }
+          },
+          yAxis: {
+            type: "value",
+            name: "kWh",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+          },
+          series: [{
+            type: "bar",
+            data: areaData.map(item => item.value),
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#91CC75" },
+                { offset: 1, color: "#66BB6A" }
+              ])
+            }
+          }]
+        };
+        this.areaEnergyChart.setOption(option);
+      } else {
+        const option = {
+          tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c}kWh ({d}%)" },
+          legend: { textStyle: { color: "rgba(255, 255, 255, 0.8)" } },
+          series: [{
+            name: "各区域能耗",
+            type: "pie",
+            radius: ["40%", "70%"],
+            data: areaData,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: "rgba(30, 30, 50, 0.95)",
+              borderWidth: 2
+            },
+            label: { show: false },
+            emphasis: {
+              label: { show: true, fontSize: 14, fontWeight: "bold", color: "#ffffff" }
+            }
+          }]
+        };
+        this.areaEnergyChart.setOption(option);
+      }
+    },
+    initLightingTypeChart() {
+      this.lightingTypeChart = echarts.init(this.$refs.lightingTypeChartRef);
+      this.updateLightingTypeChart();
+    },
+    updateLightingTypeChart() {
+      const typeData = [
+        { name: "LED照明", value: 18560, itemStyle: { color: "#5470C6" } },
+        { name: "应急照明", value: 3840, itemStyle: { color: "#91CC75" } },
+        { name: "景观照明", value: 4180, itemStyle: { color: "#FAC858" } },
+        { name: "走廊照明", value: 1680, itemStyle: { color: "#EE6666" } },
+        { name: "其他照明", value: 300, itemStyle: { color: "#73C0DE" } }
+      ];
+
+      const option = {
+        tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c}kWh ({d}%)" },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: { color: "rgba(255, 255, 255, 0.8)" }
+        },
+        series: [{
+          name: "照明类型能耗",
+          type: "pie",
+          radius: ["50%", "70%"],
+          data: typeData,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: "rgba(30, 30, 50, 0.95)",
+            borderWidth: 2
+          },
+          label: { show: false },
+          emphasis: {
+            label: { show: true, fontSize: 14, fontWeight: "bold", color: "#ffffff" }
+          }
+        }]
+      };
+      this.lightingTypeChart.setOption(option);
+    },
+    updateAllCharts() {
+      this.updateTotalEnergyChart();
+      this.updateUnitEnergyChart();
+      this.updateAreaChart();
+      this.updateLightingTypeChart();
+      this.updateWarningTimelineChart();
+    },
+    handleResize() {
+      if (this.totalEnergyChart) this.totalEnergyChart.resize();
+      if (this.unitEnergyChart) this.unitEnergyChart.resize();
+      if (this.areaEnergyChart) this.areaEnergyChart.resize();
+      if (this.lightingTypeChart) this.lightingTypeChart.resize();
+      if (this.warningTimelineChart) this.warningTimelineChart.resize();
+      if (this.energyComparisonChart) this.energyComparisonChart.resize();
+    },
+    initWarningList() {
+      this.warningList = [
+        {
+          id: "WRN202403040001",
+          level: "critical",
+          title: "办公楼A照明能耗超标",
+          description: "办公楼A照明系统能耗超出阈值25.68%",
+          areaName: "办公楼A",
+          warningTime: "2024-03-04 10:30:25",
+          status: "pending",
+          energyImpact: 450,
+          savingRateImpact: -8.5,
+          impactDuration: 8,
+          costImpact: 540,
+          energyData: { before: [4200, 4100, 4300, 4150], after: [4850, 4750, 4950, 4800] }
+        },
+        {
+          id: "WRN202403040002",
+          level: "critical",
+          title: "商场区域景观照明异常",
+          description: "商场区域景观照明能耗超出阈值31.77%",
+          areaName: "商场区域",
+          warningTime: "2024-03-04 09:15:42",
+          status: "processing",
+          energyImpact: 580,
+          savingRateImpact: -10.2,
+          impactDuration: 6,
+          costImpact: 696,
+          energyData: { before: [12800, 13200, 12600, 12900], after: [13600, 14000, 13400, 13700] }
+        },
+        {
+          id: "WRN202403040003",
+          level: "major",
+          title: "办公楼B能耗异常上升",
+          description: "办公楼B照明能耗超出阈值12.56%",
+          areaName: "办公楼B",
+          warningTime: "2024-03-04 08:45:18",
+          status: "pending",
+          energyImpact: 320,
+          savingRateImpact: -6.8,
+          impactDuration: 5,
+          costImpact: 384,
+          energyData: { before: [7200, 7300, 7250, 7200], after: [7650, 7750, 7700, 7650] }
+        },
+        {
+          id: "WRN202403030004",
+          level: "major",
+          title: "停车场照明时长超标",
+          description: "停车场照明运行时间超出标准9.24%",
+          areaName: "停车场",
+          warningTime: "2024-03-03 16:22:33",
+          status: "resolved",
+          energyImpact: 180,
+          savingRateImpact: -4.5,
+          impactDuration: 4,
+          costImpact: 216,
+          energyData: { before: [1180, 1150, 1170, 1160], after: [1280, 1250, 1270, 1260] }
+        },
+        {
+          id: "WRN202403030005",
+          level: "minor",
+          title: "公共区域照明能耗轻微超标",
+          description: "公共区域照明能耗超出阈值7.00%",
+          areaName: "公共区域",
+          warningTime: "2024-03-03 14:10:22",
+          status: "resolved",
+          energyImpact: 85,
+          savingRateImpact: -3.2,
+          impactDuration: 3,
+          costImpact: 102,
+          energyData: { before: [2100, 2080, 2090, 2085], after: [2200, 2180, 2190, 2185] }
+        }
+      ];
+    },
+    getWarningLevelText(level) {
+      const map = { critical: "严重", major: "重要", minor: "一般" };
+      return map[level] || level;
+    },
+    getWarningStatusText(status) {
+      const map = { pending: "待处理", processing: "处理中", resolved: "已处理" };
+      return map[status] || status;
+    },
+    initWarningTimelineChart() {
+      this.warningTimelineChart = echarts.init(this.$refs.warningTimelineChartRef);
+      this.updateWarningTimelineChart();
+    },
+    updateWarningTimelineChart() {
+      const dataMap = {
+        0: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          energyData: [4200, 4500, 4300, 4800, 5100, 4600, 4400],
+          savingRateData: [35.5, 36.2, 35.8, 34.5, 33.8, 35.0, 35.3],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        },
+        1: {
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          energyData: [41000, 45000, 43000, 48000, 51000, 46000, 44000],
+          savingRateData: [35.0, 36.0, 35.5, 34.8, 34.0, 35.2, 35.5],
+          warningData: [3, 5, 2, 8, 6, 4, 3]
+        },
+        2: {
+          xData: ["1月", "2月", "3月"],
+          energyData: [1250000, 1380000, 1320000],
+          savingRateData: [34.5, 36.0, 35.5],
+          warningData: [45, 62, 38]
+        },
+        3: {
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          energyData: [4200, 4500, 4300, 4800, 5100, 4600, 4400],
+          savingRateData: [35.5, 36.2, 35.8, 34.5, 33.8, 35.0, 35.3],
+          warningData: [0, 1, 0, 2, 1, 0, 0]
+        }
+      };
+
+      const currentData = dataMap[this.activePeriod];
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
+        legend: {
+          data: ["能耗", "节能率", "预警次数"],
+          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          top: 0
+        },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "15%" },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "能耗(kWh)",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+          },
+          {
+            type: "value",
+            name: "节能率/预警数",
+            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+            axisLine: { lineStyle: { color: "#365576" } },
+            splitLine: { show: false }
+          }
+        ],
+        series: [
+          {
+            name: "能耗",
+            type: "line",
+            smooth: true,
+            data: currentData.energyData,
+            itemStyle: { color: "#FAC858" },
+            lineStyle: { color: "#FAC858", width: 3 }
+          },
+          {
+            name: "节能率",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: currentData.savingRateData,
+            itemStyle: { color: "#91CC75" },
+            lineStyle: { color: "#91CC75", width: 2 }
+          },
+          {
+            name: "预警次数",
+            type: "bar",
+            yAxisIndex: 1,
+            data: currentData.warningData,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.8)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.3)" }
+              ])
+            }
+          }
+        ]
+      };
+      this.warningTimelineChart.setOption(option);
+    },
+    viewWarningDetail(warning) {
+      this.selectedWarning = warning;
+      this.warningDetailDialogVisible = true;
+      this.$nextTick(() => {
+        this.initEnergyComparisonChart();
+      });
+    },
+    handleWarningResolve(warning) {
+      warning.status = "processing";
+      this.$message.success("预警已开始处理");
+    },
+    handleWarningCommand(command, warning) {
+      if (command === "markResolved") {
+        warning.status = "resolved";
+        this.$message.success("已标记为已处理");
+      } else if (command === "close") {
+        warning.status = "resolved";
+        this.$message.success("预警已关闭");
+      } else if (command === "reopen") {
+        warning.status = "pending";
+        this.$message.success("预警已重新打开");
+      } else if (command === "export") {
+        this.$message.success("预警报告导出成功");
+      }
+    },
+    initEnergyComparisonChart() {
+      if (!this.$refs.energyComparisonChartRef || !this.selectedWarning) return;
+      this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
+      const { energyData } = this.selectedWarning;
+
+      const option = {
+        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+        legend: {
+          data: ["预警前", "预警后"],
+          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          top: 0
+        },
+        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "10%" },
+        xAxis: {
+          type: "category",
+          data: ["时段1", "时段2", "时段3", "时段4", "时段5"],
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          axisTick: { show: false }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
+          axisLine: { lineStyle: { color: "#365576" } },
+          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
+        },
+        series: [
+          {
+            name: "预警前",
+            type: "bar",
+            data: energyData.before,
+            itemStyle: { color: "#91CC75" }
+          },
+          {
+            name: "预警后",
+            type: "bar",
+            data: energyData.after,
+            itemStyle: { color: "#EE6666" }
+          }
+        ]
+      };
+      this.energyComparisonChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.lighting-energy-trend {
+  padding: 0.16rem;
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.15rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .selector-label {
+    font-size: 0.14rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .time-periods {
+    display: flex;
+    gap: 0.08rem;
+
+    .period-item {
+      padding: 0.06rem 0.15rem;
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.6;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        opacity: 0.9;
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &.active {
+        opacity: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-color: transparent;
+      }
+    }
+  }
+
+  .date-range {
+    ::v-deep .custom-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.compare-control {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.15rem 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+
+  .compare-range {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+
+    .compare-label {
+      font-size: 0.13rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+
+    ::v-deep .el-date-picker {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .el-input__inner {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-checkbox {
+    .el-checkbox__label {
+      color: #ffffff;
+    }
+  }
+}
+
+.indicator-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+    }
+
+    .card-icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 0.06rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      color: #ffffff;
+      font-size: 0.18rem;
+      font-weight: bold;
+    }
+
+    .card-content {
+      flex: 1;
+
+      .card-value {
+        font-size: 0.24rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-label {
+        font-size: 0.12rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.05rem;
+      }
+
+      .card-change {
+        font-size: 0.12rem;
+        font-weight: 500;
+
+        &.positive {
+          color: #91CC75;
+        }
+
+        &.negative {
+          color: #EE6666;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .chart-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      .title-icon {
+        width: 0.04rem;
+        height: 0.16rem;
+        border-radius: 0.02rem;
+      }
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.15rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.05rem;
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .chart-controls {
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3.5rem;
+  }
+}
+
+.compare-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .analysis-header {
+    margin-bottom: 0.2rem;
+
+    .analysis-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+  }
+
+  .analysis-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.15rem;
+
+    .analysis-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+
+      .analysis-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+      }
+
+      .analysis-value {
+        font-size: 0.18rem;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+
+        &.up {
+          color: #91CC75;
+        }
+
+        &.down {
+          color: #EE6666;
+        }
+      }
+
+      .analysis-percentage {
+        font-size: 0.12rem;
+
+        &.up {
+          color: #91CC75;
+        }
+
+        &.down {
+          color: #EE6666;
+        }
+      }
+    }
+  }
+
+  .analysis-hint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem;
+    color: #ffffff;
+    opacity: 0.6;
+
+    .hint-icon {
+      margin-right: 0.1rem;
+      font-size: 0.18rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      fill: currentColor;
+    }
+  }
+}
+
+.warning-energy-analysis {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.15rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .warning-timeline-chart {
+    .timeline-header {
+      display: flex;
+      gap: 0.3rem;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+      margin-bottom: 0.2rem;
+
+      .header-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+
+        .label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.05rem;
+        }
+
+        .value {
+          font-size: 0.18rem;
+          font-weight: bold;
+          color: #15e1fd;
+
+          &.warning-impact {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+
+    .timeline-chart {
+      height: 3.5rem;
+    }
+  }
+
+  .warning-impact-table {
+    margin-top: 0.2rem;
+
+    .table-header {
+      margin-bottom: 0.15rem;
+
+      .table-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .impact-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 12rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.12rem 0.1rem;
+              text-align: left;
+              font-size: 0.13rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.12rem 0.1rem;
+              font-size: 0.12rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+
+              &.energy-loss {
+                color: #EE6666;
+              }
+
+              &.energy-save {
+                color: #91CC75;
+              }
+
+              &.saving-drop {
+                color: #EE6666;
+              }
+
+              &.saving-rise {
+                color: #91CC75;
+              }
+
+              .title-cell {
+                max-width: 2rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                cursor: pointer;
+
+                &:hover {
+                  color: #15e1fd;
+                }
+              }
+
+              .level-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.critical {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                }
+
+                &.major {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                }
+
+                &.minor {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                }
+              }
+
+              .status-badge {
+                display: inline-block;
+                padding: 0.03rem 0.1rem;
+                border-radius: 0.03rem;
+                font-size: 0.11rem;
+                font-weight: 500;
+
+                &.pending {
+                  background: rgba(238, 102, 102, 0.2);
+                  color: #EE6666;
+                }
+
+                &.processing {
+                  background: rgba(250, 200, 88, 0.2);
+                  color: #FAC858;
+                }
+
+                &.resolved {
+                  background: rgba(145, 204, 117, 0.2);
+                  color: #91CC75;
+                }
+              }
+
+              .action-buttons {
+                display: flex;
+                align-items: center;
+                gap: 0.06rem;
+                flex-wrap: nowrap;
+
+                .action-btn,
+                .action-dropdown {
+                  ::v-deep .el-button--small {
+                    padding: 0.04rem 0.1rem;
+                    font-size: 0.11rem;
+                    border-radius: 0.04rem;
+                    font-weight: 500;
+                    white-space: nowrap;
+
+                    &:not(.el-button--primary) {
+                      background: rgba(255, 255, 255, 0.1);
+                      border: 1px solid rgba(255, 255, 255, 0.2);
+                      color: #ffffff;
+
+                      &:hover {
+                        background: rgba(255, 255, 255, 0.2);
+                      }
+                    }
+
+                    &.el-button--primary {
+                      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                      border: none;
+                      color: #ffffff;
+                    }
+
+                    &.el-button--success {
+                      background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+                      border: none;
+                      color: #ffffff;
+                    }
+
+                    svg {
+                      width: 0.1rem;
+                      height: 0.1rem;
+                      fill: #ffffff;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .warning-detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.14rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.13rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.03rem 0.1rem;
+              border-radius: 0.03rem;
+              font-size: 0.11rem;
+            }
+          }
+        }
+      }
+
+      .impact-cards {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.15rem;
+
+        .impact-card {
+          padding: 0.15rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.06rem;
+          text-align: center;
+
+          .card-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.08rem;
+          }
+
+          .card-value {
+            font-size: 0.18rem;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+
+            &.energy-impact {
+              color: #EE6666;
+            }
+
+            &.saving-impact {
+              color: #FAC858;
+            }
+
+            &.cost-impact {
+              color: #15e1fd;
+            }
+          }
+
+          .card-desc {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+      }
+
+      .energy-comparison-chart {
+        height: 3rem;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .indicator-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .compare-analysis {
+    .analysis-content {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .chart-container {
+    .chart {
+      height: 3rem;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLighting/energyManage/retrofitEffectivenessCompariso/index.vue b/src/views/newLighting/energyManage/retrofitEffectivenessCompariso/index.vue
new file mode 100644
index 0000000..53d98ff
--- /dev/null
+++ b/src/views/newLighting/energyManage/retrofitEffectivenessCompariso/index.vue
@@ -0,0 +1,1738 @@
+<template>
+  <div class="retrofit-effectiveness">
+    <!-- 时间段选择 -->
+    <div class="time-selector">
+      <div class="selector-label">对比时间段</div>
+      <div class="time-range-group">
+        <div class="range-item">
+          <div class="range-label">改造前</div>
+          <el-date-picker
+            v-model="beforeDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+        <div class="range-divider">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="range-item">
+          <div class="range-label">改造后</div>
+          <el-date-picker
+            v-model="afterDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            @change="handleDateChange"
+            class="custom-picker"
+          />
+        </div>
+      </div>
+      <div class="selector-actions">
+        <el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
+        <el-button size="small" @click="exportData">导出数据</el-button>
+      </div>
+    </div>
+
+    <!-- 核心指标对比 -->
+    <div class="comparison-indicators">
+      <div class="indicator-card energy">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">能耗对比</div>
+        </div>
+        <div class="card-content">
+          <div class="metric-row">
+            <div class="metric-item before">
+              <div class="metric-label">改造前</div>
+              <div class="metric-value">{{ comparisonIndicators.beforeEnergy }}</div>
+              <div class="metric-unit">kWh</div>
+            </div>
+            <div class="metric-divider">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M690 512l-256-256q-10-10-10-25t10-25l30-30q10-10 25-10t25 10l296 296q10 10 10 25t-10 25L520 816q-10 10-25 10t-25-10l-30-30q-10-10-10-25t10-25l256-256z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="metric-item after">
+              <div class="metric-label">改造后</div>
+              <div class="metric-value">{{ comparisonIndicators.afterEnergy }}</div>
+              <div class="metric-unit">kWh</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card saving">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">节能成效</div>
+        </div>
+        <div class="card-content">
+          <div class="saving-metrics">
+            <div class="saving-item">
+              <div class="saving-label">节能量</div>
+              <div class="saving-value">{{ comparisonIndicators.energySaving }}</div>
+              <div class="saving-unit">kWh</div>
+            </div>
+            <div class="saving-divider"></div>
+            <div class="saving-item">
+              <div class="saving-label">节能率</div>
+              <div class="saving-value highlight">{{ comparisonIndicators.energySavingRate }}%</div>
+              <div class="saving-unit">同比降低</div>
+            </div>
+            <div class="saving-divider"></div>
+            <div class="saving-item">
+              <div class="saving-label">节电金额</div>
+              <div class="saving-value">¥{{ comparisonIndicators.costSaving }}</div>
+              <div class="saving-unit">元</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card unit">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">单位能耗</div>
+        </div>
+        <div class="card-content">
+          <div class="unit-metrics">
+            <div class="unit-metric">
+              <div class="unit-metric-label">改造前</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.beforeUnitEnergy }}</div>
+              <div class="unit-metric-unit">kWh/m²</div>
+            </div>
+            <div class="unit-metric">
+              <div class="unit-metric-label">改造后</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.afterUnitEnergy }}</div>
+              <div class="unit-metric-unit">kWh/m²</div>
+            </div>
+            <div class="unit-metric highlight">
+              <div class="unit-metric-label">降低</div>
+              <div class="unit-metric-value">{{ comparisonIndicators.unitEnergyReduction }}%</div>
+              <div class="unit-metric-unit">单位能耗</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="indicator-card carbon">
+        <div class="card-header">
+          <div class="card-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="card-title">碳减排</div>
+        </div>
+        <div class="card-content">
+          <div class="carbon-metrics">
+            <div class="carbon-metric">
+              <div class="carbon-metric-label">碳减排量</div>
+              <div class="carbon-metric-value">{{ comparisonIndicators.carbonReduction }}</div>
+              <div class="carbon-metric-unit">tCO₂e</div>
+            </div>
+            <div class="carbon-metric">
+              <div class="carbon-metric-label">减排率</div>
+              <div class="carbon-metric-value highlight">{{ comparisonIndicators.carbonReductionRate }}%</div>
+              <div class="carbon-metric-unit">同比下降</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日能耗趋势对比图 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">日能耗趋势对比</div>
+        <div class="chart-controls">
+          <el-button-group>
+            <el-button :type="timeRange === 'week' ? 'primary' : ''" size="small" @click="setTimeRange('week')">周</el-button>
+            <el-button :type="timeRange === 'month' ? 'primary' : ''" size="small" @click="setTimeRange('month')">月</el-button>
+            <el-button :type="timeRange === 'quarter' ? 'primary' : ''" size="small" @click="setTimeRange('quarter')">季度</el-button>
+          </el-button-group>
+        </div>
+      </div>
+      <div class="chart" ref="dailyEnergyChartRef"></div>
+    </div>
+
+    <!-- 周期用电量对比 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">周期用电量对比</div>
+        <div class="chart-legend">
+          <div class="legend-item">
+            <span class="legend-dot before"></span>
+            <span>改造前</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot after"></span>
+            <span>改造后</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-dot saving"></span>
+            <span>节能量</span>
+          </div>
+        </div>
+      </div>
+      <div class="chart" ref="periodEnergyChartRef"></div>
+    </div>
+
+    <!-- 区域改造效果对比 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">区域改造效果对比</div>
+      </div>
+      <div class="chart" ref="areaComparisonChartRef"></div>
+    </div>
+
+    <!-- 改造成效详情表格 -->
+    <div class="table-section">
+      <div class="section-header">
+        <div class="section-title">改造成效详情</div>
+        <div class="section-actions">
+          <el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
+          <el-button size="small" @click="exportData">导出数据</el-button>
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>区域</th>
+              <th>改造前总能耗</th>
+              <th>改造后总能耗</th>
+              <th>节能量</th>
+              <th>节能率</th>
+              <th>节电金额</th>
+              <th>改造效果</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in areaEffectiveness" :key="index">
+              <td>{{ item.area }}</td>
+              <td>{{ item.beforeEnergy }} kWh</td>
+              <td>{{ item.afterEnergy }} kWh</td>
+              <td class="positive">{{ item.savingEnergy }} kWh</td>
+              <td class="positive">{{ item.savingRate }}%</td>
+              <td class="positive">¥{{ item.savingCost }}</td>
+              <td>
+                <span class="effect-tag" :class="item.effectClass">{{ item.effect }}</span>
+              </td>
+            </tr>
+            <tr class="total-row">
+              <td>总计</td>
+              <td>{{ totalEffectiveness.beforeEnergy }} kWh</td>
+              <td>{{ totalEffectiveness.afterEnergy }} kWh</td>
+              <td class="positive">{{ totalEffectiveness.savingEnergy }} kWh</td>
+              <td class="positive">{{ totalEffectiveness.savingRate }}%</td>
+              <td class="positive">¥{{ totalEffectiveness.savingCost }}</td>
+              <td>-</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 照明类型改造效果 -->
+    <div class="chart-section full-width">
+      <div class="chart-header">
+        <div class="chart-title">照明类型改造效果</div>
+      </div>
+      <div class="chart" ref="lightingTypeChartRef"></div>
+    </div>
+
+    <!-- 报告对话框 -->
+    <el-dialog
+      title="节能改造效果分析报告"
+      :visible.sync="reportDialogVisible"
+      width="80%"
+      :close-on-click-modal="false"
+      class="report-dialog"
+    >
+      <div class="report-content" v-if="reportDialogVisible">
+        <div class="report-header">
+          <h2>照明系统节能改造效果分析报告</h2>
+          <p>报告生成时间：{{ reportData.generateTime }}</p>
+        </div>
+        <div class="report-section">
+          <h3>一、对比时间段</h3>
+          <p>改造前：{{ beforeDateRange[0] }} 至 {{ beforeDateRange[1] }}</p>
+          <p>改造后：{{ afterDateRange[0] }} 至 {{ afterDateRange[1] }}</p>
+        </div>
+        <div class="report-section">
+          <h3>二、核心指标对比</h3>
+          <div class="report-metrics">
+            <div class="report-metric">
+              <div class="metric-title">总能耗</div>
+              <div class="metric-comparison">
+                <span class="before">{{ comparisonIndicators.beforeEnergy }} kWh</span>
+                <span class="arrow">→</span>
+                <span class="after">{{ comparisonIndicators.afterEnergy }} kWh</span>
+              </div>
+              <div class="metric-change">降低 {{ comparisonIndicators.energySavingRate }}%</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">节能量</div>
+              <div class="metric-value">{{ comparisonIndicators.energySaving }} kWh</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">节电金额</div>
+              <div class="metric-value">¥{{ comparisonIndicators.costSaving }}</div>
+            </div>
+            <div class="report-metric">
+              <div class="metric-title">碳减排量</div>
+              <div class="metric-value">{{ comparisonIndicators.carbonReduction }} tCO₂e</div>
+            </div>
+          </div>
+        </div>
+        <div class="report-section">
+          <h3>三、区域改造成效汇总</h3>
+          <table class="report-table">
+            <thead>
+              <tr>
+                <th>区域</th>
+                <th>节能率</th>
+                <th>节能量</th>
+                <th>节电金额</th>
+                <th>改造效果</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in areaEffectiveness" :key="index">
+                <td>{{ item.area }}</td>
+                <td>{{ item.savingRate }}%</td>
+                <td>{{ item.savingEnergy }} kWh</td>
+                <td>¥{{ item.savingCost }}</td>
+                <td>{{ item.effect }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="report-section">
+          <h3>四、结论与建议</h3>
+          <p>本次节能改造项目总体节能效果显著，平均节能率达到{{ comparisonIndicators.energySavingRate }}%，累计节电{{ comparisonIndicators.energySaving }} kWh，节约电费¥{{ comparisonIndicators.costSaving }}。</p>
+          <p>改造后照明系统能效明显提升，单位面积能耗降低{{ comparisonIndicators.unitEnergyReduction }}%，碳减排{{ comparisonIndicators.carbonReduction }} tCO₂e。</p>
+          <p>建议继续优化照明控制系统，进一步挖掘节能潜力。</p>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="reportDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="downloadReport">下载报告</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "RetrofitEffectivenessComparison",
+  data() {
+    return {
+      // 日期范围
+      beforeDateRange: [],
+      afterDateRange: [],
+      // 时间范围
+      timeRange: 'week',
+      // 报告对话框
+      reportDialogVisible: false,
+      // 对比指标
+      comparisonIndicators: {
+        beforeEnergy: 458000,
+        afterEnergy: 286000,
+        energySaving: 172000,
+        energySavingRate: 37.6,
+        costSaving: 206400,
+        beforeUnitEnergy: 45.8,
+        afterUnitEnergy: 28.6,
+        unitEnergyReduction: 37.6,
+        carbonReduction: 89.44,
+        carbonReductionRate: 37.6
+      },
+      // 区域改造成效
+      areaEffectiveness: [
+        { area: "办公区A", beforeEnergy: 125000, afterEnergy: 78000, savingEnergy: 47000, savingRate: 37.6, savingCost: 56400, effect: "显著改善", effectClass: "excellent" },
+        { area: "办公区B", beforeEnergy: 98000, afterEnergy: 62000, savingEnergy: 36000, savingRate: 36.7, savingCost: 43200, effect: "显著改善", effectClass: "excellent" },
+        { area: "商场区域", beforeEnergy: 145000, afterEnergy: 90000, savingEnergy: 55000, savingRate: 37.9, savingCost: 66000, effect: "显著改善", effectClass: "excellent" },
+        { area: "停车场", beforeEnergy: 52000, afterEnergy: 32000, savingEnergy: 20000, savingRate: 38.5, savingCost: 24000, effect: "显著改善", effectClass: "excellent" },
+        { area: "公共区域", beforeEnergy: 38000, afterEnergy: 24000, savingEnergy: 14000, savingRate: 36.8, savingCost: 16800, effect: "改善", effectClass: "good" }
+      ],
+      // 总计
+      totalEffectiveness: {
+        beforeEnergy: 458000,
+        afterEnergy: 286000,
+        savingEnergy: 172000,
+        savingRate: 37.6,
+        savingCost: 206400
+      },
+      // 报告数据
+      reportData: {
+        generateTime: ""
+      },
+      // 图表实例
+      dailyEnergyChart: null,
+      periodEnergyChart: null,
+      areaComparisonChart: null,
+      lightingTypeChart: null
+    };
+  },
+  mounted() {
+    this.initDateRanges();
+    this.initDailyEnergyChart();
+    this.initPeriodEnergyChart();
+    this.initAreaComparisonChart();
+    this.initLightingTypeChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.dailyEnergyChart) this.dailyEnergyChart.dispose();
+    if (this.periodEnergyChart) this.periodEnergyChart.dispose();
+    if (this.areaComparisonChart) this.areaComparisonChart.dispose();
+    if (this.lightingTypeChart) this.lightingTypeChart.dispose();
+  },
+  methods: {
+    // 初始化日期范围
+    initDateRanges() {
+      const today = new Date();
+      const lastYearStart = new Date(today.getFullYear() - 1, 0, 1);
+      const lastYearEnd = new Date(today.getFullYear() - 1, 11, 31);
+      const currentYearStart = new Date(today.getFullYear(), 0, 1);
+      const currentYearEnd = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+      this.beforeDateRange = [
+        this.formatDate(lastYearStart),
+        this.formatDate(lastYearEnd)
+      ];
+      this.afterDateRange = [
+        this.formatDate(currentYearStart),
+        this.formatDate(currentYearEnd)
+      ];
+    },
+    // 格式化日期
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    },
+    // 设置时间范围
+    setTimeRange(range) {
+      this.timeRange = range;
+      this.updateDailyEnergyChart();
+    },
+    // 日期范围变化
+    handleDateChange(value) {
+      console.log("日期范围变化:", value);
+      this.updateAllCharts();
+    },
+    // 生成报告
+    generateReport() {
+      this.reportData.generateTime = new Date().toLocaleString();
+      this.reportDialogVisible = true;
+    },
+    // 导出数据
+    exportData() {
+      this.$message.success("数据导出成功");
+    },
+    // 下载报告
+    downloadReport() {
+      this.$message.success("报告下载成功");
+    },
+    // 初始化日能耗趋势对比图
+    initDailyEnergyChart() {
+      this.dailyEnergyChart = echarts.init(this.$refs.dailyEnergyChartRef);
+      this.updateDailyEnergyChart();
+    },
+    // 更新日能耗趋势对比图
+    updateDailyEnergyChart() {
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后", "节能量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: this.getDailyEnergyXData(),
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: this.getDailyEnergyBeforeData(),
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#EE6666" },
+                  { offset: 1, color: "#E53935" }
+                ]
+              }
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: this.getDailyEnergyAfterData(),
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#91CC75" },
+                  { offset: 1, color: "#66BB6A" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节能量",
+            type: "line",
+            data: this.getDailyEnergySavingData(),
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd",
+              width: 2
+            },
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ],
+              itemStyle: {
+                color: "#15e1fd"
+              }
+            }
+          }
+        ]
+      };
+      this.dailyEnergyChart.setOption(option);
+    },
+    // 获取日能耗X轴数据
+    getDailyEnergyXData() {
+      const data = {
+        week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        month: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+        quarter: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取改造前日能耗数据
+    getDailyEnergyBeforeData() {
+      const data = {
+        week: [1250, 1320, 1280, 1350, 1400, 1100, 1050],
+        month: [12600, 12800, 13000, 13200, 13500, 13800, 14200],
+        quarter: [38000, 41000, 44000, 48000, 52000, 55000, 58000, 61000, 64000, 68000, 72000, 75000]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取改造后日能耗数据
+    getDailyEnergyAfterData() {
+      const data = {
+        week: [780, 820, 800, 840, 880, 680, 650],
+        month: [7850, 8000, 8100, 8200, 8350, 8500, 8650],
+        quarter: [23700, 25600, 27500, 29900, 32500, 34300, 36200, 38100, 40000, 42500, 44900, 46800]
+      };
+      return data[this.timeRange] || data.week;
+    },
+    // 获取节能量数据
+    getDailyEnergySavingData() {
+      const beforeData = this.getDailyEnergyBeforeData();
+      const afterData = this.getDailyEnergyAfterData();
+      return beforeData.map((val, idx) => val - afterData[idx]);
+    },
+    // 初始化周期用电量对比图
+    initPeriodEnergyChart() {
+      this.periodEnergyChart = echarts.init(this.$refs.periodEnergyChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后", "节能量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用电量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "节能量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: [38000, 41000, 44000, 48000, 52000, 55000, 58000, 61000, 64000, 68000, 72000, 75000],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#EE6666" },
+                  { offset: 1, color: "#E53935" }
+                ]
+              }
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: [23700, 25600, 27500, 29900, 32500, 34300, 36200, 38100, 40000, 42500, 44900, 46800],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#91CC75" },
+                  { offset: 1, color: "#66BB6A" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节能量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [14300, 15400, 16500, 18100, 19500, 20700, 21800, 22900, 24000, 25500, 27100, 28200],
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd",
+              width: 2
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "rgba(21, 225, 253, 0.3)" },
+                  { offset: 1, color: "rgba(21, 225, 253, 0)" }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.periodEnergyChart.setOption(option);
+    },
+    // 初始化区域改造效果对比图
+    initAreaComparisonChart() {
+      this.areaComparisonChart = echarts.init(this.$refs.areaComparisonChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["节能率", "节能量"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["办公区A", "办公区B", "商场区域", "停车场", "公共区域"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "节能率(%)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "节能量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "节能率",
+            type: "bar",
+            data: [37.6, 36.7, 37.9, 38.5, 36.8],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#15e1fd" },
+                  { offset: 1, color: "#0d9db8" }
+                ]
+              }
+            }
+          },
+          {
+            name: "节能量",
+            type: "line",
+            yAxisIndex: 1,
+            data: [47000, 36000, 55000, 20000, 14000],
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75",
+              width: 2
+            }
+          }
+        ]
+      };
+      this.areaComparisonChart.setOption(option);
+    },
+    // 初始化照明类型改造效果图
+    initLightingTypeChart() {
+      this.lightingTypeChart = echarts.init(this.$refs.lightingTypeChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后", "节能率"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["LED照明", "应急灯", "景观灯", "走廊灯", "其他"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "用电量(kWh)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+            }
+          },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62",
+                type: "dashed"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "节能率(%)",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.8)"
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#365576"
+              }
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: [185000, 68000, 95000, 72000, 38000],
+            itemStyle: {
+              color: "#EE6666"
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: [115000, 42000, 59000, 45000, 25000],
+            itemStyle: {
+              color: "#91CC75"
+            }
+          },
+          {
+            name: "节能率",
+            type: "line",
+            yAxisIndex: 1,
+            data: [37.8, 38.2, 37.9, 37.5, 34.2],
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd",
+              width: 2
+            }
+          }
+        ]
+      };
+      this.lightingTypeChart.setOption(option);
+    },
+    // 更新所有图表
+    updateAllCharts() {
+      this.updateDailyEnergyChart();
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.dailyEnergyChart) this.dailyEnergyChart.resize();
+      if (this.periodEnergyChart) this.periodEnergyChart.resize();
+      if (this.areaComparisonChart) this.areaComparisonChart.resize();
+      if (this.lightingTypeChart) this.lightingTypeChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.retrofit-effectiveness {
+  padding: 0.16rem;
+  background: rgba(11, 30, 48, 0.6);
+}
+
+.time-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  .selector-label {
+    font-size: 0.15rem;
+    color: #ffffff;
+    font-weight: bold;
+  }
+
+  .time-range-group {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+
+    .range-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      .range-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-picker {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: none;
+
+          &:hover {
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .range-divider {
+      display: flex;
+      align-items: center;
+      padding: 0 0.15rem;
+
+      svg {
+        width: 0.24rem;
+        height: 0.24rem;
+        fill: #ffffff;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .selector-actions {
+    display: flex;
+    gap: 0.1rem;
+  }
+}
+
+.comparison-indicators {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .indicator-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      box-shadow: 0 0.08rem 0.2rem rgba(21, 225, 253, 0.2);
+    }
+
+    &.energy {
+      border-left: 0.04rem solid #EE6666;
+    }
+
+    &.saving {
+      border-left: 0.04rem solid #91CC75;
+    }
+
+    &.unit {
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    &.carbon {
+      border-left: 0.04rem solid #FAC858;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.1rem;
+      margin-bottom: 0.15rem;
+
+      .card-icon {
+        width: 0.32rem;
+        height: 0.32rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.1);
+
+        svg {
+          width: 0.16rem;
+          height: 0.16rem;
+          fill: #ffffff;
+        }
+      }
+
+      .card-title {
+        font-size: 0.14rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
+
+    .card-content {
+      .metric-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .metric-item {
+          text-align: center;
+          flex: 1;
+
+          &.before {
+            .metric-value {
+              color: #EE6666;
+            }
+          }
+
+          &.after {
+            .metric-value {
+              color: #91CC75;
+            }
+          }
+
+          .metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.05rem;
+          }
+
+          .metric-value {
+            font-size: 0.18rem;
+            font-weight: bold;
+            margin-bottom: 0.03rem;
+          }
+
+          .metric-unit {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+          }
+        }
+
+        .metric-divider {
+          width: 0.24rem;
+          height: 0.24rem;
+
+          svg {
+            width: 100%;
+            height: 100%;
+            fill: #ffffff;
+            opacity: 0.4;
+          }
+        }
+      }
+
+      .saving-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .saving-item {
+          text-align: center;
+          flex: 1;
+
+          .saving-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #91CC75;
+            margin-bottom: 0.03rem;
+
+            &.highlight {
+              font-size: 0.2rem;
+            }
+          }
+
+          .saving-unit {
+            font-size: 0.1rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+
+        .saving-divider {
+          width: 1px;
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      .unit-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .unit-metric {
+          text-align: center;
+          flex: 1;
+
+          .unit-metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.05rem;
+          }
+
+          .unit-metric-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #ffffff;
+            margin-bottom: 0.03rem;
+          }
+
+          .unit-metric-unit {
+            font-size: 0.1rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+
+          &.highlight {
+            .unit-metric-value {
+              color: #15e1fd;
+            }
+          }
+        }
+      }
+
+      .carbon-metrics {
+        display: flex;
+        justify-content: space-between;
+
+        .carbon-metric {
+          text-align: center;
+          flex: 1;
+
+          .carbon-metric-label {
+            font-size: 0.11rem;
+            color: #ffffff;
+            opacity: 0.6;
+            margin-bottom: 0.05rem;
+          }
+
+          .carbon-metric-value {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #FAC858;
+            margin-bottom: 0.03rem;
+
+            &.highlight {
+              color: #91CC75;
+            }
+          }
+
+          .carbon-metric-unit {
+            font-size: 0.1rem;
+            color: #ffffff;
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  &.full-width {
+    width: 100%;
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .chart-controls {
+      ::v-deep .el-button-group {
+        .el-button {
+          background: rgba(255, 255, 255, 0.1);
+          border-color: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(21, 225, 253, 0.5);
+          }
+
+          &.el-button--primary {
+            background: rgba(21, 225, 253, 0.2);
+            border-color: #15e1fd;
+            color: #15e1fd;
+          }
+        }
+      }
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 0.2rem;
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.13rem;
+        color: #ffffff;
+
+        .legend-dot {
+          width: 0.1rem;
+          height: 0.1rem;
+          border-radius: 50%;
+          margin-right: 0.06rem;
+
+          &.before {
+            background: #EE6666;
+          }
+
+          &.after {
+            background: #91CC75;
+          }
+
+          &.saving {
+            background: #15e1fd;
+          }
+        }
+      }
+    }
+  }
+
+  .chart {
+    width: 100%;
+    height: 3.5rem;
+  }
+}
+
+.table-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.15rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .section-actions {
+      display: flex;
+      gap: 0.1rem;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      position: relative;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(21, 225, 253, 0.05) 100%);
+
+          th {
+            padding: 0.14rem 0.12rem;
+            text-align: left;
+            font-size: 0.14rem;
+            color: #ffffff;
+            font-weight: bold;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            background: transparent;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.08);
+            transform: translateX(0.02rem);
+          }
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.02);
+          }
+
+          &.total-row {
+            background: linear-gradient(135deg, rgba(145, 204, 117, 0.15) 0%, rgba(145, 204, 117, 0.05) 100%);
+            border-top: 2px solid rgba(145, 204, 117, 0.3);
+            font-weight: bold;
+
+            td {
+              color: #91CC75;
+            }
+          }
+
+          td {
+            padding: 0.12rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.8;
+
+            &.positive {
+              color: #91CC75;
+              font-weight: bold;
+            }
+
+            &.negative {
+              color: #EE6666;
+            }
+
+            .effect-tag {
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.12rem;
+              display: inline-block;
+
+              &.excellent {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.3) 0%, rgba(145, 204, 117, 0.1) 100%);
+                color: #91CC75;
+                border: 1px solid rgba(145, 204, 117, 0.5);
+                box-shadow: 0 0.02rem 0.06rem rgba(145, 204, 117, 0.2);
+              }
+
+              &.good {
+                background: linear-gradient(135deg, rgba(84, 112, 198, 0.3) 0%, rgba(84, 112, 198, 0.1) 100%);
+                color: #5470C6;
+                border: 1px solid rgba(84, 112, 198, 0.5);
+                box-shadow: 0 0.02rem 0.06rem rgba(84, 112, 198, 0.2);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 报告对话框
+::v-deep .report-dialog {
+  .el-dialog {
+    background: linear-gradient(135deg, rgba(11, 30, 48, 0.95) 0%, rgba(20, 45, 65, 0.95) 100%);
+    border: 1px solid rgba(21, 225, 253, 0.2);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    .el-dialog__title {
+      color: #ffffff;
+      font-size: 0.18rem;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0.3rem;
+  }
+}
+
+.report-content {
+  color: #ffffff;
+
+  .report-header {
+    text-align: center;
+    margin-bottom: 0.3rem;
+    padding-bottom: 0.2rem;
+    border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+
+    h2 {
+      font-size: 0.24rem;
+      margin: 0 0 0.1rem 0;
+      color: #15e1fd;
+    }
+
+    p {
+      font-size: 0.13rem;
+      opacity: 0.7;
+      margin: 0;
+    }
+  }
+
+  .report-section {
+    margin-bottom: 0.3rem;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.06rem;
+    border-left: 0.04rem solid #91CC75;
+
+    h3 {
+      font-size: 0.16rem;
+      margin: 0 0 0.15rem 0;
+      color: #91CC75;
+    }
+
+    p {
+      font-size: 0.14rem;
+      margin: 0.08rem 0;
+      opacity: 0.9;
+      line-height: 1.6;
+    }
+
+    .report-metrics {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.15rem;
+      margin-top: 0.15rem;
+
+      .report-metric {
+        background: rgba(255, 255, 255, 0.05);
+        padding: 0.15rem;
+        border-radius: 0.06rem;
+        text-align: center;
+
+        .metric-title {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.08rem;
+        }
+
+        .metric-comparison {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.08rem;
+          margin-bottom: 0.05rem;
+
+          .before {
+            color: #EE6666;
+            font-size: 0.13rem;
+          }
+
+          .arrow {
+            color: #ffffff;
+            opacity: 0.5;
+            font-size: 0.12rem;
+          }
+
+          .after {
+            color: #91CC75;
+            font-size: 0.13rem;
+          }
+        }
+
+        .metric-value {
+          font-size: 0.18rem;
+          font-weight: bold;
+          color: #15e1fd;
+          margin-bottom: 0.05rem;
+        }
+
+        .metric-change {
+          font-size: 0.12rem;
+          color: #91CC75;
+        }
+      }
+    }
+
+    .report-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 0.15rem;
+
+      thead {
+        tr {
+          background: rgba(21, 225, 253, 0.15);
+
+          th {
+            padding: 0.1rem;
+            text-align: left;
+            font-size: 0.13rem;
+            color: #ffffff;
+            font-weight: bold;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.02);
+          }
+
+          td {
+            padding: 0.1rem;
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.8;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    text-align: right;
+  }
+}
+
+@media (max-width: 1485px) {
+  .comparison-indicators {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .chart-section {
+    .chart {
+      height: 3rem;
+    }
+  }
+
+  .report-content {
+    .report-section {
+      .report-metrics {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .comparison-indicators {
+    grid-template-columns: 1fr;
+  }
+
+  .time-selector {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .time-range-group {
+      width: 100%;
+      flex-direction: column;
+
+      .range-item {
+        width: 100%;
+
+        ::v-deep .custom-picker {
+          width: 100%;
+        }
+      }
+    }
+
+    .selector-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>
diff --git a/src/views/newLighting/energyManage/warning/index.vue b/src/views/newLighting/energyManage/warning/index.vue
new file mode 100644
index 0000000..28400c1
--- /dev/null
+++ b/src/views/newLighting/energyManage/warning/index.vue
@@ -0,0 +1,1515 @@
+<template>
+  <div class="energy-warning">
+    <!-- 预警统计卡片 -->
+    <div class="warning-stats">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.total }}</div>
+          <div class="stat-label">预警总数</div>
+        </div>
+      </div>
+      <div class="stat-card critical">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.critical }}</div>
+          <div class="stat-label">严重预警</div>
+        </div>
+      </div>
+      <div class="stat-card major">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.major }}</div>
+          <div class="stat-label">重要预警</div>
+        </div>
+      </div>
+      <div class="stat-card minor">
+        <div class="stat-icon">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="stat-info">
+          <div class="stat-value">{{ warningStats.minor }}</div>
+          <div class="stat-label">一般预警</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预警筛选 -->
+    <div class="filter-section">
+      <div class="filter-group">
+        <div class="filter-item">
+          <label>预警级别</label>
+          <el-select v-model="filterForm.level" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="严重" value="critical"></el-option>
+            <el-option label="重要" value="major"></el-option>
+            <el-option label="一般" value="minor"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>处理状态</label>
+          <el-select v-model="filterForm.status" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待处理" value="pending"></el-option>
+            <el-option label="处理中" value="processing"></el-option>
+            <el-option label="已处理" value="resolved"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>部门名称</label>
+          <el-select v-model="filterForm.department" placeholder="全部" clearable class="custom-select">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="办公楼A" value="OA"></el-option>
+            <el-option label="办公楼B" value="OB"></el-option>
+            <el-option label="商场区域" value="SM"></el-option>
+            <el-option label="停车场" value="PK"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>预警时间</label>
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="filter-actions">
+        <el-input
+          v-model="filterForm.keyword"
+          placeholder="搜索项目/部门"
+          clearable
+          class="search-input custom-input"
+        ></el-input>
+        <el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
+        <el-button @click="handleReset" class="custom-btn">重置</el-button>
+        <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
+      </div>
+    </div>
+
+    <!-- 预警列表 -->
+    <div class="warning-list">
+      <div class="list-header">
+        <div class="list-title">预警列表</div>
+        <div class="list-info">
+          共 {{ filteredWarnings.length }} 条预警
+        </div>
+      </div>
+      <div class="table-container">
+        <table class="warning-table">
+          <thead>
+            <tr>
+              <th>预警ID</th>
+              <th>预警级别</th>
+              <th>部门名称</th>
+              <th>项目名称</th>
+              <th>能耗类型</th>
+              <th>实际值</th>
+              <th>阈值</th>
+              <th>超出比例</th>
+              <th>预警时间</th>
+              <th>处理状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="warning in paginatedWarnings" :key="warning.id">
+              <td>{{ warning.id }}</td>
+              <td>
+                <span class="level-badge" :class="warning.level">
+                  {{ getLevelText(warning.level) }}
+                </span>
+              </td>
+              <td>{{ warning.department }}</td>
+              <td>{{ warning.projectName }}</td>
+              <td>{{ warning.energyType }}</td>
+              <td class="value-cell">{{ warning.actualValue }} kWh</td>
+              <td class="value-cell">{{ warning.threshold }} kWh</td>
+              <td>
+                <span class="exceed-badge">{{ warning.exceedRatio }}%</span>
+              </td>
+              <td>{{ warning.warningTime }}</td>
+              <td>
+                <span class="status-badge" :class="warning.status">
+                  {{ getStatusText(warning.status) }}
+                </span>
+              </td>
+              <td class="action-cell">
+                <div class="action-buttons">
+                  <el-button
+                    v-if="warning.status === 'pending'"
+                    type="primary"
+                    size="small"
+                    @click="handleWarning(warning)"
+                    class="action-btn"
+                  >
+                    处理
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="viewDetail(warning)"
+                    class="action-btn"
+                  >
+                    详情
+                  </el-button>
+                  <el-dropdown @command="(cmd) => handleCommand(cmd, warning)" class="action-dropdown">
+                    <el-button size="small" class="action-btn">
+                      更多
+                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
+                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                        <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                      </svg>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu class="custom-dropdown-menu">
+                        <el-dropdown-item command="markResolved" v-if="warning.status !== 'resolved'">标记已处理</el-dropdown-item>
+                        <el-dropdown-item command="exportReport" divided>导出报告</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="filteredWarnings.length"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          class="custom-pagination"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 预警趋势图 -->
+    <div class="chart-section">
+      <div class="section-header">
+        <div class="section-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+          预警趋势
+        </div>
+      </div>
+      <div class="chart-container">
+        <div ref="warningTrendChart" class="chart"></div>
+      </div>
+    </div>
+
+    <!-- 预警详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="预警详情"
+      width="700px"
+      class="custom-dialog"
+    >
+      <div class="detail-content" v-if="selectedWarning">
+        <div class="detail-section">
+          <div class="section-title">基本信息</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="item-label">预警ID:</span>
+              <span class="item-value">{{ selectedWarning.id }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警级别:</span>
+              <span class="item-value level-badge" :class="selectedWarning.level">
+                {{ getLevelText(selectedWarning.level) }}
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">部门名称:</span>
+              <span class="item-value">{{ selectedWarning.department }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">项目名称:</span>
+              <span class="item-value">{{ selectedWarning.projectName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">能耗类型:</span>
+              <span class="item-value">{{ selectedWarning.energyType }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">预警时间:</span>
+              <span class="item-value">{{ selectedWarning.warningTime }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">实际值:</span>
+              <span class="item-value">{{ selectedWarning.actualValue }} kWh</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">阈值:</span>
+              <span class="item-value">{{ selectedWarning.threshold }} kWh</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">超出比例:</span>
+              <span class="item-value exceed-badge">{{ selectedWarning.exceedRatio }}%</span>
+            </div>
+            <div class="info-item full-width">
+              <span class="item-label">预警描述:</span>
+              <span class="item-value">{{ selectedWarning.description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section" v-if="selectedWarning.handleRecord">
+          <div class="section-title">处理记录</div>
+          <div class="process-timeline">
+            <div
+              v-for="(record, index) in selectedWarning.handleRecord"
+              :key="index"
+              class="timeline-item"
+            >
+              <div class="timeline-dot" :class="record.type"></div>
+              <div class="timeline-content">
+                <div class="timeline-title">{{ record.title }}</div>
+                <div class="timeline-time">{{ record.time }}</div>
+                <div class="timeline-desc" v-if="record.description">{{ record.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false" class="custom-btn">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 处理预警弹窗 -->
+    <el-dialog
+      v-model="handleDialogVisible"
+      title="处理预警"
+      width="600px"
+      class="custom-dialog"
+    >
+      <el-form :model="handleForm" :rules="handleRules" ref="handleFormRef" label-width="100px">
+        <el-form-item label="处理方式" prop="handleType">
+          <el-select v-model="handleForm.handleType" class="custom-select">
+            <el-option label="调整设备参数" value="adjust"></el-option>
+            <el-option label="关闭部分设备" value="close"></el-option>
+            <el-option label="检查设备状态" value="check"></el-option>
+            <el-option label="通知负责人" value="notify"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="处理说明" prop="handleDescription">
+          <el-input
+            v-model="handleForm.handleDescription"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入处理说明"
+            class="custom-input"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="处理人" prop="handler">
+          <el-input v-model="handleForm.handler" placeholder="请输入处理人" class="custom-input"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="handleDialogVisible = false" class="custom-btn">取消</el-button>
+        <el-button type="primary" @click="submitHandle" class="custom-btn">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "EnergyWarning",
+  data() {
+    return {
+      warningStats: {
+        total: 56,
+        critical: 8,
+        major: 18,
+        minor: 30
+      },
+      filterForm: {
+        level: "",
+        status: "",
+        department: "",
+        keyword: "",
+        dateRange: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      warningList: [],
+      detailDialogVisible: false,
+      handleDialogVisible: false,
+      selectedWarning: null,
+      handleForm: {
+        handleType: "",
+        handleDescription: "",
+        handler: ""
+      },
+      handleRules: {
+        handleType: [{ required: true, message: "请选择处理方式", trigger: "change" }],
+        handleDescription: [{ required: true, message: "请输入处理说明", trigger: "blur" }],
+        handler: [{ required: true, message: "请输入处理人", trigger: "blur" }]
+      },
+      warningTrendChart: null
+    };
+  },
+  computed: {
+    filteredWarnings() {
+      let warnings = [...this.warningList];
+      
+      if (this.filterForm.level) {
+        warnings = warnings.filter(w => w.level === this.filterForm.level);
+      }
+      
+      if (this.filterForm.status) {
+        warnings = warnings.filter(w => w.status === this.filterForm.status);
+      }
+      
+      if (this.filterForm.department) {
+        warnings = warnings.filter(w => w.departmentCode === this.filterForm.department);
+      }
+      
+      if (this.filterForm.keyword) {
+        const keyword = this.filterForm.keyword.toLowerCase();
+        warnings = warnings.filter(w => 
+          w.projectName.toLowerCase().includes(keyword) ||
+          w.department.toLowerCase().includes(keyword) ||
+          w.id.toLowerCase().includes(keyword)
+        );
+      }
+      
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        const [start, end] = this.filterForm.dateRange;
+        warnings = warnings.filter(w => w.warningDate >= start && w.warningDate <= end);
+      }
+      
+      return warnings;
+    },
+    paginatedWarnings() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.filteredWarnings.slice(start, end);
+    }
+  },
+  mounted() {
+    this.initWarningList();
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    getLevelText(level) {
+      const map = {
+        critical: "严重",
+        major: "重要",
+        minor: "一般"
+      };
+      return map[level] || level;
+    },
+    getStatusText(status) {
+      const map = {
+        pending: "待处理",
+        processing: "处理中",
+        resolved: "已处理"
+      };
+      return map[status] || status;
+    },
+    initWarningList() {
+      const now = new Date();
+      this.warningList = [
+        {
+          id: "WRN202403040001",
+          level: "critical",
+          department: "办公楼A",
+          departmentCode: "OA",
+          projectName: "办公楼A照明系统",
+          energyType: "LED照明",
+          actualValue: 1256.8,
+          threshold: 1000,
+          exceedRatio: 25.68,
+          warningTime: "2024-03-04 10:30:25",
+          warningDate: "2024-03-04",
+          status: "pending",
+          description: "办公楼A照明系统能耗超出阈值25.68%，请及时检查",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 10:30:25", description: "系统能耗超出阈值" }
+          ]
+        },
+        {
+          id: "WRN202403040002",
+          level: "critical",
+          department: "商场区域",
+          departmentCode: "SM",
+          projectName: "商场区域照明系统",
+          energyType: "景观照明",
+          actualValue: 856.5,
+          threshold: 650,
+          exceedRatio: 31.77,
+          warningTime: "2024-03-04 09:15:42",
+          warningDate: "2024-03-04",
+          status: "processing",
+          description: "商场区域景观照明能耗超出阈值31.77%，正在进行处理",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 09:15:42", description: "系统能耗超出阈值" },
+            { type: "process", title: "开始处理", time: "2024-03-04 09:20:00", description: "已通知负责人" }
+          ]
+        },
+        {
+          id: "WRN202403040003",
+          level: "major",
+          department: "办公楼B",
+          departmentCode: "OB",
+          projectName: "办公楼B照明系统",
+          energyType: "LED照明",
+          actualValue: 1125.6,
+          threshold: 1000,
+          exceedRatio: 12.56,
+          warningTime: "2024-03-04 08:45:18",
+          warningDate: "2024-03-04",
+          status: "pending",
+          description: "办公楼B照明系统能耗超出阈值12.56%",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-04 08:45:18", description: "系统能耗超出阈值" }
+          ]
+        },
+        {
+          id: "WRN202403030004",
+          level: "major",
+          department: "停车场",
+          departmentCode: "PK",
+          projectName: "停车场照明系统",
+          energyType: "LED照明",
+          actualValue: 928.5,
+          threshold: 850,
+          exceedRatio: 9.24,
+          warningTime: "2024-03-03 16:22:33",
+          warningDate: "2024-03-03",
+          status: "resolved",
+          description: "停车场照明系统能耗超出阈值9.24%，已处理",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-03 16:22:33", description: "系统能耗超出阈值" },
+            { type: "process", title: "调整设备参数", time: "2024-03-03 16:30:00", description: "已调整照明亮度" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-03 17:15:00", description: "能耗已恢复正常" }
+          ]
+        },
+        {
+          id: "WRN202403030005",
+          level: "minor",
+          department: "办公楼A",
+          departmentCode: "OA",
+          projectName: "办公楼A照明系统",
+          energyType: "应急照明",
+          actualValue: 256.8,
+          threshold: 240,
+          exceedRatio: 7.00,
+          warningTime: "2024-03-03 14:10:22",
+          warningDate: "2024-03-03",
+          status: "resolved",
+          description: "办公楼A应急照明能耗超出阈值7.00%，已处理",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-03 14:10:22", description: "系统能耗超出阈值" },
+            { type: "process", title: "检查设备", time: "2024-03-03 14:20:00", description: "设备运行正常" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-03 14:30:00", description: "已恢复正常" }
+          ]
+        },
+        {
+          id: "WRN202403020006",
+          level: "minor",
+          department: "商场区域",
+          departmentCode: "SM",
+          projectName: "商场区域照明系统",
+          energyType: "走廊照明",
+          actualValue: 385.2,
+          threshold: 360,
+          exceedRatio: 7.00,
+          warningTime: "2024-03-02 11:30:45",
+          warningDate: "2024-03-02",
+          status: "resolved",
+          description: "商场区域走廊照明能耗超出阈值7.00%，已处理",
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: "2024-03-02 11:30:45", description: "系统能耗超出阈值" },
+            { type: "process", title: "调整亮度", time: "2024-03-02 11:40:00", description: "已降低亮度" },
+            { type: "resolved", title: "预警已处理", time: "2024-03-02 12:00:00", description: "能耗已恢复正常" }
+          ]
+        }
+      ];
+
+      for (let i = 7; i <= 56; i++) {
+        const levels = ["critical", "major", "minor"];
+        const statuses = ["pending", "processing", "resolved"];
+        const departments = [
+          { name: "办公楼A", code: "OA" },
+          { name: "办公楼B", code: "OB" },
+          { name: "商场区域", code: "SM" },
+          { name: "停车场", code: "PK" }
+        ];
+        const energyTypes = ["LED照明", "应急照明", "景观照明", "走廊照明"];
+        const date = new Date(now.getTime() - Math.random() * 30 * 24 * 60 * 60 * 1000);
+        
+        const dept = departments[Math.floor(Math.random() * departments.length)];
+        const energyType = energyTypes[Math.floor(Math.random() * energyTypes.length)];
+        const threshold = 200 + Math.random() * 800;
+        const exceedRatio = 5 + Math.random() * 30;
+        const actualValue = threshold * (1 + exceedRatio / 100);
+        
+        this.warningList.push({
+          id: `WRN2024${String(i).padStart(7, '0')}`,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          department: dept.name,
+          departmentCode: dept.code,
+          projectName: `${dept.name}照明系统`,
+          energyType: energyType,
+          actualValue: actualValue.toFixed(1),
+          threshold: threshold.toFixed(1),
+          exceedRatio: exceedRatio.toFixed(2),
+          warningTime: date.toISOString().slice(0, 19).replace('T', ' '),
+          warningDate: date.toISOString().slice(0, 10),
+          status: statuses[Math.floor(Math.random() * statuses.length)],
+          description: `${dept.name}${energyType}能耗超出阈值${exceedRatio.toFixed(2)}%`,
+          handleRecord: [
+            { type: "warning", title: "预警触发", time: date.toISOString().slice(0, 19).replace('T', ' '), description: "系统能耗超出阈值" }
+          ]
+        });
+      }
+    },
+    initCharts() {
+      this.initWarningTrendChart();
+    },
+    initWarningTrendChart() {
+      if (!this.$refs.warningTrendChart) return;
+      
+      if (this.warningTrendChart) {
+        this.warningTrendChart.dispose();
+      }
+      
+      this.warningTrendChart = echarts.init(this.$refs.warningTrendChart);
+      
+      const dates = [];
+      const criticalData = [];
+      const majorData = [];
+      const minorData = [];
+      const now = new Date();
+      
+      for (let i = 29; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        dates.push(date.toISOString().slice(5, 10));
+        
+        criticalData.push(Math.round(Math.random() * 5));
+        majorData.push(Math.round(Math.random() * 10));
+        minorData.push(Math.round(Math.random() * 15));
+      }
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["严重预警", "重要预警", "一般预警"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "预警数量",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "严重预警",
+            type: "line",
+            smooth: true,
+            data: criticalData,
+            itemStyle: {
+              color: "#EE6666"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.5)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "重要预警",
+            type: "line",
+            smooth: true,
+            data: majorData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "一般预警",
+            type: "line",
+            smooth: true,
+            data: minorData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.warningTrendChart.setOption(option);
+    },
+    handleSearch() {
+      this.currentPage = 1;
+    },
+    handleReset() {
+      this.filterForm = {
+        level: "",
+        status: "",
+        department: "",
+        keyword: "",
+        dateRange: []
+      };
+      this.currentPage = 1;
+    },
+    handleExport() {
+      this.$message.success("预警列表导出成功");
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+    },
+    viewDetail(warning) {
+      this.selectedWarning = warning;
+      this.detailDialogVisible = true;
+    },
+    handleWarning(warning) {
+      this.selectedWarning = warning;
+      this.handleForm = {
+        handleType: "",
+        handleDescription: "",
+        handler: ""
+      };
+      this.handleDialogVisible = true;
+    },
+    submitHandle() {
+      this.$refs.handleFormRef.validate((valid) => {
+        if (valid) {
+          const warning = this.warningList.find(w => w === this.selectedWarning);
+          if (warning) {
+            warning.status = "processing";
+            warning.handleRecord.push({
+              type: "process",
+              title: "开始处理",
+              time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+              description: `${this.handleForm.handler}：${this.handleForm.handleDescription}`
+            });
+          }
+          this.$message.success("预警处理已提交");
+          this.handleDialogVisible = false;
+        }
+      });
+    },
+    handleCommand(command, warning) {
+      if (command === "markResolved") {
+        warning.status = "resolved";
+        warning.handleRecord.push({
+          type: "resolved",
+          title: "标记已处理",
+          time: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          description: "用户手动标记为已处理"
+        });
+        this.$message.success("已标记为已处理");
+      } else if (command === "exportReport") {
+        this.$message.success(`导出预警${warning.id}的报告成功`);
+      }
+    },
+    handleResize() {
+      if (this.warningTrendChart) this.warningTrendChart.resize();
+    },
+    destroyCharts() {
+      if (this.warningTrendChart) {
+        this.warningTrendChart.dispose();
+        this.warningTrendChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.energy-warning {
+  padding: 0.16rem;
+}
+
+.warning-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  gap: 0.15rem;
+  margin-bottom: 0.16rem;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+
+    &.total {
+      background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
+      border: 1px solid rgba(84, 112, 198, 0.3);
+    }
+
+    &.critical {
+      background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+      border: 1px solid rgba(238, 102, 102, 0.3);
+    }
+
+    &.major {
+      background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+      border: 1px solid rgba(250, 200, 88, 0.3);
+    }
+
+    &.minor {
+      background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+      border: 1px solid rgba(145, 204, 117, 0.3);
+    }
+
+    .stat-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+      background: rgba(255, 255, 255, 0.1);
+
+      svg {
+        width: 0.26rem;
+        height: 0.26rem;
+        fill: #ffffff;
+      }
+    }
+
+    .stat-info {
+      flex: 1;
+
+      .stat-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.03rem;
+      }
+
+      .stat-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.filter-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  margin-bottom: 0.16rem;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+
+  .filter-group {
+    display: flex;
+    gap: 0.15rem;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+      min-width: 1.5rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    gap: 0.1rem;
+
+    .search-input {
+      width: 2rem;
+    }
+
+    ::v-deep .custom-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+        }
+      }
+    }
+  }
+}
+
+.warning-list {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .list-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+    }
+
+    .list-info {
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+    }
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border-radius: 0.04rem;
+    background: rgba(255, 255, 255, 0.02);
+
+    .warning-table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 12rem;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+
+        tr {
+          background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+          th {
+            padding: 0.12rem 0.1rem;
+            text-align: left;
+            font-size: 0.13rem;
+            color: #15e1fd;
+            font-weight: 600;
+            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+            white-space: nowrap;
+
+            &:first-child {
+              padding-left: 0.15rem;
+              border-top-left-radius: 0.04rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+              border-top-right-radius: 0.04rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          transition: all 0.3s ease;
+          background: rgba(255, 255, 255, 0.02);
+
+          &:nth-child(even) {
+            background: rgba(255, 255, 255, 0.04);
+          }
+
+          &:hover {
+            background: rgba(21, 225, 253, 0.1);
+            transform: translateX(0.02rem);
+          }
+
+          td {
+            padding: 0.12rem 0.1rem;
+            font-size: 0.12rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            vertical-align: middle;
+
+            &:first-child {
+              padding-left: 0.15rem;
+            }
+
+            &:last-child {
+              padding-right: 0.15rem;
+            }
+
+            .value-cell {
+              font-weight: 500;
+              color: #FAC858;
+            }
+
+            .level-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.critical {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.major {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.minor {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .status-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              white-space: nowrap;
+              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);
+
+              &.pending {
+                background: linear-gradient(135deg, rgba(238, 102, 102, 0.25) 0%, rgba(229, 57, 53, 0.25) 100%);
+                color: #FF8A80;
+                border: 1px solid rgba(238, 102, 102, 0.4);
+              }
+
+              &.processing {
+                background: linear-gradient(135deg, rgba(250, 200, 88, 0.25) 0%, rgba(255, 179, 0, 0.25) 100%);
+                color: #FFE082;
+                border: 1px solid rgba(250, 200, 88, 0.4);
+              }
+
+              &.resolved {
+                background: linear-gradient(135deg, rgba(145, 204, 117, 0.25) 0%, rgba(102, 187, 106, 0.25) 100%);
+                color: #A5D6A7;
+                border: 1px solid rgba(145, 204, 117, 0.4);
+              }
+            }
+
+            .exceed-badge {
+              display: inline-block;
+              padding: 0.04rem 0.12rem;
+              border-radius: 0.04rem;
+              font-size: 0.11rem;
+              font-weight: 500;
+              color: #EE6666;
+              background: rgba(238, 102, 102, 0.2);
+              border: 1px solid rgba(238, 102, 102, 0.4);
+            }
+
+            .action-cell {
+              display: flex;
+              align-items: center;
+              gap: 0.06rem;
+              flex-wrap: nowrap;
+
+              .action-btn,
+              .action-dropdown {
+                ::v-deep .el-button--small {
+                  padding: 0.04rem 0.1rem;
+                  font-size: 0.11rem;
+                  border-radius: 0.04rem;
+                  font-weight: 500;
+                  transition: all 0.3s ease;
+                  white-space: nowrap;
+
+                  &:not(.el-button--primary):not(.el-button--default) {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: #ffffff;
+
+                    &:hover {
+                      background: rgba(255, 255, 255, 0.2);
+                    }
+                  }
+
+                  &.el-button--primary {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    border: none;
+                    color: #ffffff;
+                    box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);
+
+                    &:hover {
+                      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+                      transform: translateY(-0.02rem);
+                      box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
+                    }
+
+                    &:active {
+                      transform: translateY(0);
+                    }
+                  }
+
+                  svg {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    fill: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.2rem;
+
+    ::v-deep .custom-pagination {
+      .el-pagination__total,
+      .el-pagination__jump,
+      .el-pager li {
+        color: #ffffff;
+      }
+
+      .el-pager li {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.is-active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-color: transparent;
+        }
+      }
+
+      .btn-prev,
+      .btn-next {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+  }
+
+  .chart-container {
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 0.04rem;
+    padding: 0.1rem;
+
+    .chart {
+      width: 100%;
+      height: 4rem;
+    }
+  }
+}
+
+::v-deep .custom-dialog {
+  .el-dialog {
+    background: rgba(30, 30, 50, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__header {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .el-dialog__title {
+    color: #ffffff;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 0.3rem;
+
+      .section-title {
+        font-size: 0.15rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.15rem;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.15rem;
+
+        .info-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 0.12rem;
+          background: rgba(255, 255, 255, 0.03);
+          border-radius: 0.06rem;
+
+          &.full-width {
+            grid-column: 1 / -1;
+          }
+
+          .item-label {
+            font-size: 0.13rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+
+          .item-value {
+            font-size: 0.13rem;
+            color: #ffffff;
+
+            &.level-badge {
+              padding: 0.03rem 0.1rem;
+              border-radius: 0.03rem;
+              font-size: 0.11rem;
+
+              &.critical {
+                background: rgba(238, 102, 102, 0.2);
+                color: #EE6666;
+              }
+
+              &.major {
+                background: rgba(250, 200, 88, 0.2);
+                color: #FAC858;
+              }
+
+              &.minor {
+                background: rgba(145, 204, 117, 0.2);
+                color: #91CC75;
+              }
+            }
+
+            &.exceed-badge {
+              padding: 0.03rem 0.1rem;
+              border-radius: 0.03rem;
+              font-size: 0.11rem;
+              color: #EE6666;
+              background: rgba(238, 102, 102, 0.2);
+            }
+          }
+        }
+      }
+
+      .process-timeline {
+        .timeline-item {
+          display: flex;
+          margin-bottom: 0.2rem;
+
+          .timeline-dot {
+            width: 0.1rem;
+            height: 0.1rem;
+            border-radius: 50%;
+            margin-right: 0.15rem;
+            margin-top: 0.03rem;
+
+            &.warning {
+              background: #EE6666;
+            }
+
+            &.process {
+              background: #FAC858;
+            }
+
+            &.resolved {
+              background: #91CC75;
+            }
+          }
+
+          .timeline-content {
+            flex: 1;
+
+            .timeline-title {
+              font-size: 0.13rem;
+              color: #ffffff;
+              font-weight: bold;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-time {
+              font-size: 0.11rem;
+              color: #ffffff;
+              opacity: 0.6;
+              margin-bottom: 0.05rem;
+            }
+
+            .timeline-desc {
+              font-size: 0.12rem;
+              color: #ffffff;
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .el-form {
+  .el-form-item__label {
+    color: #ffffff;
+    opacity: 0.7;
+  }
+
+  .custom-input,
+  .custom-select {
+    .el-input__wrapper,
+    .el-select__wrapper {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu {
+  background: rgba(30, 30, 50, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
+  border-radius: 0.06rem;
+  padding: 0.08rem 0;
+
+  .el-dropdown-menu__item {
+    color: #ffffff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(21, 225, 253, 0.15) 0%, rgba(145, 204, 117, 0.15) 100%);
+      color: #15e1fd;
+    }
+
+    &.is-divided {
+      position: relative;
+      margin-top: 0.08rem;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: -0.04rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .warning-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .filter-section {
+    flex-direction: column;
+  }
+
+  .filter-actions {
+    width: 100%;
+    margin-top: 0.1rem;
+
+    .search-input {
+      flex: 1;
+    }
+  }
+
+  .table-container {
+    .warning-table {
+      thead tr th,
+      tbody tr td {
+        font-size: 0.11rem;
+        padding: 0.08rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newLighting/home/index.vue b/src/views/newLighting/home/index.vue
new file mode 100644
index 0000000..6300b92
--- /dev/null
+++ b/src/views/newLighting/home/index.vue
@@ -0,0 +1,1317 @@
+<template>
+  <div class="lighting-home">
+    <!-- 基础信息 -->
+    <div class="info-section">
+      <div class="section-header">
+        <div class="section-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+          项目基础信息
+        </div>
+      </div>
+      <div class="info-grid">
+        <div class="info-item">
+          <span class="info-label">项目名称</span>
+          <span class="info-value">{{ projectInfo.projectName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">项目位置</span>
+          <span class="info-value">{{ projectInfo.location }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">项目面积</span>
+          <span class="info-value">{{ projectInfo.area }}m²</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">业务类型</span>
+          <span class="info-value">{{ projectInfo.businessType }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">负责人</span>
+          <span class="info-value">{{ projectInfo.manager }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">安装日期</span>
+          <span class="info-value">{{ projectInfo.installDate }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">电费单价</span>
+          <span class="info-value">{{ projectInfo.electricityPrice }}元/kWh</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">运行状态</span>
+          <span class="info-value status-badge" :class="projectInfo.status">{{ getStatusText(projectInfo.status) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关键指标统计 -->
+    <div class="kpi-section">
+      <div class="section-header">
+        <div class="section-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+          关键指标统计
+        </div>
+        <div class="time-tabs">
+          <div
+            v-for="tab in timeTabs"
+            :key="tab.value"
+            :class="['tab-item', { active: currentTimeTab === tab.value }]"
+            @click="handleTimeTabChange(tab.value)"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+      </div>
+      <div class="kpi-grid">
+        <div class="kpi-card saving-rate">
+          <div class="kpi-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ kpiData.savingRate }}%</div>
+            <div class="kpi-label">节能率</div>
+            <div class="kpi-trend" :class="kpiData.savingRateTrend >= 0 ? 'up' : 'down'">
+              <svg v-if="kpiData.savingRateTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              {{ kpiData.savingRateTrend >= 0 ? '+' : '' }}{{ kpiData.savingRateTrend }}%
+            </div>
+          </div>
+        </div>
+        <div class="kpi-card saving-money">
+          <div class="kpi-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ kpiData.savingMoney }}万元</div>
+            <div class="kpi-label">节电金额</div>
+            <div class="kpi-trend" :class="kpiData.savingMoneyTrend >= 0 ? 'up' : 'down'">
+              <svg v-if="kpiData.savingMoneyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              {{ kpiData.savingMoneyTrend >= 0 ? '+' : '' }}{{ kpiData.savingMoneyTrend }}%
+            </div>
+          </div>
+        </div>
+        <div class="kpi-card carbon-reduction">
+          <div class="kpi-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ kpiData.carbonReduction }}吨</div>
+            <div class="kpi-label">碳减排量</div>
+            <div class="kpi-trend" :class="kpiData.carbonReductionTrend >= 0 ? 'up' : 'down'">
+              <svg v-if="kpiData.carbonReductionTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              {{ kpiData.carbonReductionTrend >= 0 ? '+' : '' }}{{ kpiData.carbonReductionTrend }}%
+            </div>
+          </div>
+        </div>
+        <div class="kpi-card total-power">
+          <div class="kpi-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ kpiData.totalPower }}万kWh</div>
+            <div class="kpi-label">累计用电</div>
+            <div class="kpi-trend" :class="kpiData.totalPowerTrend <= 0 ? 'up' : 'down'">
+              <svg v-if="kpiData.totalPowerTrend <= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+              {{ kpiData.totalPowerTrend >= 0 ? '+' : '' }}{{ kpiData.totalPowerTrend }}%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备统计 -->
+    <div class="device-section">
+      <div class="section-header">
+        <div class="section-title">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+            <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+          </svg>
+          设备统计
+        </div>
+      </div>
+      <div class="device-grid">
+        <div class="device-card lighting">
+          <div class="device-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="device-content">
+            <div class="device-count">{{ deviceStats.lighting }}</div>
+            <div class="device-label">照明设备</div>
+          </div>
+        </div>
+        <div class="device-card gateway">
+          <div class="device-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="device-content">
+            <div class="device-count">{{ deviceStats.gateway }}</div>
+            <div class="device-label">网关</div>
+          </div>
+        </div>
+        <div class="device-card meter">
+          <div class="device-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="device-content">
+            <div class="device-count">{{ deviceStats.meter }}</div>
+            <div class="device-label">电表</div>
+          </div>
+        </div>
+        <div class="device-card sensor">
+          <div class="device-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="device-content">
+            <div class="device-count">{{ deviceStats.sensor }}</div>
+            <div class="device-label">传感器</div>
+          </div>
+        </div>
+        <div class="device-card total">
+          <div class="device-icon">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+          </div>
+          <div class="device-content">
+            <div class="device-count">{{ deviceStats.total }}</div>
+            <div class="device-label">设备总数</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自定义时间选择 -->
+    <div class="custom-time-section" v-if="currentTimeTab === 'custom'">
+      <div class="custom-time-row">
+        <div class="time-item">
+          <label>开始时间</label>
+          <el-date-picker
+            v-model="customTimeRange.startTime"
+            type="date"
+            placeholder="选择开始时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="time-item">
+          <label>结束时间</label>
+          <el-date-picker
+            v-model="customTimeRange.endTime"
+            type="date"
+            placeholder="选择结束时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <el-button type="primary" @click="handleCustomTimeQuery" class="custom-btn">查询</el-button>
+      </div>
+    </div>
+
+    <!-- 数据可视化 -->
+    <div class="chart-sections">
+      <!-- 用能趋势图 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            用能趋势
+          </div>
+          <div class="time-dimension">
+            <el-select v-model="timeDimension" class="custom-select" @change="handleTimeDimensionChange">
+              <el-option label="日" value="day"></el-option>
+              <el-option label="周" value="week"></el-option>
+              <el-option label="月" value="month"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="energyTrendChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 能耗占比图 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            能耗占比
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="energyPieChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 碳排放趋势图 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            碳排放趋势
+          </div>
+          <div class="time-dimension">
+            <el-select v-model="carbonTimeDimension" class="custom-select" @change="handleCarbonTimeDimensionChange">
+              <el-option label="日" value="day"></el-option>
+              <el-option label="周" value="week"></el-option>
+              <el-option label="月" value="month"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="carbonChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 节能对比图 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+              <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            节能对比
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="savingCompareChart" class="chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "LightingHome",
+  data() {
+    return {
+      projectInfo: {
+        projectName: "智能照明系统项目",
+        location: "广东省深圳市南山区科技园",
+        area: 58000,
+        businessType: "商业综合体",
+        manager: "张三",
+        installDate: "2023-05-15",
+        electricityPrice: 1.2,
+        status: "running"
+      },
+      timeTabs: [
+        { label: "近七日", value: "week" },
+        { label: "当月", value: "month" },
+        { label: "当年", value: "year" },
+        { label: "自定义", value: "custom" }
+      ],
+      currentTimeTab: "week",
+      customTimeRange: {
+        startTime: "",
+        endTime: ""
+      },
+      timeDimension: "day",
+      carbonTimeDimension: "day",
+      kpiData: {
+        savingRate: 35.8,
+        savingRateTrend: 8.5,
+        savingMoney: 48.6,
+        savingMoneyTrend: 12.3,
+        carbonReduction: 325.8,
+        carbonReductionTrend: 10.5,
+        totalPower: 85.6,
+        totalPowerTrend: -15.2
+      },
+      deviceStats: {
+        lighting: 1250,
+        gateway: 15,
+        meter: 28,
+        sensor: 86,
+        total: 1379
+      },
+      energyTrendChart: null,
+      energyPieChart: null,
+      carbonChart: null,
+      savingCompareChart: null
+    };
+  },
+  mounted() {
+    this.initCustomTimeRange();
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    getStatusText(status) {
+      const map = {
+        running: "运行中",
+        stopped: "已停止",
+        maintenance: "维护中"
+      };
+      return map[status] || status;
+    },
+    initCustomTimeRange() {
+      const now = new Date();
+      const start = new Date(now);
+      start.setDate(start.getDate() - 7);
+      this.customTimeRange.startTime = start.toISOString().slice(0, 10);
+      this.customTimeRange.endTime = now.toISOString().slice(0, 10);
+    },
+    handleTimeTabChange(tab) {
+      this.currentTimeTab = tab;
+      this.updateKPIData();
+      this.updateCharts();
+    },
+    handleTimeDimensionChange() {
+      this.updateEnergyTrendChart();
+    },
+    handleCarbonTimeDimensionChange() {
+      this.updateCarbonChart();
+    },
+    handleCustomTimeQuery() {
+      if (!this.customTimeRange.startTime || !this.customTimeRange.endTime) {
+        this.$message.warning("请选择开始和结束时间");
+        return;
+      }
+      const start = new Date(this.customTimeRange.startTime);
+      const end = new Date(this.customTimeRange.endTime);
+      if (start > end) {
+        this.$message.warning("开始时间不能大于结束时间");
+        return;
+      }
+      this.updateKPIData();
+      this.updateCharts();
+      this.$message.success("查询成功");
+    },
+    updateKPIData() {
+      const baseSavingRate = 30 + Math.random() * 10;
+      const baseSavingMoney = 40 + Math.random() * 20;
+      const baseCarbon = 280 + Math.random() * 100;
+      const baseTotalPower = 70 + Math.random() * 30;
+      
+      this.kpiData = {
+        savingRate: baseSavingRate.toFixed(1),
+        savingRateTrend: (5 + Math.random() * 10).toFixed(1),
+        savingMoney: baseSavingMoney.toFixed(1),
+        savingMoneyTrend: (8 + Math.random() * 10).toFixed(1),
+        carbonReduction: baseCarbon.toFixed(1),
+        carbonReductionTrend: (8 + Math.random() * 10).toFixed(1),
+        totalPower: baseTotalPower.toFixed(1),
+        totalPowerTrend: (-10 - Math.random() * 10).toFixed(1)
+      };
+    },
+    initCharts() {
+      this.initEnergyTrendChart();
+      this.initEnergyPieChart();
+      this.initCarbonChart();
+      this.initSavingCompareChart();
+    },
+    initEnergyTrendChart() {
+      if (!this.$refs.energyTrendChart) return;
+      
+      if (this.energyTrendChart) {
+        this.energyTrendChart.dispose();
+      }
+      
+      this.energyTrendChart = echarts.init(this.$refs.energyTrendChart);
+      
+      const { xAxisData, energyData, savingData } = this.generateEnergyTrendData();
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["实际用电", "节电"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: xAxisData,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "实际用电",
+            type: "line",
+            smooth: true,
+            data: energyData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(84, 112, 198, 0.5)" },
+                { offset: 1, color: "rgba(84, 112, 198, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "节电",
+            type: "line",
+            smooth: true,
+            data: savingData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.energyTrendChart.setOption(option);
+    },
+    initEnergyPieChart() {
+      if (!this.$refs.energyPieChart) return;
+      
+      if (this.energyPieChart) {
+        this.energyPieChart.dispose();
+      }
+      
+      this.energyPieChart = echarts.init(this.$refs.energyPieChart);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          },
+          formatter: "{a} <br/>{b}: {c}kWh ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "能耗占比",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: "rgba(30, 30, 50, 0.95)",
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: "center"
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+                color: "#ffffff"
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 35680, name: "LED照明", itemStyle: { color: "#5470C6" } },
+              { value: 18920, name: "应急照明", itemStyle: { color: "#91CC75" } },
+              { value: 12350, name: "景观照明", itemStyle: { color: "#FAC858" } },
+              { value: 8650, name: "走廊照明", itemStyle: { color: "#EE6666" } },
+              { value: 5200, name: "其他", itemStyle: { color: "#73C0DE" } }
+            ]
+          }
+        ]
+      };
+      
+      this.energyPieChart.setOption(option);
+    },
+    initCarbonChart() {
+      if (!this.$refs.carbonChart) return;
+      
+      if (this.carbonChart) {
+        this.carbonChart.dispose();
+      }
+      
+      this.carbonChart = echarts.init(this.$refs.carbonChart);
+      
+      const { xAxisData, carbonData, reductionData } = this.generateCarbonData();
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["碳排放", "碳减排"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: xAxisData,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "吨",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "碳排放",
+            type: "line",
+            smooth: true,
+            data: carbonData,
+            itemStyle: {
+              color: "#EE6666"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(238, 102, 102, 0.5)" },
+                { offset: 1, color: "rgba(238, 102, 102, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "碳减排",
+            type: "line",
+            smooth: true,
+            data: reductionData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.carbonChart.setOption(option);
+    },
+    initSavingCompareChart() {
+      if (!this.$refs.savingCompareChart) return;
+      
+      if (this.savingCompareChart) {
+        this.savingCompareChart.dispose();
+      }
+      
+      this.savingCompareChart = echarts.init(this.$refs.savingCompareChart);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          },
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["改造前", "改造后"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "#ffffff"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff"
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.1)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "改造前",
+            type: "bar",
+            data: [12500, 11800, 13200, 14500, 13800, 14200],
+            itemStyle: {
+              color: "#EE6666"
+            }
+          },
+          {
+            name: "改造后",
+            type: "bar",
+            data: [8200, 7800, 8600, 9500, 8900, 9200],
+            itemStyle: {
+              color: "#91CC75"
+            }
+          }
+        ]
+      };
+      
+      this.savingCompareChart.setOption(option);
+    },
+    generateEnergyTrendData() {
+      const count = 7;
+      const xAxisData = [];
+      const energyData = [];
+      const savingData = [];
+      const now = new Date();
+      
+      for (let i = count - 1; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        xAxisData.push(date.toISOString().slice(5, 10));
+        
+        const baseEnergy = 800 + Math.random() * 400;
+        energyData.push(Math.round(baseEnergy));
+        savingData.push(Math.round(baseEnergy * 0.35));
+      }
+      
+      return { xAxisData, energyData, savingData };
+    },
+    generateCarbonData() {
+      const count = 7;
+      const xAxisData = [];
+      const carbonData = [];
+      const reductionData = [];
+      const now = new Date();
+      
+      for (let i = count - 1; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        xAxisData.push(date.toISOString().slice(5, 10));
+        
+        const baseCarbon = 35 + Math.random() * 20;
+        carbonData.push(baseCarbon.toFixed(1));
+        reductionData.push((baseCarbon * 0.3).toFixed(1));
+      }
+      
+      return { xAxisData, carbonData, reductionData };
+    },
+    updateEnergyTrendChart() {
+      this.initEnergyTrendChart();
+    },
+    updateCarbonChart() {
+      this.initCarbonChart();
+    },
+    updateCharts() {
+      this.initEnergyTrendChart();
+      this.initCarbonChart();
+    },
+    handleResize() {
+      if (this.energyTrendChart) this.energyTrendChart.resize();
+      if (this.energyPieChart) this.energyPieChart.resize();
+      if (this.carbonChart) this.carbonChart.resize();
+      if (this.savingCompareChart) this.savingCompareChart.resize();
+    },
+    destroyCharts() {
+      if (this.energyTrendChart) {
+        this.energyTrendChart.dispose();
+        this.energyTrendChart = null;
+      }
+      if (this.energyPieChart) {
+        this.energyPieChart.dispose();
+        this.energyPieChart = null;
+      }
+      if (this.carbonChart) {
+        this.carbonChart.dispose();
+        this.carbonChart = null;
+      }
+      if (this.savingCompareChart) {
+        this.savingCompareChart.dispose();
+        this.savingCompareChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.lighting-home {
+  padding: 0.16rem;
+  min-height: calc(100vh - 0.32rem);
+}
+
+.info-section,
+.kpi-section,
+.device-section,
+.chart-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+
+    .section-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      font-weight: bold;
+      padding-left: 0.12rem;
+      border-left: 0.04rem solid #15e1fd;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      svg {
+        width: 0.18rem;
+        height: 0.18rem;
+        fill: #15e1fd;
+      }
+    }
+
+    .time-tabs,
+    .time-dimension {
+      display: flex;
+      gap: 0.08rem;
+
+      .tab-item {
+        padding: 0.06rem 0.15rem;
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.6;
+        cursor: pointer;
+        border-radius: 0.04rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          opacity: 0.9;
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &.active {
+          opacity: 1;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: #ffffff;
+        }
+      }
+
+      ::v-deep .custom-select {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.info-section {
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+    gap: 0.15rem;
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.15rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.06rem;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        transform: translateX(0.02rem);
+      }
+
+      .info-label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      .info-value {
+        font-size: 0.14rem;
+        color: #15e1fd;
+        font-weight: 500;
+
+        &.status-badge {
+          display: inline-block;
+          padding: 0.04rem 0.12rem;
+          border-radius: 0.04rem;
+          font-size: 0.12rem;
+
+          &.running {
+            background: rgba(145, 204, 117, 0.2);
+            color: #91CC75;
+            border: 1px solid rgba(145, 204, 117, 0.4);
+          }
+
+          &.stopped {
+            background: rgba(238, 102, 102, 0.2);
+            color: #EE6666;
+            border: 1px solid rgba(238, 102, 102, 0.4);
+          }
+
+          &.maintenance {
+            background: rgba(250, 200, 88, 0.2);
+            color: #FAC858;
+            border: 1px solid rgba(250, 200, 88, 0.4);
+          }
+        }
+      }
+    }
+  }
+}
+
+.kpi-section {
+  .kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+    gap: 0.15rem;
+
+    .kpi-card {
+      display: flex;
+      align-items: center;
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-0.02rem);
+        box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+      }
+
+      &.saving-rate {
+        background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+        border: 1px solid rgba(145, 204, 117, 0.3);
+      }
+
+      &.saving-money {
+        background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+        border: 1px solid rgba(250, 200, 88, 0.3);
+      }
+
+      &.carbon-reduction {
+        background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+        border: 1px solid rgba(84, 112, 198, 0.3);
+      }
+
+      &.total-power {
+        background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+        border: 1px solid rgba(238, 102, 102, 0.3);
+      }
+
+      .kpi-icon {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.1);
+        margin-right: 0.15rem;
+
+        svg {
+          width: 0.3rem;
+          height: 0.3rem;
+          fill: #ffffff;
+        }
+      }
+
+      .kpi-content {
+        flex: 1;
+
+        .kpi-value {
+          font-size: 0.22rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.05rem;
+        }
+
+        .kpi-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+          margin-bottom: 0.05rem;
+        }
+
+        .kpi-trend {
+          display: flex;
+          align-items: center;
+          font-size: 0.12rem;
+          font-weight: 500;
+
+          svg {
+            width: 0.12rem;
+            height: 0.12rem;
+            margin-right: 0.03rem;
+          }
+
+          &.up {
+            color: #91CC75;
+          }
+
+          &.down {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-section {
+  .device-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(2.2rem, 1fr));
+    gap: 0.15rem;
+
+    .device-card {
+      display: flex;
+      align-items: center;
+      padding: 0.2rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 0.08rem;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-0.02rem);
+        box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+      }
+
+      &.lighting {
+        background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+        border: 1px solid rgba(84, 112, 198, 0.3);
+      }
+
+      &.gateway {
+        background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+        border: 1px solid rgba(145, 204, 117, 0.3);
+      }
+
+      &.meter {
+        background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+        border: 1px solid rgba(250, 200, 88, 0.3);
+      }
+
+      &.sensor {
+        background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+        border: 1px solid rgba(115, 192, 222, 0.3);
+      }
+
+      &.total {
+        background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, rgba(255, 105, 180, 0.2) 100%);
+        border: 1px solid rgba(238, 130, 238, 0.3);
+      }
+
+      .device-icon {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.1);
+        margin-right: 0.15rem;
+
+        svg {
+          width: 0.3rem;
+          height: 0.3rem;
+          fill: #ffffff;
+        }
+      }
+
+      .device-content {
+        flex: 1;
+
+        .device-count {
+          font-size: 0.28rem;
+          color: #15e1fd;
+          font-weight: bold;
+          margin-bottom: 0.05rem;
+        }
+
+        .device-label {
+          font-size: 0.12rem;
+          color: #ffffff;
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+
+.custom-time-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .custom-time-row {
+    display: flex;
+    gap: 0.15rem;
+    align-items: flex-end;
+
+    .time-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-picker {
+        .el-input__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    ::v-deep .custom-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      color: #ffffff;
+
+      &:hover {
+        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+      }
+    }
+  }
+}
+
+.chart-sections {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.16rem;
+
+  .chart-section {
+    .chart-container {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0.04rem;
+      padding: 0.1rem;
+
+      .chart {
+        width: 100%;
+        height: 3.5rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .chart-sections {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/newLighting/reportManage/base/index.vue b/src/views/newLighting/reportManage/base/index.vue
new file mode 100644
index 0000000..434e90d
--- /dev/null
+++ b/src/views/newLighting/reportManage/base/index.vue
@@ -0,0 +1,1210 @@
+<template>
+  <div class="base-report">
+    <!-- 查询条件 -->
+    <div class="filter-section">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>统计周期</label>
+          <el-select v-model="reportForm.periodType" class="custom-select" @change="handlePeriodChange">
+            <el-option label="日" value="day"></el-option>
+            <el-option label="月" value="month"></el-option>
+            <el-option label="季" value="quarter"></el-option>
+            <el-option label="年" value="year"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <label>开始时间</label>
+          <el-date-picker
+            v-model="reportForm.startTime"
+            :type="datePickerType"
+            placeholder="选择开始时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>结束时间</label>
+          <el-date-picker
+            v-model="reportForm.endTime"
+            :type="datePickerType"
+            placeholder="选择结束时间"
+            value-format="yyyy-MM-dd"
+            class="custom-picker"
+          ></el-date-picker>
+        </div>
+        <div class="filter-item">
+          <label>项目名称</label>
+          <el-select v-model="reportForm.projectId" placeholder="全部项目" clearable class="custom-select">
+            <el-option label="全部项目" value=""></el-option>
+            <el-option label="中央空调系统项目A" value="P001"></el-option>
+            <el-option label="中央空调系统项目B" value="P002"></el-option>
+            <el-option label="中央空调系统项目C" value="P003"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-actions">
+          <el-button type="primary" @click="generateReport" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
+              <path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
+              <path d="M800 352H592v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v128c0 17.7 14.3 32 32 32h240c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32v-64c0-52.9-43.1-96-96-96z" fill="currentColor"/>
+              <path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
+            </svg>
+            生成报表
+          </el-button>
+          <el-button type="success" @click="exportToExcel" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+              <path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
+            </svg>
+            导出Excel
+          </el-button>
+          <el-button type="warning" @click="exportToPDF" class="custom-btn">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+              <path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              <path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+            </svg>
+            导出PDF
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报表内容 -->
+    <div class="report-content" v-if="reportData">
+      <!-- 项目基础信息 -->
+      <div class="info-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            项目基础信息
+          </div>
+        </div>
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="info-label">项目编码</span>
+            <span class="info-value">{{ reportData.projectInfo.projectCode }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目名称</span>
+            <span class="info-value">{{ reportData.projectInfo.projectName }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目主体</span>
+            <span class="info-value">{{ reportData.projectInfo.projectOwner }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">项目地址</span>
+            <span class="info-value">{{ reportData.projectInfo.address }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">安装日期</span>
+            <span class="info-value">{{ reportData.projectInfo.installDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">投产日期</span>
+            <span class="info-value">{{ reportData.projectInfo.productionDate }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">合同金额</span>
+            <span class="info-value">{{ reportData.projectInfo.contractAmount }}万元</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">建筑面积</span>
+            <span class="info-value">{{ reportData.projectInfo.buildingArea }}m²</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设计冷负荷</span>
+            <span class="info-value">{{ reportData.projectInfo.designCoolingLoad }}kW</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设计冷量</span>
+            <span class="info-value">{{ reportData.projectInfo.designCoolingCapacity }}kW</span>
+          </div>
+          <div class="info-item full-width">
+            <span class="info-label">项目描述</span>
+            <span class="info-value">{{ reportData.projectInfo.description }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 机房设备统计 -->
+      <div class="device-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            机房设备统计
+          </div>
+        </div>
+        <div class="device-grid">
+          <div class="device-card chiller">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+                <path d="M416 464h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.chiller }}</div>
+              <div class="device-label">主机</div>
+            </div>
+          </div>
+          <div class="device-card pump-chilled">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.chilledWaterPump }}</div>
+              <div class="device-label">冷冻泵</div>
+            </div>
+          </div>
+          <div class="device-card pump-cooling">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.coolingWaterPump }}</div>
+              <div class="device-label">冷却泵</div>
+            </div>
+          </div>
+          <div class="device-card cooling-tower">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+                <path d="M416 352h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H416c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.coolingTower }}</div>
+              <div class="device-label">冷却塔</div>
+            </div>
+          </div>
+          <div class="device-card terminal">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.terminal }}</div>
+              <div class="device-label">末端设备</div>
+            </div>
+          </div>
+          <div class="device-card other">
+            <div class="device-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M832 192H192c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zm-32 576H224V256h576v512z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="device-content">
+              <div class="device-count">{{ reportData.deviceStats.other }}</div>
+              <div class="device-label">其他设备</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能收益卡片 -->
+      <div class="saving-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能收益
+          </div>
+        </div>
+        <div class="saving-grid">
+          <div class="saving-card energy-rate">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.energyRate }}%</div>
+              <div class="saving-label">节能率</div>
+              <div class="saving-trend" :class="reportData.saving.energyRateTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.energyRateTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.energyRateTrend >= 0 ? '+' : '' }}{{ reportData.saving.energyRateTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card money">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.savingMoney }}万元</div>
+              <div class="saving-label">节电金额</div>
+              <div class="saving-trend" :class="reportData.saving.savingMoneyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.savingMoneyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.savingMoneyTrend >= 0 ? '+' : '' }}{{ reportData.saving.savingMoneyTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card carbon">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.carbonReduction }}吨</div>
+              <div class="saving-label">碳减排量</div>
+              <div class="saving-trend" :class="reportData.saving.carbonReductionTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.carbonReductionTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.carbonReductionTrend >= 0 ? '+' : '' }}{{ reportData.saving.carbonReductionTrend }}%
+              </div>
+            </div>
+          </div>
+          <div class="saving-card total-energy">
+            <div class="saving-icon">
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="saving-content">
+              <div class="saving-value">{{ reportData.saving.totalEnergy }}万kWh</div>
+              <div class="saving-label">累计节电量</div>
+              <div class="saving-trend" :class="reportData.saving.totalEnergyTrend >= 0 ? 'up' : 'down'">
+                <svg v-if="reportData.saving.totalEnergyTrend >= 0" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
+                  <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
+                </svg>
+                {{ reportData.saving.totalEnergyTrend >= 0 ? '+' : '' }}{{ reportData.saving.totalEnergyTrend }}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节能趋势图表 -->
+      <div class="chart-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            节能趋势分析
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="savingChart" class="chart"></div>
+        </div>
+      </div>
+
+      <!-- 设备详细清单 -->
+      <div class="table-section">
+        <div class="section-header">
+          <div class="section-title">
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+              <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z" fill="currentColor"/>
+            </svg>
+            设备详细清单
+          </div>
+        </div>
+        <div class="table-container">
+          <table class="device-detail-table">
+            <thead>
+              <tr>
+                <th>设备编号</th>
+                <th>设备名称</th>
+                <th>设备类型</th>
+                <th>规格型号</th>
+                <th>额定功率</th>
+                <th>数量</th>
+                <th>安装日期</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in reportData.deviceDetail" :key="index">
+                <td>{{ item.deviceCode }}</td>
+                <td>{{ item.deviceName }}</td>
+                <td>{{ item.deviceType }}</td>
+                <td>{{ item.model }}</td>
+                <td>{{ item.ratedPower }} kW</td>
+                <td>{{ item.quantity }}</td>
+                <td>{{ item.installDate }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div class="empty-state" v-if="!reportData">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
+        <path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
+      </svg>
+      <div class="empty-text">请选择时间范围并点击"生成报表"按钮</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "BaseReport",
+  data() {
+    return {
+      reportForm: {
+        periodType: "month",
+        startTime: "",
+        endTime: "",
+        projectId: ""
+      },
+      reportData: null,
+      savingChart: null
+    };
+  },
+  computed: {
+    datePickerType() {
+      const map = {
+        day: "date",
+        month: "month",
+        quarter: "month",
+        year: "year"
+      };
+      return map[this.reportForm.periodType];
+    }
+  },
+  mounted() {
+    this.initDefaultDate();
+    this.$nextTick(() => {
+      this.generateReport();
+    });
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
+  },
+  methods: {
+    initDefaultDate() {
+      const now = new Date();
+      const end = new Date(now);
+      const start = new Date(now);
+      
+      if (this.reportForm.periodType === "day") {
+        start.setDate(start.getDate() - 30);
+        this.reportForm.startTime = start.toISOString().slice(0, 10);
+        this.reportForm.endTime = end.toISOString().slice(0, 10);
+      } else if (this.reportForm.periodType === "month") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else if (this.reportForm.periodType === "quarter") {
+        start.setMonth(start.getMonth() - 12);
+        this.reportForm.startTime = start.toISOString().slice(0, 7);
+        this.reportForm.endTime = end.toISOString().slice(0, 7);
+      } else {
+        start.setFullYear(start.getFullYear() - 3);
+        this.reportForm.startTime = start.toISOString().slice(0, 4);
+        this.reportForm.endTime = end.toISOString().slice(0, 4);
+      }
+    },
+    handlePeriodChange() {
+      this.initDefaultDate();
+    },
+    generateReport() {
+      if (!this.reportForm.startTime || !this.reportForm.endTime) {
+        this.$message.warning("请选择时间范围");
+        return;
+      }
+
+      const startDate = new Date(this.reportForm.startTime);
+      const endDate = new Date(this.reportForm.endTime);
+      
+      if (startDate > endDate) {
+        this.$message.warning("开始时间不能大于结束时间");
+        return;
+      }
+
+      this.reportData = {
+        projectInfo: {
+          projectCode: "PROJ-2024-001",
+          projectName: "中央空调系统项目A",
+          projectOwner: "某某科技有限公司",
+          address: "广东省深圳市南山区科技园南区",
+          installDate: "2023-06-15",
+          productionDate: "2023-08-01",
+          contractAmount: 1250,
+          buildingArea: 85000,
+          designCoolingLoad: 3500,
+          designCoolingCapacity: 4200,
+          description: "本项目为某科技园区中央空调系统节能改造项目，涵盖3栋写字楼和2栋研发楼，采用高效冷站系统，通过智能控制系统实现整体能效提升。"
+        },
+        deviceStats: {
+          chiller: 6,
+          chilledWaterPump: 8,
+          coolingWaterPump: 8,
+          coolingTower: 4,
+          terminal: 560,
+          other: 35
+        },
+        saving: {
+          energyRate: 28.5,
+          energyRateTrend: 5.2,
+          savingMoney: 156.8,
+          savingMoneyTrend: 8.5,
+          carbonReduction: 892.5,
+          carbonReductionTrend: 7.8,
+          totalEnergy: 185.6,
+          totalEnergyTrend: 8.5
+        },
+        deviceDetail: [
+          { deviceCode: "CH-001", deviceName: "1号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1800RT", ratedPower: 850, quantity: 2, installDate: "2023-06-15" },
+          { deviceCode: "CH-002", deviceName: "2号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1200RT", ratedPower: 650, quantity: 2, installDate: "2023-06-18" },
+          { deviceCode: "CH-003", deviceName: "3号离心式冷水机组", deviceType: "冷水机组", model: "YKK3-1800RT", ratedPower: 850, quantity: 2, installDate: "2023-06-20" },
+          { deviceCode: "CP-001", deviceName: "冷冻泵1-4号", deviceType: "冷冻泵", model: "SB-200-180", ratedPower: 45, quantity: 4, installDate: "2023-06-22" },
+          { deviceCode: "CP-002", deviceName: "冷冻泵5-8号", deviceType: "冷冻泵", model: "SB-200-180", ratedPower: 45, quantity: 4, installDate: "2023-06-22" },
+          { deviceCode: "CP-003", deviceName: "冷却泵1-4号", deviceType: "冷却泵", model: "SB-200-220", ratedPower: 55, quantity: 4, installDate: "2023-06-24" },
+          { deviceCode: "CP-004", deviceName: "冷却泵5-8号", deviceType: "冷却泵", model: "SB-200-220", ratedPower: 55, quantity: 4, installDate: "2023-06-24" },
+          { deviceCode: "CT-001", deviceName: "1号冷却塔", deviceType: "冷却塔", model: "CTN-600", ratedPower: 22, quantity: 2, installDate: "2023-06-26" },
+          { deviceCode: "CT-002", deviceName: "2号冷却塔", deviceType: "冷却塔", model: "CTN-600", ratedPower: 22, quantity: 2, installDate: "2023-06-26" },
+          { deviceCode: "TM-001", deviceName: "风机盘管组A", deviceType: "末端设备", model: "FC-400", ratedPower: 0.08, quantity: 280, installDate: "2023-07-01" },
+          { deviceCode: "TM-002", deviceName: "风机盘管组B", deviceType: "末端设备", model: "FC-400", ratedPower: 0.08, quantity: 280, installDate: "2023-07-01" }
+        ],
+        savingTrend: this.generateSavingTrend()
+      };
+
+      this.$nextTick(() => {
+        this.initCharts();
+      });
+    },
+    generateSavingTrend() {
+      const trend = [];
+      const now = new Date();
+      const months = 12;
+      
+      for (let i = months; i >= 0; i--) {
+        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        
+        trend.push({
+          period: `${year}-${month}`,
+          energyRate: (25 + Math.random() * 5).toFixed(1),
+          savingMoney: (100 + Math.random() * 80).toFixed(1),
+          carbonReduction: (500 + Math.random() * 500).toFixed(1),
+          totalEnergy: (150 + Math.random() * 50).toFixed(1)
+        });
+      }
+      
+      return trend;
+    },
+    initCharts() {
+      this.initSavingChart();
+    },
+    initSavingChart() {
+      if (!this.$refs.savingChart) return;
+      
+      if (this.savingChart) {
+        this.savingChart.dispose();
+      }
+      
+      this.savingChart = echarts.init(this.$refs.savingChart);
+      
+      const periods = this.reportData.savingTrend.map(item => item.period);
+      const energyRateData = this.reportData.savingTrend.map(item => item.energyRate);
+      const savingMoneyData = this.reportData.savingTrend.map(item => item.savingMoney);
+      const carbonData = this.reportData.savingTrend.map(item => item.carbonReduction);
+      
+      const option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 30, 50, 0.95)",
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        legend: {
+          data: ["节能率", "节电金额", "碳减排量"],
+          textStyle: {
+            color: "#ffffff"
+          },
+          top: 10
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: periods,
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.3)"
+            }
+          },
+          axisLabel: {
+            color: "#ffffff",
+            rotate: 45
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "节能率 (%)",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "left",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.1)"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "金额/减排量",
+            nameTextStyle: {
+              color: "#ffffff"
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.3)"
+              }
+            },
+            axisLabel: {
+              color: "#ffffff"
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "节能率",
+            type: "line",
+            smooth: true,
+            data: energyRateData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(145, 204, 117, 0.5)" },
+                { offset: 1, color: "rgba(145, 204, 117, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "节电金额",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: savingMoneyData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(250, 200, 88, 0.5)" },
+                { offset: 1, color: "rgba(250, 200, 88, 0.05)" }
+              ])
+            }
+          },
+          {
+            name: "碳减排量",
+            type: "line",
+            smooth: true,
+            yAxisIndex: 1,
+            data: carbonData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(84, 112, 198, 0.5)" },
+                { offset: 1, color: "rgba(84, 112, 198, 0.05)" }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.savingChart.setOption(option);
+    },
+    exportToExcel() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为Excel格式");
+    },
+    exportToPDF() {
+      if (!this.reportData) {
+        this.$message.warning("请先生成报表");
+        return;
+      }
+      this.$message.success("报表已导出为PDF格式");
+    },
+    handleResize() {
+      if (this.savingChart) this.savingChart.resize();
+    },
+    destroyCharts() {
+      if (this.savingChart) {
+        this.savingChart.dispose();
+        this.savingChart = null;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.base-report {
+  padding: 0.16rem;
+  min-height: calc(100vh - 0.32rem);
+}
+
+.filter-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.08rem;
+  padding: 0.2rem;
+  margin-bottom: 0.16rem;
+
+  .filter-row {
+    display: flex;
+    gap: 0.15rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    .filter-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      label {
+        font-size: 0.13rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .custom-select,
+      ::v-deep .custom-picker {
+        .el-input__wrapper,
+        .el-select__wrapper {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+
+          .el-input__inner {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .filter-actions {
+      display: flex;
+      gap: 0.1rem;
+
+      ::v-deep .custom-btn {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: #ffffff;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+
+        &.el-button--primary {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+          }
+        }
+
+        &.el-button--success {
+          background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
+          }
+        }
+
+        &.el-button--warning {
+          background: linear-gradient(135deg, #FAC858 0%, #FFA726 100%);
+          border: none;
+
+          &:hover {
+            background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
+          }
+        }
+
+        svg {
+          width: 0.14rem;
+          height: 0.14rem;
+          fill: #ffffff;
+          margin-right: 0.04rem;
+        }
+      }
+    }
+  }
+}
+
+.report-content {
+  .info-section,
+  .device-section,
+  .saving-section,
+  .chart-section,
+  .table-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 0.08rem;
+    padding: 0.2rem;
+    margin-bottom: 0.16rem;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+
+      .section-title {
+        font-size: 0.16rem;
+        color: #ffffff;
+        font-weight: bold;
+        padding-left: 0.12rem;
+        border-left: 0.04rem solid #15e1fd;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+
+        svg {
+          width: 0.18rem;
+          height: 0.18rem;
+          fill: #15e1fd;
+        }
+      }
+    }
+  }
+
+  .info-section {
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.15rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.06rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.08);
+          transform: translateX(0.02rem);
+        }
+
+        &.full-width {
+          grid-column: 1 / -1;
+        }
+
+        .info-label {
+          font-size: 0.13rem;
+          color: #ffffff;
+          opacity: 0.7;
+        }
+
+        .info-value {
+          font-size: 0.14rem;
+          color: #15e1fd;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .device-section {
+    .device-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
+      gap: 0.15rem;
+
+      .device-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.chiller {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.pump-chilled {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.pump-cooling {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.cooling-tower {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        &.terminal {
+          background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
+          border: 1px solid rgba(238, 102, 102, 0.3);
+        }
+
+        &.other {
+          background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, rgba(255, 105, 180, 0.2) 100%);
+          border: 1px solid rgba(238, 130, 238, 0.3);
+        }
+
+        .device-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .device-content {
+          flex: 1;
+
+          .device-count {
+            font-size: 0.28rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .device-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+  }
+
+  .saving-section {
+    .saving-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
+      gap: 0.15rem;
+
+      .saving-card {
+        display: flex;
+        align-items: center;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 0.08rem;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
+        }
+
+        &.energy-rate {
+          background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
+          border: 1px solid rgba(145, 204, 117, 0.3);
+        }
+
+        &.money {
+          background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
+          border: 1px solid rgba(250, 200, 88, 0.3);
+        }
+
+        &.carbon {
+          background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(103, 126, 234, 0.2) 100%);
+          border: 1px solid rgba(84, 112, 198, 0.3);
+        }
+
+        &.total-energy {
+          background: linear-gradient(135deg, rgba(115, 192, 222, 0.2) 0%, rgba(64, 169, 255, 0.2) 100%);
+          border: 1px solid rgba(115, 192, 222, 0.3);
+        }
+
+        .saving-icon {
+          width: 0.6rem;
+          height: 0.6rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 0.15rem;
+
+          svg {
+            width: 0.3rem;
+            height: 0.3rem;
+            fill: #ffffff;
+          }
+        }
+
+        .saving-content {
+          flex: 1;
+
+          .saving-value {
+            font-size: 0.22rem;
+            color: #15e1fd;
+            font-weight: bold;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-label {
+            font-size: 0.12rem;
+            color: #ffffff;
+            opacity: 0.7;
+            margin-bottom: 0.05rem;
+          }
+
+          .saving-trend {
+            display: flex;
+            align-items: center;
+            font-size: 0.12rem;
+            font-weight: 500;
+
+            svg {
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.03rem;
+            }
+
+            &.up {
+              color: #91CC75;
+            }
+
+            &.down {
+              color: #EE6666;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chart-section {
+    .chart-container {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0.04rem;
+      padding: 0.1rem;
+
+      .chart {
+        width: 100%;
+        height: 4.5rem;
+      }
+    }
+  }
+
+  .table-section {
+    .table-container {
+      overflow-x: auto;
+      border-radius: 0.04rem;
+      background: rgba(255, 255, 255, 0.02);
+
+      .device-detail-table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 10rem;
+
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+
+          tr {
+            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);
+
+            th {
+              padding: 0.14rem 0.12rem;
+              text-align: left;
+              font-size: 0.14rem;
+              color: #15e1fd;
+              font-weight: 600;
+              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
+              white-space: nowrap;
+
+              &:first-child {
+                padding-left: 0.15rem;
+                border-top-left-radius: 0.04rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+                border-top-right-radius: 0.04rem;
+              }
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.02);
+
+            &:nth-child(even) {
+              background: rgba(255, 255, 255, 0.04);
+            }
+
+            &:hover {
+              background: rgba(21, 225, 253, 0.1);
+              transform: translateX(0.02rem);
+            }
+
+            td {
+              padding: 0.14rem 0.12rem;
+              font-size: 0.13rem;
+              color: #ffffff;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+              vertical-align: middle;
+
+              &:first-child {
+                padding-left: 0.15rem;
+              }
+
+              &:last-child {
+                padding-right: 0.15rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #ffffff;
+  opacity: 0.5;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: #ffffff;
+    margin-bottom: 0.2rem;
+  }
+
+  .empty-text {
+    font-size: 0.16rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .filter-section {
+    .filter-row {
+      flex-direction: column;
+      align-items: stretch;
+
+      .filter-item {
+        width: 100%;
+      }
+
+      .filter-actions {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .device-grid,
+  .saving-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/src/views/newSystem/systemDevice.vue b/src/views/newSystem/systemDevice.vue
new file mode 100644
index 0000000..2ad99d5
--- /dev/null
+++ b/src/views/newSystem/systemDevice.vue
@@ -0,0 +1,765 @@
+<template>
+  <div class="app-container">
+    <!-- 关键指标统计 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">关键指标统计</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in deviceTimeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeDeviceTab === index }]"
+            @click="handleDeviceTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="device-indicators">
+        <div class="indicator-card" v-for="device in deviceIndicators" :key="device.name">
+          <div class="indicator-header" :style="{ background: device.bg }">
+            <div class="indicator-icon">
+              <img :src="device.icon" :alt="device.name" />
+            </div>
+            <div class="indicator-name">{{ device.name }}</div>
+          </div>
+          <div class="indicator-content">
+            <div class="indicator-value">{{ device.total }}</div>
+            <div class="indicator-label">总设备数</div>
+          </div>
+          <div class="indicator-footer">
+            <div class="footer-item">
+              <span class="footer-label">在线:</span>
+              <span class="footer-value online">{{ device.online }}</span>
+            </div>
+            <div class="footer-item">
+              <span class="footer-label">离线:</span>
+              <span class="footer-value offline">{{ device.offline }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备在线数量趋势 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">全系统设备在线数量趋势</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in trendTimeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeTrendTab === index }]"
+            @click="handleTrendTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="trend-chart" ref="deviceTrendChartRef"></div>
+    </div>
+
+    <!-- 网关在线数量趋势 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">网关在线数量趋势</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in gatewayTimeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeGatewayTab === index }]"
+            @click="handleGatewayTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="trend-chart" ref="gatewayTrendChartRef"></div>
+    </div>
+
+    <!-- 设备状态概览 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">设备状态概览</div>
+      </div>
+      <div class="status-overview">
+        <div class="status-card">
+          <div class="status-icon online"></div>
+          <div class="status-info">
+            <div class="status-value">{{ overview.online }}</div>
+            <div class="status-label">在线设备</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon offline"></div>
+          <div class="status-info">
+            <div class="status-value">{{ overview.offline }}</div>
+            <div class="status-label">离线设备</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon warning"></div>
+          <div class="status-info">
+            <div class="status-value">{{ overview.warning }}</div>
+            <div class="status-label">告警设备</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon fault"></div>
+          <div class="status-info">
+            <div class="status-value">{{ overview.fault }}</div>
+            <div class="status-label">故障设备</div>
+          </div>
+        </div>
+      </div>
+      <div class="status-pie-chart" ref="statusPieRef"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "SystemDevice",
+  data() {
+    return {
+      // 设备统计时间选项
+      deviceTimeTabs: ["近七日", "当月", "当年"],
+      activeDeviceTab: 0,
+      // 趋势图时间选项
+      trendTimeTabs: ["近七日", "当月", "当年"],
+      activeTrendTab: 0,
+      gatewayTimeTabs: ["近七日", "当月", "当年"],
+      activeGatewayTab: 0,
+      // 设备关键指标数据
+      deviceIndicators: [
+        {
+          name: "照明系统",
+          total: 1250,
+          online: 1180,
+          offline: 70,
+          icon: "",
+          bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+        },
+        {
+          name: "空调系统",
+          total: 86,
+          online: 78,
+          offline: 8,
+          icon: "",
+          bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
+        },
+        {
+          name: "水泵系统",
+          total: 156,
+          online: 148,
+          offline: 8,
+          icon: "",
+          bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+        },
+        {
+          name: "电梯系统",
+          total: 24,
+          online: 22,
+          offline: 2,
+          icon: "",
+          bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
+        },
+        {
+          name: "风机系统",
+          total: 328,
+          online: 305,
+          offline: 23,
+          icon: "",
+          bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
+        },
+        {
+          name: "监控系统",
+          total: 189,
+          online: 175,
+          offline: 14,
+          icon: "",
+          bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
+        }
+      ],
+      // 设备状态概览
+      overview: {
+        online: 2008,
+        offline: 125,
+        warning: 32,
+        fault: 15
+      },
+      // 图表实例
+      deviceTrendChart: null,
+      gatewayTrendChart: null,
+      statusPieChart: null
+    };
+  },
+  mounted() {
+    this.initDeviceTrendChart();
+    this.initGatewayTrendChart();
+    this.initStatusPieChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.deviceTrendChart) this.deviceTrendChart.dispose();
+    if (this.gatewayTrendChart) this.gatewayTrendChart.dispose();
+    if (this.statusPieChart) this.statusPieChart.dispose();
+  },
+  methods: {
+    // 设备统计时间切换
+    handleDeviceTabChange(index) {
+      this.activeDeviceTab = index;
+      // 这里可以添加根据时间切换更新数据的逻辑
+    },
+    // 设备趋势时间切换
+    handleTrendTabChange(index) {
+      this.activeTrendTab = index;
+      this.updateDeviceTrendChart();
+    },
+    // 网关趋势时间切换
+    handleGatewayTabChange(index) {
+      this.activeGatewayTab = index;
+      this.updateGatewayTrendChart();
+    },
+    // 初始化设备在线趋势图
+    initDeviceTrendChart() {
+      this.deviceTrendChart = echarts.init(this.$refs.deviceTrendChartRef);
+      this.updateDeviceTrendChart();
+    },
+    // 更新设备在线趋势图
+    updateDeviceTrendChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          onlineData: [1985, 1990, 1988, 1995, 2000, 1992, 2008],
+          offlineData: [148, 143, 145, 138, 133, 141, 125]
+        },
+        1: { // 当月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          onlineData: [1950, 1965, 1980, 1975, 1990, 1998, 2008],
+          offlineData: [183, 168, 153, 158, 143, 135, 125]
+        },
+        2: { // 当年
+          xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          onlineData: [1800, 1820, 1850, 1880, 1920, 1950, 1980, 1990, 2000, 2005, 2008, 2010],
+          offlineData: [333, 313, 283, 253, 213, 183, 153, 143, 133, 128, 125, 123]
+        }
+      };
+
+      const currentData = dataMap[this.activeTrendTab];
+
+      const option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["在线", "离线"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "台",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "在线",
+            type: "line",
+            smooth: true,
+            data: currentData.onlineData,
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145, 204, 117, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145, 204, 117, 0)"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "离线",
+            type: "line",
+            smooth: true,
+            data: currentData.offlineData,
+            itemStyle: {
+              color: "#EE6666"
+            },
+            lineStyle: {
+              color: "#EE6666"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(238, 102, 102, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(238, 102, 102, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.deviceTrendChart.setOption(option);
+    },
+    // 初始化网关在线趋势图
+    initGatewayTrendChart() {
+      this.gatewayTrendChart = echarts.init(this.$refs.gatewayTrendChartRef);
+      this.updateGatewayTrendChart();
+    },
+    // 更新网关在线趋势图
+    updateGatewayTrendChart() {
+      const dataMap = {
+        0: { // 近七日
+          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          onlineData: [45, 46, 45, 47, 48, 47, 48],
+          offlineData: [3, 2, 3, 1, 0, 1, 0]
+        },
+        1: { // 当月
+          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
+          onlineData: [42, 44, 45, 46, 46, 47, 48],
+          offlineData: [6, 4, 3, 2, 2, 1, 0]
+        },
+        2: { // 当年
+          xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          onlineData: [40, 41, 42, 43, 44, 45, 46, 47, 47, 48, 48, 48],
+          offlineData: [8, 7, 6, 5, 4, 3, 2, 1, 1, 0, 0, 0]
+        }
+      };
+
+      const currentData = dataMap[this.activeGatewayTab];
+
+      const option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["在线", "离线"],
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: currentData.xData,
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "台",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "在线",
+            type: "line",
+            smooth: true,
+            data: currentData.onlineData,
+            itemStyle: {
+              color: "#5470C6"
+            },
+            lineStyle: {
+              color: "#5470C6"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(84, 112, 198, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(84, 112, 198, 0)"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            name: "离线",
+            type: "line",
+            smooth: true,
+            data: currentData.offlineData,
+            itemStyle: {
+              color: "#FAC858"
+            },
+            lineStyle: {
+              color: "#FAC858"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(250, 200, 88, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(250, 200, 88, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.gatewayTrendChart.setOption(option);
+    },
+    // 初始化状态饼图
+    initStatusPieChart() {
+      this.statusPieChart = echarts.init(this.$refs.statusPieRef);
+      const option = {
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "设备状态",
+            type: "pie",
+            radius: "60%",
+            center: ["60%", "50%"],
+            data: [
+              { value: 2008, name: "在线", itemStyle: { color: "#91CC75" } },
+              { value: 125, name: "离线", itemStyle: { color: "#EE6666" } },
+              { value: 32, name: "告警", itemStyle: { color: "#FAC858" } },
+              { value: 15, name: "故障", itemStyle: { color: "#5470C6" } }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            },
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.statusPieChart.setOption(option);
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.deviceTrendChart) this.deviceTrendChart.resize();
+      if (this.gatewayTrendChart) this.gatewayTrendChart.resize();
+      if (this.statusPieChart) this.statusPieChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.time-tabs {
+  display: flex;
+  gap: 0.1rem;
+
+  .time-tab {
+    padding: 0.06rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.device-indicators {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.3rem 0.2rem;
+  gap: 0.2rem;
+
+  .indicator-card {
+    flex: 1;
+    min-width: 2.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    overflow: hidden;
+
+    .indicator-header {
+      display: flex;
+      align-items: center;
+      padding: 0.15rem;
+      color: #ffffff;
+
+      .indicator-icon {
+        width: 0.4rem;
+        height: 0.4rem;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.1rem;
+
+        img {
+          width: 0.24rem;
+          height: 0.24rem;
+        }
+      }
+
+      .indicator-name {
+        font-size: 0.16rem;
+        font-weight: bold;
+      }
+    }
+
+    .indicator-content {
+      padding: 0.2rem;
+      text-align: center;
+
+      .indicator-value {
+        font-size: 0.36rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .indicator-label {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.6;
+      }
+    }
+
+    .indicator-footer {
+      display: flex;
+      justify-content: space-around;
+      padding: 0.15rem 0.2rem;
+      background: rgba(0, 0, 0, 0.1);
+
+      .footer-item {
+        font-size: 0.14rem;
+        color: #ffffff;
+
+        .footer-label {
+          opacity: 0.7;
+        }
+
+        .footer-value {
+          font-weight: bold;
+
+          &.online {
+            color: #91CC75;
+          }
+
+          &.offline {
+            color: #EE6666;
+          }
+        }
+      }
+    }
+  }
+}
+
+.trend-chart {
+  width: 100%;
+  height: 3rem;
+  padding: 0.2rem;
+}
+
+.status-overview {
+  display: flex;
+  justify-content: space-around;
+  padding: 0.3rem 0.2rem;
+  gap: 0.2rem;
+
+  .status-card {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 0.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+
+    .status-icon {
+      width: 0.08rem;
+      height: 0.4rem;
+      border-radius: 0.04rem;
+      margin-right: 0.15rem;
+
+      &.online {
+        background: #91CC75;
+      }
+
+      &.offline {
+        background: #EE6666;
+      }
+
+      &.warning {
+        background: #FAC858;
+      }
+
+      &.fault {
+        background: #5470C6;
+      }
+    }
+
+    .status-info {
+      flex: 1;
+
+      .status-value {
+        font-size: 0.28rem;
+        color: #15e1fd;
+        font-weight: bold;
+        margin-bottom: 0.05rem;
+      }
+
+      .status-label {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.status-pie-chart {
+  width: 100%;
+  height: 3rem;
+  padding: 0.2rem;
+}
+
+@media (max-width: 1485px) {
+  .device-indicators {
+    .indicator-card {
+      min-width: 2rem;
+    }
+  }
+
+  .status-overview {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/newSystem/systemEnergy.vue b/src/views/newSystem/systemEnergy.vue
new file mode 100644
index 0000000..932aa3b
--- /dev/null
+++ b/src/views/newSystem/systemEnergy.vue
@@ -0,0 +1,608 @@
+<template>
+  <div class="app-container">
+    <!-- 项目整体用能/碳排放趋势 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">项目整体趋势</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in trendTimeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeTrendTab === index }]"
+            @click="handleTrendTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="trend-charts">
+        <div class="chart-container">
+          <div class="chart-title">全系统用电量趋势</div>
+          <div class="chart" ref="electricTrendChartRef"></div>
+        </div>
+        <div class="chart-container">
+          <div class="chart-title">碳排放指标趋势</div>
+          <div class="chart" ref="carbonTrendChartRef"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分系统用电分布 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">分系统用电分布</div>
+      </div>
+      <div class="bar-chart" ref="barChartRef"></div>
+    </div>
+
+    <!-- 周期用量统计 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">近七日用量统计</div>
+      </div>
+      <div class="period-stats">
+        <div class="stat-card">
+          <div class="stat-label">近七日用电量</div>
+          <div class="stat-value">{{ periodData.electricity }} <span class="unit">万kWh</span></div>
+          <div class="stat-change" :class="{ positive: periodData.electricityChange >= 0 }">
+            <span v-if="periodData.electricityChange >= 0">↑</span>
+            <span v-else>↓</span>
+            环比 {{ Math.abs(periodData.electricityChange) }}%
+            <span class="compare-label">| 同比 {{ Math.abs(periodData.electricityYoy) }}%</span>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">近七日用水量</div>
+          <div class="stat-value">{{ periodData.water }} <span class="unit">t</span></div>
+          <div class="stat-change" :class="{ positive: periodData.waterChange >= 0 }">
+            <span v-if="periodData.waterChange >= 0">↑</span>
+            <span v-else>↓</span>
+            环比 {{ Math.abs(periodData.waterChange) }}%
+            <span class="compare-label">| 同比 {{ Math.abs(periodData.waterYoy) }}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 周期水电用量可视化 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">周期水电用量分布</div>
+      </div>
+      <div class="ring-charts">
+        <div class="ring-chart-container">
+          <div class="ring-chart-title">用电量分布</div>
+          <div class="ring-chart" ref="electricRingRef"></div>
+        </div>
+        <div class="ring-chart-container">
+          <div class="ring-chart-title">用水量分布</div>
+          <div class="ring-chart" ref="waterRingRef"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "SystemEnergy",
+  data() {
+    return {
+      // 趋势图时间选项
+      trendTimeTabs: ["近七日", "当月", "当年", "自定义"],
+      activeTrendTab: 0,
+      // 周期统计数据
+      periodData: {
+        electricity: 12.58,
+        electricityChange: 3.2,
+        electricityYoy: -1.5,
+        water: 456.8,
+        waterChange: -2.1,
+        waterYoy: 5.3
+      },
+      // 图表实例
+      electricTrendChart: null,
+      carbonTrendChart: null,
+      barChart: null,
+      electricRingChart: null,
+      waterRingChart: null
+    };
+  },
+  mounted() {
+    this.initElectricTrendChart();
+    this.initCarbonTrendChart();
+    this.initBarChart();
+    this.initElectricRingChart();
+    this.initWaterRingChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.electricTrendChart) this.electricTrendChart.dispose();
+    if (this.carbonTrendChart) this.carbonTrendChart.dispose();
+    if (this.barChart) this.barChart.dispose();
+    if (this.electricRingChart) this.electricRingChart.dispose();
+    if (this.waterRingChart) this.waterRingChart.dispose();
+  },
+  methods: {
+    // 趋势图时间切换
+    handleTrendTabChange(index) {
+      this.activeTrendTab = index;
+      // 这里可以添加根据时间切换更新图表数据的逻辑
+    },
+    // 初始化用电量趋势图
+    initElectricTrendChart() {
+      this.electricTrendChart = echarts.init(this.$refs.electricTrendChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "万kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "用电量",
+            type: "line",
+            smooth: true,
+            data: [1.8, 2.1, 1.9, 2.3, 2.5, 1.5, 1.4],
+            itemStyle: {
+              color: "#15e1fd"
+            },
+            lineStyle: {
+              color: "#15e1fd"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(21, 225, 253, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(21, 225, 253, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.electricTrendChart.setOption(option);
+    },
+    // 初始化碳排放趋势图
+    initCarbonTrendChart() {
+      this.carbonTrendChart = echarts.init(this.$refs.carbonTrendChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "tCO₂e",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "碳排放",
+            type: "line",
+            smooth: true,
+            data: [0.9, 1.1, 0.95, 1.15, 1.25, 0.75, 0.7],
+            itemStyle: {
+              color: "#91CC75"
+            },
+            lineStyle: {
+              color: "#91CC75"
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145, 204, 117, 0.5)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145, 204, 117, 0)"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.carbonTrendChart.setOption(option);
+    },
+    // 初始化柱状图
+    initBarChart() {
+      this.barChart = echarts.init(this.$refs.barChartRef);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["照明系统", "空调系统", "水泵系统", "电梯系统", "风机系统", "监控系统"],
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)",
+            interval: 0,
+            rotate: 20
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "value",
+          name: "kWh",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.8)"
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#365576"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62",
+              type: "dashed"
+            }
+          }
+        },
+        series: [
+          {
+            name: "用电量",
+            type: "bar",
+            barWidth: "40%",
+            data: [12500, 8900, 5600, 2300, 4200, 1800],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#15e1fd"
+                  },
+                  {
+                    offset: 1,
+                    color: "#208fff"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      };
+      this.barChart.setOption(option);
+    },
+    // 初始化用电量环形图
+    initElectricRingChart() {
+      this.electricRingChart = echarts.init(this.$refs.electricRingRef);
+      const option = {
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "用电量分布",
+            type: "pie",
+            radius: ["30%", "60%"],
+            center: ["60%", "50%"],
+            data: [
+              { value: 35, name: "照明系统" },
+              { value: 25, name: "空调系统" },
+              { value: 18, name: "水泵系统" },
+              { value: 12, name: "电梯系统" },
+              { value: 10, name: "其他系统" }
+            ],
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.electricRingChart.setOption(option);
+    },
+    // 初始化用水量环形图
+    initWaterRingChart() {
+      this.waterRingChart = echarts.init(this.$refs.waterRingRef);
+      const option = {
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "用水量分布",
+            type: "pie",
+            radius: ["30%", "60%"],
+            center: ["60%", "50%"],
+            data: [
+              { value: 40, name: "生活用水" },
+              { value: 25, name: "冷却补水" },
+              { value: 20, name: "绿化用水" },
+              { value: 15, name: "其他用水" }
+            ],
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.waterRingChart.setOption(option);
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.electricTrendChart) this.electricTrendChart.resize();
+      if (this.carbonTrendChart) this.carbonTrendChart.resize();
+      if (this.barChart) this.barChart.resize();
+      if (this.electricRingChart) this.electricRingChart.resize();
+      if (this.waterRingChart) this.waterRingChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.time-tabs {
+  display: flex;
+  gap: 0.1rem;
+
+  .time-tab {
+    padding: 0.06rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.trend-charts {
+  display: flex;
+  gap: 0.16rem;
+  padding: 0.2rem;
+
+  .chart-container {
+    flex: 1;
+
+    .chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      text-align: center;
+      margin-bottom: 0.15rem;
+    }
+
+    .chart {
+      width: 100%;
+      height: 2.5rem;
+    }
+  }
+}
+
+.bar-chart {
+  width: 100%;
+  height: 3rem;
+  padding: 0.2rem;
+}
+
+.period-stats {
+  display: flex;
+  justify-content: space-around;
+  padding: 0.3rem 0.2rem;
+  gap: 0.2rem;
+
+  .stat-card {
+    flex: 1;
+    padding: 0.25rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    text-align: center;
+
+    .stat-label {
+      font-size: 0.16rem;
+      color: #ffffff;
+      opacity: 0.8;
+      margin-bottom: 0.15rem;
+    }
+
+    .stat-value {
+      font-size: 0.28rem;
+      color: #15e1fd;
+      font-weight: bold;
+      margin-bottom: 0.1rem;
+
+      .unit {
+        font-size: 0.16rem;
+        opacity: 0.8;
+      }
+    }
+
+    .stat-change {
+      font-size: 0.14rem;
+      color: #91CC75;
+
+      &.positive {
+        color: #ee5e5e;
+      }
+
+      .compare-label {
+        margin-left: 0.15rem;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.ring-charts {
+  display: flex;
+  gap: 0.2rem;
+  padding: 0.2rem;
+
+  .ring-chart-container {
+    flex: 1;
+    text-align: center;
+
+    .ring-chart-title {
+      font-size: 0.16rem;
+      color: #ffffff;
+      margin-bottom: 0.15rem;
+    }
+
+    .ring-chart {
+      width: 100%;
+      height: 2.5rem;
+    }
+  }
+}
+
+@media (max-width: 1485px) {
+  .trend-charts,
+  .ring-charts {
+    flex-direction: column;
+  }
+
+  .period-stats {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/newSystem/systemHome.vue b/src/views/newSystem/systemHome.vue
new file mode 100644
index 0000000..7da86d8
--- /dev/null
+++ b/src/views/newSystem/systemHome.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="app-container">
+    <!-- 综合类指标 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">综合指标</div>
+      </div>
+      <div class="comprehensive-indicators">
+        <div class="indicator-item">
+          <div class="indicator-label">综合节能率</div>
+          <div class="indicator-value">{{ comprehensiveData.energySavingRate }}%</div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-label">节电金额</div>
+          <div class="indicator-value">¥{{ comprehensiveData.electricSavingAmount }}</div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-label">减碳量</div>
+          <div class="indicator-value">{{ comprehensiveData.carbonReduction }}t</div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-label">累计用电</div>
+          <div class="indicator-value">{{ comprehensiveData.totalElectricity }}kWh</div>
+        </div>
+        <div class="indicator-item">
+          <div class="indicator-label">节电量</div>
+          <div class="indicator-value">{{ comprehensiveData.electricSaving }}kWh</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备规模指标 -->
+    <div class="special-div">
+      <div class="special-top">
+        <div class="special-title">设备规模</div>
+        <div class="time-tabs">
+          <div
+            v-for="(tab, index) in timeTabs"
+            :key="index"
+            :class="['time-tab', { active: activeTab === index }]"
+            @click="handleTabChange(index)"
+          >
+            {{ tab }}
+          </div>
+        </div>
+      </div>
+      <div class="device-scale">
+        <div class="device-item" v-for="device in deviceList" :key="device.name">
+          <div class="device-icon" :style="{ background: device.bg }">
+            <img :src="device.icon" :alt="device.name" />
+          </div>
+          <div class="device-info">
+            <div class="device-name">{{ device.name }}</div>
+            <div class="device-count">{{ device.count }}台</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 项目节能统计和用能类型 -->
+    <div class="energy-stats-row">
+      <!-- 项目节能统计 -->
+      <div class="special-div energy-stats">
+        <div class="special-top">
+          <div class="special-title">项目节能统计</div>
+        </div>
+        <div class="energy-data">
+          <div class="energy-item">
+            <div class="energy-label">日节电量</div>
+            <div class="energy-value">{{ energySaving.daySaving }}kWh</div>
+          </div>
+          <div class="energy-item">
+            <div class="energy-label">累计节电量</div>
+            <div class="energy-value">{{ energySaving.totalSaving }}kWh</div>
+          </div>
+        </div>
+        <div class="ring-chart" ref="ringChartRef"></div>
+        <div class="chart-legend">
+          <div
+            class="legend-item"
+            v-for="(item, index) in energyLegend"
+            :key="index"
+          >
+            <span
+              class="legend-color"
+              :style="{ background: item.color }"
+            ></span>
+            <span class="legend-text">{{ item.name }}</span>
+          </div>
+        </div>
+        <div class="compare-tabs">
+          <div
+            :class="['compare-tab', { active: compareType === 'yoy' }]"
+            @click="compareType = 'yoy'"
+          >
+            同比
+          </div>
+          <div
+            :class="['compare-tab', { active: compareType === 'mom' }]"
+            @click="compareType = 'mom'"
+          >
+            环比
+          </div>
+        </div>
+      </div>
+
+      <!-- 项目用能类型 -->
+      <div class="special-div energy-type">
+        <div class="special-top">
+          <div class="special-title">项目用能类型</div>
+        </div>
+        <div class="pie-chart" ref="pieChartRef"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "SystemHome",
+  data() {
+    return {
+      // 综合类指标数据
+      comprehensiveData: {
+        energySavingRate: 15.8,
+        electricSavingAmount: 125.6,
+        carbonReduction: 89.3,
+        totalElectricity: 45680,
+        electricSaving: 7890
+      },
+      // 时间切换选项
+      timeTabs: ["近七日", "当月", "当年", "自定义"],
+      activeTab: 0,
+      // 设备列表
+      deviceList: [
+        { name: "照明系统", count: 1250, icon: "", bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
+        { name: "空调系统", count: 86, icon: "", bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
+        { name: "水泵系统", count: 156, icon: "", bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
+        { name: "电梯系统", count: 24, icon: "", bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" },
+        { name: "风机系统", count: 328, icon: "", bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)" },
+        { name: "监控系统", count: 189, icon: "", bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)" }
+      ],
+      // 节能统计数据
+      energySaving: {
+        daySaving: 328,
+        totalSaving: 7890
+      },
+      // 节能占比图例
+      energyLegend: [
+        { name: "照明系统", color: "#5470C6" },
+        { name: "空调系统", color: "#91CC75" },
+        { name: "水泵系统", color: "#FAC858" },
+        { name: "其他系统", color: "#EE6666" }
+      ],
+      // 同比环比
+      compareType: "yoy",
+      // 图表实例
+      ringChart: null,
+      pieChart: null
+    };
+  },
+  mounted() {
+    this.initRingChart();
+    this.initPieChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.ringChart) this.ringChart.dispose();
+    if (this.pieChart) this.pieChart.dispose();
+  },
+  watch: {
+    compareType() {
+      this.updateRingChart();
+    }
+  },
+  methods: {
+    // 时间切换
+    handleTabChange(index) {
+      this.activeTab = index;
+      // 这里可以添加根据时间切换获取数据的逻辑
+    },
+    // 初始化环形图
+    initRingChart() {
+      this.ringChart = echarts.init(this.$refs.ringChartRef);
+      this.updateRingChart();
+    },
+    // 更新环形图
+    updateRingChart() {
+      const data = this.compareType === "yoy"
+        ? [
+            { value: 35, name: "照明系统" },
+            { value: 28, name: "空调系统" },
+            { value: 22, name: "水泵系统" },
+            { value: 15, name: "其他系统" }
+          ]
+        : [
+            { value: 32, name: "照明系统" },
+            { value: 30, name: "空调系统" },
+            { value: 25, name: "水泵系统" },
+            { value: 13, name: "其他系统" }
+          ];
+
+      const option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}% ({d}%)"
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: "节能占比",
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["50%", "45%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              formatter: "{b}\n{d}%"
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 14,
+                fontWeight: "bold"
+              }
+            },
+            data: data
+          }
+        ]
+      };
+      this.ringChart.setOption(option);
+    },
+    // 初始化饼图
+    initPieChart() {
+      this.pieChart = echarts.init(this.$refs.pieChartRef);
+      const option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}% ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#ffffff"
+          }
+        },
+        series: [
+          {
+            name: "用能类型",
+            type: "pie",
+            radius: "60%",
+            center: ["60%", "50%"],
+            data: [
+              { value: 28, name: "生活用水" },
+              { value: 35, name: "空调用电" },
+              { value: 18, name: "照明用电" },
+              { value: 12, name: "动力用电" },
+              { value: 7, name: "其他" }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            },
+            label: {
+              formatter: "{b}\n{d}%"
+            }
+          }
+        ]
+      };
+      this.pieChart.setOption(option);
+    },
+    // 响应式调整
+    handleResize() {
+      if (this.ringChart) this.ringChart.resize();
+      if (this.pieChart) this.pieChart.resize();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.comprehensive-indicators {
+  display: flex;
+  justify-content: space-around;
+  padding: 0.3rem 0.2rem;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+
+  .indicator-item {
+    text-align: center;
+    flex: 1;
+    min-width: 1.8rem;
+
+    .indicator-label {
+      font-size: 0.16rem;
+      color: #ffffff;
+      opacity: 0.8;
+      margin-bottom: 0.1rem;
+    }
+
+    .indicator-value {
+      font-size: 0.24rem;
+      color: #15e1fd;
+      font-weight: bold;
+    }
+  }
+}
+
+.time-tabs {
+  display: flex;
+  gap: 0.1rem;
+
+  .time-tab {
+    padding: 0.06rem 0.2rem;
+    font-size: 0.14rem;
+    color: #ffffff;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 0.04rem;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      opacity: 1;
+    }
+  }
+}
+
+.device-scale {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.3rem 0.2rem;
+  gap: 0.2rem;
+
+  .device-item {
+    display: flex;
+    align-items: center;
+    padding: 0.15rem 0.25rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0.08rem;
+    flex: 1;
+    min-width: 2rem;
+
+    .device-icon {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 0.08rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 0.15rem;
+
+      img {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+    }
+
+    .device-info {
+      flex: 1;
+
+      .device-name {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.8;
+        margin-bottom: 0.05rem;
+      }
+
+      .device-count {
+        font-size: 0.2rem;
+        color: #15e1fd;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.energy-stats-row {
+  display: flex;
+  gap: 0.16rem;
+  margin-top: 0.16rem;
+
+  .special-div {
+    flex: 1;
+  }
+}
+
+.energy-stats {
+  .energy-data {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.2rem;
+
+    .energy-item {
+      text-align: center;
+
+      .energy-label {
+        font-size: 0.14rem;
+        color: #ffffff;
+        opacity: 0.7;
+        margin-bottom: 0.08rem;
+      }
+
+      .energy-value {
+        font-size: 0.22rem;
+        color: #15e1fd;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .ring-chart {
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  .chart-legend {
+    display: flex;
+    justify-content: center;
+    gap: 0.3rem;
+    padding: 0.1rem 0;
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      font-size: 0.14rem;
+      color: #ffffff;
+
+      .legend-color {
+        width: 0.12rem;
+        height: 0.12rem;
+        border-radius: 50%;
+        margin-right: 0.08rem;
+      }
+    }
+  }
+
+  .compare-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 0.2rem;
+    margin-top: 0.1rem;
+
+    .compare-tab {
+      padding: 0.05rem 0.2rem;
+      font-size: 0.14rem;
+      color: #ffffff;
+      opacity: 0.7;
+      cursor: pointer;
+      border-radius: 0.04rem;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #5470C6 0%, #91CC75 100%);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.energy-type {
+  .pie-chart {
+    width: 100%;
+    height: 3.2rem;
+  }
+}
+
+@media (max-width: 1485px) {
+  .comprehensive-indicators {
+    .indicator-item {
+      min-width: 1.5rem;
+      flex: none;
+    }
+  }
+
+  .device-scale {
+    .device-item {
+      min-width: 1.8rem;
+    }
+  }
+
+  .energy-stats-row {
+    flex-direction: column;
+  }
+}
+</style>