回退覆盖版本

src/views/HandlerPage/EnergyConsumptionPage.vue

@@ -101,7 +101,7 @@
         </el-form-item>
         <div style="position: absolute; top: 25px; right: 2%">
           <el-button type="primary" @click="sendClick">查询</el-button
-          ><el-button type="primary" @click="exportTableToExcel"
+          ><el-button type="primary" @click="exportTableToExcelAll"
             >导出表格</el-button
           >
         </div>
@@ -241,6 +241,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">热单耗排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(1, topHeatUCList.value, '热单耗(W/㎡)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -263,6 +271,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">度日数热耗排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(2, topDayHeatUC.value, '热耗(W/(㎡×℃))')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -285,6 +301,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">水单耗排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(3, topWaterUC.value, '水单耗(Kg/㎡)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -307,6 +331,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">电单耗排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(4, topElecUC.value, '电单耗(Kwh/㎡)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -329,6 +361,12 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">一网回温排行</div>
+            <div
+              class="downExl"
+              @click="exportTableToExcelFun(5, topFirsHW.value, '一网回温(℃)')"
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -338,7 +376,7 @@
                 <th>机组名称</th>
                 <th>一网回温(℃)</th>
               </tr>
-              <tr v-for="item in topElecUC.value" :key="item.rankingIndex">
+              <tr v-for="item in topFirsHW.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
                 <td>{{ item.supplyName }}</td>
                 <td>{{ item.transferName }}</td>
@@ -351,6 +389,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">一网万平米流量排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(6, topFirsFlow.value, '流量(t/h/万㎡)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -373,6 +419,12 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">热效率排行</div>
+            <div
+              class="downExl"
+              @click="exportTableToExcelFun(7, topBHXL.value, '热效率')"
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -382,7 +434,7 @@
                 <th>机组名称</th>
                 <th>热效率</th>
               </tr>
-              <tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
+              <tr v-for="item in topBHXL.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
                 <td>{{ item.supplyName }}</td>
                 <td>{{ item.transferName }}</td>
@@ -395,6 +447,12 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">板换效率趋势一排行</div>
+            <div
+              class="downExl"
+              @click="exportTableToExcelFun(8, topBHXLXJ1.value, '板换效率(%)')"
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -417,6 +475,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">二网均温排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(9, topSecondTempAvg.value, '二网均温(℃)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -442,6 +508,14 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">二网温差排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(10, topSecondTempAvg.value, '二网温差(℃)')
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -467,6 +541,18 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">二网瞬时流量排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(
+                  11,
+                  topSecondTempAvg.value,
+                  '二网瞬时(t/h)'
+                )
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -492,6 +578,18 @@
           <div style="position: relative">
             <img src="/imgs/energyConsumptionPage/title_bg.png" />
             <div class="cardListTit">二网万平米流量排行</div>
+            <div
+              class="downExl"
+              @click="
+                exportTableToExcelFun(
+                  12,
+                  topSecondTempAvg.value,
+                  '流量(t/h/万㎡)'
+                )
+              "
+            >
+              导出表格
+            </div>
           </div>
           <div>
             <table class="cardTable" style="width: 100%">
@@ -523,6 +621,8 @@ import * as echarts from "echarts";
 import http from "../../api/http";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
 import { ElMessage } from "element-plus";
