ims-gyee/src/views/layout/economicsOperation/analyse/standAloneAnalyse/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="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :size="size"
          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="cutInAndOutAnalysis_Table">
      <el-table
        :data="historysingleMachineData"
        stripe
        size="mini"
        height="80vh"
        ref="historysingleTable"
        style="width: 100%"
      >
        <el-table-column align="center" label="逆变器" 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 tableHeaderGf"
          :key="index"
          sortable
          :prop="item.code"
          :label="item.title"
          align="center"
          :width="item.title === '操作' ? '200' : ''"
        >
          <template #header="scope">
            <div v-if="scope.column.label.indexOf('(') > 0">
              <div>
                {{
                  scope.column.label.slice(0, scope.column.label.indexOf("("))
                }}
              </div>
              <div>
                {{ scope.column.label.slice(scope.column.label.indexOf("(")) }}
              </div>
            </div>
            <div v-else>{{ scope.column.label }}</div>
          </template>
          <template #default="scope" v-if="item.title === '操作'">
            <!-- <span class="historyBtn" @click="seachDetail(scope.row)">详情</span> -->
            <span class="historyBtn" @click="seachHistoryData(scope.row)"
              >历史</span
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @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 "@/utils/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,
      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" },
      ],
    };
  },

  methods: {
    init(row) {
      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;
    },
    seachData() {
      this.getTableData();
    },
    async getTableData() {
      let params = {
        type: this.tabIndex,
        beginDate: this.pickerTimer[0],
        endDate: this.pickerTimer[1],
        wpId: this.hisstationVal,
        wtId: this.hiswindVal,
      };
      let datas = await getApihistorywindturbinegoodnesslistGf(params);
      this.historysingleMachineData = datas.data;
    },
    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.tableHeaderGf.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 #354460;
        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: #0c3378;
        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(0, 70, 199, 0.6);
        border: 1px solid #1f51ae;
        border-radius: 13px;
        color: #fff;
        &:hover {
          background: rgba(14, 90, 229, 0.9);
          border-radius: 13px;
          color: #fff;
        }
      }
      .buttons:nth-child(2) {
        background: rgba(67, 81, 107, 0.3);
        border: 1px solid #3b4c6c;
        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;
        top: -7px;
      }
    }
  }
  .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>