sis_zhfx/src/components/other/healthReport/index.vue

<template>
  <el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @closed="dialogClosed">
    <el-button style="position: absolute;right: 24px;top: 60px;z-index: 5000;" type="primary" @click="exportPDF">导出为PDF</el-button>
    <div class="pdfDom">
      <div>
        <div class="title">健康评价报告概述</div>
        <el-form style="margin-top:10px;">
          <el-form-item>健康状态：2016C505513</el-form-item>
        </el-form>
        <div class="tableBox">
          <div class="l">
            <el-form>
              <el-form-item class="imp fw">{{jczbmap.fjmc}}</el-form-item>
              <el-form-item class="imp fw">评级等级：{{jczbmap.pjdj}} </el-form-item>
              <el-form-item class="imp fw">评级结果：{{jczbmap.pjjg}}</el-form-item>
              <el-form-item class="imp fw">评级有效期：一个月</el-form-item>
              <el-form-item class="imp fw">主要参数指标数据：</el-form-item>
            </el-form>
            <el-table empty-text="暂无数据" :data="bjzb" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="partname" label="部件指标"></el-table-column>
              <el-table-column prop="q1yjkqk" label="近一月健康情况"></el-table-column>
              <el-table-column prop="q2yjkqk" label="近两月健康情况"></el-table-column>
              <el-table-column prop="q3yjkqk" label="近三月健康情况"></el-table-column>
            </el-table>
            <el-form>
              <!-- <el-form-item class="imp fw">运行分析员：</el-form-item> -->
              <el-form-item class="imp fw">报告出具时间：{{jczbmap.bgrq}}</el-form-item>
              <el-form-item>注：本报告表述了健康管理系统对该设备的健康评级观点，仅供参考，并非是最终的决策的结论、建议。</el-form-item>
            </el-form>
          </div>
          <div class="r">
            <el-form>
              <el-form-item class="imp fw" style="border-bottom:8px solid #000;">评级观点：</el-form-item>
              <div class="infoBox">
                <p>{{jczbmap.fjmc}}于{{jczbmap.bwsj}}并网运行，本年累计发电量为{{jczbmap.nfdl}}万Kwh，本月发电量为{{jczbmap.yfdl}}万Kwh。</p>
                <p>发电量同期环比：{{jczbmap.yfdlhb}}万Kwh</p>
                <p>发电量同期同比：{{jczbmap.yfdltb}}万Kwh</p>
                <p>MTTR：{{jczbmap.mttr || 0}}</p>
                <p>MTBF：{{jczbmap.mtbf || 0}}</p>
                <p class="red">本月故障时长：{{jczbmap.ygzsc || 0}}小时</p>
                <p class="red">发电机故障次数：{{jczbmap.fdlgzcs || 0}}次</p>
                <p class="red">发电机报警次数：{{jczbmap.fdlbjcs || 0}}次</p>
                <p class="purple">齿轮箱故障次数：{{jczbmap.clxgzcs || 0}}次</p>
                <p class="purple">齿轮箱报警次数：{{jczbmap.clxbjcs || 0}}次</p>
                <p class="red">变浆故障次数：{{jczbmap.bjgzcs || 0}}次</p>
                <p class="red">变浆报警次数：{{jczbmap.bjbjcs || 0}}次</p>
                <p class="purple">主控故障次数：{{jczbmap.zkgzcs || 0}}次</p>
                <p class="purple">主控报警次数：{{jczbmap.zkbjcs || 0}}次</p>
                <p>风机整体性能等级评估等级：{{jczbmap.pjdj}}</p>
                <p>总体预估该台风机健康状态{{jczbmap.jkqksm}}</p>
              </div>
            </el-form>
          </div>
        </div>
        <div class="textBox">
          <el-form>
            <el-form-item class="imp fw">部件：</el-form-item>
            <el-form-item class="imp fw">发电机</el-form-item>
            <el-form-item>1）关键参数：发电机采用“发电机转速”、“发电机轴A温度” 、“发电机轴B温度”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</el-form-item>
            <el-table empty-text="暂无数据" :data="fdjgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
              border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
              <el-table-column prop="edz" label="额定值"></el-table-column>
              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
              <el-table-column prop="qz" label="权重"></el-table-column>
              <el-table-column prop="scz" label="实测值"></el-table-column>
              <el-table-column prop="df" label="得分"></el-table-column>
            </el-table>
            <!-- <el-form-item>2）震动监测：</el-form-item>
            <el-form-item>时域分析分析法</el-form-item>
            <div class="infoBox">
              <p>有量纲参数：均值为100，方差为49，均方幅值67，峰值，260，平均幅值44，均方值120</p>
              <p>无量纲参数：峭度指标20，峰值指标50，波形指标90，脉冲指标77</p>
              <p>结合两种指标都位发现明显劣化值</p>
            </div> -->
            <el-form-item>频域分析法：根据震动检测提供频域分析结果，现有设备运行正常</el-form-item>
            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.fdj" />
            <!-- <el-form-item>3）统计分析：</el-form-item>
            <div class="infoBox">
              <p>发电机类故障，平均故障周期在12个月，上次故障距此次评价时间为5个月，发电机处于平稳运行周期，</p>
            </div> -->
            <el-form-item class="imp fw">齿轮箱</el-form-item>
            <div class="infoBox">
              <p>齿轮箱采用“齿轮箱温度”为关键参数，该参数在统计周期内数据显示样本超出了劣化区，并且有明显的瞬时的上升趋势，引发了温度超限报警一次，恢复后运行平稳，该风机齿轮箱历史总体运行正常，近期存在报警信息，状态评价为良。</p>
            </div>
            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.clx" />
            <el-form-item class="imp fw">主轴</el-form-item>
            <div class="infoBox">
              <p>1）关键参数：主轴采用“主轴承温度”、“主轴承油脂启动时间间隔” 、“主轴承油脂泵运行周期”为关键参数，该参数在统计周期内拟故障应进行检查</p>
            </div>
            <el-table empty-text="暂无数据" :data="zzgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
              border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
              <el-table-column prop="edz" label="额定值"></el-table-column>
              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
              <el-table-column prop="qz" label="权重"></el-table-column>
              <el-table-column prop="scz" label="实测值"></el-table-column>
              <el-table-column prop="df" label="得分"></el-table-column>
            </el-table>
            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.zk" />
            <el-form-item class="imp fw">变桨</el-form-item>
            <div class="infoBox">
              <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2”
                、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
            </div>
            <el-table empty-text="暂无数据" :data="bjgjcs" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
              border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="gjcs" label="关键参数"></el-table-column>
              <el-table-column prop="edz" label="额定值"></el-table-column>
              <el-table-column prop="yxfw" label="允许范围"></el-table-column>
              <el-table-column prop="qz" label="权重"></el-table-column>
              <el-table-column prop="scz" label="实测值"></el-table-column>
              <el-table-column prop="df" label="得分"></el-table-column>
            </el-table>
            <!-- <el-form-item>2）震动监测：</el-form-item>
            <el-form-item>时域分析分析法</el-form-item>
            <div class="infoBox">
              <p>有量纲参数：均值为100，方差为49，均方幅值67，峰值，260，平均幅值44，均方值120</p>
              <p>无量纲参数：峭度指标20，峰值指标50，波形指标90，脉冲指标77</p>
              <p>结合两种指标都位发现明显劣化值</p>
            </div> -->
            <el-form-item>频域分析法：根据震动检测提供频域分析结果，现有设备运行正常</el-form-item>
            <DoubleLineChart style="margin:10px 0;" width="100%" height="300px" :list="chartmap.bj" />
            <el-form-item class="imp fw">指标：</el-form-item>
            <el-form-item class="imp fw">1、风能利用率</el-form-item>
            <div class="infoBox" style="margin:20px 0;">
              <p>近三月，该风机风能利用率同比{{ fnlylItem.ytbqs + fnlylItem.ytbz }}%，环比{{ fnlylItem.yhbqs + fnlylItem.yhbz }}%</p>
            </div>
            <el-table empty-text="暂无数据" :data="fnlyl" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="name" label="项目"></el-table-column>
              <el-table-column prop="q1ysj" label="近一月"></el-table-column>
              <el-table-column prop="q2ysj" label="近两月"></el-table-column>
              <el-table-column prop="q3ysj" label="近三月"></el-table-column>
            </el-table>
            <el-form-item class="imp fw">2、设备可利用率</el-form-item>
            <div class="infoBox" style="margin:20px 0;">
              <p>近三月，该风机设备可利用率同比{{ sbklylItem.ytbqs + sbklylItem.ytbz }}%，环比{{ sbklylItem.yhbqs + sbklylItem.yhbz
                }}%</p>
            </div>
            <el-table empty-text="暂无数据" :data="kkxfx" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000' }"
              :cell-style="columnStyle" border stripe max-height="300" style="width: 100%; margin:10px 0;">
              <el-table-column prop="name" label="项目"></el-table-column>
              <el-table-column prop="q1ysj" label="近一月"></el-table-column>
              <el-table-column prop="q2ysj" label="近两月"></el-table-column>
              <el-table-column prop="q3ysj" label="近三月"></el-table-column>
            </el-table>
          </el-form>
        </div>
        <div class="textBox">
          <el-form>
            <el-form-item class="imp fw">3、性能评价</el-form-item>
          </el-form>
        </div>
        <!-- <div class="infoBox">
          <p>麻黄山1#风机近三个月性能评价良好，整体排名考前，2016年9月性能评价指标横向对比良好。</p>
        </div> -->
        <el-table empty-text="暂无数据" :data="djpg" :header-cell-style="{ background: 'rgb(224,224,224)', color: '#000' }"
          border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="recorddate" label="日期"></el-table-column>
          <el-table-column prop="q1ysj" label="近一月"></el-table-column>
          <el-table-column prop="q2ysj" label="近两月"></el-table-column>
          <el-table-column prop="q3ysj" label="近三月"></el-table-column>
        </el-table>
        <div class="textBox" v-if="jczbmap.jxly">
          <el-form>
            <el-form-item class="imp fw">推荐检修方案：</el-form-item>
            <el-form-item style="font-size: 20px;">故障预测：</el-form-item>
            <div class="infoBox" style="margin:20px 0;">
              <p>高频：{{jczbmap.top1type}}</p>
              <p>中频：{{jczbmap.top2type}}</p>
              <p>低频：{{jczbmap.top3type}}</p>
            </div>
            <el-form-item>推荐检修理由：{{jczbmap.jxly}}</el-form-item>
            <el-form-item>推荐检修日期：{{jczbmap.jxsj}}</el-form-item>
            <el-form-item>推荐排查方法：{{jczbmap.jxff}}</el-form-item>
            <el-form-item>推荐处理方法：{{jczbmap.jxbz}}</el-form-item>
            <el-form-item>推荐工器具：{{jczbmap.jxgj}}</el-form-item>
            <el-form-item>平均消缺时长：{{jczbmap.jxsc}}</el-form-item>
            <el-form-item>推荐检修风速：{{jczbmap.jxfs}}</el-form-item>
            <div class="infoBox" style="margin:20px 0;">
              <p class="red">结论：{{jczbmap.jkqksm}}</p>
            </div>
          </el-form>
        </div>
        <div class="textBox">
          <el-form>
            <el-form-item class="fw" style="margin:10px 0;text-align: center;">数据来源：集控中心大数据分析系统</el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
