<template>
  <el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @closed="dialogClosed">
    <div slot="title">
      <div class="title">健康评价报告概述</div>
    </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">麻黄山001号风机</el-form-item>
          <el-form-item class="imp fw">评级结果：A+ </el-form-item>
          <el-form-item class="imp fw">评级展望：稳定</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 :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <el-form>
          <el-form-item class="imp fw">运行分析员：</el-form-item>
          <el-form-item class="imp fw">报告出具时间：2016-09-30</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>麻黄山001号风机于2010年9月26日并网运行，本年累计发电量为5,100万Kwh，平均故障时间为72小时，平均故障发生周期为100小时。</p>
            <p>去年同期故障发生率为0%</p>
            <p class="red">本年1-8月份故障次数22次</p>
            <p class="red">温度类故障10次集中在7-8月份</p>
            <p class="red">安全链故障5次集中在3月份</p>
            <p class="red">其他类故障7次</p>
            <p class="purple">消缺主要手段采用</p>
            <p class="purple">复位70%</p>
            <p class="purple">检修30%</p>
            <p class="purple">部件更换0%</p>
            <p class="purple">本年9月份故障次数2次</p>
            <p class="purple">传感器类故障 100%</p>
            <p>预警9次全部是温度类预警，集中在7-8月份</p>
            <p>风机整体性能稳定，性能损失电量占比为11%，性能评估等级B+</p>
            <p class="red">总体预估10分月该台风机运行状态良好，不需要作为重点关注。</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 :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" 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" />
        <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>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2”
            、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
        </div>
        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" 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" />
        <el-form-item>2）震动监测：</el-form-item>
        <div class="infoBox">
          <p>发电机类故障，平均故障周期在12个月，上次故障距此次评价时间为5个月，发电机处于平稳运行周期，</p>
        </div>
        <el-form-item class="imp fw">指标：</el-form-item>
        <el-form-item class="imp fw">1、风能利用率</el-form-item>
      </el-form>
    </div>
    <div class="tableBox" style="margin:20px 0;">
      <div class="l">
        <div class="infoBox">
          <p>近三月，受宁夏电网限电，及自然天气情况等因素影响，麻黄山1#风机发电能力在这个三个月程下降趋势，但非计划损失电量和计划损失电量逐渐减少，风能利用率并未体现出递减趋势，而是逐步增长。</p>
          <p>2016年9月，非计划检修率和计划检修率分别为6%和12%，计划检修率尚可，风机产生的非计划检修率还存在，但较前两月明显较低。</p>
          <p>风机因自身原因造成5%的性能损失率，在可接受范围。</p>
          <p>总体来看，该风机逐步进入平稳期，风能利用率增长趋势，可利率较高。</p>
        </div>
      </div>
      <div class="r">
        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="textBox">
      <el-form>
        <el-form-item class="imp fw">2、设备可利用率</el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <div class="l">
        <div class="infoBox">
          <p>麻黄山近期温度较高，温度超限类故障较多，但近三个月，麻黄山1#风机可利用呈增长趋势，7~9月，非计划小时数分别为33小时、28小时和13小时。故障次数分别是8次、5次和2次</p>
          <p>9月，麻黄山1#风机设备可利用率为89，可靠性尚可。</p>
        </div>
      </div>
      <div class="r">
        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="textBox">
      <el-form>
        <el-form-item class="imp fw">3、拟合优度</el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <div class="l">
        <div class="infoBox">
          <p>风机应发功率与实发功率比值接近，近三个月，拟合优度分别为0.2、0.3和0.2，性能损失分别是519.82kWh、2015.4kWh和478.3kWh整体性能情况尚可。</p>
        </div>
      </div>
      <div class="r">
        <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="textBox">
      <el-form>
        <el-form-item class="imp fw">4、性能评价</el-form-item>
      </el-form>
    </div>
    <div class="infoBox">
      <p>麻黄山1#风机近三个月性能评价良好，整体排名考前，2016年9月性能评价指标横向对比良好。</p>
    </div>
    <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</template>

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

export default {
  data () {
    return {
      dialogVisible: false, // 弹窗是否显示
      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 弄'
      }]
    };
  },

  props: {
    show: {
      type: Boolean,
      default: false
    }
  },

  components: {
    DoubleLineChart
  },

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

  methods: {
    dialogClosed () {
      this.dialogVisible = false;
      this.$emit("closed", false);
    }
  },

  watch: {
    show (value) {
      this.dialogVisible = value;
    }
  }
};
</script>

<style lang="less" scoped>
.cDialog {
  .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: 700px;
    overflow-y: scroll;
  }

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

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