jn_sis_zhfx/src/views/economicsOperation/reportForms/windMonthly/index.vue

<template>
  <div class="singleMachine">
    <div class="singleMachine_top">
      <el-select
        size="mini"
        v-model="companyVal"
        placeholder="请选择"
        @change="changeCompan"
      >
        <el-option
          v-for="item in companyOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </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="stationVal"
          placeholder="请选择"
          @change="changeStation"
          clearable
        >
          <el-option
            v-for="item in stationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        时间
        <div class="search-input">
          <el-date-picker
            v-model="pickerTimer"
            type="month"
            value-format="YYYY-MM"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </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 style="background: rgba(0, 0, 0, 0.45)">
      <div class="singleMachine_title clearfix">
        <div class="leftContent floatLeft"><span>{{}}单机性能分析表</span></div>
        <!--               -->
      </div>
      <div class="singleMachine_Table">
        <el-table
          :data="stationDatas"
          ref="stand_table"
          style="width: 100%"
          empty-text="暂无数据"
          height="81vh"
          stripe
          :row-class-name="tableRowClassName"
          :header-cell-style="headerStyle"
        >
          <el-table-column
            v-for="(item, index) in stationData"
            :key="index"
            :prop="item.tagCode"
            align="center"
            :width="item.width"
            header-align="center"
            class-name="add"
            style="width: 100%"
            empty-text="暂无数据"
            height="81vh"
          >
            <template #header>
              <div>
                <div v-if="item.tagName.length > 6">
                  {{ item.tagName }}
                  <span v-if="item.valueUnit">({{ item.valueUnit }})</span>
                </div>
                <div v-else>
                  <div
                    style="
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  >
                    {{ item.tagName }}
                  </div>
                  <div v-if="item.valueUnit">({{ item.valueUnit }})</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import utils from "@/utills/downXlsx";
import {
  getEquipmentReportData,
  getApicompanyslist,
  getApiwpByCplistlist,
} from "@api/reportForms";