import Get_PDF from "@tools/htmlToPdf";

export default {
  data () {
    return {
      dialogVisible: false, // 弹窗是否显示
      bjzb: [],
      chartmap: {
        fdj: [{
          title: "发电机",
          yAxisIndex: 0,
          value: []
        }],
        clx: [{
          title: "齿轮箱",
          yAxisIndex: 0,
          value: []
        }],
        zk: [{
          title: "主轴",
          yAxisIndex: 0,
          value: []
        }],
        bj: [{
          title: "变桨",
          yAxisIndex: 0,
          value: []
        }]
      },
      djpg: [],
      fnlyl: [],
      jczbmap: {},
      kkxfx: [],

      fnlylItem: {},
      sbklylItem: {},

      // 发电机关键参数表格
      fdjgjcs: [{
        gjcs: "发电机转速",
        edz: "1700",
        yxfw: "<2000",
        qz: "0.35",
        scz: "1500",
        df: "0.3",
      }, {
        gjcs: "发电机轴A温度",
        edz: "70",
        yxfw: "<100",
        qz: "0.15",
        scz: "56",
        df: "0.12",
      }, {
        gjcs: "发电机轴B温度",
        edz: "70",
        yxfw: "<100",
        qz: "0.15",
        scz: "54",
        df: "0.12",
      }],

      // 主轴关键参数表格
      zzgjcs: [{
        gjcs: "主轴承温度",
        edz: "30",
        yxfw: "<80",
        qz: "0.35",
        scz: "36.2",
        df: "0.79",
      }, {
        gjcs: "主轴承油脂启动时间间隔",
        edz: "",
        yxfw: "<500",
        qz: "0.15",
        scz: "394",
        df: "0.03",
      }, {
        gjcs: "主轴承油脂泵运行周期",
        edz: "",
        yxfw: "<14",
        qz: "0.15",
        scz: "6",
        df: "0",
      }],

      // 变桨关键参数表格
      bjgjcs: [{
        gjcs: "变桨电机温度1",
        edz: "55",
        yxfw: "<100",
        qz: "0.12",
        scz: "68",
        df: "0.24",
      }, {
        gjcs: "变桨电机温度2",
        edz: "55",
        yxfw: "<100",
        qz: "0.12",
        scz: "87",
        df: "0.59",
      }, {
        gjcs: "变桨电机温度3",
        edz: "55",
        yxfw: "<100",
        qz: "0.12",
        scz: "100",
        df: "0.12",
      }, {
        gjcs: "变频器温度1",
        edz: "25",
        yxfw: "<40",
        qz: "0.20",
        scz: "31",
        df: "0.34",
      }, {
        gjcs: "变频器温度2",
        edz: "25",
        yxfw: "<40",
        qz: "0.20",
        scz: "31",
        df: "0.90",
      }, {
        gjcs: "变频器温度3",
        edz: "25",
        yxfw: "<40",
        qz: "0.20",
        scz: "30",
        df: "0.12",
      }],

      tableData: [
        {
          // 表格1数据
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],

      reqData: {},
    };
  },

  props: {
    show: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Boolean,
      default: () => { },
    }
  },

  components: {
    DoubleLineChart
  },

  mounted () {
    this.dialogVisible = this.show;
  },

  methods: {
    // 导出PDF
    exportPDF (name) {
      this.BASE.showMsg({
        type: "success",
        msg: "正在导出...请稍后..."
      });
      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "健康评价报告概述");
    },

    // 关闭弹窗
    dialogClosed () {
      this.dialogVisible = false;
      this.$emit("closed", false);
    },

    // 改变列颜色
    columnStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'background:rgb(204,255,255);';
      }
    },

    // 获取报告详情
    getReport () {
      let that = this;
      let reqData = this.params;
      that.API.requestData({
        timeout:30000,
        method: "POST",
        subUrl: "reportnew/healthReport",
        data: reqData,
        success (res) {

          let fdj = [{
            title: "发电机",
            yAxisIndex: 0,
            value: []
          }];

          let clx = [{
            title: "齿轮箱",
            yAxisIndex: 0,
            value: []
          }];

          let zk = [{
            title: "主轴",
            yAxisIndex: 0,
            value: []
          }];

          let bj = [{
            title: "变桨",
            yAxisIndex: 0,
            value: []
          }];

          // 风能利用率
          let fnlyl = {};

          // 设备科利用率
          let sbklyl = {};

          res.data.bjzb.forEach(ele => {
            ele.recorddate = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
          });

          res.data.jczbmap.bwsj = new Date(res.data.jczbmap.bwsj).formatDate("yyyy-MM-dd");

          // 发电机
          res.data.chartmap.fdj.forEach(ele => {
            fdj[0].value.push({
              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
              value: ele.value
            });
          });

          // 齿轮箱
          res.data.chartmap.clx.forEach(ele => {
            clx[0].value.push({
              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
              value: ele.value
            });
          });

          // 主轴
          res.data.chartmap.zk.forEach(ele => {
            zk[0].value.push({
              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
              value: ele.value
            });
          });

          // 主轴
          res.data.chartmap.bj.forEach(ele => {
            bj[0].value.push({
              text: new Date(ele.recorddate).formatDate("yyyy-MM-dd"),
              value: ele.value
            });
          });

          let fnlylItem = res.data.fnlyl.find(ele => {
            return ele.name === "风能利用率"
          });

          let sbklylItem = res.data.kkxfx.find(ele => {
            return ele.name === "设备可利用率"
          });

          if (fnlylItem) {
            fnlyl.ytbqs = fnlylItem.ytbqs;
            fnlyl.ytbz = fnlylItem.ytbz;
            fnlyl.yhbqs = fnlylItem.yhbqs;
            fnlyl.yhbz = fnlylItem.yhbz;
          }

          if (sbklylItem) {
            sbklyl.ytbqs = sbklylItem.ytbqs;
            sbklyl.ytbz = sbklylItem.ytbz;
            sbklyl.yhbqs = sbklylItem.yhbqs;
            sbklyl.yhbz = sbklylItem.yhbz;
          }

          res.data.djpg.forEach(ele => {
            ele.recorddate = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
          });

          res.data.jczbmap.jxsj = (res.data.jczbmap.jxly ? new Date(res.data.jczbmap.jxsj).formatDate("yyyy-MM-dd") : null);

          res.data.chartmap.fdj = fdj;
          res.data.chartmap.clx = clx;
          res.data.chartmap.zk = zk;
          res.data.chartmap.bj = bj;

          that.bjzb = res.data.bjzb;
          that.chartmap = res.data.chartmap;
          that.djpg = res.data.djpg;
          that.fnlyl = res.data.fnlyl;
          that.jczbmap = res.data.jczbmap;
          that.kkxfx = res.data.kkxfx;
          that.fnlylItem = fnlyl;
          that.sbklylItem = sbklyl;
        }
      });
    }
  },

  watch: {
    show (value) {
      this.dialogVisible = value;
      if (value) {
        this.getReport();
      }
    },
    params (res) {
      this.reqData = res;
    }
  },
};
</script>

<style lang="less" scoped>
.cDialog {
  position: relative;

  .pdfDom {
    padding: 30px 50px;
  }

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

  .tableBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .l,
    .r {
      width: 49%;
      align-self: flex-start;
    }

    .fw {
      font-weight: 700;
    }
  }

  .infoBox {
    margin-top: 10px;
    font-size: 16px;

    .red {
      color: #f25656;
    }

    .purple {
      color: rgb(112, 88, 209);
    }

    p {
      text-indent: 2em;
    }
  }

  .textBox {
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
  }
}
</style>

<style lang="less">
.cDialog {
  .cell {
    text-align: center;
  }

  .el-dialog__body {
    max-height: 850px;
    overflow-y: scroll;
    padding: 0;
  }

  .el-form-item.imp {
    .el-form-item__content {
      font-size: 24px;
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
}
</style>