l3能源成本分摊（部分完成留存）
This commit is contained in:
344
klp-ui/src/views/ems/config/energyLink.vue
Normal file
344
klp-ui/src/views/ems/config/energyLink.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="energy-link-page">
|
||||
<!-- 查询条件 -->
|
||||
<el-card class="search-card">
|
||||
<el-form :model="queryParams" label-width="120px" size="small">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="能源类型:">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择能源类型" clearable @change="handleQuery">
|
||||
<el-option v-for="item in energyTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="库区:">
|
||||
<el-select v-model="queryParams.warehouseId" placeholder="请选择库区" clearable @change="handleQuery">
|
||||
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="状态:">
|
||||
<el-select v-model="queryParams.isEnabled" placeholder="请选择状态" clearable @change="handleQuery">
|
||||
<el-option label="启用" :value="1"></el-option>
|
||||
<el-option label="禁用" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
||||
<el-button type="success" icon="el-icon-plus" size="small" @click="openAddDialog">新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<el-row :gutter="20" class="statistics-row">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总映射数</div>
|
||||
<div class="stat-value">{{ statistics.totalLinks }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">库区数</div>
|
||||
<div class="stat-value">{{ statistics.totalWarehouses }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">仪表数</div>
|
||||
<div class="stat-value">{{ statistics.totalMeters }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">能源类型数</div>
|
||||
<div class="stat-value">{{ statistics.totalEnergyTypes }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 映射列表 -->
|
||||
<el-card class="list-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源-库区映射列表</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="linkList" stripe border>
|
||||
<el-table-column prop="linkId" label="映射ID" width="100"></el-table-column>
|
||||
<el-table-column prop="energyTypeName" label="能源类型" width="100"></el-table-column>
|
||||
<el-table-column prop="meterCode" label="仪表编号" width="150"></el-table-column>
|
||||
<el-table-column prop="warehouseName" label="逻辑库区" width="150"></el-table-column>
|
||||
<el-table-column prop="allocationMode" label="分摊方式" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.allocationMode === 'count'" type="success">按数量</el-tag>
|
||||
<el-tag v-else-if="scope.row.allocationMode === 'weight'" type="warning">按重量</el-tag>
|
||||
<el-tag v-else type="info">按重量×时间</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weightRatio" label="权重比例" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.weightRatio, 4) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isEnabled" label="状态" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.isEnabled === 1" type="success">启用</el-tag>
|
||||
<el-tag v-else type="danger">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="mini" @click="deleteLink(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
style="margin-top: 20px; text-align: right;"
|
||||
></el-pagination>
|
||||
</el-card>
|
||||
|
||||
<!-- 编辑对话框 -->
|
||||
<el-dialog :title="editDialogTitle" :visible.sync="editDialogVisible" width="600px" @close="closeEditDialog">
|
||||
<el-form :model="editForm" label-width="120px" size="small" ref="editFormRef">
|
||||
<el-form-item label="能源类型:" prop="energyTypeId">
|
||||
<el-select v-model="editForm.energyTypeId" placeholder="请选择能源类型">
|
||||
<el-option v-for="item in energyTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区:" prop="warehouseId">
|
||||
<el-select v-model="editForm.warehouseId" placeholder="请选择库区">
|
||||
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仪表:" prop="meterId">
|
||||
<el-select v-model="editForm.meterId" placeholder="请选择仪表">
|
||||
<el-option v-for="item in meterList" :key="item.id" :label="item.meterCode" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分摊方式:" prop="allocationMode">
|
||||
<el-select v-model="editForm.allocationMode" placeholder="请选择分摊方式">
|
||||
<el-option label="按数量" value="count"></el-option>
|
||||
<el-option label="按重量" value="weight"></el-option>
|
||||
<el-option label="按重量×时间" value="weight_time"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="权重比例:" prop="weightRatio">
|
||||
<el-input-number v-model="editForm.weightRatio" :min="0" :max="1" :step="0.01" :precision="4"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="isEnabled">
|
||||
<el-radio-group v-model="editForm.isEnabled">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeEditDialog">取消</el-button>
|
||||
<el-button type="primary" @click="saveLink">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEnergyLink } from '@/api/ems/energyAllocation'
|
||||
|
||||
export default {
|
||||
name: 'EnergyLink',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
queryParams: {
|
||||
energyTypeId: null,
|
||||
warehouseId: null,
|
||||
isEnabled: null,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
linkList: [],
|
||||
energyTypeList: [
|
||||
{ id: 1, name: '电' },
|
||||
{ id: 2, name: '水' },
|
||||
{ id: 3, name: '气' }
|
||||
],
|
||||
warehouseList: [],
|
||||
meterList: [],
|
||||
statistics: {
|
||||
totalLinks: 0,
|
||||
totalWarehouses: 0,
|
||||
totalMeters: 0,
|
||||
totalEnergyTypes: 0
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editDialogTitle: '新增映射',
|
||||
editForm: {
|
||||
linkId: null,
|
||||
energyTypeId: null,
|
||||
warehouseId: null,
|
||||
meterId: null,
|
||||
allocationMode: 'weight_time',
|
||||
weightRatio: 1,
|
||||
isEnabled: 1
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadWarehouseList();
|
||||
this.loadMeterList();
|
||||
this.handleQuery();
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.loading = true;
|
||||
listEnergyLink(this.queryParams).then(response => {
|
||||
this.linkList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
}).catch(() => {
|
||||
this.$message.error('加载映射列表失败');
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
energyTypeId: null,
|
||||
warehouseId: null,
|
||||
isEnabled: null,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
this.handleQuery();
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.queryParams.pageNum = page;
|
||||
this.handleQuery();
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.queryParams.pageSize = size;
|
||||
this.handleQuery();
|
||||
},
|
||||
loadWarehouseList() {
|
||||
// TODO: 从后端加载库区列表
|
||||
this.warehouseList = [
|
||||
{ id: 1, name: '库区A' },
|
||||
{ id: 2, name: '库区B' },
|
||||
{ id: 3, name: '库区C' }
|
||||
];
|
||||
},
|
||||
loadMeterList() {
|
||||
// TODO: 从后端加载仪表列表
|
||||
this.meterList = [
|
||||
{ id: 1, meterCode: 'METER-001' },
|
||||
{ id: 2, meterCode: 'METER-002' },
|
||||
{ id: 3, meterCode: 'METER-003' }
|
||||
];
|
||||
},
|
||||
openAddDialog() {
|
||||
this.editDialogTitle = '新增映射';
|
||||
this.editForm = {
|
||||
linkId: null,
|
||||
energyTypeId: null,
|
||||
warehouseId: null,
|
||||
meterId: null,
|
||||
allocationMode: 'weight_time',
|
||||
weightRatio: 1,
|
||||
isEnabled: 1
|
||||
};
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
openEditDialog(row) {
|
||||
this.editDialogTitle = '编辑映射';
|
||||
this.editForm = { ...row };
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
closeEditDialog() {
|
||||
this.editDialogVisible = false;
|
||||
this.$refs.editFormRef && this.$refs.editFormRef.clearValidate();
|
||||
},
|
||||
saveLink() {
|
||||
// TODO: 调用后端API保存映射
|
||||
this.$message.success('保存成功');
|
||||
this.closeEditDialog();
|
||||
this.handleQuery();
|
||||
},
|
||||
deleteLink(row) {
|
||||
this.$confirm('确定删除该映射吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// TODO: 调用后端API删除映射
|
||||
this.$message.success('删除成功');
|
||||
this.handleQuery();
|
||||
}).catch(() => {});
|
||||
},
|
||||
formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined) return '0.00';
|
||||
return parseFloat(value).toFixed(decimals);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.energy-link-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statistics-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card .stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-card .stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user