环比更新

src/views/HandlerPage/QOQ.vue

@@ -2,6 +2,7 @@
   <div
     class="contentBlock"
     id="contentBlock"
+    v-loading="loading"
     element-loading-background="rgba(122, 122, 122, 0.6)"
   >
     <el-card class="card-contianer">
@@ -128,7 +129,6 @@
     <div v-show="!switchV">
       <el-table
         :data="tableData"
-        v-loading="tabloading"
         :height="tableHeight"
         style="width: 100%"
         empty-text="暂无数据"
@@ -139,7 +139,7 @@
         <el-table-column prop="temperature" label="温度（℃）" />
         <el-table-column
           prop="record"
-          label="耗气量"
+          label="耗气量（Nm³）"
           v-if="enertyInfo.energyType == '1'"
         />
         <el-table-column
@@ -160,7 +160,10 @@
       </el-table>
     </div>
     <div v-show="switchV" id="echartsLayerBlock">
-      <div class="echartsLayer" id="echartsLayer"></div>
+      <div v-show="nodata">
+        <div class="echartsLayer" id="echartsLayer"></div>
+      </div>
+      <div v-show="!nodata"><el-empty description="暂无数据" /></div>
     </div>
   </div>
 </template>
@@ -174,7 +177,7 @@ import { ElMessage } from "element-plus";
 import { saveAs } from "file-saver";
 import XLSX from "xlsx-js-style";
 import { postExternalQOQ, postWithinQOQ } from "../../api/analysis";