+import { saveAs } from "file-saver";
+import XLSX from "xlsx-js-style";
 import {
   postOverview,
   postTopHeatUC,
@@ -613,6 +713,167 @@ const rules = {
   startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
   endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
 };
+function exportTableToExcelFun(n, dataList, company) {
+  let title = ["排名", "供热站名称", "机组名称", company];
+  let space = ["A1", "B1", "C1", "D1"];
+  let data = reactive([]);
+  dataList.forEach((element) => {
+    data.push({
+      rankingIndex: element.rankingIndex,
+      supplyName: element.supplyName,
+      transferName: element.transferName,
+      uc: element.uc.toFixed(2),
+    });
+  });
+  switch (n) {
+    case 1:
+      exportTableToExcel(title, space, "热单耗排行", data);
+      break;
+    case 2:
+      exportTableToExcel(title, space, "度日数热耗排行", data);
+      break;
+    case 3:
+      exportTableToExcel(title, space, "水单耗排行", data);
+      break;
+    case 4:
+      exportTableToExcel(title, space, "电单耗排行", data);
+      break;
+    case 5:
+      exportTableToExcel(title, space, "一网回温排行", data);
+      break;
+    case 6:
+      exportTableToExcel(title, space, "一网万平米流量排行", data);
+      break;
+    case 7:
+      exportTableToExcel(title, space, "热效率排行", data);
+      break;
+    case 8:
+      exportTableToExcel(title, space, "板换效率趋势一排行", data);
+      break;
+    case 9:
+      exportTableToExcel(title, space, "二网均温排行", data);
+      break;
+    case 10:
+      exportTableToExcel(title, space, "二网温差排行", data);
+      break;
+    case 11:
+      exportTableToExcel(title, space, "二网瞬时流量排行", data);
+      break;
+    case 12:
+      exportTableToExcel(title, space, "二网万平米流量排行", data);
+      break;
+  }
+}
+
+function exportTableToExcel(title, space, sheetTit, data) {
+  const worksheet = XLSX.utils.json_to_sheet(data);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.sheet_add_aoa(worksheet, [title], {
+    origin: "A1",
+  });
+  worksheet["!cols"] = [{ wch: 5 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
+  space.forEach((element) => {
+    worksheet[element].s = {
+      fill: {
+        fgColor: { rgb: "0097d5fd" },
+      },
+    };
+  });
+
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetTit);
+  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
+  const dataBlob = new Blob([excelBuffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+  });
+  const downloadUrl = URL.createObjectURL(dataBlob);
+  saveAs(dataBlob, sheetTit + ".xlsx");
+  ElMessage.success("导出成功！请稍后。。。");
+}
+
+function exportTableToExcelAll() {
+  let worksheet = ref();
+  let workbook = ref();
+  let excelBuffer = ref();
+  let dataBlob = ref();
+  let data = [
+    topHeatUCList.value,
+    topDayHeatUC.value,
+    topWaterUC.value,
+    topElecUC.value,
+    topFirsHW.value,
+    topFirsFlow.value,
+    topBHXL.value,
+    topBHXLXJ1.value,
+    topSecondTempAvg.value,
+    topSecondTempAvg.value,
+    topSecondTempAvg.value,
+    topSecondTempAvg.value,
+  ];
+  let title = [
+    "热单耗(W/㎡)",
+    "热耗(W/(㎡×℃",
+    "水单耗(Kg/㎡)",
+    "电单耗(Kwh/㎡)",
+    "一网回温(℃)",
+    "流量(t/h/万㎡)",
+    "热效率",
+    "板换效率(%)",
+    "二网均温(℃)",
+    "二网温差(℃)",
+  ];
+  let space = ["A1", "B1", "C1", "D1", "E1"];
+  let sheetTit = [
+    "热单耗排行",
+    "度日数热耗排行",
+    "水单耗排行",
+    "电单耗排行",
+    "一网回温排行",
+    "一网万平米流量排行",
+    "热效率排行",
+    "板换效率趋势一排行",
+    "二网均温排行",
+    "二网温差排行",
+    "二网瞬时流量排行",
+    "二网万平米流量排行",
+  ];
+  workbook = XLSX.utils.book_new();
+  for (var i = 0; i < 12; i++) {
+    worksheet = XLSX.utils.json_to_sheet(data[i]);
+
+    XLSX.utils.sheet_add_aoa(
+      worksheet,
+      [["排名", "机组ID", "供热站名称", "机组名称", title[i]]],
+      {
+        origin: "A1",
+      }
+    );
+    worksheet["!cols"] = [
+      { wch: 5 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 20 },
+    ];
+    worksheet["!cols"][1] = { hidden: true };
+    space.forEach((element) => {
+      worksheet[element].s = {
+        fill: {
+          fgColor: { rgb: "0097d5fd" },
+        },
+      };
+    });
+
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetTit[i]);
+  }
+
+  excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
+  dataBlob = new Blob([excelBuffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+  });
+  const downloadUrl = URL.createObjectURL(dataBlob);
+  saveAs(dataBlob, "能耗排名.xlsx");
+  ElMessage.success("导出成功！请稍后。。。");
+}
 
 function timeFun() {
   var date = new Date();
@@ -1001,6 +1262,14 @@ td {
   letter-spacing: 3px;
   font-weight: bolder;
 }
+.downExl {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  color: #3e79ed;
+  font-weight: bolder;
+  cursor: pointer;
+}
 .cardTable {
   border: none;
   border-spacing: 0;

src/views/HandlerPage/TransferEnergyView.vue

@@ -16,8 +16,8 @@
         <el-form-item>
           <el-switch
             v-model="switchV"
-            active-text="表格"
-            inactive-text="曲线图"
+            active-text="曲线图"
+            inactive-text="表格"
             style="
               --el-switch-on-color: #13ce66;
               --el-switch-off-color: #6589ff;
@@ -124,7 +124,7 @@
         </div>
       </el-form>
     </el-card>
-    <div v-show="switchV">
+    <div v-show="!switchV">
       <el-table
         :data="tableData"
         v-loading="tabloading"
@@ -141,7 +141,7 @@
         <el-table-column prop="uc" :label="enertyTab" />
       </el-table>
     </div>
-    <div v-show="!switchV" id="echartsLayerBlock">
+    <div v-show="switchV" id="echartsLayerBlock">
       <div class="echartsLayer" id="echartsLayer"></div>
     </div>
   </div>
@@ -170,7 +170,7 @@ import {
 const options = reactive([]);
 const enterpriseId = ref();
 const props = { multiple: true, emitPath: false };
-const switchV = ref(false);
+const switchV = ref(true);
 const echartF = ref(false);
 const nodata = ref(false);
 const tableData = reactive([]);
@@ -797,6 +797,7 @@ onMounted(() => {
   setContentHeight();
   switchV.value = true;
   sendClick();
+  changeFun();
   window.addEventListener("resize", function () {
     location.reload();
   });