emsfront/src/views/ems/dzjk/tjbb/sybb/index.vue

<template>
  <div style="width:100%" v-loading="loading">
    <!--    搜索栏-->
    <el-form :inline="true" class="select-container">
      <el-form-item label="时间选择">
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :picker-options="pickerOptions"
            :default-value="defaultDateRange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportTable" native-type="button">导出</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table
        class="common-table"
        :data="tableData"
        show-summary
        stripe
        style="width: 100%;margin-top:25px;">
      <!--        汇总列-->
      <el-table-column label="汇总" min-width="100px" align="center">
        <el-table-column
            prop="dataTime"
            label="日期"
            min-width="100px" align="center">
        </el-table-column>
      </el-table-column>
      <!--充电量列-->
      <el-table-column label="充电价格" align="center">
        <el-table-column
            align="center"
            prop="activePeakPrice"
            label="尖">
        </el-table-column>
        <el-table-column
            align="center"
            prop="activeHighPrice"
            label="峰">
        </el-table-column>
        <el-table-column
            align="center"
            prop="activeFlatPrice"
            label="平">
        </el-table-column>
        <el-table-column
            align="center"
            prop="activeValleyPrice"
            label="谷">
        </el-table-column>
        <el-table-column
            align="center"
            prop="activeTotalPrice"
            label="总">
        </el-table-column>
      </el-table-column>
      <!--充电量列-->
      <el-table-column label="放电价格" align="center">
        <el-table-column
            align="center"
            prop="reActivePeakPrice"
            label="尖">
        </el-table-column>
        <el-table-column
            align="center"
            prop="reActiveHighPrice"
            label="峰">
        </el-table-column>
        <el-table-column
            align="center"
            prop="reActiveFlatPrice"
            label="平">
        </el-table-column>
        <el-table-column
            align="center"
            prop="reActiveValleyPrice"
            label="谷">
        </el-table-column>
        <el-table-column
            align="center"
            prop="reActiveTotalPrice"
            label="总">
        </el-table-column>
      </el-table-column>
      <!--      实际收益-->
      <el-table-column label="" align="center" fixed="right">
        <el-table-column
            prop="actualRevenue"
            label="实际收益"
            align="center">
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="tableData.length>0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        style="margin-top:15px;text-align: center"
    >
    </el-pagination>
  </div>
</template>


<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getAmmeterRevenueData} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";

export default {
  name: 'DzjkTjbbSybb',
  mixins: [getQuerySiteId],
  data() {
    return {
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDateRange: [],//默认展示的时间
      dateRange: [],
      tableData: [],
      pageSize: 10,//分页栏当前每个数据总数
      pageNum: 1,//分页栏当前页数
      totalSize: 0,//table表格数据总数
    }
  },
  methods: {
    // 导出表格
    exportTable() {
      if (!this.dateRange?.length) return
      const [startTime, endTime] = this.dateRange
      this.download('ems/statsReport/exportAmmeterRevenueData', {
        siteId: this.siteId,
        startTime,
        endTime,
      }, `收益报表_${startTime}-${endTime}.xlsx`)
    },
    // 搜索
    onSearch() {
      this.pageNum = 1//每次搜索从1开始搜索
      this.getData()
    },
    // 重置
    onReset() {
      this.dateRange = this.defaultDateRange
      this.pageNum = 1//每次搜索从1开始搜索
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(() => {
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(() => {
        this.getData()
      })
    },
    // 获取数据
    getData() {
      this.loading = true
      const {siteId, pageNum, pageSize} = this
      const [startTime = '', endTime = ''] = (this.dateRange || [])
      getAmmeterRevenueData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
        this.tableData = response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    init() {
      this.dateRange = []
      this.tableData = []
      this.totalSize = 0
      this.pageSize = 10
      this.pageNum = 1
      let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
      this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
      this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep {
  .common-table.el-table {
    .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th {
      border-bottom: 1px solid #dfe6ec;
    }

    .el-table__footer-wrapper {
      tbody td.el-table__cell {
        color: #000;
        font-weight: bolder;
      }
    }
  }

}

</style>