jn_sis_zhfx/src/views/report/ExportExcel.vue

<template>
  <div class="ExportExcel">
    <el-row
      style="
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 2px solid #ffffff;
      "
    >
      <el-col :span="12">
        <button
          class="btn"
          :class="templateId == 1 ? 'green' : ''"
          @click="typeClick(1)"
        >
          单机数据模板
        </button>
        <button
          class="btn"
          :class="templateId == 2 ? 'green' : ''"
          @click="typeClick(2)"
        >
          上网电量及功率、测风塔数据模板
        </button>
      </el-col>
      <el-col :span="12">
        <el-row justify="end">
          <button class="btn green" @click="allExport()">一键导出</button>
        </el-row>
      </el-col>
    </el-row>
    <table class="com-table">
      <thead>
        <tr>
          <th>场站</th>
          <th>
            <input
              class="t2"
              type="checkbox"
              @click="rqCheck"
              checked="checked"
            />
            日期
          </th>
          <th>
            <input
              class="t2"
              type="checkbox"
              @click="sjCheck"
              checked="checked"
            />
            时间间隔(s)
          </th>
          <th width="120px">操作</th>
        </tr>
      </thead>
      <el-scrollbar>
        <tbody>
          <tr v-for="(row, index) of tableData" :key="index">
            <td>
              {{ row.fdc }}
            </td>
            <td class="excelPickerTd">
              <el-date-picker
                class="mr15"
                format="YYYY-MM"
                v-model="dateArray[index]"
                type="month"
                placeholder="请选择"
                @change="changeDate"
              >
              </el-date-picker>
            </td>
            <td>
              <el-select
                v-model="timeData[index]"
                clearable
                placeholder="Select"
                @change="changeTableTime"
              >
                <el-option
                  v-for="item in timeArray"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td width="120px">
              <el-button
                type="text"
                style="cursor: pointer"
                @click="singleExport(index)"
                >导出
              </el-button>
            </td>
          </tr>
        </tbody>
      </el-scrollbar>
    </table>
  </div>
</template>

