jn_sis_zhfx/src/views/economicsOperation/analyse/standAloneAnalyse/historyDetail.vue

<template>
  <div class="historysingleMachine">
    <div class="historysingleMachine_top">
      <!-- <el-select size="mini" v-model="hiscompanyVal" placeholder="请选择">
        <el-option
          v-for="item in historyCompanyOptions"
          :key="item.id"
          :label="item.aname"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="tabCut">
        <div
          @click="changeBtn(val.id)"
          :class="tabIndex === val.id ? 'active' : ''"
          v-for="val in tabOptions"
          :key="val.id"
        >
          <span>{{ val.name }}</span>
        </div>
      </div> 
      <div class="station">
        场站：
        <el-select
          size="mini"
          v-model="hisstationVal"
          placeholder="请选择"
          clearable
          @change="changeStation"
        >
          <el-option
            v-for="item in historyStationOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        机组：
        <el-select
          size="mini"
          v-model="hiswindVal"
          placeholder="请选择"
          clearable
          @change="changeWind"
        >
          <el-option
            v-for="item in hisWindOptions"
            :key="item.id"
            :label="item.aname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>-->
      <div class="stationsv">
        <span class="timeaa">时间：</span>
        <el-date-picker
          v-model="pickerTimer"
          type="daterange"
          range-separator="To"
          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="80vh"
        ref="historysingleTable"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          :label="tabIndex === -1 ? '风机' : '逆变器'"
          width="130"
          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="150"
          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
          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"
        layout="total, 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";
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: 11,
        currentPage: 1,
        total: 0,
      },
      //   tabIndex: -1,
      //   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: {
    init(row) {
      //   this.hiscompanyVal = row.companyId;
      this.hisstationVal = row.windtpowerstationId;
      this.hiswindVal = row.windturbineId || row.wtid;
      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 = {};
      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.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">
.historysingleMachine {
  padding: 0 23px;
  .historysingleMachine_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;

    .station {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-right: 10px;
      margin-left: 10px;
    }
    .stationsv {
      .timeaa {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #b3b3b3;
        margin-right: 10px;
        margin-left: 10px;
      }
    }
    .tabCut {
      display: inline-block;
      margin: 0 10px;

      div {
        display: inline-block;
        width: 60px;
        height: 27px;
        border: 1px solid #274934;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }

      div:nth-child(1) {
        border-radius: 13px 0px 0px 13px;
      }

      div:nth-child(2) {
        border-radius: 0px 13px 13px 0px;
      }

      .active {
        background-color: rgba(5, 187, 76, 0.9);
        color: #fff;
      }
    }

    .search-input {
      margin-left: 10px;
      .el-input__inner {
        width: 175px;
      }
      .el-input__suffix {
        right: -50px;
      }
    }

    .but {
      display: flex;
      flex-direction: row;
      align-content: center;
      margin-left: 20px;
      .buttons:nth-child(1) {
        background: rgba(5, 187, 76, 0.6);
        border: 1px solid #3b6c53;
        border-radius: 13px;
        color: #fff;
        &:hover {
          background: rgba(5, 187, 76, 0.9);
          border-radius: 13px;
          color: #fff;
        }
      }
      .buttons:nth-child(2) {
        background: rgba(67, 81, 107, 0.3);
        border: 1px solid #3b6c53;
        border-radius: 13px;
        font-size: 14px;
        color: #b3b3b3;
      }
    }
    .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;
      }
    }
  }
  //   .historysingleMachine_Table {
  //     padding: 5px;
  //     padding-bottom: 10px;
  //     background: rgba(0, 0, 0, 0.4);
  //     .el-table--mini {
  //       margin: 5px;
  //       .el-table__header-wrapper {
  //         tr {
  //           background: rgba(83, 89, 104, 0.3) !important;
  //           th {
  //             vertical-align: top !important;
  //           }
  //           .cell {
  //             color: #b3b3b3;
  //             font-family: MicrosoftYaHei;
  //             font-size: 14px;
  //           }
  //         }
  //       }
  //       .el-table__body-wrapper {
  //         tr {
  //           &:nth-child(2n) {
  //             background: rgba(83, 89, 104, 0.05) !important;
  //           }
  //           .cell {
  //             color: #d8d8d9;
  //             font-family: ArialMT;
  //             font-size: 13px;
  //             height: 25px !important;
  //           }
  //         }
  //       }
  //     }
  //   }
}
// .el-pagination {
//   display: flex;
//   justify-content: flex-end;
//   margin-right: 40px;
//   margin-top: 20px;

//   .btn-prev,
//   .btn-next,
//   .btn-quickprev,
//   .btn-quicknext,
//   .el-pager,
//   .number {
//     background: rgba(58, 63, 75, 0.4) !important;
//     color: #fff;
//     border-radius: 2px;
//   }

//   .el-pager .active {
//     background: #083c94;
//     color: #fff;
//     border-radius: 2px;
//   }

//   .el-pagination__total,
//   .el-pagination__jump {
//     color: #fff;
//     .el-input__inner {
//       background: rgba(58, 63, 75, 0.2);
//       border: 1px solid #3e4349;
//       color: #fff;
//       border-radius: 2px;
//     }
//   }
// }
// .historyBtn {
//   background: #43516b;
//   border-radius: 15px;
//   margin-top: 5px;
//   border: 1px solid #43516b;
//   span {
//     color: #fff;
//   }
// }
</style>