fd_dwgz_zhyw/src/views/HealthControl/dayinfo.vue

<template>
  <div class="health-day-info">
    <div class="header">
      <span
        class="herder-info"
        :width="800"
        v-for="item of gridDatas"
        :key="item"
        >风机编号：{{ item.windturbineid }}</span
      >
      <span class="herder-info">基础指标</span>
    </div>
    <div class="body">
      <div class="left">
        <table class="table-form">
          <tr>
            <td class="white" v-for="item of gridDatas" :key="item">
              量化评级：{{ item.level }}
            </td>
          </tr>
          <tr>
            <td class="white" v-for="item of gridDatas" :key="item">
              综合排名：{{ item.rank }}
            </td>
          </tr>
        </table>

        <div class="chart-body">
          <normal-radar-chart :height="'500px'" :value="chartDatas" />
        </div>
      </div>
      <div class="left">
        <table class="table-form">
          <tr>
            <td class="white">类型</td>
            <td class="white">指标</td>
            <td class="white" v-for="item of gridDatas" :key="item">
              {{ item.windturbineid }}
            </td>
            <td class="white" :colspan="gridDatas.length">排名</td>
            <td class="white" colspan="2">评分</td>
          </tr>
          <tr v-for="item of column" :key="item">
            <td class="white">{{ item.type }}</td>
            <td class="white">{{ item.name }}</td>
            <td class="white" v-for="row of gridDatas" :key="row">
              {{ row[item.field] }}
            </td>
            <td class="white" v-for="row of gridDatas" :key="row">
              {{ row[item.rank] }}
            </td>
            <td class="white" v-for="row of gridDatas" :key="row">
              {{ row[item.score] ? row[item.score] : 0 }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
export default {
  components: { NormalRadarChart },
  props: {
    gridDatas: {},
    chartDatas: {},
  },
  data() {
    return {
      value: "",
      column: [
        {
          name: "发电量",
          field: "dayfdl",
          rank: "monthfdl",
        },
        {
          name: "理论发电量",
          field: "dayllfdl",
          rank: "monthllfdl",
          score: "yearllfdl",
        },
        {
          name: "平均功率",
          field: "daygl",
          rank: "monthgl",
          score: "yeargl",
        },
        {
          name: "故障损失电量",
          field: "daygzssdl",
          rank: "monthgzssdl",
          score: "yeargzssdl",
        },
        {
          name: "限电损失电量",
          field: "dayxdssdl",
          rank: "monthxdssdl",
          score: "yearxdssdl",
        },
        {
          name: "维护损失电量",
          field: "daywhssdl",
          rank: "monthwhssdl",
          score: "yearwhssdl",
        },
        {
          name: "故障时间",
          field: "daygzsj",
          rank: "monthgzsj",
          score: "yeargzsj",
        },
        {
          name: "维护时间",
          field: "daywhsj",
          rank: "monthwhsj",
          score: "yearwhsj",
        },
        {
          name: "运行时间",
          field: "dayyxsj",
          rank: "monthyxsj",
          score: "yearyxsj",
        },
        {
          name: "停机时间",
          field: "daytjsj",
          rank: "monthtjsj",
          score: "yeartjsj",
        },
        {
          name: "平均切入风速",
          field: "dayxfqr",
          type: "性能",
          rank: "monthxfqr",
          score: "yearxfqr",
        },
        {
          name: "性能损失电量",
          field: "dayxnssdl",
          type: "性能",
          rank: "monthxnssdl",
          score: "yearxnssdl",
        },
        {
          name: "拟合优度",
          field: "daynhyd",
          type: "性能",
          rank: "monthnhyd",
          score: "yearnhyd",
        },
        {
          name: "功率一致性系数",
          field: "dayglyzxxs",
          type: "性能",
          rank: "monthglyzxxs",
          score: "yearglyzxxs",
        },
        {
          name: "利用小时",
          field: "daylyxs",
          type: "可靠性管理",
          rank: "monthlyxs",
          score: "yearlyxs",
        },
        {
          name: "设备可利用率",
          field: "daysbklyl",
          type: "可靠性管理",
          rank: "monthsbklyl",
          score: "yearsbklyl",
        },
        {
          name: "等效可利用率",
          field: "daydxkyxs",
          type: "可靠性管理",
          rank: "monthdxkyxs",
          score: "yeardxkyxs",
        },
        {
          name: "有效风时数",
          field: "dayyxfss",
          type: "可靠性管理",
          rank: "monthyxfss",
          score: "yearyxfss",
        },
        {
          name: "平均风速",
          field: "dayfs",
          type: "资源",
          rank: "monthfs",
          score: "yearfs",
        },
        {
          name: "静风频率",
          field: "dayjfpl",
          type: "资源",
          rank: "monthjfpl",
          score: "yearjfpl",
        },
      ],
      radarValue: [
        {
          indicator: [
            "平均切入风速",
            "性能损失电量",
            "拟合优度",
            "功率一致性系数",
            "利用小时",
            "设备可利用率",
            "等效可利用系数",
            "有效风时数",
            "平均风速",
            "静风频率",
          ],
          data: [
            {
              value: [
                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
                35000,
              ],
              name: "NAME1",
            },
            {
              value: [
                35000, 44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200,
                20000,
              ],
              name: "NAME2",
            },
          ],
        },
      ],
    };
  },
};
</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>