<script>
import JsZip from "jszip";
import { export_blob, export_more_blob } from "@tools/excel/Export2Excel.js";
import BASE from "@tools/basicTool.js";
export default {
  components: {
    JsZip,
  },
  data() {
    const that = this;
    return {
      single: false, //单击导出状态【点击后，用于判断其状态，为true时，loading显示】
      rqChecked: true, //日期单击checkbox状态【为true时，下方任意日期选择与当前选择同步】
      sjChecked: true, //时间间隔checkbox状态【为true时，下方任意时间选择与当前选择同步】
      tableData: [], //表格数据
      dateArray: [], //日期数组，默认一个月的，当用户改变某一个时，找到对应下标去改数据
      //时间同上
      timeArray: [
        {
          label: "5分钟",
          value: "300",
        },
        {
          label: "10分钟",
          value: "600",
        },
        {
          label: "15分钟",
          value: "900",
        },
      ],
      timeData: [],
      startTs: [], //起始时间，通过下标去找对应的时间
      endTs: [], //结束时间
      muBan: {
        type1: [
          "数据时间",
          "scada风速（m/s）",
          "scada功率（kW）",
          "是否故障（故障=1，不故障=0）",
          "是否限电（限电=1，不限电=0）",
        ],
        type2: [
          ["数据时间", "日报上网电量（mWh）"],
          ["数据时间", "上网功率（kW）"],
          [
            "数据时间",
            "轮毂高度平均风速（m/s）",
            "轮毂高度平均风向（°）",
            "温度（℃）",
            "压强（hPa）",
            "湿度（%）",
          ],
        ],
      },
      templateId: 1, //模板默认为1
      stations: [], //场站名
      paths: [], //excel的所有数据，最终给zip传
      pathName: [], //excel的名字
      zipNames: [],
      tempArrayS: [], //模板2时，遍历里面的数据
    };
  },
  created() {
    this.tableVal();
  },
  methods: {
    rqCheck(event) {
      this.rqChecked = event.target.checked;
    },
    sjCheck(event) {
      this.sjChecked = event.target.checked;
    },
    typeClick(a) {
      //模板切换，改变按钮颜色
      this.templateId = a;
    },
    singleExport(index) {
      //当前导出，index为下标
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "export/downloadFile",
        showLoading: true,
        data: {
          station: that.tableData[index].value,
          templateId: that.templateId,
          month: that.dateArray[index].formatDate("yyyy-MM"),
          interval: that.timeData[index],
        },
        success(res) {
          var filename = res.data.name;
          var eleLink = document.createElement("a");

          const downloadLink = (res.data.path + "\\" + filename)
            .replace(/\\/g, "/")
            .replace(/http:\//g, "http://")
            .replace(/https:\//g, "https://");

          eleLink.download = filename;
          eleLink.style.display = "none";
          eleLink.href = downloadLink;
          document.body.appendChild(eleLink);
          eleLink.click();
          document.body.removeChild(eleLink);
        },
      });
    },
    tableVal() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "export/databases",
        success(res) {
          const arr3 = [];
          const arr4 = [];
          var data = []; //项目列表
          res.data.forEach((item, index) => {
            const value = Object.keys(item)[0];
            arr3.push(value);
            arr4.push(item[value]);
            data.push({
              fdc: item[value],
              value: value,
            });
            that.timeData.push("300");
          });
          that.stations = arr3;
          that.zipNames = arr4;
          that.tableData = data;
          that.defaultValue1();
        },
      });
    },
    defaultValue1() {
      const start = new Date();
      start.setTime(start.getTime());
      this.tableData.forEach((ele, index) => {
        this.dateArray.push(start);
      });
    },
    formatJson(filterVal, jsonData) {
      //模板1时，转数据格式
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    allExport() {
      //一键导出
      let that = this;

      let station = [];
      that.tableData.forEach((ele) => {
        station.push(ele.value);
      });

      let month = [];
      that.dateArray.forEach((ele) => {
        month.push(ele.formatDate("yyyy-MM"));
      });

      let interval = [];
      that.timeData.forEach((ele) => {
        interval.push(ele);
      });
      that.API.requestData({
        method: "GET",
        subUrl: "export/downloadFile",
        showLoading: true,
        data: {
          station: station.toString(),
          templateId: that.templateId,
          month: month.toString(),
          interval: interval.toString(),
        },
        success(res) {
          var filename = res.data.name;
          var eleLink = document.createElement("a");

          const downloadLink = (res.data.path + "\\" + filename)
            .replace(/\\/g, "/")
            .replace(/http:\//g, "http://")
            .replace(/https:\//g, "https://");

          eleLink.download = filename;
          eleLink.style.display = "none";
          eleLink.href = downloadLink;
          document.body.appendChild(eleLink);
          eleLink.click();
          document.body.removeChild(eleLink);
        },
      });
    },
    allExportF(_index, thisIndex) {
      //_index递归递增，thisIndex单击导出【下标】
      const that = this;
      var loadingName =
        thisIndex != undefined
          ? "正在导出" + that.zipNames[thisIndex]
          : that.zipNames[_index] != undefined
          ? "正在导出" + that.zipNames[_index]
          : "正在合成压缩包";
      BASE.showLoading({ text: loadingName + "，请耐心等待..." });
      if (that.stations[_index]) {
        that.API.requestData({
          method: "GET",
          subUrl: "export/history/all",
          data: {
            templateId: that.templateId,
            startTs:
              thisIndex != undefined
                ? that.startTs[thisIndex]
                : that.startTs[_index],
            endTs:
              thisIndex != undefined
                ? that.endTs[thisIndex] + 86400000
                : that.endTs[_index] + 86400000,
            interval:
              thisIndex != undefined
                ? that.inputVal[thisIndex]
                : that.inputVal[_index],
            station:
              thisIndex != undefined
                ? that.stations[thisIndex]
                : that.stations[_index],
          },
          success(res) {
            if (res.code == 200) {
              if (thisIndex != undefined) {
                //单击导出
                if (that.templateId == 1) {
                  //模板1
                  that.export(res.data, 0, that.zipNames[thisIndex]);
                } else if (that.templateId == 2) {
                  //模板2
                  that.exportMuban2(res.data, 0, that.zipNames[thisIndex]);
                }
              } else {
                //一键导出
                if (that.templateId == 1) {
                  that.export(res.data, 0, that.zipNames[_index], ++_index);
                } else if (that.templateId == 2) {
                  that.exportMuban2(
                    res.data,
                    0,
                    that.zipNames[_index],
                    ++_index
                  );
                }
              }
            }
          },
        });
      }
    },
    export(data, _index, zipName, deepIndex) {
      // deepIndex判断单击或一键
      const that = this;
      let tHeader = that.muBan["type" + that.templateId];
      var dataKey = Object.keys(data);
      var key = dataKey[_index];
      if (key) {
        let tempObject = {};
        let tempArray = [];
        const dataLength = data[key].length;

        let filterVal = [];
        data[key][0].forEach((pEle, pIndex) => {
          for (let i = 0; i < dataLength; i++) {
            tempObject[String(i)] = data[key][i][pIndex];
          }
          tempArray.push(tempObject);
          tempObject = {};
        });

        data[key][0].forEach((ele, index) => {
          filterVal.push(index);
        });
        that.paths.push(
          export_blob(tHeader, that.formatJson(filterVal, tempArray))
        ); //传blob
        var str = key.split("_");
        that.pathName.push(str[0].substring(0, 2) + str[1]); //excel的名字
        _index++;

        if (deepIndex != undefined) {
          setTimeout(() => {
            that.export(data, _index, zipName, deepIndex);
          }, 1000);
          if (dataKey.length == _index) {
            //当长度一致时，向zip塞值
            var thisPath = that.paths,
              thisPathName = that.pathName;
            that.paths = [];
            that.pathName = [];
            that.zipOut(thisPath, thisPathName, zipName, deepIndex);
          }
        } else {
          setTimeout(() => {
            that.export(data, _index, zipName);
          }, 1000);
          if (dataKey.length == _index) {
            //当长度一致时，向zip塞值
            var thisPath = that.paths,
              thisPathName = that.pathName;
            that.paths = [];
            that.pathName = [];
            that.zipOut(thisPath, thisPathName, zipName);
          }
        }
      }
    },
    exportMuban2(data, _index, excelName, deepIndex) {
      const that = this;
      var dataKey = Object.keys(data);
      let tHeader = that.muBan["type" + that.templateId];
      var key = dataKey[_index];
      if (key) {
        let tempObject = {};
        let tempArray = [];
        const dataLength = data[key].length;
        data[key][0].forEach((pEle, pIndex) => {
          for (let i = 0; i < dataLength; i++) {
            tempObject[String(i)] = data[key][i][pIndex];
          }
          tempArray.push(tempObject);
          tempObject = {};
        });

        that.tempArrayS.push(tempArray);
        _index++;
        if (dataKey.length == that.tempArrayS.length) {
          let obj = [];
          that.tempArrayS.forEach((ele, index) => {
            obj[index] = [];
            ele.forEach((ele2, index2) => {
              var key = Object.keys(ele2);
              var arr = [];
              key.forEach((ele3, index3) => {
                arr.push(ele2[ele3]);
              });
              obj[index][index2] = arr;
              arr = [];
            });
          });
          if (deepIndex != undefined) {
            that.paths.push(export_more_blob(tHeader, obj)); //传blob
            that.pathName.push(excelName); //excel的名字
            that.tempArrayS = [];
            that.allExportF(deepIndex);
          } else {
            that.paths.push(export_more_blob(tHeader, obj, excelName)); //只渲染一个excel
            BASE.closeLoading();
          }
        }
        if (deepIndex != undefined) {
          that.exportMuban2(data, _index, excelName, deepIndex);
          if (that.stations.length == deepIndex && _index == 1) {
            //当长度一致时，向zip塞值，_index只让执行第一次
            var thisPath = that.paths,
              thisPathName = that.pathName;
            that.tempArrayS = [];
            that.paths = [];
            that.pathName = [];
            that.zipOut(
              thisPath,
              thisPathName,
              "风电场_上网电量&功率&测风塔数据"
            );
            BASE.closeLoading();
          }
        } else {
          that.exportMuban2(data, _index, excelName);
          if (that.stations.length && _index == 1) {
            //当长度一致时，向zip塞值，_index只让执行第一次
            var thisPath = that.paths,
              thisPathName = that.pathName;
            that.tempArrayS = [];
            that.paths = [];
            that.pathName = [];
            BASE.closeLoading();
          }
        }
      }
    },

    changeDate(value) {
      if (this.rqCheck) {
        let dateArray = [];
        this.dateArray.forEach((ele) => {
          dateArray.push(value);
        });
        this.dateArray = dateArray;
      }
    },

    changeTableTime(value) {
      if (this.sjChecked) {
        let timeData = [];
        this.timeData.forEach((ele) => {
          timeData.push(value);
        });
        this.timeData = timeData;
      }
    },

    zipOut(paths, pathName, zipName, deepIndex) {
      // paths 所有blob
      // pathName 所有excel文件名
      // zipName zip的包名
      // deepIndex 执行ajax下标，当zipOut方法执行完后，再执行allExportF
      const that = this;
      var zip = new JsZip();
      paths.forEach((item, index) => {
        const arr_name = item; // 下载文件, 并存成ArrayBuffer对象
        const file_name = pathName[index] + ".xlsx"; // 获取文件名
        zip.file(file_name, arr_name, {
          binary: true,
        }); // 逐个添加文件
      });
      zip
        .generateAsync({
          type: "blob",
        })
        .then(function (content) {
          // 下载的文件名
          var filename = zipName + ".zip";
          // 创建隐藏的可下载链接
          var eleLink = document.createElement("a");
          eleLink.download = filename;
          eleLink.style.display = "none";
          // 下载内容转变成blob地址
          eleLink.href = URL.createObjectURL(content);
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
          if (deepIndex) {
            that.allExportF(deepIndex); //递归，去执行ajax
            if (that.stations.length == deepIndex) {
              BASE.closeLoading();
            }
          } else if (that.single) {
            BASE.closeLoading();
            that.single = false;
          }
        });
    },
  },
};
</script>

<style lang="less">
.excelPickerTd input {
  flex: 1;
}
.el-date-editor--daterange.mr15 {
  border: 1px solid rgba(96, 103, 105, 0.2);
  height: 33px;
  padding: 0 8px;
  width: 369px;
  input {
    background-color: transparent;
    color: white;
  }
  .el-range-separator {
    color: white;
  }
}
.com-table td {
  color: white !important;
}
.t2 {
  top: 2px;
  position: relative !important;
}
</style>