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

<template>
  <div class="historycutInAndOut">
    <div class="historycutInAndOut_top">
      <!-- <el-select
        size="mini"
        v-model="hiscompanyVal"
        placeholder="请选择"
        @change="changeCompan"
      >
        <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 hisStationAll"
            :key="item.id"
            :label="item.name"
            :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="至"
          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="historycutInAndOutData"
        stripe
        size="mini"
        height="calc(100% - 40px - 20px)"
        ref="historycutInAndOutTable"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="wtcode"
          label="风机"
          width="150"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          sortable
          :prop="item.code"
          :label="item.title"
          header-align="center"
          align="center"
        >
          <template #header="scope">
            <div
              v-for="(item, index) in headerArr(scope.column.label)"
              :key="index"
            >
              {{ item }}
            </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="[20, 50, 100, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getApioutputSpeedhistorylist,
  getApiwpByCplistlist,
} from "@/api/monthlyPerformanceAnalysis";
import utils from "@/utills/downXlsx";
import dataJson from "./dataJson.json"
export default {
  props: {
    historyCompanyOptions: {
      type: Array,
      default: [],
    },
    historyStationOptions: {
      type: Array,
      default: () => [],
    },
    tableHeader: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      hiscompanyVal: "",
      hisstationVal: "",
      hiswindId: "",
      pickerTimer: [],
      historycutInAndOutData: [],
      hisStationAll: [],
      showBtn: true,
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      page: {
        pagesize: 20,
        currentPage: 1,
        total: 0,
      },
    };
  },
  methods: {
    init(row) {
      this.hiscompanyVal = row.companyId;
      this.hisstationVal = row.windpowerstationId;
      this.hiswindId = row.windturbineId;
      this.tableHeader.forEach((it, index) => {
        if (it.title === "操作") {
          this.tableHeader.splice(index);
        }
      });
      this.hisStationAll = this.historyStationOptions;
      this.getTableData();
    },
    changeCompan(val) {
      this.hiscompanyVal = val;
      this.getStationData();
    },
    async getStationData() {
      this.hisstationVal = "";
      this.hisStationAll = [];
      let params = {
        type: this.tabIndex,
        companyid: this.hiscompanyVal,
      };
      const { data: datas } = await getApiwpByCplistlist(params);
      this.hisStationAll = datas.data;
      this.hisstationVal = datas.data[0].id;
    },
    changeStation(val) {
      this.hisstationVal = val;
      this.getTableData();
    },
    headerArr(label) {
      let arr = [];
      let num = 0;
      if (label.length > 2) {
        if (label.indexOf("风") > 0) {
          arr.push(label.substring(0, label.indexOf("风") + 1));
          num = label.indexOf("风");
        }
        if (label.indexOf("入") > 0 || label.indexOf("出") > 0) {
          if (label.indexOf("入") > 0) {
            arr.push(label.substring(num + 1, label.indexOf("入") + 1));
            num = label.indexOf("入");
          } else {
            arr.push(label.substring(num + 1, label.indexOf("出") + 1));
            num = label.indexOf("出");
          }
        }
        arr.push(label.substring(num + 1, label.length));
      } else [arr.push(label)];
      return arr;
    },
    changeBtn(id) {
      this.tabIndex = id;
      this.getStationData();
    },
    seachData() {
      this.getTableData();
    },
    async getTableData() {
      let params = {
        cmId: this.hiscompanyVal,
        type: this.tabIndex,
        pageNum: this.page.currentPage,
        pageSize: this.page.pagesize,
        beginDate: this.pickerTimer[0],
        endDate: this.pickerTimer[1],
        wpId: this.hisstationVal,
        wtId: this.hiswindId,
      };
    //   this.historycutInAndOutData = dataJson.data.data.records;
    //   this.page.total = dataJson.data.data.total;
      const { data: datas } = await getApioutputSpeedhistorylist(params);
      this.historycutInAndOutData = datas.data.records;
      this.page.total = datas.data.total;
    },
    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["historycutInAndOutTable"].$el,
        header,
        "切入切出历史分析"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.historycutInAndOut {
  height: 100%;
  .historycutInAndOut_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 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 {
        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;
      }
    }
  }
  .el-pagination ::v-deep {
    .el-pagination__sizes {
      .el-input__inner {
        width: 100% !important;
        border-radius: 0 !important;
      }
    }
  }
}
</style>