<template>
  <div class="health-day-info">
    <div class="header">
      <span class="herder-info">
        风机编号：麻黄山24号风机
      </span>
      <span class="herder-info">
        风机编号：麻黄山24号风机
      </span>
      <span class="herder-info">
        基础指标
      </span>
    </div>
    <div class="body">
      <div class="left">
        <table class="table-form">
          <tr>
            <td class="white">量化评级：AA</td>
            <td class="white">量化评级：AA</td>
          </tr>
          <tr>
            <td class="white">综合排名：1</td>
            <td class="white">综合排名：1</td>
          </tr>
        </table>

        <div class="chart-body">
          <normal-radar-chart :height="'500px'" :value="radarValue" />
        </div>
      </div>
      <div class="left">
        <table class="table-form">
          <tr>
            <td class="white">类型</td>
            <td class="white">指标</td>
            <td class="white">麻黄山24号风机</td>
            <td class="white">麻黄山26号风机</td>
            <td class="white" colspan="2">排名</td>
            <td class="white" colspan="2">评分</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">发电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">理论发电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">平均功率</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">故障损失电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">限电损失电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">维护损失电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">故障时间</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">维护时间</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">运行时间</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white"></td>
            <td class="white">停机时间</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">性能</td>
            <td class="white">平均切入风速</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">性能</td>
            <td class="white">性能损失电量</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">性能</td>
            <td class="white">拟合优度</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">性能</td>
            <td class="white">功率一致性系数</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">利用小时</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">设备可利用率</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">等效可利用率</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">有效风时数</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">平均风速</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
          <tr>
            <td class="white">可靠性管理</td>
            <td class="white">静风频率</td>
            <td class="white">187.99</td>
            <td class="white">187.99</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
            <td class="white">0</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
export default {
  components: { NormalRadarChart },
  data() {
    return {
      value: "",
      radarValue: [
        {
          indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
          data: [
            {
              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000],
              name: "NAME",
            },
          ],
        },
        {
          indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
          data: [
            {
              value: [44210, 14200, 10000, 36000, 50000, 38400, 42200, 14200, 20000, 35000],
              name: "NAME",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less">
.health-day-info {
  .header {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: fade(@gray, 60);
    color: @white;

    .herder-info {
      flex: 1 0 25%;
      text-align: center;
      font-size: @fontsize-s;

      &:last-child {
        flex: 1 0 50%;
      }
    }
  }

  .body {
    display: flex;
    .left {
      flex: 0 0 50%;

      display: flex;
      flex-direction: column;

      .chart-body {
        flex-grow: 1;
        display: flex;
        align-items: center;
      }
    }
    .right {
      flex: 0 0 50%;
    }
  }
}
</style>
