sis_zhfx/src/views/MalfunctionWarning/components/testReport.vue

<template>
  <el-dialog
    custom-class="cDialog"
    top="50px"
    v-model="dialogVisible"
    width="80%"
  >
    <el-button
      style="position: absolute; right: 24px; top: 60px; z-index: 5000"
      type="primary"
      @click="exportPDF"
    >
      导出为PDF</el-button
    >
    <div class="pdfDom">
      <div class="title">故障检测报告</div>
      <div class="info">
        <div class="infoContent">
          <div class="contents">
            <div class="contentsTitle">风机编号：</div>
            <div>NG01_01</div>
          </div>
          <div class="contents">
            <div class="contentsTitle">风机型号：</div>
            <div>UP82</div>
          </div>
          <div class="contents">
            <div class="contentsTitle">故障发生时间：</div>
            <div>2021-11-26 09:00:00</div>
          </div>
        </div>
        <div class="infoContent">
          <div class="contents">
            <div class="contentsTitle">使用模型：</div>
            <div>神经网络</div>
          </div>
          <div class="contents">
            <div class="contentsTitle">训练次数：</div>
            <div>200次</div>
          </div>
          <div class="contents"></div>
        </div>
        <div class="result">
          <div class="moduleTitle">诊断结果:</div>
          <div class="resultContent">
            诊断故障最大可能为<text style="color: #dc143c">齿轮箱故障</text
            >,下表为各故障可能发生的实际概率：
          </div>
          <div class="resultTable">
            <el-table
              empty-text="暂无数据"
              :data="faultList"
              :header-cell-style="{
                background: 'rgb(153,204,255)',
                color: '#000',
                'font-size': '20px',
              }"
              :cell-style="{
                'font-size': '20px',
                color: '#696969',
              }"
              border
              stripe
              style="width: 100%; margin: 10px 0"
            >
              <el-table-column
                prop="name"
                label="故障名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="percent"
                label="发生概率"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="result">
          <div class="moduleTitle">诊断依据:</div>
          <div class="resultContent">
            根据风场情况，训练故障权重图、训练和测试准确率、训练模型误差率如下：
          </div>
          <div class="charts">
            <BarChart
              v-if="barList.length > 0"
              id="reportBar"
              :barList="barList"
            ></BarChart>
            <LineChart
              v-if="lossList"
              id="reporLoss"
              :reportFlag="true"
              :dataList="lossList"
            ></LineChart>
            <LineChart
              v-if="accuracyList"
              id="reporAccuracy"
              :reportFlag="true"
              :dataList="accuracyList"
            ></LineChart>
          </div>
          <div class="resultContent">
            该模型训练和测试的准确率分别为<text style="color: #dc143c"
              >74.2%和73.3%</text
            >；误差率分别为<text style="color: #dc143c">2%和1%</text
            >；该模型训练所倚重的测点比重分别为：<text style="color: #dc143c"
              >偏航位置7.2%、发电机转速4.4%、有功功率3.4%、U1项绕组电流2.9%、齿轮箱轴2温度2.1%</text
            >。模型训练过程所有测点倚重占比如下表所示：
          </div>
          <div class="resultTable">
            <el-table
              empty-text="暂无数据"
              :data="proportionList"
              :header-cell-style="{
                background: 'rgb(153,204,255)',
                color: '#000',
                'font-size': '20px',
              }"
              :cell-style="{
                'font-size': '20px',
                color: '#696969',
              }"
              border
              stripe
              style="width: 100%; margin: 10px 0"
            >
              <el-table-column
                prop="name"
                label="故障名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="percent"
                label="发生概率"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Get_PDF from "@tools/htmlToPdf";
import LineChart from "./lineChart.vue";
import BarChart from "./barChart.vue";
export default {
  components: {
    LineChart,
    BarChart,
  },
  created() {
    let dataList = JSON.parse(
      '{"ducumentName":"NNS-1637028563000","loss":[1.0882383584976196,1.067789912223816,1.0520573854446411,1.0380222797393799,1.0230460166931152,1.0070627927780151,0.9899255037307739,0.9736341238021851,0.9547672271728516,0.9341660737991333,0.9082227945327759,0.8833365440368652,0.8581799268722534,0.8310791254043579,0.8011142611503601,0.7700659036636353,0.7383494973182678,0.7076452970504761,0.6731187105178833,0.6390867829322815],"accuracy":[0.3047619163990021,0.37142857909202576,0.3619047701358795,0.3619047701358795,0.380952388048172,0.5809524059295654,0.6571428775787354,0.6571428775787354,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6761904954910278,0.6952381134033203,0.7333333492279053,0.7428571581840515],"val_loss":[1.0914311408996582,1.0727100372314453,1.0579898357391357,1.0469794273376465,1.0305122137069702,1.012723684310913,0.9997329115867615,0.9839586615562439,0.9610583782196045,0.9339884519577026,0.9096081256866455,0.8876619338989258,0.862886905670166,0.8299474120140076,0.793283998966217,0.7597811222076416,0.7229973673820496,0.6826366782188416,0.6449647545814514,0.6126752495765686],"val_accuracy":[0.2666666805744171,0.2666666805744171,0.2666666805744171,0.2666666805744171,0.4000000059604645,0.644444465637207,0.644444465637207,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.7333333492279053,0.7555555701255798,0.7333333492279053],"bar":[{"name":"邮箱温度","value":0.3},{"name":"风速","value":0.25},{"name":"变桨","value":0.25},{"name":"有高","value":0.2}]}'
    );
    this.lossList.loss = dataList.loss;
    this.lossList.val_loss = dataList.val_loss;
    this.accuracyList.accuracy = dataList.accuracy;
    this.accuracyList.val_accuracy = dataList.val_accuracy;
    this.barList = dataList.bar;
  },
  data() {
    return {
      barList: [],
      lossList: {},
      accuracyList: {},
      faultList: [
        {
          name: "齿轮箱故障",
          percent: "80%",
        },
        {
          name: "变频器故障",
          percent: "17%",
        },
        {
          name: "变桨系统故障",
          percent: "3%",
        },
      ],
      proportionList: [
        {
          name: "偏航位置",
          percent: "7.2%",
        },
        {
          name: "发电机转速",
          percent: "4.4%",
        },
        {
          name: "有功功率",
          percent: "3.4%",
        },
        {
          name: "U1项绕组电流",
          percent: "2.9%",
        },
        {
          name: "齿轮箱轴2温度",
          percent: "2.1%",
        },
        {
          name: "电网无功功率",
          percent: "1.9%",
        },
      ],
    };
  },
  methods: {
    // 导出PDF
    exportPDF(name) {
      this.BASE.showMsg({
        type: "success",
        msg: "正在导出...请稍后...",
      });
      Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "故障检测报告");
    },
  },
};
</script>
<style lang="less" scoped>
.cDialog {
  position: relative;

  .pdfDom {
    padding: 30px 50px;
  }

  .title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
  }

  .info {
    display: flex;
    flex-direction: column;
    width: 100%;

    .infoContent {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 22px;

      .contents {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 33%;

        .contentsTitle {
          font-weight: bold;
        }
      }
    }

    .result {
      font-size: 22px;

      .resultTable {
        display: flex;
        width: 40%;
        margin-left: 30%;
      }

      .charts {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
}
</style>