换热站趋势图

src/views/HandlerPage/TransferEnergyView.vue

@@ -2,7 +2,7 @@
   <div
     class="contentBlock"
     id="contentBlock"
-    v-loading.fullscreen.lock="fullscreenLoading"
+    v-loading="loading"
     element-loading-background="rgba(122, 122, 122, 0.6)"
   >
     <el-card class="card-contianer">
@@ -130,6 +130,7 @@
         v-loading="tabloading"
         :height="tableHeight"
         style="width: 100%"
+        empty-text="暂无数据"
       >
         <el-table-column
           prop="transferName"
@@ -142,8 +143,11 @@
       </el-table>
     </div>
     <div v-show="switchV" id="echartsLayerBlock">
+      <div v-show="nodata">
         <div class="echartsLayer" id="echartsLayer"></div>
       </div>
+      <div v-show="!nodata"><el-empty description="暂无数据" /></div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -167,12 +171,13 @@ import {
   postSecAvgTUc,
   postSecAbsTUc,
 } from "../../api/analysis";
+const loading = ref(false);
 const options = reactive([]);
 const enterpriseId = ref();
 const props = { multiple: true, emitPath: false };
 const switchV = ref(true);
 const echartF = ref(false);
-const nodata = ref(false);
+const nodata = ref(true);
 const tableData = reactive([]);
 const echartData = reactive([]);
 const echartDataTime = reactive([]);
@@ -219,110 +224,90 @@ function transferIdChange() {
 }
 
 function exportTableToExcel() {
-  const worksheet = XLSX.utils.json_to_sheet(tableData);
+  const ws = XLSX.utils.json_to_sheet(tableData);
   const workbook = XLSX.utils.book_new();
+  const border = {
+    top: {
+      style: "thin",
+    },
+    bottom: {
+      style: "thin",
+    },
+    left: {
+      style: "thin",
+    },
+    right: {
+      style: "thin",
+    },
+  };
+  const range = XLSX.utils.decode_range(ws["!ref"]);
+  const cellList = Object.keys(ws).filter((item) => item.indexOf("!") < 0);
+
+  for (let row = range.s.r; row <= range.e.r; row++) {
+    for (let col = range.s.c; col <= range.e.c; col++) {
+      const cell = XLSX.utils.encode_cell({ r: row, c: col });
+      if (cellList.indexOf(cell) < 0) {
+        ws[cell] = { t: "", v: "", s: { border } };
+      } else {
+        ws[cell].s = { border };
+      }
+    }
+  }
   XLSX.utils.sheet_add_aoa(
-    worksheet,
+    ws,
     [["换热站机组名称", "时间", "平均温度", enertyTab.value]],
     {
       origin: "A1",
     }
   );
-  worksheet["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
-  // worksheet["!rows"] = [{ hpx: 20 }];
-
-  worksheet["A1"].s = {
+  ws["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
+  // ws["!rows"] = [{ hpx: 20 }];
+  const tagList = ["A1", "B1", "C1", "D1"];
+  tagList.forEach((key, index) => {
+    ws[key].s = {
       fill: {
         fgColor: { rgb: "0097d5fd" },
       },
-  };
-  worksheet["B1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+      border: {
+        bottom: {
+          color: "#000000",
+          style: "thin",
         },
-  };
-  worksheet["C1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+        left: {
+          color: "#000000",
+          style: "thin",
+        },
+        right: {
+          color: "#000000",
+          style: "thin",
+        },
+        top: {
+          color: "#000000",
+          style: "thin",
         },
-  };
-  worksheet["D1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
       },
     };
+  });
 
-  XLSX.utils.book_append_sheet(workbook, worksheet, "换热站趋势");
+  XLSX.utils.book_append_sheet(workbook, ws, "换热站趋势图");
   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, "tableData.xlsx");
+  saveAs(dataBlob, "换热站趋势图.xlsx");
   ElMessage.success("导出成功！请稍后。。。");
 }
 
 function timeFun() {
-  var date = new Date();
-  var year = date.getFullYear();
-  var dateArr = [
-    date.getMonth() + 1,
-    date.getDate(),
-    date.getHours(),
-    date.getMinutes(),
-    date.getSeconds(),
-  ];
-
-  var startTimeDay = parseInt(dateArr[1] - 2);
-  var endTimeDay = parseInt(dateArr[1] - 1);
-  if (startTimeDay < 10) {
-    startTimeDay = "0" + startTimeDay;
-  }
-  if (endTimeDay < 10) {
-    endTimeDay = "0" + endTimeHour;
-  }
-  if (dateArr[0] < 10) {
-    dateArr[0] = "0" + dateArr[0];
-  }
-  if (dateArr[1] < 10) {
-    dateArr[1] = "0" + dateArr[0];
-  }
-  if (dateArr[2] < 10) {
-    dateArr[2] = "0" + dateArr[0];
-  }
-  if (dateArr[3] < 10) {
-    dateArr[3] = "0" + dateArr[3];
-  }
-  if (dateArr[4] < 10) {
-    dateArr[4] = "0" + dateArr[4];
-  }
-  let startTimes =
-    year +
-    "-" +
-    dateArr[0] +
-    "-" +
-    startTimeDay +
-    " " +
-    "00" +
-    ":" +
-    "00" +
-    ":" +
-    "00";
-  let endTimes =
-    year +
-    "-" +
-    dateArr[0] +
-    "-" +
-    dateArr[1] +
-    " " +
-    "00" +
-    ":" +
-    "00" +
-    ":" +
-    "00";
-
-  enertyInfo.startTime = startTimes;
-  enertyInfo.endTime = endTimes;
+  const today = new Date();
+  const preday = new Date(today);
+  preday.setDate(preday.getDate() - 2);
+  today.setDate(today.getDate() - 1);
+  enertyInfo.startTime =
+    preday.toISOString().split("T")[0] + " " + today.getHours() + ":00:00";
+  enertyInfo.endTime =
+    today.toISOString().split("T")[0] + " " + today.getHours() + ":00:00";
 }
 
 //获取换热机组列表
