feat(ems): 新增能源记录管理功能并优化设备管理界面
- 添加能源记录API及相关功能 - 重构设备管理界面，简化表单字段 - 实现能源消耗表格视图，支持按月筛选和编辑 - 移除设备管理中的冗余字段和绑定库区显示 - 调整设备状态选择器为按钮样式
This commit is contained in:
44
klp-ui/src/api/ems/energyRecord.js
Normal file
44
klp-ui/src/api/ems/energyRecord.js
Normal file
@@ -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'
|
||||
})
|
||||
}
|
||||
@@ -5,7 +5,8 @@ export function listCoilWarehouseOperationLog(query) {
|
||||
return request({
|
||||
url: '/wms/coilWarehouseOperationLog/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
params: query,
|
||||
timeout: 100000,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -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' }],
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
323
klp-ui/src/views/ems/table/index.vue
Normal file
323
klp-ui/src/views/ems/table/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user