fd_dwgz_zhyw_nx/src/views/economicsOperation/windAnalyse/singleWindAnasyle/historyDetail.vue

<template>
  <div class="historysingleMachine">
    <div class="historysingleMachine_top">
      <div class="stationsv">
        <span class="timeaa">时间：</span>
        <el-date-picker
          v-model="pickerTimer"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="mini"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </div>
      <div class="but">
        <el-button round size="mini" class="buttons" @click="seachData"
          >搜 索</el-button
        >
        <el-button round size="mini" class="buttons" @click="downXlsxFn"
          >导出</el-button
        >
      </div>
    </div>
    <div class="economicTable1">
      <el-table
        :data="historysingleMachineData"
        stripe
        size="mini"
        height="calc(100% - 40px)"
        ref="historysingleTable"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          :label="tabIndex === -1 ? '风机' : '逆变器'"
          width="80"
          fixed="left"
        >
          <template #default="{ row }">
            <span>{{ tabIndex === -1 ? row.wtcode : row.wtname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="recordDate"
          label="日期"
          width="120"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ dateTimeFn(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tabIndex === -1 ? tableHeader : tableHeaderGf"
          :key="index"
          sortable
          :prop="item.code"
          :label="item.title"
          show-overflow-tooltip
          header-align="center"
          align="center"
        >
          <template #header="scope">
            <div>{{ scope.column.label }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.pagesize"
        @size-change="handleSizeChange"
        :page-sizes="[21, 50, 100, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getApihistorywindturbinegoodnesslist,
  getApihistorywindturbinegoodnesslistGf,
  getApiequipmentListByWp,
} from "@/api/monthlyPerformanceAnalysis";
import utils from "@/utills/downXlsx";
import dataJson from "./dataHistoryJson.json"
export default {
  props: {
    // historyCompanyOptions: {
    //   type: Array,
    //   default: () => [],
    // },
    tabIndex: { type: Number, required: true },
    historyStationOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      //   hiscompanyVal: "",
      hisstationVal: "",
      hiswindVal: "",
      pickerTimer: [],
      historysingleMachineData: [],
      hisWindOptions: [],
      showBtn: true,
      page: {
        pagesize: 21,
        currentPage: 1,
        total: 0,
      },
      //   tabOptions: [
      //     { id: -1, name: "风电" },
      //     { id: -2, name: "光伏" },
      //   ],
      tableHeader: [
        { title: "日发电量", code: "rfdl" },
        { title: "月发电量", code: "yfdl" },
        { title: "年发电量", code: "nfdl" },
        { title: "日应发电量", code: "ryfdl" },
        { title: "月应发电量", code: "yyfdl" },
        { title: "年应发电量", code: "nyfdl" },
        { title: "日平均功率", code: "rpjgl" },
        { title: "月平均功率", code: "ypjgl" },
        { title: "年平均功率", code: "npjgl" },
        { title: "日平均风速", code: "rpjfs" },
        { title: "月平均风速", code: "ypjfs" },
        { title: "年平均风速", code: "npjfs" },
        { title: "日运行小时", code: "ryxxs" },
        { title: "月运行小时", code: "yyxxs" },
        { title: "年运行小时", code: "nyxxs" },
        { title: "日待机小时", code: "rdjxs" },
        { title: "月待机小时", code: "ydjxs" },
        { title: "年待机小时", code: "ndjxs" },
        { title: "日故障小时", code: "rgzxs" },
        { title: "月故障小时", code: "ygzxs" },
        { title: "年故障小时", code: "ngzxs" },
        { title: "日检修小时", code: "rjxxs" },
        { title: "月检修小时", code: "yjxxs" },
        { title: "年检修小时", code: "njxxs" },
        { title: "日中断小时", code: "rzdxs" },
        { title: "月中断小时", code: "yzdxs" },
        { title: "年中断小时", code: "nzdxs" },
        { title: "日有效风时", code: "ryxfs" },
        { title: "月有效风时", code: "yyxfs" },
        { title: "年有效风时", code: "nyxfs" },
        { title: "日损失电量", code: "rssdl" },
        { title: "月损失电量", code: "yssdl" },
        { title: "年损失电量", code: "nssdl" },
        { title: "日报警次数", code: "rbjcs" },
        { title: "月报警次数", code: "ybjcs" },
        { title: "年报警次数", code: "nbjcs" },
        { title: "日停机次数", code: "rtjcs" },
        { title: "月停机次数", code: "ytjcs" },
        { title: "年停机数", code: "ntjcs" },
        { title: "日不饱和数", code: "rbbhcs" },
        { title: "月不饱和数", code: "ybbhcs" },
        { title: "年不饱和数", code: "nbbhcs" },
        { title: "日可利用率", code: "rsbklyl" },
        { title: "月可利用率", code: "ysbklyl" },
        { title: "年可利用率", code: "nsbklyl" },
        { title: "日平均温度", code: "rpjwd" },
        { title: "月平均温度", code: "ypjwd" },
        { title: "年平均温度", code: "npjwd" },
        { title: "日平均湿度", code: "rpjsd" },
        { title: "月平均湿度", code: "ypjsd" },
        { title: "年平均湿度", code: "npjsd" },
        { title: "日平均压强", code: "rpjyq" },
        { title: "月平均压强", code: "ypjyq" },
        { title: "年平均压强", code: "npjyq" },
        { title: "日拟合优度", code: "rnhyd" },
        { title: "月拟合优度", code: "ynhyd" },
        { title: "年拟合优度", code: "nnhyd" },
        { title: "日实际/保证", code: "rsjbz" },
        { title: "月实际/保证", code: "ysjbz" },
        { title: "年实际/保正", code: "nsjbz" },
      ],
      tableHeaderGf: [
        { title: "型号", code: "model" },
        { title: "日系统效率", code: "rxtxl" },
        { title: "日离散率", code: "rlsl" },
        { title: "日转换效率", code: "rzhxl" },
        { title: "月系统效率", code: "yxtxl" },
        { title: "月离散率", code: "ylsl" },
        { title: "月转换效率", code: "yzhxl" },
        { title: "年系统效率", code: "nxtxl" },
        { title: "年离散率", code: "nlsl" },
        { title: "年转换效率", code: "nzhxl" },
      ],
    };
  },
  //   watch: {
  //     tabIndex(val) {
  //       this.tableHeader = this.tableHeader.map((item) => {
  //         if (val == -2) {
  //           if (item.code == "rpjfs") {
  //             item.title = "日平均光照";
  //           }
  //           if (item.code == "ypjfs") {
  //             item.title = "月平均光照";
  //           }
  //           if (item.code == "npjfs") {
  //             item.title = "年平均光照";
  //           }
  //         } else {
  //           if (item.code == "rpjfs") {
  //             item.title = "日平均风速";
  //           }
  //           if (item.code == "ypjfs") {
  //             item.title = "月平均风速";
  //           }
  //           if (item.code == "npjfs") {
  //             item.title = "年平均风速";
  //           }
  //         }
  //         return { ...item };
  //       });
  //     },
  //   },

  methods: {
    async init(row) {
      //   this.hiscompanyVal = row.companyId;
      this.hisstationVal = row.windtpowerstationId;
      this.hiswindVal = row.windturbineId;
      await this.getTableData();
    },
    dateTimeFn(row) {
      return row.recordDate
        ? row.recordDate.substring(0, row.recordDate.indexOf("T"))
        : row.date.substring(0, row.date.indexOf("T"));
    },
    headerArr(label) {
      let arr = label.split("");
      let Newarr = [];
      let num = 0;
      let str = "";
      arr.forEach((it, index) => {
        num++;
        str += it;
        if (label.indexOf(it) + 1 !== label.length) {
          if (num % 2 === 0) {
            Newarr.push(str);
            str = "";
          }
        } else {
          Newarr.push(str);
        }
      });
      return Newarr;
    },
    async getWindPowerStation() {
      const { data } = await getApiequipmentListByWp({
        wpid: this.hisstationVal,
      });
      this.hisWindOptions = data.data;
      if (!this.hiswindVal && data.data.length) {
        this.hiswindVal = data.data[0].id;
      }
    },
    // changeBtn(id) {
    //   this.tabIndex = id;
    //   this.$emit("getHisStationOptions", this.tabIndex, this.hiscompanyVal);
    //   this.getTableData();
    // },
    changeStation(val) {
      this.hisstationVal = val;
      this.hiswindVal = "";
      this.getWindPowerStation();
    },
    changeWind(val) {
      this.hiswindVal = val;
      this.getTableData();
    },
    seachData() {
      this.getTableData();
    },
    async getTableData() {
      let params = {
        type: this.tabIndex,
        pageNum: this.page.currentPage,
        pageSize: this.page.pagesize,
        beginDate: this.pickerTimer[0],
        endDate: this.pickerTimer[1],
        wpId: this.hisstationVal,
        wtId: this.hiswindVal,
      };
      let datas = [];

    //   this.historysingleMachineData = dataJson.data.data.records;
    //   this.page.total = dataJson.data.data.length;
      if (this.tabIndex == -1) {
        datas = await getApihistorywindturbinegoodnesslist(params);
        this.historysingleMachineData = datas.data.data.records;
        this.page.total = datas.data.data.total;
      } else {
        // datas = await getApihistorywindturbinegoodnesslistGf(params);
        // this.historysingleMachineData = datas.data.data;
        // this.page.total = datas.data.data.length;
      }
    },
    handleSizeChange(val) {
      this.page.currentPage = 1;
      this.page.pagesize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
    //转换时间
    getchangeTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    downXlsxFn() {
      let header = ["风机", "日期"];
      this.tableHeader.forEach((it) => {
        header.push(it.title);
      });
      utils.exportExcel(
        this.$refs["historysingleTable"].$el,
        header,
        "单机性能历史分析数据"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.historysingleMachine {
  height: 100%;
  .historysingleMachine_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;

    .stationsv {
      .timeaa {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #b3b3b3;
        margin-right: 10px;
        margin-left: 10px;
      }
    }

    .but {
      display: flex;
      flex-direction: row;
      align-content: center;
      margin-left: 20px;
      .buttons {
        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;
        }
      }
    }
    .el-date-editor--daterange {
      background: transparent;
      border: 1px solid #2a374f;
      border-radius: 30px;
      height: 25px;
      .el-range-input {
        background: transparent;
        color: #fff;
      }
      .el-range-separator {
        width: 10%;
        color: #fff;
        position: relative;
      }
    }
  }
  .economicTable1 {
    height: calc(100% - 58px);
  }
}
.el-pagination ::v-deep {
  .el-pagination__sizes {
    .el-input__inner {
      width: 100% !important;
      border-radius: 0 !important;
    }
  }
}
</style>