@@ -368,6 +353,7 @@ function sendClick() {
       return false;
     }
     if (valid) {
+      loading.value = true;
       switch (enertyInfo.type) {
         case 0:
           postQOQlistFun();
@@ -405,7 +391,6 @@ function sendClick() {
       }
       enertyTab.value = "能耗值(" + company.value + ")";
     } else {
-      console.log("验证失败");
       return false;
     }
   });
@@ -421,163 +406,123 @@ function selTypeChange() {
 
 //换热站机组能耗数据接口（用量环比）
 function postQOQlistFun() {
-  tabloading.value = true;
-  let params = {
-    supplyIdList: null,
-    idList: [
-      "EF0864C6-1A01-41CF-94BE-523B4D6063DB",
-      "977A50B1-B3E5-40F0-9A16-89A1A4BFE57C",
-    ],
-    startTime: "2024-01-01 00:00:00",
-    endTime: "2024-02-01 00:00:00",
-    energyType: 2,
-    interval: 1,
-  };
   postQOQlist(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（热单耗）
 function postHeatUctFun() {
-  tabloading.value = true;
-  let params = {
-    supplyId: null,
-    transferId: [
-      "0B596F22-F40E-4E16-A552-51B24FEBA66A",
-      "537DBC95-EF89-4261-934E-63652D789702",
-    ],
-    startTime: "2023-01-01 00:00:00",
-    endTime: "2024-10-30 00:00:00",
-    interval: 2,
-  };
-  fullscreenLoading.value = true;
   postHeatUct(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     // postHeatUct(params).then((res) => {
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
-    fullscreenLoading.value = false;
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（电单耗）
 function postElecUcFun() {
-  tabloading.value = true;
-  fullscreenLoading.value = true;
   postElecUc(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
-    fullscreenLoading.value = false;
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（水单耗）
 function postWaterUcFun() {
-  tabloading.value = true;
-  fullscreenLoading.value = true;
   postWaterUc(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
-    fullscreenLoading.value = false;
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（度日数热耗）
 function postDayHeatFun() {
-  tabloading.value = true;
-  fullscreenLoading.value = true;
   postDayHeat(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
-    fullscreenLoading.value = false;
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（一网回温）
 function postFirBackTFun() {
-  tabloading.value = true;
-  fullscreenLoading.value = true;
   postFirBackT(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
-    fullscreenLoading.value = false;
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（一网万平米流量）
 function postWPMLLFun() {
-  tabloading.value = true;
   postWPMLL(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else {
-      tabloading.value = false;
       ElMessage.error(res.message);
     }
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（一网万平米流量）
 function postHeatEffiUcFun() {
-  tabloading.value = true;
   postHeatEffiUc(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else if (res.status == 9) {
       setInterval(function () {
-        tabloading.value = false;
         this.postHeatEffiUcFun();
       }, 600000);
     }
+    loading.value = false;
   });
 }
 
 //换热站机组能耗数据接口（换热站二网均温）
 function postSecAvgTUcFun() {
-  tabloading.value = true;
   postSecAvgTUc(enertyInfo).then((res) => {
     echarts.dispose(document.getElementById("echartsLayer"));
     if (res.success === true) {
       pageInitFun(res);
     } else if (res.status == 9) {
       setInterval(function () {
-        tabloading.value = false;
         this.postSecAvgTUcFun();
       }, 600000);
     }
+    loading.value = false;
   });
 }
 
@@ -592,13 +537,16 @@ function pageInitFun(res) {
     };
     tableData.push(tableArr);
   });
-  nodata.value = true;
+  nodata.value = false;
   tabloading.value = false;
   echartData.length = 0;
   echartSeries.length = 0;
   echartDataLegend.length = 0;
   echartDataTime.length = 0;
+  if (res.data.hourWater.length > 0) {
+    nodata.value = true;
     echartData.value = dataDeal(res.data.hourWater);
+
     echartData.value[0].listInfo.forEach((element) => {
       if (element.gatherTime) {
         echartDataTime.push(element.gatherTime);
@@ -655,6 +603,7 @@ function pageInitFun(res) {
       echartDataLegend.push(element.name);
     });
     echartInit();
+  }
 }
 
 function setContentHeight() {
@@ -782,12 +731,13 @@ function echartInit() {
 }
 
 function changeFun() {
-  nodata.value = true;
+  if (nodata.value) {
     var divWidth = document.getElementById("contentBlock").offsetWidth;
     var divHeight = document.getElementById("contentBlock").scrollHeight;
     computedWidth.value = divWidth + "px";
     computedHeight.value = divHeight * 0.75 + "px";
     echartInit();
+  }
 }
 
 onMounted(() => {