添加数据导出、加减载实时记录页面

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>

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>