From 5634964002896e93e7bafdf03b9564b9db938e0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Mon, 20 Apr 2026 15:15:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E6=96=B0=E5=A2=9E=E8=83=BD?=
 =?UTF-8?q?=E6=BA=90=E8=AE=B0=E5=BD=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加能源记录API及相关功能
- 重构设备管理界面，简化表单字段
- 实现能源消耗表格视图，支持按月筛选和编辑
- 移除设备管理中的冗余字段和绑定库区显示
- 调整设备状态选择器为按钮样式
---
 klp-ui/src/api/ems/energyRecord.js            |  44 +++
 .../src/api/wms/coilWarehouseOperationLog.js  |   3 +-
 klp-ui/src/views/ems/meter/manage.vue         |  40 +--
 klp-ui/src/views/ems/table/index.vue          | 323 ++++++++++++++++++
 4 files changed, 383 insertions(+), 27 deletions(-)
 create mode 100644 klp-ui/src/api/ems/energyRecord.js
 create mode 100644 klp-ui/src/views/ems/table/index.vue

diff --git a/klp-ui/src/api/ems/energyRecord.js b/klp-ui/src/api/ems/energyRecord.js
new file mode 100644
index 00000000..bdb8f1d6
--- /dev/null
+++ b/klp-ui/src/api/ems/energyRecord.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询能源消耗记录列表
+export function listEnergyRecord(query) {
+  return request({
+    url: '/ems/energyRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询能源消耗记录详细
+export function getEnergyRecord(energyRecordId) {
+  return request({
+    url: '/ems/energyRecord/' + energyRecordId,
+    method: 'get'
+  })
+}
+
+// 新增能源消耗记录
+export function addEnergyRecord(data) {
+  return request({
+    url: '/ems/energyRecord',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改能源消耗记录
+export function updateEnergyRecord(data) {
+  return request({
+    url: '/ems/energyRecord',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除能源消耗记录
+export function delEnergyRecord(energyRecordId) {
+  return request({
+    url: '/ems/energyRecord/' + energyRecordId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/wms/coilWarehouseOperationLog.js b/klp-ui/src/api/wms/coilWarehouseOperationLog.js
index 6234ec88..485267da 100644
--- a/klp-ui/src/api/wms/coilWarehouseOperationLog.js
+++ b/klp-ui/src/api/wms/coilWarehouseOperationLog.js
@@ -5,7 +5,8 @@ export function listCoilWarehouseOperationLog(query) {
   return request({
     url: '/wms/coilWarehouseOperationLog/list',
     method: 'get',
-    params: query
+    params: query,
+    timeout: 100000,
   })
 }
 
diff --git a/klp-ui/src/views/ems/meter/manage.vue b/klp-ui/src/views/ems/meter/manage.vue
index cfd6345e..58dac3d4 100644
--- a/klp-ui/src/views/ems/meter/manage.vue
+++ b/klp-ui/src/views/ems/meter/manage.vue
@@ -35,8 +35,8 @@
     <el-collapse-transition>
       <div class="search-panel" v-show="showSearch">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
-          <el-form-item label="设备编号">
-            <el-input v-model="queryParams.meterCode" placeholder="请输入设备编号" clearable @keyup.enter.native="handleQuery" />
+          <el-form-item label="设备名称">
+            <el-input v-model="queryParams.meterCode" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery" />
           </el-form-item>
           <el-form-item label="能源类型">
             <el-select v-model="queryParams.energyTypeId" placeholder="全部" clearable @change="handleQuery">
@@ -98,7 +98,7 @@
                 <span class="label">安装日期</span>
                 <span class="value">{{ meter.installDate || '-' }}</span>
               </div>
-              <div class="info-item">
+              <!-- <div class="info-item">
                 <span class="label">绑定库区</span>
                 <el-tag 
                   v-if="getBindingWarehouse(meter.meterId)" 
@@ -108,17 +108,16 @@
                   {{ getBindingWarehouse(meter.meterId) }}
                 </el-tag>
                 <el-tag v-else type="info" size="small">未绑定</el-tag>
-              </div>
+              </div> -->
               <div class="info-item status-selector">
-                <span class="label">状态</span>
                 <el-radio-group 
                   v-model="meter.status" 
                   size="small"
                   @input="handleStatusChange(meter)"
                 >
-                  <el-radio :label="0">在用</el-radio>
-                  <el-radio :label="1">停用</el-radio>
-                  <el-radio :label="2">维护</el-radio>
+                  <el-radio-button :label="0">在用</el-radio-button>
+                  <el-radio-button :label="1">停用</el-radio-button>
+                  <el-radio-button :label="2">维护</el-radio-button>
                 </el-radio-group>
               </div>
             </div>
@@ -139,28 +138,19 @@
         <!-- 能源类型选择 -->
         <el-form-item label="能源类型" prop="energyTypeId">
           <div class="energy-type-selector">
-            <div 
-              v-for="item in energyTypeList" 
-              :key="item.energyTypeId"
-              class="energy-card"
-              :class="{ active: meterForm.energyTypeId === item.energyTypeId }"
-              @click="selectEnergyType(item)"
-            >
-              <svg-icon :icon-class="getEnergyIcon(item.name)" class="energy-icon"></svg-icon>
-              <div class="energy-name">{{ item.name }}</div>
-            </div>
+            <el-select v-model="meterForm.energyTypeId" placeholder="请选择能源类型" filterable clearable>
+              <el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
+            </el-select>
           </div>
         </el-form-item>
 
         <!-- 设备编号 -->
-        <el-form-item label="设备编号" prop="meterCode">
+        <el-form-item label="设备名称" prop="meterCode">
           <el-input 
             v-model="meterForm.meterCode" 
-            placeholder="请输入设备编号（如 W-001）" 
-            :disabled="isEditMode"
+            placeholder="请输入设备名称" 
             maxlength="50"
           />
-          <div class="form-hint">选择能源类型后前缀会自动填入</div>
         </el-form-item>
 
         <!-- 基本信息 -->
@@ -184,7 +174,7 @@
 </template>
 
 <script>
-import { listMeter, getMeter, addMeter, updateMeter, delMeter, downloadMeterTemplate, importMeters } from "@/api/ems/meter";
+import { listMeter, addMeter, updateMeter, delMeter, downloadMeterTemplate, importMeters } from "@/api/ems/meter";
 import { listEnergyType } from "@/api/ems/energyType";
 import { listWarehouse } from '@/api/wms/warehouse'
 import { fetchEnergyLinkMatrix, addEnergyLink } from '@/api/ems/energyLink'
@@ -228,10 +218,8 @@ export default {
       isEditMode: false,
       meterForm: {},
       meterRules: {
-        meterCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
+        meterCode: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
         energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }],
-        model: [{ required: true, message: '型号不能为空', trigger: 'blur' }],
-        manufacturer: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
       }
     };
   },
diff --git a/klp-ui/src/views/ems/table/index.vue b/klp-ui/src/views/ems/table/index.vue
new file mode 100644
index 00000000..7324774c
--- /dev/null
+++ b/klp-ui/src/views/ems/table/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="ems-table-container">
+    <div class="left-panel">
+      <h3>能源类型</h3>
+      <el-tree v-loading="leftLoading" :data="energyTypes" node-key="energyTypeId" @node-click="handleEnergyTypeSelect" :props="treeProps" />
+    </div>
+
+    <div class="right-panel" v-loading="rightLoading">
+      <div v-if="!selectedEnergyType" class="empty-state">
+        <el-empty description="请选择能源类型" />
+      </div>
+
+      <div v-else-if="!meters.length" class="empty-state">
+        <el-empty description="该能源类型下暂无设备，请先添加设备">
+          <el-button type="primary" @click="handleAddMeter">添加设备</el-button>
+        </el-empty>
+      </div>
+
+      <div v-else>
+        <!-- 增加日期筛选，默认选中当前月份，用户可以切换月份 -->
+        <div style="margin-bottom: 16px; display: flex; align-items: center;">
+          <el-date-picker
+            v-model="selectedMonth"
+            type="month"
+            placeholder="选择月份"
+            format="yyyy-MM"
+            value-format="yyyy-MM"
+            @change="handleMonthChange"
+            style="width: 150px;"
+          />
+
+          <el-button style="margin-left: 10px;" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
+        </div>
+        
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column prop="date" label="日期" width="120" />
+          <el-table-column v-for="meter in meters" :key="meter.meterId" :prop="`meter_${meter.meterId}`"
+            :label="meter.meterCode">
+            <template slot-scope="scope">
+              <input v-model="scope.row[`meter_${meter.meterId}`]" class="nob"
+                @change="(e) => handleCellChange(scope.row, meter.meterId, e)" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listEnergyType } from "@/api/ems/energyType";
+import { listMeter } from "@/api/ems/meter";
+import { listEnergyRecord, updateEnergyRecord, addEnergyRecord } from "@/api/ems/energyRecord";
+import dayjs from "dayjs";
+
+export default {
+  name: "EnergyTable",
+  data() {
+    // 初始化当前月份
+    const currentMonth = dayjs().format("YYYY-MM");
+
+    return {
+      energyTypes: [],
+      selectedEnergyType: null,
+      meters: [],
+      tableData: [],
+      treeProps: {
+        children: "children",
+        label: "name"
+      },
+      leftLoading: false,
+      rightLoading: false,
+      selectedMonth: currentMonth,
+      originalData: [], // 用于存储原始数据
+    };
+  },
+  mounted() {
+    this.loadEnergyTypes();
+  },
+  methods: {
+    // 加载能源类型列表
+    async loadEnergyTypes() {
+      this.leftLoading = true;
+      const res = await listEnergyType({ pageSize: 999 });
+      this.energyTypes = res.rows || [];
+      this.leftLoading = false;
+    },
+
+    // 刷新数据
+    async handleRefresh() {
+      if (this.selectedEnergyType) {
+        this.rightLoading = true;
+        await this.loadEnergyRecords();
+        this.rightLoading = false;
+      }
+    },
+
+    // 处理能源类型选择
+    async handleEnergyTypeSelect(data) {
+      this.selectedEnergyType = data.energyTypeId;
+      this.rightLoading = true;
+      await this.loadMeters();
+      await this.loadEnergyRecords();
+      this.rightLoading = false;
+    },
+
+    // 处理月份变化
+    async handleMonthChange() {
+      if (this.selectedEnergyType) {
+        this.rightLoading = true;
+        await this.loadEnergyRecords();
+        this.rightLoading = false;
+      }
+    },
+
+    // 加载设备列表
+    async loadMeters() {
+      const res = await listMeter({ energyTypeId: this.selectedEnergyType });
+      this.meters = res.rows || [];
+    },
+
+    // 加载能源记录
+    async loadEnergyRecords() {
+      // 使用 dayjs 获取指定月份的第一天和最后一天
+      const startDate = dayjs(this.selectedMonth).startOf('month').format('YYYY-MM-DD') + ' 00:00:00';
+      const endDate = dayjs(this.selectedMonth).endOf('month').format('YYYY-MM-DD') + ' 23:59:59';
+      
+      const res = await listEnergyRecord({ 
+        energyTypeId: this.selectedEnergyType, 
+        recordStartDate: startDate, 
+        recordEndDate: endDate
+      });
+      // 存储原始数据
+      this.originalData = res.rows || [];
+      this.processTableData(res.rows || []);
+    },
+
+    // 处理表格数据
+    processTableData(records) {
+      // 按日期分组
+      const dateMap = new Map();
+
+      records.forEach(record => {
+        if (!dateMap.has(record.recordDate)) {
+          dateMap.set(record.recordDate, { 
+            date: record.recordDate,
+            // 存储能源记录ID映射
+            energyRecordIds: {} 
+          });
+        }
+        dateMap.get(record.recordDate)[`meter_${record.meterId}`] = record.consumption;
+        dateMap.get(record.recordDate).energyRecordIds[`meter_${record.meterId}`] = record.energyRecordId;
+      });
+
+      // 生成当月的所有日期
+      const monthDates = this.generateMonthDates(this.selectedMonth);
+      
+      // 为每个日期创建表格行
+      this.tableData = monthDates.map(date => {
+        const row = {
+          date: date,
+          energyRecordIds: {}
+        };
+        
+        // 为每个表计添加默认值
+        this.meters.forEach(meter => {
+          if (dateMap.has(date)) {
+            row[`meter_${meter.meterId}`] = dateMap.get(date)[`meter_${meter.meterId}`] || 0;
+            row.energyRecordIds[`meter_${meter.meterId}`] = dateMap.get(date).energyRecordIds?.[`meter_${meter.meterId}`] || null;
+          } else {
+            row[`meter_${meter.meterId}`] = 0;
+            row.energyRecordIds[`meter_${meter.meterId}`] = null;
+          }
+        });
+        
+        return row;
+      });
+      
+      // 按日期升序排序，从1日到30日
+      this.tableData.sort((a, b) => {
+        return new Date(a.date) - new Date(b.date);
+      });
+    },
+    
+    // 生成当月的所有日期
+    generateMonthDates(month) {
+      const dates = [];
+      const start = dayjs(month).startOf('month');
+      const end = dayjs(month).endOf('month');
+      
+      let current = start;
+      while (current.isBefore(end) || current.isSame(end, 'day')) {
+        dates.push(current.format('YYYY-MM-DD'));
+        current = current.add(1, 'day');
+      }
+      
+      return dates;
+    },
+
+    // 初始化空记录
+    initEmptyRecord() {
+      const today = new Date().toISOString().split('T')[0];
+      const emptyRecord = { 
+        date: today,
+        energyRecordIds: {} 
+      };
+
+      this.meters.forEach(meter => {
+        emptyRecord[`meter_${meter.meterId}`] = 0;
+        emptyRecord.energyRecordIds[`meter_${meter.meterId}`] = null;
+      });
+
+      this.tableData.push(emptyRecord);
+    },
+
+    // 添加空记录
+    addEmptyRecord() {
+      const today = new Date().toISOString().split('T')[0];
+      const emptyRecord = { 
+        date: today,
+        energyRecordIds: {} 
+      };
+
+      this.meters.forEach(meter => {
+        emptyRecord[`meter_${meter.meterId}`] = '';
+        emptyRecord.energyRecordIds[`meter_${meter.meterId}`] = null;
+      });
+
+      this.tableData.unshift(emptyRecord);
+    },
+
+    // 处理单元格变化
+    async handleCellChange(row, meterId) {
+      // 查找是否存在日期和表计ID都对应的记录
+      const existingRecord = this.tableData.find(r => r.date === row.date && r.energyRecordIds?.[`meter_${meterId}`]);
+      const value = row[`meter_${meterId}`];
+      const energyRecordId = existingRecord?.energyRecordIds?.[`meter_${meterId}`] || null;
+
+      // 构建记录对象，匹配后端实体类
+      const record = {
+        energyRecordId: energyRecordId,
+        meterId: meterId,
+        energyId: this.selectedEnergyType,
+        consumption: value,
+        recordDate: row.date
+      };
+
+      try {
+        if (energyRecordId) {
+          // 存在记录ID，调用修改接口
+          await updateEnergyRecord(record);
+        } else {
+          // 不存在记录ID，调用新增接口
+          const { data: newRecordId } = await addEnergyRecord(record);
+          this.originalData.push({
+            ...record,
+            energyRecordId: newRecordId
+          });
+          // 重新整理原始数据
+          this.processTableData(this.originalData);
+          // 将新的ID存储，用于后续修改
+          // this.tableData.push({
+          //   ...record,
+          //   energyRecordId: newRecordId
+          // });
+        }
+        this.$message.success('保存成功');
+      } catch (error) {
+        console.error('保存失败:', error);
+        this.$message.error('保存失败');
+        // 恢复原值
+        this.loadEnergyRecords();
+      }
+    },
+
+    // 处理添加设备点击
+    handleAddMeter() {
+      this.$router.push({ path: '/ems/meter/manage' });
+    },
+  }
+};
+</script>
+
+<style scoped>
+.ems-table-container {
+  display: flex;
+  height: 100%;
+}
+
+.left-panel {
+  width: 200px;
+  border-right: 1px solid #e6e6e6;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.right-panel {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.nob {
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  line-height: 23px;
+}
+
+.nob:focus {
+  border: 1px dotted black;
+}
+</style>
\ No newline at end of file