platform_largeScreen/src/views/economicsOperation/photovoltaicAnalyse/prAnalyse/index.vue

<template>
  <div class="pr-wrapper">
    <div class="pr-search">
      <el-select
        size="mini"
        v-model="station"
        placeholder="请选择"
        style="margin-left: 15px"
      >
        <el-option
          v-for="item in stationOptions"
          :key="item.id"
          :label="item.aname"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker
        size="mini"
        type="month"
        v-model="month"
        value-format="YYYY-MM"
        placeholder="请选择"
        style="margin-left: 15px"
        popper-class="date-select"
      >
      </el-date-picker>
      <el-button round size="mini" class="buttons" @click="getDatas"
        >搜 索</el-button
      >
    </div>
    <div class="pr-content">
      <div class="leftContent" :data-type="$store.state.moreSty">
        <span>{{ selectValue }}</span>
      </div>

      <div class="pr-body">
        <div class="table-wrapper">
          <el-table
            :data="tableData"
            width="100%"
            stripe
            @sort-change="handleSort"
          >
            <el-table-column
              v-for="(item, index) in tableHeaders"
              :key="index"
              header-align="center"
              :align="item.align"
              show-overflow-tooltip
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :sortable="
                item.prop != 'prpm' &&
                item.prop != 'wtid' &&
                item.prop != 'rl' &&
                item.prop != 'level'
                  ? 'custom'
                  : false
              "
            >
              <template #header>
                <div v-if="item.label.length > 2 || item.label == '容量'">
                  {{ item.label }}
                </div>
                <span v-else>{{ item.label }}</span>
                <span>{{ item.unit }}</span>
              </template>
              <template #default="{ row }">
                <div class="pr-table-cell" v-if="item.label == '增长率'">
                  <span>{{
                    row[item.prop] || row[item.prop] == 0
                      ? row[item.prop]
                      : "--"
                  }}</span>
                  <span v-if="row[item.prop] && row[item.prop] != 0">
                    <i
                      class="svg-icon svg-icon-sm svg-icon-skyBlue"
                      v-if="row[item.prop] < 0"
                    >
                      <svgIcon svgid="svg-arrow-down"></svgIcon>
                    </i>
                    <i
                      class="svg-icon svg-icon-sm svg-icon-orange1"
                      v-if="row[item.prop] > 0"
                    >
                      <svgIcon svgid="svg-arrow-up"></svgIcon>
                    </i>
                  </span>
                </div>
                <div v-else>
                  {{
                    row[item.prop] || row[item.prop] == 0
                      ? row[item.prop]
                      : "--"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="600"></el-table-column>
          </el-table>
        </div>
        <div class="chart-wrapper">
          <div :style="{ height: height }">
            <barCharts
              v-if="showDisplay"
              height="100%"
              width="100%"
              :bardata="bardata"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import barCharts from "@/views/economicsOperation/photovoltaicAnalyse/prAnalyse/components/barCharts.vue";
import { getPrAnalysis } from "@/api/monthlyPerformanceAnalysis.js";
import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
import svgIcon from "@/components/coms/icon/svg-icon.vue";
export default {
  name: "PrAnalyse", //PR分析
  data() {
    return {
      selectValue: "系统效率分析",
      station: "",
      stationOptions: [],
      month: dayjs().format("YYYY-MM"),
      tableHeaders: [
        { prop: "prpm", label: "排名", width: 60 },
        { prop: "wtid", label: "设备", width: 100 },
        { prop: "level", label: "运行状态", width: 120 },
        { prop: "rl", label: "容量", width: 75, unit: "(kW)", align: "right" },
        {
          prop: "ljgzz",
          label: "累计光照",
          width: 120,
          unit: "(kW/m²)",
          align: "right",
        },
        {
          prop: "fdl",
          label: "发电量",
          width: 110,
          unit: "(kWh)",
          align: "right",
        },
        {
          prop: "llfdlmax",
          label: "最大理论发电量",
          unit: "(kWh)",
          align: "right",
        },
        { prop: "pr", label: "本期", width: 80, align: "right" },
        { prop: "prhb", label: "上月", width: 80, align: "right" },
        {
          prop: "prhbzzl",
          label: "环比",
          width: 120,
          unit: "(%)",
          align: "right",
        },
        { prop: "prtb", label: "同期", width: 80, align: "right" },
        {
          prop: "prtbzzl",
          label: "同比",
          width: 120,
          unit: "(%)",
          align: "right",
        },
      ],
      tableData: [],
      bardata: {},
      height: "880px",
      target: "",
      sort: "",
      showDisplay: true,
    };
  },
  components: { barCharts, svgIcon },
  created() {
    // this.getStation();
    this.tableData = new Array(25).fill({
        prpm: 10,
        wtid: '测试模拟设备1',
        level: '正常',
        rl: 125,
        ljgzz: 3265,
        scatter: 95,
        fdl: 128,
        llfdlmax: 1256,
        pr: 251,
        prhb: 214,
        prhbzzl: 85,
        prtb: 698,
        prtbzzl: 89
    })
  },
  methods: {
    getStation() {
      GetStationByCompany({
        companyids: 0,
        type: -2,
      }).then(({ data: res, code }) => {
        if (res.code == 200) {
          this.stationOptions = res.data;
          this.station = this.stationOptions[0].id;
          this.getDatas();
        }
      });
    },
    getDatas() {
      this.BASE.showLoading();
      getPrAnalysis({
        wpId: this.station,
        month: this.month,
        target: this.target,
        sort: this.sort,
      }).then((res) => {
        this.BASE.closeLoading();
        if (res.code == 200) {
          this.bardata = {
            name: res.data.map((i) => i.wtid),
            lengend: "PR",
            data: res.data.map((i) => i.pr),
          };
          if (res.data.length > 22) {
            this.height = res.data.length * 37 + 53 + "px";
          } else {
            this.height = 23 * 38 + 80 + "px";
          }

          this.showDisplay = false;
          setTimeout(() => {
            this.showDisplay = true;
          }, 5);
          this.tableData = res.data.map((i) => {
            return {
              ...i,
              prhbzzl: i.prhbzzl ? i.prhbzzl.toFixed(2) : i.prhbzzl,
              prtbzzl: i.prtbzzl ? i.prtbzzl.toFixed(2) : i.prtbzzl,
            };
          });
        }
      });
    },
    handleSort({ column, prop, order }) {
      switch (prop) {
        case "pr":
          this.target = "prpm";
          break;
        case "prhb":
          this.target = "prhbpm";
          break;
        case "prhbzzl":
          this.target = "prhbzzlpm";
          break;
        case "prtb":
          this.target = "prtbpm";
          break;
        case "prtbzzl":
          this.target = "prtbzzlpm";
          break;
        case "llfdlmax":
          this.target = "llfdlmaxpm";
          break;
        case "ljgzz":
          this.target = "ljgzzpm";
          break;
        case "fdl":
          this.target = "fdlpm";
          break;
        case null:
          this.target = "";
      }
      this.sort = order == "ascending" ? 1 : order == "descending" ? 2 : "";
      this.getDatas();
    },
  },
};
</script>

<style lang="less" scoped>
.pr-wrapper {
  height: 100%;
  padding: 0 20px;
  .pr-search {
    padding: 10px 0;
    .buttons {
      margin-left: 15px;
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

      &:hover,
      &.active {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
  .pr-content {
    height: calc(100% - 40px);
    width: 100%;
    padding-bottom: 10px;
    .leftContent[data-type~="greenSty"] {
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
    }
    .leftContent[data-type~="blueSty"] {
        background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
    }
    .leftContent {
      width: 242px;
      height: 45px;
      line-height: 45px;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
    .pr-body {
      height: calc(100% - 36px);
      width: 100%;
      position: relative;
      overflow: auto;
      .table-wrapper ::v-deep {
        height: 100%;
        width: 100%;
        .el-table {
          .el-table__header-wrapper {
            position: fixed;
            z-index: 1;
          }
          .el-table__body-wrapper {
            margin-top: 46.85px;
          }
        }
      }
      .chart-wrapper {
        z-index: 2;
        width: 600px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>