重构

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

@@ -0,0 +1,191 @@
+<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>