<template>
  <div class="pageBox">
    <div class="searchBox">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="风场：">
          <el-select v-model="form.wpId" placeholder="请选择" @change="changeWpId">
            <el-option v-for="item in wpList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="healthTableData" style="width: 100%;" height="600">
        <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
        <el-table-column prop="wtid" label="风机编号"></el-table-column>
        <el-table-column prop="model" label="风机型号"></el-table-column>
        <el-table-column prop="address" label="置信度" width="230">
          <template slot-scope="scope">
            <div>
              <el-progress :percentage="scope.row.zxd"></el-progress>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="健康分数">
          <template slot-scope="scope">
            <div>{{scope.row.score}}</div>
          </template>
        </el-table-column>
        <el-table-column label="未来风机健康程度" width="250">
          <template slot-scope="scope">
            <div :id="'healthCharts-' + scope.row.chartIndex" style="width:100%;height:50px;"></div>
          </template>
        </el-table-column>
        <el-table-column label="组件健康度">
          <el-table-column label="齿轮箱" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.clx === '优' ? '#1890ff' : scope.row.clx === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.clx}}</div>
            </template>
          </el-table-column>
          <el-table-column label="发电机" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.fdj === '优' ? '#1890ff' : scope.row.fdj === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.fdj}}</div>
            </template>
          </el-table-column>
          <el-table-column label="发电机" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.fdj === '优' ? '#1890ff' : scope.row.fdj === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.fdj}}</div>
            </template>
          </el-table-column>
          <el-table-column label="主轴" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.zz === '优' ? '#1890ff' : scope.row.zz === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.zz}}</div>
            </template>
          </el-table-column>
          <el-table-column label="变桨" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.bj === '优' ? '#1890ff' : scope.row.bj === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.bj}}</div>
            </template>
          </el-table-column>
          <el-table-column label="偏航" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.ph === '优' ? '#1890ff' : scope.row.ph === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.ph}}</div>
            </template>
          </el-table-column>
          <el-table-column label="机舱" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.jc === '优' ? '#1890ff' : scope.row.jc === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.jc}}</div>
            </template>
          </el-table-column>
          <el-table-column label="变频器" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.bpq === '优' ? '#1890ff' : scope.row.bpq === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.bpq}}</div>
            </template>
          </el-table-column>
          <el-table-column label="主控" width="100">
            <template slot-scope="scope">
              <div :style="'color:' + (scope.row.zk === '优' ? '#1890ff' : scope.row.zk === '良' ? 'rgb(230,162,60)' : '#F25656')">{{scope.row.zk}}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import healthList from "@assets/js/healthManagement/healthList";
export default healthList;
</script>
<style lang="scss" scoped>
@import '@assets/css/healthManagement/healthList.scss';
</style>
<style lang="scss">
.tableBox {
  .cell {
    text-align: center;
  }
}
</style>
