jn_sis_zhfx/src/views/economicsOperation/benchmarkingManagement/compontent/dayinfo.vue

<template>
  <div class="health-day-info">
    <div class="body">
      <div class="left">
        <div class="header">
          <div class="point point-left top"></div>
          <div class="point point-right top"></div>
          <span class="herder-info"> 对标排名分析 </span>
        </div>
        <div class="chart-body">
          <normal-radar-chart
            :height="'420px'"
            :value="radarValue"
            :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
          />
        </div>
      </div>
      <div class="left">
        <div class="header">
          <div class="point point-left top"></div>
          <div class="point point-right top"></div>
          <span class="herder-info"> 基础指标 </span>
        </div>
        <!-- <table class="table-form">
          <tr>
            <td class="white">指标</td>
            <td class="white">{{windNum}}</td>
            <td class="white">{{windNum2}}</td>
          </tr>
          <tr v-for="(item, index) in tabs" :key="index" >
            <td class="white">{{item.name}}</td>
            <td class="white">{{item.windData1}}</td>
            <td class="white">{{item.windData2}}</td>
          </tr>
        </table> -->
        <el-table
          :data="tabs"
          style="width: 100%"
          :cell-style="{ padding: '6px' }"
          :row-style="{ height: '4' }"
          stripe
          @selection-change="handleCurrentChange"
        >
          <el-table-column align="center" prop="name" label="场站" width="200">
          </el-table-column>
          <el-table-column align="right" header-align="center" prop="windData1" :label="windNum">
          </el-table-column>
          <el-table-column
            v-if="windNum2"
            align="right" header-align="center"
            prop="windData2"
            :label="windNum2"
          >
          </el-table-column>
          <el-table-column
            v-if="windNum3"
            align="right" header-align="center"
            prop="windData3"
            :label="windNum3"
          >
          </el-table-column>
          <el-table-column
            v-if="windNum4"
            align="right" header-align="center"
            prop="windData4"
            :label="windNum4"
          >
          </el-table-column>
          <el-table-column
            v-if="windNum5"
            align="right" header-align="center"
            prop="windData5"
            :label="windNum5"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="body">
      <div style="width: 100%">
        <div class="header">
          <div class="point point-left top"></div>
          <div class="point point-right top"></div>
          <span class="herder-info"> 损失电量分析 </span>
        </div>
        <div class="chart-body">
          <multiple-bar-chart
            height="240px"
            :list="analyisDialog"
            :customerTooltip="true"
            @tooltip="tooltip"
            :units="['(万KWh)']"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NormalRadarChart from "../../homePage/components/normal-radar-chart.vue";
import MultipleBarChart from "../../homePage/components/multiple-bar-chart.vue";
export default {
  components: {
    NormalRadarChart,
    MultipleBarChart,
  },
  props: {
    windNum: {
      type: String,
      default: "",
    },
    windNum2: {
      type: String,
      default: "",
    },
    windNum3: {
      type: String,
      default: "",
    },
    windNum4: {
      type: String,
      default: "",
    },
    windNum5: {
      type: String,
      default: "",
    },
    radarValue: {
      type: Array,
      default: () => [
        {
          indicator: [
            "风能利用率",
            "故障损失率",
            "检修损失率",
            "弃风率",
            "性能损失率",
            "受累损失率",
            "复位及时率",
            "消缺及时率",
            "状态转换率",
          ],
          data: [
            {
              value: [
                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
              ],
            },
          ],
        },
      ],
    },
    tabs: {
      type: Array,
      default: () => [
        {
          name: "发电量",
          windData1: 1,
          windData2: 14,
        },
        {
          name: "故障损失电量",
          windData1: 2,
          windData2: 13,
        },
        {
          name: "检修损失电量",
          windData1: 3,
          windData2: 12,
        },
        {
          name: "性能未达标损失电量",
          windData1: 4,
          windData2: 11,
        },
        {
          name: "受累损失电量",
          windData1: 5,
          windData2: 10,
        },
        {
          name: "风能利用率",
          windData1: 6,
          windData2: 9,
        },
        {
          name: "故障损失率",
          windData1: 7,
          windData2: 8,
        },
        {
          name: "检修损失率",
          windData1: 8,
          windData2: 7,
        },
        {
          name: "弃风率",
          windData1: 9,
          windData2: 6,
        },
        {
          name: "性能损失率",
          windData1: 10,
          windData2: 5,
        },
        {
          name: "受累损失率",
          windData1: 11,
          windData2: 4,
        },
        {
          name: "复位及时率",
          windData1: 12,
          windData2: 3,
        },
        {
          name: "消缺及时率",
          windData1: 13,
          windData2: 2,
        },
        {
          name: "状态转换率",
          windData1: 14,
          windData2: 1,
        },
      ],
    },
    analyisDialog: {
      type: Array,
      default: () => [
        {
          title: "故障损失电量",
          yAxisIndex: 0,
          value: [11, 22],
        },
        {
          title: "检修损失电量",
          yAxisIndex: 0,
          value: [11, 22],
        },
        {
          title: "性能损失电量",
          yAxisIndex: 0,
          value: [11, 22],
        },
        {
          title: "限电损失电量",
          yAxisIndex: 0,
          value: [11, 22],
        },
        {
          title: "受累损失电量",
          yAxisIndex: 0,
          value: [11, 22],
        },
      ],
    },
  },
  methods: {
    tooltip(param, callback) {
      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

      var result = param[0].axisValue;
      param.forEach((value, index) => {
        result +=
          "<br />" +
          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
          value.seriesName +
          "：" +
          value.value;
      });
      callback(result);
      return true;
    },
  },
};
</script>

<style lang="less">
.health-day-info {
  .header {
    display: flex;
    width: 98%;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid rgba(153, 153, 153, 0.5);
    color: #ffffff;
    position: relative;

    .herder-info {
      margin-left: 10px;
    }
  }

  .body {
    display: flex;

    .left {
      flex: 0 0 50%;

      display: flex;
      flex-direction: column;

      .chart-body {
        flex-grow: 1;
        display: flex;
        align-items: center;
        height: 345px;
      }
    }

    .right {
      flex: 0 0 50%;
    }
  }
}

.point {
  width: 6px;
  height: 1px;
  background-color: #ffffff;
  position: absolute;

  &.point-left {
    left: 0;
  }

  &.point-right {
    right: 0;
  }

  &.top {
    top: -1px;
  }

  &.bottom {
    bottom: -1px;
  }
}
</style>