fd_dwgz_zhyw/src/views/economicsOperation/reportForms/newEnergyDaily/index.vue

<template>
  <div class="comAnalysise">
    <div class="comAnalysis_tops">
      <div class="station">
        时间
        <div class="search-input">
          <el-date-picker
            v-model="pickerTimer"
            type="date"
            format="YYYY-MM-DD"
            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 class="systemData bodys">
      <div class="line">
        <div class="leftContent"><span>新能源生产日报</span></div>
      </div>

      <el-table
        :data="stationDatas"
        ref="month_table"
        style="width: 100%"
        empty-text="暂无数据"
        height="81vh"
        :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>
      <!--            <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 { getNemDailyReportData } from "@api/reportForms";
import utils from "@/utills/downXlsx";

export default {
  name: "newEnergyDaily", //新能源日报
  data() {
    return {
      rowClass: "",
      pickerTimer: "",
      stationDatas: [],
      stationData: [
        {
          tagName: "风场名称",
          tagCode: "tagNames",
          valueUnit: "",
          width: "97%",
        },
        {
          tagName: "日平均风速",
          tagCode: "rpjfs",
          valueUnit: "m/s",
          width: "83%",
        },
        {
          tagName: "日发电量",
          tagCode: "rfdldb",
          valueUnit: "万kWh",
          width: "77%",
        },
        {
          tagName: "月累计发电量",
          tagCode: "yfdldb",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "年累计发电量",
          tagCode: "nfdldb",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "日上网电量",
          tagCode: "rswdldb",
          valueUnit: "万kWh",
          width: "97%",
        },
        {
          tagName: "月累计上网电量",
          tagCode: "yswdldb",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "年累计上网电量",
          tagCode: "nswdldb",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "综合厂用电量",
          tagCode: "rzhcydldb",
          valueUnit: "万kWh",
          width: "97%",
        },
        {
          tagName: "月累计综合厂用电量",
          tagCode: "yzhcydldb",
          valueUnit: "万kWh",
          width: "111%",
        },
        {
          tagName: "SCADA日发电量",
          tagCode: "rfdl",
          valueUnit: "万kWh",
          width: "105%",
        },
        {
          tagName: "SCADA月累计发电量",
          tagCode: "yfdl",
          valueUnit: "万kWh",
          width: "113%",
        },
        {
          tagName: "SCADA年累计发电量",
          tagCode: "nfdl",
          valueUnit: "万kWh",
          width: "113%",
        },
        {
          tagName: "SCADA综合厂用电量",
          tagCode: "sacdazhcydl",
          valueUnit: "万kWh",
          width: "113%",
        },
        {
          tagName: "SCADA月累计综合厂用电量",
          tagCode: "sacdayzhcydl",
          valueUnit: "万kWh",
          width: "131%",
        },
        {
          tagName: "SCADA综合厂用电率",
          tagCode: "scadlv",
          valueUnit: "%",
          width: "95%",
        },
        {
          tagName: "日限电损失电量",
          tagCode: "rxdssdl",
          valueUnit: "万kWh",
          width: "97%",
        },
        {
          tagName: "月累计限电损失电量",
          tagCode: "yxdssdl",
          valueUnit: "万kWh",
          width: "111%",
        },
        {
          tagName: "年累计限电损失电量",
          tagCode: "nxdssdl",
          valueUnit: "万kWh",
          width: "111%",
        },
      ],

      isFullScreen: false,
      pageSize: 25,
      allStation: [],
      stationDatasd: [],
    };
  },
  created() {
    this.pickerTimer = new Date();
    this.getNemDailyReportData();
    this.$nextTick(() => this.addRollListener());
  },
  mounted() {
    window.onresize = () => {
      this.getNemDailyReportData();
    };
  },
  methods: {
    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.getNemDailyReportData();
        }
      });
    },
    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["month_table"].$el, headers, "生产日报");
        }
      }, 1000);
    },
    async getNemDailyReportData() {
      const { data } = await getNemDailyReportData(
        this.getchangeTime(this.pickerTimer)
      );
      if (data.length >= 1) {
        data?.forEach((value) => {
          value.tagNames = value.projectName;

          if (value.projectName == "") {
            value.tagNames = "合计";
          }

          for (let key in value) {
            if (
              key == "rfdldb" ||
              key == "rxdssdl" ||
              key == "yxdssdl" ||
              key == "nxdssdl"
            ) {
              value[key] = (value[key] / 10000).toFixed(2);
            } else if (key == "rpjfs") {
              value[key] = value[key].toFixed(2);
            } else if (typeof value[key] === "number") {
              value[key] = (value[key] / 10000).toFixed(4);
            }
          }
          value.scadlv =
            value.rfdl != 0
              ? ((value.sacdazhcydl / value.rfdl) * 100).toFixed(2)
              : 0;
        });

        this.allStation = data;
        this.stationDatasd = this.deepClone(data);
        this.stationDatas = this.stationDatasd.splice(0, this.pageSize);
      } else {
        this.stationDatas = [];
        this.allStation = [];
      }
    },
    deepClone(ob) {
      var obj = JSON.stringify(ob);
      var objClone = JSON.parse(obj);
      return objClone;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.projectName == "") {
        return "success-row";
      } else if (rowIndex === "") {
        return "";
      }
      return "";
    },

    //转换时间
    getchangeTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    seachData() {
      this.getNemDailyReportData();
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 3) {
        return { "backdrop-filter": "blur(10px)", padding: "6px 0" };
      } else {
        return { padding: "6px 0" };
      }
    },
  },
  computed: {
    pageHeight() {
      return {
        height: document.documentElement.clientHeight - 130 + "px",
      };
    },
  },
};
</script>

<style lang="less">
.el-table .success-row {
  background: rgba(83, 89, 104, 0.3) !important;
}

.comAnalysise {
  padding: 0 23px;

  .systemData {
    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: -40px;

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

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

  .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;
      border-right-width: 0;
    }

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

    .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) !important;
      border: 1px solid #3b6c53;
      border-radius: 13px;
      font-size: 14px;
      color: #b3b3b3;
    }
  }
}

.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;

  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    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;
    }
  }
}

.systemData {
  width: 100%;
  height: calc(100% - 70px);
  background-color: rgba(0, 0, 0, 0.45);
  padding: 5px;
  overflow: hidden;
}
</style>