fd_dwgz_zhyw/src/views/economicsOperation/analyse/monthlyAnalysis/reportDialog.vue

<template>
  <div class="exportPDF">
    <el-button round size="mini" class="buttons" @click="savePdf"
      >导出PDF</el-button
    >
    <!-- <el-button round size="mini" class="buttons" @click="exportWord"
      >导出Word</el-button
    > -->
  </div>
  <div
    :class="showWhite ? 'monthReportWhite' : 'monthReport'"
    v-loading="loading"
  >
    <div class="dialogHeader">
      <span
        >{{ dialogTitle }}号风机{{ pickerTimerYear }}年{{
          pickerTimerMonth
        }}月运行指标性能分析</span
      >
    </div>
    <div class="monthReportTable">
      <el-table :data="monthReportData" stripe size="mini" style="width: 100%">
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :prop="item.field"
          :label="item.name"
          align="center"
          :width="item.width"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="monthReportMsage">
      <div class="textIndent">
        1.本月{{ dialogTitle }}号风机风机设备利用小时数{{
          tableVal.byzb && tableVal.byzb.lyxs
        }}小时、同比{{ tableVal.tpzb && tableVal.tpzb.lyxs }}小时，
        设备可利用率{{ tableVal.byzb && tableVal.byzb.sbklyl }}%、同比{{
          tableVal.tpzb && tableVal.tpzb.sbklyl
        }}%， 等效可用系数{{ tableVal.byzb && tableVal.byzb.dxklyxs }}%、同比{{
          tableVal.tpzb && tableVal.tpzb.dxklyxs
        }}%， 静风频率达到{{ tableVal.byzb && tableVal.byzb.jfpl }}%、同比{{
          tableVal.tpzb && tableVal.tpzb.jfpl
        }}%， 机组功率特性一致性系数达到{{
          tableVal.byzb && tableVal.byzb.glyzxxs
        }}%、同比{{ tableVal.tpzb && tableVal.tpzb.glyzxxs }}%。
      </div>
      <div class="textIndent">
        2.{{ dialogTitle }}风机{{ pickerTimerYear }}年{{
          pickerTimerMonth
        }}月平均风速{{ tableVal.byzb && tableVal.byzb.fs }}m/s、同比{{
          tableVal.tpzb && tableVal.tpzb.fs
        }}m/s， 小风平均切入风速{{
          tableVal.byzb && tableVal.byzb.xfqr
        }}m/s、同比{{ tableVal.tpzb && tableVal.tpzb.xfqr }}m/s， 有效风时数{{
          tableVal.byzb && tableVal.byzb.yxfss
        }}小时、同比{{ tableVal.tpzb && tableVal.tpzb.yxfss }}小时，
        实际发电电量{{ tableVal.byzb && tableVal.byzb.fdl }}万kwh、同比{{
          tableVal.tpzb && tableVal.tpzb.fdl
        }}万kwh， 同比增长率{{
          tableVal.tbzb && tableVal.tbzb.fdl
        }}%，各项损失电量累计{{
          tableVal.byzb && tableVal.byzb.llfdl - tableVal.byzb.fdl
        }}万kwh、 同比{{
          tableVal.tpzb && tableVal.tpzb.llfdl - tableVal.tpzb.fdl
        }}万kwh，同比增长率{{
          tableVal.tbzb && tableVal.byzb.llfdl - tableVal.tbzb.fdl
        }}%， 理论发电量{{
          tableVal.byzb && tableVal.byzb.llfdl
        }}万kwh，实际发电量与理论发电量相差{{
          tableVal.tbzb && tableVal.tbzb.llfdl
        }}万kwh。
      </div>
      <div class="textIndent">
        3.本月静风频率{{
          tableVal.byzb && tableVal.byzb.jfpl
        }}%，月累计待机小时{{
          tableVal.byzb && tableVal.byzb.tjxs
        }}小时，待机占比{{ tableVal.tbzb && tableVal.tbzb.tjxs }}%。
      </div>
    </div>
    <div class="monthReportEcharts">
      <div id="ffEchart" style="width: 100%; height: 350px"></div>
      <div id="fiveEchart" style="width: 100%; height: 350px"></div>
      <!-- <div id="jfdjEchart" style="width: 100%; height: 350px"></div> -->
    </div>
  </div>
