ims-gyee/src/views/layout/economicsOperation/performanceAnalyse/performanceAssess/dayDetailInfo.vue

<template>
  <div class="Evaluationinfo" v-if="!noData">
    <div class="chart-name">
      <div class="point left"></div>
      <div class="point right"></div>
    </div>
    <div class="header">
      <span class="herder-info" v-for="item of gridDatas" :key="item"
        >逆变器编号：{{ item.nemCode }}</span
      >
      <span class="herder-info">基础指标</span>
    </div>
    <div class="Evaluationinfo_main">
      <div class="mainleft">
        <table class="table-form">
          <tr>
            <td class="white" v-for="item of gridDatas" :key="item">
              量化评级：{{ item.dayLevel }}
            </td>
          </tr>
          <tr>
            <td class="white" v-for="item of gridDatas" :key="item">
              综合排名：{{ item.dayRank }}
            </td>
          </tr>
        </table>
        <div class="chart-namess">
          <div class="point left"></div>
          <div class="point right"></div>
        </div>
        <div class="chart-body">
          <normal-radar-chart :height="'500px'" :value="chartDatas" />
        </div>
      </div>
      <div class="mainleft">
        <table class="table-form">
          <tr>
            <td class="white">类型</td>
            <td class="white">指标</td>
            <td class="white" v-for="item of gridDatas" :key="item">
              {{ item.nemCode }}
            </td>
            <td class="white" :colspan="gridDatas.length">排名</td>
            <td class="white" colspan="2">评分</td>
          </tr>
          <tr v-for="item of columnGf" :key="item">
            <td class="white">{{ item.type }}</td>
            <td class="white">{{ item.name }}</td>
            <td class="white colorSty" v-for="row of gridDatas" :key="row">
              {{ row[item.field] }}
            </td>
            <td
              class="white colorSty"
              :class="index >= 6 ? 'nowrap' : ''"
              v-for="(row, index) of gridDatas"
              :key="row"
            >
              {{ row[item.rank] }}
            </td>
            <td class="white colorSty" v-for="row of gridDatas" :key="row">
              {{ row[item.score] }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div v-else style="text-align: center">
    <span style="color: #fff">暂无数据</span>
  </div>
</template>

<script>
import NormalRadarChart from "../../homePage/components/normal-radar-chart.vue";

import { getApiequipmentinfoDayCompareList } from "@/api/monthlyPerformanceAnalysis";
export default {
  components: { NormalRadarChart },
  props: {
    chooseList: {
      type: Array,
      default: () => [],
    },
    tabEvent: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      tabIndex: 0,
      gridDatas: [],
      chartDatas: [],
      oidObj: {
        name: "",
        id: "",
        charts: [],
      },
      tidObj: {
        name: "",
        id: "",
        charts: [],
      },

      columnGf: [
        {
          name: "发电量",
          field: "dayfdl",
          rank: "monthfdl",
          score: "yearfdl",
        },
        {
          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",
        // },
      ],
      noData: false,
    };
  },
  methods: {
    init() {
      this.oidObj.name = this.chooseList[0].nemCode;
      this.oidObj.id = this.chooseList[0].id;
      this.oidObj.charts = [];
      this.tidObj.name = this.chooseList[1].nemCode;
      this.tidObj.id = this.chooseList[1].id;
      this.tidObj.charts = [];
      this.getDetailInfo();
    },
    showName(val) {
      let str = "";
      str = val.substring(val.indexOf("_F") + 3, val.length);
      return str;
    },
    // 获取对比详情数据
    async getDetailInfo() {
      this.noData = false;
      let params = {
        oid: this.oidObj.id,
        tid: this.tidObj.id,
        types: this.tabIndex,
      };
      const datas = await getApiequipmentinfoDayCompareList(params);
      if (datas && datas.data) {
        if (datas.data.charts) {
          if (
            datas.data.charts[this.oidObj.name] &&
            datas.data.charts[this.oidObj.name].length > 0
          ) {
            datas.data.charts[this.oidObj.name].forEach((it, index) => {
              this.oidObj.charts.push(it);
            });
          }
          if (
            datas.data.charts[this.tidObj.name] &&
            datas.data.charts[this.tidObj.name].length > 0
          ) {
            datas.data.charts[this.tidObj.name].forEach((it, index) => {
              this.tidObj.charts.push(it);
            });
          }
          this.changeChartsData();
        } else {
          this.noData = true;
        }
        if (datas.data.data.length > 0) {
          this.gridDatas = datas.data.data;
          // this.oidObj.datas = datas.data.data[0]
          // this.tidObj.datas = datas.data.data[1]
        } else {
          this.noData = true;
        }
      }
    },
    //整理charts数据
    changeChartsData() {
      let valArr = [
        "平均切入辐照",
        "性能损失电量",
        "拟合优度",
        "功率一致性系数",
        "利用小时",
        "设备可利用率",
        "等效可利用系数",
        "有效光时数",
        "平均辐照",
      ];

      const service1 = {
        name: this.oidObj.name,
        value: [],
      };
      const service2 = {
        name: this.tidObj.name,
        value: [],
      };
      for (let i = 0; i < valArr.length; i++) {
        let it = valArr[i];
        for (let j = 0; j < this.oidObj.charts.length; j++) {
          let ic = this.oidObj.charts[j];
          if (it === ic.target) {
            service1.value.push(ic.data);
          }
        }
        for (let k = 0; k < this.tidObj.charts.length; k++) {
          let iv = this.tidObj.charts[k];
          if (it === iv.target) {
            service2.value.push(iv.data);
          }
        }
      }
      const chartData = [
        {
          indicator: valArr,
          data: [service1],
        },
        {
          indicator: valArr,
          data: [service2],
        },
      ];
      this.chartDatas = chartData;
    },
  },
};
</script>

<style lang="less" scoped>
.Evaluationinfo ::v-deep{
  height: 100%;
  .header {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: rgba(83, 89, 104, 0.3);
    font-family: MicrosoftYaHei;
    .herder-info {
      flex: 1 0 25%;
      color: #a5a3a3;
      font-family: MicrosoftYaHei;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      &:last-child {
        flex: 1 0 50%;
      }
    }
  }
  .Evaluationinfo_main {
    display: flex;
    height: calc(100% - 40px - 11px);
    .mainleft {
      flex: 0 0 50%;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
      .table-form {
        width: 100%;
        border-collapse: collapse;
        tr {
          background: transparent;
          &:nth-child(2n) {
            background: rgba(83, 89, 104, 0.1);
          }
          td {
            padding: 0.741vh;
            border: 0px;
            font-size: 12px;
            text-align: center;
            &.text {
              min-width: 13vh;
            }
            &.value {
              min-width: 6vh;
            }
            &.unit {
              min-width: 40px;
            }
          }
        }
        .white {
          color: #b3b3b3;
          font-size: 14px;
          font-family: MicrosoftYaHei;
        }
        .colorSty {
          color: #1c99ff;
          font-size: 14px;
          //   white-space: nowrap;
          font-family: MicrosoftYaHei;
          &.nowrap {
            white-space: nowrap;
          }
        }
      }
      .chart-namess {
        height: 1px;
        margin-top: 10px;
        border-bottom: 1px solid rgba(153, 153, 153, 1);
        .point {
          width: 6px;
          height: 1px;
          background-color: #ffffff;
          position: absolute;
          &.left {
            left: 0;
          }

          &.right {
            right: 50%;
          }

          &.top {
            top: -1px;
          }

          &.bottom {
            bottom: 0px;
          }
        }
      }
      .chart-body {
        flex-grow: 1;
        display: flex;
        align-items: center;
      }
    }
    .right {
      flex: 0 0 50%;
    }
  }
  .chart-name {
    height: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    .point {
      width: 6px;
      height: 1px;
      background-color: #ffffff;
      position: absolute;

      &.left {
        left: 0;
      }

      &.right {
        right: 1px;
      }

      &.top {
        top: -1px;
      }

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