emsfront/src/views/ems/site/dataCorrection/DailyEnergyDataTab.vue

<template>
  <div style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container" @submit.native.prevent>
      <el-form-item label="数据日期">
        <el-date-picker
          v-model="form.dataDate"
          type="date"
          value-format="yyyy-MM-dd"
          clearable
          placeholder="请选择日期"
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item>
        <el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
        <el-button native-type="button" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="openDialog('')">新增</el-button>

    <el-table
      :data="tableData"
      class="common-table"
      max-height="620px"
      stripe
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="站点" prop="siteId" width="130" />
      <el-table-column label="数据日期" prop="dataDate" width="120" />
      <el-table-column label="data_hour" prop="dataHour" width="100" />
      <el-table-column label="尖充" prop="peakChargeDiff" min-width="90" />
      <el-table-column label="尖放" prop="peakDischargeDiff" min-width="90" />
      <el-table-column label="峰充" prop="highChargeDiff" min-width="90" />
      <el-table-column label="峰放" prop="highDischargeDiff" min-width="90" />
      <el-table-column label="平充" prop="flatChargeDiff" min-width="90" />
      <el-table-column label="平放" prop="flatDischargeDiff" min-width="90" />
      <el-table-column label="谷充" prop="valleyChargeDiff" min-width="90" />
      <el-table-column label="谷放" prop="valleyDischargeDiff" min-width="90" />
      <el-table-column label="计算时间" prop="calcTime" min-width="170" />
      <el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="openDialog(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </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"
    />

    <add-data-correction ref="addDataCorrection" @update="getData" />
  </div>
</template>

<script>
import {
  deleteDailyEnergyData,
  getDailyEnergyDataList,
} from '@/api/ems/site'
import AddDataCorrection from './AddDataCorrection.vue'

export default {
  name: 'DailyEnergyDataTab',
  components: { AddDataCorrection },
  data() {
    return {
      loading: false,
      form: {
        siteId: '',
        dataDate: '',
      },
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      totalSize: 0,
    }
  },
  watch: {
    '$route.query.siteId'(newSiteId) {
      const normalizedSiteId = this.normalizeSiteId(newSiteId)
      if (normalizedSiteId === this.form.siteId) {
        return
      }
      this.form.siteId = normalizedSiteId
      this.onSearch()
    },
  },
  mounted() {
    this.form.siteId = this.normalizeSiteId(this.$route.query.siteId)
    this.getData()
  },
  methods: {
    normalizeSiteId(siteId) {
      return siteId === undefined || siteId === null ? '' : String(siteId).trim()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getData()
    },
    onSearch() {
      this.pageNum = 1
      this.getData()
    },
    onReset() {
      this.form = {
        siteId: this.form.siteId,
        dataDate: '',
      }
      this.pageNum = 1
      this.getData()
    },
    getData() {
      if (!this.form.siteId) {
        this.tableData = []
        this.totalSize = 0
        return
      }
      this.loading = true
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        siteId: this.form.siteId,
      }
      if (this.form.dataDate) {
        params.dataDate = this.form.dataDate
      }
      getDailyEnergyDataList(params)
        .then((res) => {
          this.tableData = res?.rows || []
          this.totalSize = res?.total || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    openDialog(id) {
      this.$refs.addDataCorrection.showDialog(id, this.form.siteId)
    },
    handleDelete(row) {
      this.$confirm('确认要删除该条数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        closeOnClickModal: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            deleteDailyEnergyData(row.id)
              .then((res) => {
                if (res?.code === 200) {
                  done()
                }
              })
              .finally(() => {
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        },
      })
        .then(() => {
          this.$message.success('删除成功!')
          this.getData()
        })
        .catch(() => {})
    },
  },
}
</script>

<style scoped>
</style>