export default {
  name: "windMonthly", //单机月报
  components: {},
  data() {
    return {
      companyVal: "",
      companyOptions: [],
      stationVal: "",
      stationOptions: [],
      pickerTimer: "",
      singleMachineData: [],
      showBtn: true,
      dialogTitle: "",
      tabIndex: -1,
      stationDatas: [],
      stationData: [
        {
          tagName: "机组编号",
          tagCode: "tagNames",
          valueUnit: "",
          width: "120%",
        },

        {
          tagName: "scada月发电量",
          tagCode: "yfdl",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "月理论发电量",
          tagCode: "yllfdl",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "月平均风速",
          tagCode: "ypjfs",
          valueUnit: "m/s",
          width: "85%",
        },
        {
          tagName: "设备利用小时数",
          tagCode: "sblyxss",
          valueUnit: "小时",
          width: "105%",
        },
        {
          tagName: "设备可利用率",
          tagCode: "sbklylv",
          valueUnit: "%",
          width: "105%",
        },
        {
          tagName: "等效可用系数",
          tagCode: "ddxkyxs",
          valueUnit: "%",
          width: "97%",
        },
        {
          tagName: "有效风时数",
          tagCode: "yxfss",
          valueUnit: "小时",
          width: "105%",
        },
        {
          tagName: "有效风时利用率",
          tagCode: "yxfslylv",
          valueUnit: "%",
          width: "105%",
        },
        {
          tagName: "故障损失电量",
          tagCode: "gzssdl",
          valueUnit: "万kWh",
          width: "97%",
        },
        {
          tagName: " 调度限电损失电量",
          tagCode: "ddxdssdl",
          valueUnit: "万kWh",
          width: "111%",
        },
        {
          tagName: "计划检修损失电量",
          tagCode: "jhjxssdl",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "性能未达标损失电量",
          tagCode: "xnwdbssdl",
          valueUnit: "万kWh",
          width: "113%",
        },
        {
          tagName: "受累损失电量",
          tagCode: "slssdl",
          valueUnit: "万kWh",
          width: "113%",
        },
        {
          tagName: "并网时间",
          tagCode: "bwsj",
          valueUnit: "小时",
          width: "80%",
        },
        {
          tagName: "待机时间",
          tagCode: "djsj",
          valueUnit: "小时",
          width: "80%",
        },
        {
          tagName: "检修停机时间",
          tagCode: "jxtjsj",
          valueUnit: "小时",
          width: "100%",
        },
        {
          tagName: "故障停机时间",
          tagCode: "gztjsj",
          valueUnit: "小时",
          width: "100%",
        },
        {
          tagName: "连续无故障时间",
          tagCode: "lxwgzsj",
          valueUnit: "小时",
          width: "100%",
        },
        {
          tagName: "通讯中断时间",
          tagCode: "txzdsj",
          valueUnit: "小时",
          width: "98%",
        },
      ],
      stationVals: "",
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      pageSize: 25,
      stationDatasd: [],
      allStation: [],
    };
  },
  created() {
    this.$nextTick(() => this.addRollListener());

    this.getCompanyData();
  },
  mounted() {
    window.onresize = () => {
      this.getTableData();
    };
  },
  computed: {},
  methods: {
    // 获取公司列表
    async getCompanyData() {
      this.companyOptions = [];
      this.pickerTimer = this.getchangeTime(new Date());
      const { data } = await getApicompanyslist({ type: "0" });
      var arr = [];
      if (data && data.length > 0) {
        {
          data.forEach((item) => {
            if (item.preCode == "") {
              this.companyVal = item.code;
            }
            var obj = {};
            obj.value = item.code;
            obj.label = item.aname;
            arr.push(obj);
          });
        }
      }
      this.companyOptions = arr;
      this.getStationData();
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 0) {
        return { "backdrop-filter": "blur(10px)", padding: "6px 0" };
      } else {
        return { padding: "6px 0" };
      }
    },
    changeBtn(id) {
      this.tabIndex = id;
      this.stationVal = "";
      this.getStationData();
    },
    changeCompan(val) {
      this.companyVal = val;
      this.stationVal = "";
      this.getStationData();
    },
    // 获取场站
    async getStationData() {
      this.stationOptions = [];

      let params = {
        companyCode: this.companyVal,
        stationType: this.tabIndex,
      };
      const { data } = await getApiwpByCplistlist(params);
      var arr = [];
      if (data && data.length > 0) {
        {
          data.forEach((item) => {
            var obj = {};
            obj.value = item.CZMC;
            obj.CZBM = item.CZBM;
            arr.push(obj);
          });
        }
      }
      this.stationVals = data[0].CZBM;
      this.stationVal = data[0].CZMC;
      this.stationOptions = arr;
      this.getTableData();
    },
    changeStation(val) {
      let obj = {};
      if (this.stationOptions != "") {
        obj = this.stationOptions.find((item) => {
          return item.value == val;
        });
        this.stationVals = obj.CZBM;
      }

      this.stationVal = val;
    },
    seachData() {
      this.getTableData();
    },
    async getTableData() {
      let params = {
        date: this.pickerTimer,
        stationId: this.stationVals,
      };
      const { data } = await getEquipmentReportData(params);

      if (data.length >= 1) {
        data?.forEach((value) => {
          value.tagNames = value.powerstationName + value.deviceName;
          for (let key in value) {
            if (
              key == "yfdl" ||
              key == "gzssdl" ||
              key == "yllfdl" ||
              key == "ddxdssdl" ||
              key == "jhjxssdl" ||
              key == "xnwdbssdl" ||
              key == "slssdl"
            ) {
              value[key] = (value[key] / 10000).toFixed(4);
            } else if (typeof value[key] === "number") {
              value[key] = value[key].toFixed(2);
            }
          }
        });

        this.allStation = data;
        this.stationDatasd = this.deepClone(data);
        this.stationDatas = this.stationDatasd.splice(0, this.pageSize);
      } else {
        this.stationDatas = [];
        this.allStation = [];
      }
    },

    addRollListener() {
      const dom = document.getElementsByClassName("el-table__body-wrapper")[0];
      dom.addEventListener("scroll", () => {
        const scrollTop = dom.scrollTop;
        const offsetHeight = dom.offsetHeight;
        const clientHeight = dom.clientHeight;
        const scrollHeight = dom.scrollHeight;
        if (
          clientHeight + scrollTop + 1 > scrollHeight ||
          offsetHeight + scrollTop >= scrollHeight
        ) {
          this.pageSize++;
          this.getTableData();
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.powerstationName == "") {
        return "success-row";
      } else if (rowIndex === "") {
        return "";
      }
      return "";
    },

    //转换时间
    getchangeTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      return y + "-" + m;
    },

    deepClone(ob) {
      var obj = JSON.stringify(ob);
      var objClone = JSON.parse(obj);
      return objClone;
    },
    downXlsxFn() {
      this.stationDatas = this.allStation;
      let headers = [];
      this.stationData.forEach((it) => {
        headers.push(it.tagName + it.valueUnit);
      });
      setTimeout(() => {
        if (this.stationDatas.length > 0) {
          utils.exportExcel(
            this.$refs["stand_table"].$el,
            headers,
            this.pickerTimer + "单机月报"
          );
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less">
.singleMachine {
  padding: 0 23px;

  .singleMachine_title {
    padding-left: 10px;

    .leftContent {
      width: 242px;
      height: 41px;
      line-height: 41px;
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-left: 25px;
      }
    }

    .floatLeft {
      float: left;
    }

    .floatRight {
      float: right;
    }

    .rightContent {
      width: 212px;
      height: 28px;
      margin-top: 13px;
      background: url("../../../../assets/imgs/title_right_bg.png");
    }
  }

  .clearfix::after {
    content: "";
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
    display: block;
  }

  .clearfix {
    zoom: 1;
  }

  .singleMachine_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-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;
    }

    .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;
      }
    }
  }

  .singleMachine_Table {
    margin: 0 5px 5px 5px;
    padding-bottom: 10px;

    .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);
        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 {
      cursor: pointer;
      color: #1c99ff;
      margin-right: 15px;
    }
  }

  .el-overlay {
    .el-overlay-dialog {
      overflow-y: hidden !important;

      .windhistoryDetailModel,
      .windDetailmodal {
        margin-top: 0 !important;

        .el-dialog__body {
          padding: 10px 20px 20px 20px;
        }
      }
    }
  }

  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
    color: #fff;
  }

  .el-picker__popper .el-date-table .in-range div {
    background: #43516b;
  }
}
</style>