hb_sis_zhfx/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>