-
+const loading = ref(false);
 const tdType = ref(1);
 const networkType = ref(2);
 const enertyInfo = reactive({
@@ -192,7 +195,7 @@ 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);
 let tableData = reactive([]);
 const echartTitle = reactive(["耗水量趋势图"]);
 const echartData = reactive([]);
@@ -226,52 +229,114 @@ function getEnterprise() {
 }
 
 function transferIdChange() {
-  // if (enertyInfo.transferId.length > 10) {
-  //   ElMessage.error("换热机组最多只能选择10个");
-  // }
+  if (enertyInfo.transferId.length > 10) {
+    ElMessage.error("换热机组最多只能选择10个");
+  }
 }
 
 function exportTableToExcel() {
-  const worksheet = XLSX.utils.json_to_sheet(tableData);
-  const workbook = XLSX.utils.book_new();
-  XLSX.utils.sheet_add_aoa(
-    worksheet,
-    [["换热站机组名称", "时间", "平均温度", enertyTab.value]],
-    {
-      origin: "A1",
-    }
-  );
-  worksheet["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
-  // worksheet["!rows"] = [{ hpx: 20 }];
+  let exlData = [];
+  let title = [];
+  tableData.forEach((element) => {
+    let tableArr = {
+      rowId: element.rowId,
+      transferName: element.transferName,
+      gatherTime: element.gatherTime.replace("T", " "),
+      temperature: element.temperature,
+      record: element.record,
+    };
+    exlData.push(tableArr);
+  });
+  switch (enertyInfo.energyType) {
+    case 1:
+      title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗气量（Nm³）"];
+      break;
+    case 2:
+      title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗水量（T）"];
+      break;
+    case 3:
+      title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗热量（GJ"];
+      break;
+    case 4:
+      title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗电量（A）"];
+      break;
+  }
 
-  worksheet["A1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+  const ws = XLSX.utils.json_to_sheet(exlData);
+  const workbook = XLSX.utils.book_new();
+  const border = {
+    top: {
+      style: "thin",
     },
-  };
-  worksheet["B1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+    bottom: {
+      style: "thin",
     },
-  };
-  worksheet["C1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+    left: {
+      style: "thin",
     },
-  };
-  worksheet["D1"].s = {
-    fill: {
-      fgColor: { rgb: "0097d5fd" },
+    right: {
+      style: "thin",
     },
   };
+  const range = XLSX.utils.decode_range(ws["!ref"]);
+  const cellList = Object.keys(ws).filter((item) => item.indexOf("!") < 0);
 
-  XLSX.utils.book_append_sheet(workbook, worksheet, "换热站趋势");
+  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(ws, [title], {
+    origin: "A1",
+  });
+  ws["!cols"] = [
+    { wch: 5 },
+    { wch: 20 },
+    { wch: 20 },
+    { wch: 20 },
+    { wch: 20 },
+  ];
+  // ws["!rows"] = [{ hpx: 20 }];
+
+  const tagList = ["A1", "B1", "C1", "D1", "E1"];
+  tagList.forEach((key, index) => {
+    ws[key].s = {
+      fill: {
+        fgColor: { rgb: "0097d5fd" },
+      },
+      border: {
+        bottom: {
+          color: "#000000",
+          style: "thin",
+        },
+        left: {
+          color: "#000000",
+          style: "thin",
+        },
+        right: {
+          color: "#000000",
+          style: "thin",
+        },
+        top: {
+          color: "#000000",
+          style: "thin",
+        },
+      },
+    };
+  });
+
+  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("导出成功！请稍后。。。");
 }
 
@@ -350,7 +415,9 @@ function selTypeChange() {
 
 //换热站机组能耗数据接口（用量环比）
 function postExternalQOQFun() {
-  tabloading.value = true;
+  loading.value = true;
+  echarts.dispose(document.getElementById("echartsLayer"));
+  tableData.length = 0;
   switch (enertyInfo.energyType) {
     case 1:
       company.value = "Nm³";
@@ -382,25 +449,29 @@ function postExternalQOQFun() {
     postExternalQOQ(params).then((res) => {
       echarts.dispose(document.getElementById("echartsLayer"));
       if (res.success === true) {
-        if (res.data.hourWater.length >0) {
+        if (res.data.hourWater.length > 0) {
           pageInitFun(res);
-          tableData = res.data.hourWater;
+        } else {
+          nodata.value = false;
         }
       } else {
         ElMessage.error(res.message);
       }
+      loading.value = false;
     });
   } else {
     postWithinQOQ(params).then((res) => {
       echarts.dispose(document.getElementById("echartsLayer"));
       if (res.success === true) {
-        if (res.data.data.length >0) {
+        if (res.data.data.length > 0) {
           pageInitFun(res);
-          tableData = res.data.hourWater;
+        } else {
+          nodata.value = false;
         }
       } else {
         ElMessage.error(res.message);
       }
+      loading.value = false;
     });
   }
 }
@@ -411,83 +482,86 @@ function clearData() {
   echartDataLegend.length = 0;
   echartDataTime.length = 0;
   tableData.length = 0;
-  tabloading.value = false;
 }
 
 function pageInitFun(res) {
   tableData.length = 0;
-  res.data.hourWater.forEach((element) => {
-    let tableArr = {
-      transferName: element.transferName,
-      gatherTime: element.gatherTime,
-      temperature: element.temperature,
-      uc: parseFloat(element.uc).toFixed(2),
-    };
-    tableData.push(tableArr);
-  });
-  nodata.value = true;
+  // res.data.hourWater.forEach((element) => {
+  //   let tableArr = {
+  //     transferName: element.transferName,
+  //     gatherTime: element.gatherTime.replace("T"," "),
+  //     temperature: element.temperature,
+  //     uc: parseFloat(element.uc).toFixed(2),
+  //   };
+  //   tableData.push(tableArr);
+  // });
+  nodata.value = false;
   tabloading.value = false;
   echartData.length = 0;
   echartSeries.length = 0;
   echartDataLegend.length = 0;
   echartDataTime.length = 0;
-  echartData.value = dataDeal(res.data.hourWater);
-  echartData.value[0].listInfo.forEach((element) => {
-    if (element.gatherTime) {
-      echartDataTime.push(element.gatherTime);
-    }
-  });
-  echartData.value.forEach((element) => {
-    let data1 = [];
-    let data2 = [];
-    element.listInfo.forEach((item) => {
-      data1.push(item.temperature);
-      data2.push(parseFloat(item.record).toFixed(2));
+  if (res.data.hourWater.length > 0) {
+    tableData = res.data.hourWater;
+    nodata.value = true;
+    echartData.value = dataDeal(res.data.hourWater);
+    echartData.value[0].listInfo.forEach((element) => {
+      if (element.gatherTime) {
+        echartDataTime.push(element.gatherTime);
+      }
     });
+    echartData.value.forEach((element) => {
+      let data1 = [];
+      let data2 = [];
+      element.listInfo.forEach((item) => {
+        data1.push(item.temperature);
+        data2.push(parseFloat(item.record).toFixed(2));
+      });
 
-    echartSeries.push(
-      // {
-      //   name: element.transferName + "温度",
-      //   type: "line",
-      //   tooltip: {
-      //     valueFormatter: function (value) {
-      //       return value + " ℃";
-      //     },
-      //   },
-      //   data: data1,
-      // },
-      {
-        name: element.transferName + "能耗",
-        type: "bar",
-        yAxisIndex: 1,
-        tooltip: {
-          valueFormatter: function (value) {
-            return value;
+      echartSeries.push(
+        // {
+        //   name: element.transferName + "温度",
+        //   type: "line",
+        //   tooltip: {
+        //     valueFormatter: function (value) {
+        //       return value + " ℃";
+        //     },
+        //   },
+        //   data: data1,
+        // },
+        {
+          name: element.transferName + "能耗",
+          type: "bar",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value;
+            },
           },
+          data: data2,
+        }
+      );
+    });
+    let temperatureListArr = [];
+    res.data.temperatureList.forEach((element) => {
+      temperatureListArr.push(element);
+    });
+    echartSeries.push({
+      name: "平均温度",
+      type: "line",
+      tooltip: {
+        valueFormatter: function (value) {
+          return value + " ℃";
         },
-        data: data2,
-      }
-    );
-  });
-  let temperatureListArr = [];
-  res.data.temperatureList.forEach((element) => {
-    temperatureListArr.push(element);
-  });
-  echartSeries.push({
-    name: "平均温度",
-    type: "line",
-    tooltip: {
-      valueFormatter: function (value) {
-        return value + " ℃";
       },
-    },
-    data: temperatureListArr,
-  });
+      data: temperatureListArr,
+    });
 
-  echartSeries.forEach((element, index) => {
-    echartDataLegend.push(element.name);
-  });
-  echartInit();
+    echartSeries.forEach((element, index) => {
+      echartDataLegend.push(element.name);
+    });
+    echartInit();
+  }
 }
 
 function setContentHeight() {
@@ -615,13 +689,13 @@ function echartInit() {
 }
 
 function changeFun() {
-  tabloading.value = false;
-  nodata.value = true;
-  var divWidth = document.getElementById("contentBlock").offsetWidth;
-  var divHeight = document.getElementById("contentBlock").scrollHeight;
-  computedWidth.value = divWidth + "px";
-  computedHeight.value = divHeight * 0.75 + "px";
-  echartInit();
+  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(() => {
@@ -630,6 +704,7 @@ onMounted(() => {
   getSupplys();
   postExternalQOQFun();
   changeFun();
+  switchV.value = true;
   window.addEventListener("resize", function () {
     location.reload();
   });