</template>

<script>
import {
  getApisingleanalysisSub,
  getApisingleanalysisChart,
} from "@/api/monthlyPerformanceAnalysis";
import * as echarts from "echarts";
import Get_PDF from "@/tools/htmlToPdf.js";
// import { exportWord, getBase64Sync } from "@/tools/exportFile.js";
import dayjs from "dayjs";
import PizZip from "pizzip";
import docxtemplater from "docxtemplater";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      img0: "",
      img1: "",
      img2: "",
      showWhite: true,
      dialogTitle: "",
      pickerTimerYear: "",
      pickerTimerMonth: "",
      monthReportData: [],
      loading: false,
      tableHeader: [
        { name: "指标名称", field: "name", width: "240" },
        { name: "本月值", field: "byzb" },
        { name: "去年同期", field: "hqzb" },
        { name: "同比增长率（%）", field: "hbzb" },
        { name: "环比", field: "tqzb" },
        { name: "环比端值（%）", field: "tbzb" },
      ],
      tabrow: {
        fdl: "实际发电量（万千瓦时）",
        fs: "平均风速（m/s）",
        gzss: "故障损失电量（万千瓦时）",
        jxss: "计划检修损失电量（万千瓦时）",
        xdss: "调度限电损失电量（万千瓦时）",
        xnss: "性能未达标损失电量（万千瓦时）",
        slss: "受累损失电量（万千瓦时）",
        llfdl: "理论发电量（万千瓦时）",
        gzxs: "故障停运时间（小时）",
        jxxs: "检修停运时间（小时）",
        tjxs: "待机时间（小时）",
        zdxs: "通讯中断时间（小时）",
        yxxs: "并网时间（小时）",
        lyxs: "设备利用小时（小时）",
        sbklyl: "设备利用率（%）",
        dxklyxs: "等效可用系数（%）",
        xfqr: "小风切入风速（m/s）",
        glyzxxs: "功率特性一致性系数（%）",
        yxfss: "有效风时数（小时）",
        xfqrhgl: "小风切入合格率（%）",
        jfpl: "静风频率（%）",
      },
      tableVal: "",
      rowData: {},
      form: {},
    };
  },
  methods: {
    init(row) {
      this.monthReportData = [];
      this.tableVal = "";
      this.showWhite = true;
      this.rowData = row;
      this.getTableData(row);
    },
    changeModel() {
      this.showWhite = !this.showWhite;
      if (!this.showWhite) {
        document.querySelector(".monthReport").style.background = "#000";
      } else {
        document.querySelector(".monthReportWhite").style.background = "#fff";
      }
      this.getEchartsData(this.rowData);
    },
    savePdf() {
      let dom = "";
      if (!this.showWhite) {
        dom = document.querySelector(".monthReport");
      } else {
        dom = document.querySelector(".monthReportWhite");
      }
      Get_PDF.downloadPDF(
        dom,
        "运行指标性能分析报告" +
          dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        this.showWhite
      );
      // exportWord(dom,  "运行指标性能分析报告.docx", this.showWhite);
    },

    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },

    //点击按钮导出word （形参作为word发送到邮箱标识 无需考虑）
    exportWord(fileExport) {
      //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      //编写docx模板 本文后续有文档模板语法教学
      var ImageModule = require("docxtemplater-image-module-free");
      var fs = require("fs");
      let _this = this;

      // 读取并获得模板文件的二进制内容，放在项目根目录public中即可
      JSZipUtils.getBinaryContent(
        "dataStatistics.docx",
        function (error, content) {
          if (error) {
            throw error;
          }

          // 图片处理
          let opts = {};
          opts = { centered: false };
          opts.getImage = (chartId) => {
            return _this.base64DataURLToArrayBuffer(chartId);
          };
          opts.getSize = function (img, tagValue, tagName) {
            //自定义指定图像大小，此处可动态调试各别图片的大小
            return [650, 300]; //例子：宽50px  高度100px
          };

          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater();
          doc.attachModule(new ImageModule(opts));
          doc.loadZip(zip);

          // 设置模板变量的值
          doc.setData({
            dialogTitle: _this.dialogTitle,
            pickerTimerYear: _this.pickerTimerYear,
            pickerTimerMonth: _this.pickerTimerMonth,
            ..._this.articleParams, //详情内容字段（Object）
            table: _this.detailParams, //表格内容（Array）
            img0: _this.img0, // echarts图片
            img1: _this.img1,
            img2: _this.img2,
            monthReportData: _this.monthReportData,
            lyxs: _this.tableVal.byzb.lyxs,
            tplyxs: _this.tableVal.tqzb.lyxs,
            sbklyl: _this.tableVal.byzb.sbklyl,
            tpsbklyl: _this.tableVal.tqzb.sbklyl,
            dxklyxs: _this.tableVal.byzb.dxklyxs,
            tpdxklyxs: _this.tableVal.tqzb.dxklyxs,
            jfpl: _this.tableVal.byzb.jfpl,
            tpjfpl: _this.tableVal.tqzb.jfpl,
            glyzxxs: _this.tableVal.byzb.glyzxxs,
            tpglyzxxs: _this.tableVal.tqzb.glyzxxs,

            // fs: _this.tableVal.byzb.fs,
            // tpfs: _this.tableVal.tqzb.fs,

            // xfqr: _this.tableVal.byzb.xfqr,
            // tpxfqr: _this.tableVal.tqzb.xfqr,
            // yxfss : _this.tableVal.byzb.yxfss ,
            // tpyxfss : _this.tableVal.tqzb.yxfss ,
            // fdl: _this.tableVal.byzb.fdl,
            // tpfdl: _this.tableVal.tqzb.fdl,
            // tbfdl: _this.tableVal.tbzb.fdl,
            // ssfdl: _this.tableVal.byzb.llfdl - _this.tableVal.byzb.fdl,
            // tbsfdl: _this.tableVal.tpzb.llfdl - _this.tableVal.tpzb.fdl,
            // zzl: _this.tableVal.byzb.llfdl - _this.tableVal.tbzb.fdl,
            // llfdl: _this.tableVal.byzb.llfdl,
            // xcfdl: _this.tableVal.tbzb.llfdl,
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            };

            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          //此文件流 可以传送到后端服务器生成二进制文件（包含上传到阿里云服务器）
          if (fileExport == "export") {
            let formData = new FormData(); //创建formdata来存文件
            const chunkfile = new File([out], "性能分析.docx");
            formData.append("file", chunkfile); //存入文件
            formData.append("toEmailList", _this.mailForm.toEmailList);
            formData.append("customSubject", _this.mailForm.customSubject);
            //formData文件  需注意此api请求方式 下文会描述
            dataDetailsEmailApi(formData).then((res) => {
              if (res.data.code == 200) {
                _this.$message.success("发送成功");
              }
            });
          } else {
            // 将目标文件对象保存为目标类型的文件，并命名
            saveAs(out, "性能分析.docx");
          }
        }
      );
    },

    async getTableData(row) {
      this.loading = true;
      let params = {
        wtId: row.windturbineid,
        year: this.pickerTimerYear,
        month: this.pickerTimerMonth,
      };
      const { data: datas } = await getApisingleanalysisSub(params);
      this.tableVal = datas.data;
      let arr = [];
      let keyarr = Object.keys(datas.data.byzb);
      let jarr = Object.keys(datas.data);
      for (let k of keyarr) {
        let obj = {
          name: k,
          byzb: null,
          hbzb: null,
          hqzb: null,
          tbzb: null,
          tqzb: null,
        };
        for (let i in datas.data) {
          for (let j of jarr) {
            if (i == j) {
              obj[j] = datas.data[i][k];
            }
          }
        }
        arr.push(obj);
      }
      arr = arr.filter((e) => {
        return (
          e.name != "id" &&
          e.name != "windturbineid" &&
          e.name != "companyId" &&
          e.name != "types" &&
          e.name != "windturbineName" &&
          e.name != "windPowerStationId" &&
          e.name != "windPowerStationName" &&
          e.name != "recorddate" &&
          e.name != "swdl" &&
          e.name != "gwdl" &&
          e.name != "rlxs" &&
          e.name != "fjrl"
        );
      });
      arr.forEach((e) => {
        e.name = this.tabrow[e.name];
      });
      this.monthReportData = arr;
      this.getEchartsData(row);
    },
    async getEchartsData(row) {
      let params = {
        wtId: row.windturbineid,
        year: this.pickerTimerYear,
        month: this.pickerTimerMonth,
      };
      const { data: datas } = await getApisingleanalysisChart(params);
      const res = datas.data;
      // 日发电量与风速
      this.makePowerAndWind(res);
      // 五项损失
      this.makeFiveBarEchart(res);
      //静风频率和待机时间
      //   this.makeQuietAirStandby(res);
      this.loading = false;
    },
    //日发电量与风速----数据整体与展示
    makePowerAndWind(res) {
      let arrfffdl = [];
      let arrfffs = [];
      let xAxis = [];
      res.ff.forEach((e) => {
        let date = e.recorddate.substring(
          e.recorddate.indexOf("-") + 1,
          e.recorddate.indexOf("T")
        );
        xAxis.push(date);
        let objfdl = {
          name: "日发电量",
          value: e.fdl,
          itemStyle: {
            color: "#05bb4c",
          },
        };
        let objfs = {
          name: "风速",
          value: e.fs,
          itemStyle: {
            color: "#dcc652",
          },
        };
        arrfffdl.push(objfdl);
        arrfffs.push(objfs);
      });
      this.getPowerAndWind(xAxis, arrfffdl, arrfffs);
    },
    getPowerAndWind(xAxis, barData, lineData) {
      let option = {
        backgroundColor: this.showWhite ? "#fff" : "",
        color: ["#05bb4c", "#dcc652"],
        title: {
          text: "日发电量",
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: "20",
          data: ["日发电量", "风速"],
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisLabel: {
              color: this.showWhite ? "#000" : "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "日发电量",
            // min: 0,
            // max: 250,
            // interval: 50,
            nameTextStyle: {
              color: this.showWhite ? "#000" : "#fff",
            },
            axisLabel: {
              color: this.showWhite ? "#000" : "#fff",
              formatter: "{value} 万(Kwh)",
            },
          },
          {
            type: "value",
            name: "风速",
            // min: 0,
            // max: 25,
            interval: 5,
            nameTextStyle: {
              color: this.showWhite ? "#000" : "#fff",
            },
            axisLabel: {
              color: this.showWhite ? "#000" : "#fff",
              formatter: "{value}(m/s)",
            },
          },
        ],
        series: [
          {
            name: "日发电量",
            type: "bar",
            barWidth: 40,
            data: barData,
          },
          {
            name: "风速",
            type: "line",
            data: lineData,
          },
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById("ffEchart");
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom);
      myChart.setOption(option, this.showWhite ? "" : "dark");
      this.img0 = myChart.getDataURL({
        pixelRatio: 1, // 导出的图片分辨率比例，默认为 1。
        backgroundColor: "#ffffff", // 导出的图片背景色，默认使用 option 里的 backgroundColor
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //五项损失
    makeFiveBarEchart(res) {
      let arrwslegend = [
        "限电损失电量",
        "性能未达标损失电量",
        "检修损失电量",
        "故障损失电量",
        "受累损失电量",
      ];
      let arrwsdata = [
        {
          name: "限电损失电量",
          type: "bar",
          stack: "one",
          barWidth: "10%",
          data: res.ws.map((i) => i.xdss),
        },
        {
          name: "性能未达标损失电量",
          type: "bar",
          stack: "one",
          barWidth: "10%",
          data: res.ws.map((i) => i.xnss),
        },
        {
          name: "检修损失电量",
          type: "bar",
          stack: "one",
          barWidth: "10%",
          data: res.ws.map((i) => i.jxss),
        },
        {
          name: "故障损失电量",
          type: "bar",
          stack: "one",
          barWidth: "10%",
          data: res.ws.map((i) => i.gzss),
        },
        {
          name: "受累损失电量",
          type: "bar",
          stack: "one",
          barWidth: "10%",
          data: res.ws.map((i) => i.slss),
        },
      ];

      let xAxis = res.ws.map((i) => dayjs(i.recorddate).format("YYYY-MM-DD"));

      this.getFiveBarEchart(xAxis, arrwslegend, arrwsdata);
    },
    getFiveBarEchart(xAxis, lenged, series) {
      let option = {
        backgroundColor: this.showWhite ? "#fff" : "",
        color: [
          "#05bb4c",
          "#4b55ae",
          "#e17e23",
          "#02BB4C",
          "#EDB32F",
          "#EDEB2F",
        ],
        title: {
          text: "损失电量分析",
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        legend: {
          data: lenged,
          right: 20,
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: this.showWhite ? "#000" : "#fff",
            },
            data: xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: this.showWhite ? "#000" : "#fff",
            },
            axisLabel: {
              color: this.showWhite ? "#000" : "#fff",
            },
          },
        ],
        series: series,
      };
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById("fiveEchart");
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom);
      myChart.setOption(option, this.showWhite ? "" : "dark");
      setTimeout(() => {
        this.img1 = myChart.getDataURL({
          pixelRatio: 1, // 导出的图片分辨率比例，默认为 1。
          backgroundColor: "#ffffff", // 导出的图片背景色，默认使用 option 里的 backgroundColor
        });
      }, 2000);

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //静风频率和待机时间
    makeQuietAirStandby(res) {
      //   let arrjdjf = [];
      //   let arrjddj = [];
      //   let xAxis = [];
      //   let series = [];
      //   res.jd.forEach((e) => {
      //     series;
      //     let date = e.recorddate.substring(
      //       e.recorddate.indexOf("-") + 1,
      //       e.recorddate.indexOf("T")
      //     );
      //     xAxis.push(date);
      //     arrjdjf.push(e.jfpl);
      //     arrjddj.push(e.tjxs);
      //   });
      //   let obj = {
      //     title: "静风时长(小时)",
      //     type: "line",
      //     value: arrjdjf,
      //   };
      //   series.push(obj);
      //   let obj1 = {
      //     title: "待机时长(小时)",
      //     type: "line",
      //     value: arrjddj,
      //   };
      //   series.push(obj1);
      //   this.getQuietAirStandbyLineEchart(xAxis, series);
    },
    getQuietAirStandbyLineEchart(xAxis, series) {
      let option = {
        backgroundColor: this.showWhite ? "#fff" : "",
        color: ["#05bb4c", "#4b55ae"],
        title: {
          text: "损失电量分析",
          textStyle: {
            color: this.showWhite ? "#000" : "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: "20",
          data: ["静风时长(小时)", "待机时长(小时)"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById("jfdjEchart");
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom, this.showWhite ? "" : "dark");
      myChart.setOption(option);
      this.img2 = myChart.getDataURL({
        pixelRatio: 2, // 导出的图片分辨率比例，默认为 1。
        backgroundColor: "#999999", // 导出的图片背景色，默认使用 option 里的 backgroundColor
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less">
.exportPDF {
  float: right;
  margin-right: 35px;
  margin-top: 10px;

  .buttons {
    background-color: rgba(0, 70, 199, 1);
    color: #fff;
    font-size: 14px;
  }
}

.monthReport {
  padding: 0 23px;
  padding-top: 20px;

  .dialogHeader {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 40px;

    span {
      position: relative;
      left: 5%;
    }
  }

  .el-button {
    min-height: 25px;
    height: 25px;

    span {
      position: relative;
      top: -8px;
    }
  }

  .monthReportTable {
    margin: 10px;
    padding-bottom: 10px;
    background: rgba(0, 0, 0, 0.4);
  }

  .monthReportMsage {
    .textIndent {
      color: #fff;
      font-size: 16px;
      line-height: 30px;
      text-indent: 2em;
    }
  }

  .monthReportEcharts {
    margin-top: 20px;
  }

  .el-loading-mask {
    background-color: rgba(0, 0, 0, 1) !important;
  }
}

.monthReportWhite {
  padding: 0 23px;
  background: #fff;
  padding-top: 20px;

  .dialogHeader {
    text-align: center;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 40px;

    span {
      position: relative;
      left: 5%;
    }
  }

  .el-button {
    min-height: 25px;
    height: 25px;

    span {
      position: relative;
      top: -8px;
    }
  }

  .monthReportTable {
    margin: 10px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.4);

    .el-table__header-wrapper {
      .has-gutter {
        tr {
          color: #000;
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__body {
        tr {
          color: #000;
        }
      }
    }
  }

  .monthReportMsage {
    .textIndent {
      color: #000;
      font-size: 16px;
      line-height: 30px;
      text-indent: 2em;
    }
  }

  .monthReportEcharts {
    margin-top: 20px;
  }

  .el-loading-mask {
    // background-color: rgba(0,0,0,1) !important;
  }
}
</style>