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>
|
||||
630
klp-ui/src/views/ems/cost/coilCost.vue
Normal file
630
klp-ui/src/views/ems/cost/coilCost.vue
Normal file
@@ -0,0 +1,630 @@
|
||||
<template>
|
||||
<div class="coil-cost-list">
|
||||
<!-- 统计信息 -->
|
||||
<div class="statistics-section">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">钢卷总数</div>
|
||||
<div class="stat-value">{{ statistics.totalCoils }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总消耗量</div>
|
||||
<div class="stat-value">{{ formatNumber(statistics.totalConsumption, 2) }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总成本</div>
|
||||
<div class="stat-value cost-highlight">¥ {{ formatNumber(statistics.totalCost, 2) }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">平均单位成本</div>
|
||||
<div class="stat-value">¥ {{ formatNumber(statistics.avgUnitCost, 2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 检索条件 -->
|
||||
<div class="search-section">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-input
|
||||
v-model="queryParams.enterCoilNo"
|
||||
placeholder="入场钢卷号"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-input
|
||||
v-model="queryParams.currentCoilNo"
|
||||
placeholder="当前钢卷号"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
placeholder="选择逻辑库区"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="warehouse in warehouseList"
|
||||
:key="warehouse.warehouseId"
|
||||
:label="warehouse.warehouseName"
|
||||
:value="warehouse.warehouseId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
|
||||
<el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 钢卷成本列表 -->
|
||||
<el-table :data="coilCostList" stripe border v-loading="loading" :default-sort="{ prop: 'costAmount', order: 'descending' }">
|
||||
<el-table-column prop="currentCoilNo" label="当前卷号" min-width="120"></el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场卷号" min-width="120"></el-table-column>
|
||||
<el-table-column prop="warehouseName" label="逻辑库区" min-width="120"></el-table-column>
|
||||
<el-table-column label="生产时间" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(null, null, scope.row.scanTime) }} - {{ formatTime(null, null, scope.row.completeTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="productionDuration" label="生产时长(分钟)" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.productionDuration / 60, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="consumptionQty" label="综合消耗(单位)" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.consumptionQty, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="costAmount" label="综合成本(¥)" min-width="120" align="right" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">{{ formatNumber(scope.row.costAmount, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位成本(¥/h)" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.costAmount / (scope.row.productionDuration / 60), 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="showDetail(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[50, 100, 200, 500]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog title="钢卷成本详情" :visible.sync="detailDialogVisible" width="90%" @close="closeDetail">
|
||||
<div v-if="selectedCoil" class="detail-content">
|
||||
<!-- 基本信息 -->
|
||||
<div class="section">
|
||||
<h4 class="section-title">基本信息</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">当前卷号:</span>
|
||||
<span class="value">{{ selectedCoil.currentCoilNo }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">入场卷号:</span>
|
||||
<span class="value">{{ selectedCoil.enterCoilNo }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">逻辑库区:</span>
|
||||
<span class="value">{{ selectedCoil.warehouseName }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">生产时长:</span>
|
||||
<span class="value">{{ formatNumber(selectedCoil.productionDuration / 60, 2) }} 小时</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">开始时间:</span>
|
||||
<span class="value">{{ formatTime(null, null, selectedCoil.scanTime) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">结束时间:</span>
|
||||
<span class="value">{{ formatTime(null, null, selectedCoil.completeTime) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">综合消耗:</span>
|
||||
<span class="value">{{ formatNumber(selectedCoil.consumptionQty, 2) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="info-item">
|
||||
<span class="label">综合成本:</span>
|
||||
<span class="value highlight">¥ {{ formatNumber(selectedCoil.costAmount, 2) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 成本汇总 -->
|
||||
<div class="section">
|
||||
<h4 class="section-title">成本汇总</h4>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<div class="info-item">
|
||||
<span class="label">综合消耗量:</span>
|
||||
<span class="value">{{ formatNumber(selectedCoil.consumptionQty, 2) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<div class="info-item">
|
||||
<span class="label">能源费率:</span>
|
||||
<span class="value">{{ selectedCoil.energyRate ? ('¥ ' + formatNumber(selectedCoil.energyRate, 4)) : '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<div class="info-item">
|
||||
<span class="label">综合成本:</span>
|
||||
<span class="value highlight">¥ {{ formatNumber(selectedCoil.costAmount, 2) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; padding: 12px; background-color: #f5f7fa; border-radius: 4px;">
|
||||
<p style="margin: 0; font-size: 12px; color: #606266;">
|
||||
注：综合成本为该钢卷在生产时间内所有设备产生的能源成本总和（包括电、水、气等所有能源类型）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 相关设备 -->
|
||||
<div class="section" v-if="selectedCoil.relatedMeters && selectedCoil.relatedMeters.length > 0">
|
||||
<h4 class="section-title">相关设备</h4>
|
||||
<el-table :data="selectedCoil.relatedMeters" stripe border size="small">
|
||||
<el-table-column prop="meterCode" label="设备编号" min-width="120"></el-table-column>
|
||||
<el-table-column prop="energyTypeName" label="能源类型" min-width="100"></el-table-column>
|
||||
<el-table-column prop="model" label="型号" min-width="100"></el-table-column>
|
||||
<el-table-column prop="manufacturer" label="制造商" min-width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 0 ? 'success' : 'info'">
|
||||
{{ scope.row.status === 0 ? '在用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEnergyCoilDaily, listPendingActionCoilCost } from '@/api/ems/energyAllocation'
|
||||
|
||||
export default {
|
||||
name: 'CoilCost',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
detailDialogVisible: false,
|
||||
selectedCoil: null,
|
||||
coilCostList: [],
|
||||
total: 0,
|
||||
warehouseList: [],
|
||||
statistics: {
|
||||
totalCoils: 0,
|
||||
totalConsumption: 0,
|
||||
totalCost: 0,
|
||||
avgUnitCost: 0
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
enterCoilNo: '',
|
||||
currentCoilNo: '',
|
||||
warehouseId: null
|
||||
},
|
||||
allCoilCostList: [], // 保存所有数据用于统计
|
||||
dataSource: 'pending' // 'pending' 或 'daily'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadWarehouseList();
|
||||
this.loadCoilCostList();
|
||||
},
|
||||
methods: {
|
||||
loadWarehouseList() {
|
||||
// TODO: 从后端加载库区列表，这里暂时使用空数组
|
||||
// 实际应该调用 API 获取库区列表
|
||||
this.warehouseList = [];
|
||||
},
|
||||
loadCoilCostList() {
|
||||
this.loading = true;
|
||||
// 优先加载待操作钢卷的成本
|
||||
this.fetchPendingActionCoilCost();
|
||||
},
|
||||
fetchPendingActionCoilCost() {
|
||||
// 先尝试加载待操作钢卷的成本
|
||||
listPendingActionCoilCost({ pageNum: 1, pageSize: 10000 }).then(response => {
|
||||
this.allCoilCostList = response.rows || [];
|
||||
this.dataSource = 'pending';
|
||||
this.applyFiltersAndPagination();
|
||||
}).catch(() => {
|
||||
// 如果待操作接口失败，则加载日常分摊数据
|
||||
this.fetchDailyCoilCostData();
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
fetchDailyCoilCostData() {
|
||||
this.loading = true;
|
||||
listEnergyCoilDaily({ pageNum: 1, pageSize: 10000 }).then(response => {
|
||||
this.allCoilCostList = response.rows || [];
|
||||
this.dataSource = 'daily';
|
||||
this.applyFiltersAndPagination();
|
||||
}).catch(() => {
|
||||
this.$message.error('加载钢卷能源成本失败');
|
||||
this.allCoilCostList = [];
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
applyFiltersAndPagination() {
|
||||
// 应用过滤条件
|
||||
let filteredList = this.allCoilCostList;
|
||||
|
||||
if (this.queryParams.enterCoilNo) {
|
||||
filteredList = filteredList.filter(item =>
|
||||
item.enterCoilNo && item.enterCoilNo.includes(this.queryParams.enterCoilNo)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.queryParams.currentCoilNo) {
|
||||
filteredList = filteredList.filter(item =>
|
||||
item.currentCoilNo && item.currentCoilNo.includes(this.queryParams.currentCoilNo)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.queryParams.warehouseId) {
|
||||
filteredList = filteredList.filter(item =>
|
||||
item.warehouseId === this.queryParams.warehouseId
|
||||
);
|
||||
}
|
||||
|
||||
// 计算统计数据
|
||||
this.calculateStatistics(filteredList);
|
||||
|
||||
// 分页处理
|
||||
this.total = filteredList.length;
|
||||
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
|
||||
const end = start + this.queryParams.pageSize;
|
||||
this.coilCostList = filteredList.slice(start, end);
|
||||
},
|
||||
calculateStatistics(list) {
|
||||
this.statistics.totalCoils = list.length;
|
||||
this.statistics.totalConsumption = list.reduce((sum, item) => sum + (item.consumptionQty || 0), 0);
|
||||
this.statistics.totalCost = list.reduce((sum, item) => sum + (item.costAmount || 0), 0);
|
||||
|
||||
// 计算平均单位成本（总成本 / 总时长小时数）
|
||||
const totalHours = list.reduce((sum, item) => sum + (item.productionDuration || 0) / 60, 0);
|
||||
this.statistics.avgUnitCost = totalHours > 0 ? this.statistics.totalCost / totalHours : 0;
|
||||
},
|
||||
handleSearch() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.applyFiltersAndPagination();
|
||||
},
|
||||
handleReset() {
|
||||
this.queryParams.enterCoilNo = '';
|
||||
this.queryParams.currentCoilNo = '';
|
||||
this.queryParams.warehouseId = null;
|
||||
this.queryParams.pageNum = 1;
|
||||
this.applyFiltersAndPagination();
|
||||
},
|
||||
handlePageChange(pageNum) {
|
||||
this.queryParams.pageNum = pageNum;
|
||||
this.applyFiltersAndPagination();
|
||||
},
|
||||
handlePageSizeChange(pageSize) {
|
||||
this.queryParams.pageSize = pageSize;
|
||||
this.queryParams.pageNum = 1;
|
||||
this.applyFiltersAndPagination();
|
||||
},
|
||||
loadMockData() {
|
||||
setTimeout(() => {
|
||||
this.coilCostList = [
|
||||
{
|
||||
coilCode: 'COIL-20231201-001',
|
||||
logicWarehouseName: '库区A',
|
||||
startTime: '2023-12-01 08:00:00',
|
||||
endTime: '2023-12-01 16:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1250.50,
|
||||
energyCosts: [
|
||||
{
|
||||
energyTypeId: 1,
|
||||
energyTypeName: '电',
|
||||
consumption: 850,
|
||||
consumptionUnit: 'kWh',
|
||||
rate: 1.2,
|
||||
cost: 1020,
|
||||
percentage: 81.55
|
||||
},
|
||||
{
|
||||
energyTypeId: 2,
|
||||
energyTypeName: '水',
|
||||
consumption: 120,
|
||||
consumptionUnit: '吨',
|
||||
rate: 1.5,
|
||||
cost: 180,
|
||||
percentage: 14.39
|
||||
},
|
||||
{
|
||||
energyTypeId: 3,
|
||||
energyTypeName: '气',
|
||||
consumption: 45,
|
||||
consumptionUnit: '立方米',
|
||||
rate: 3.2,
|
||||
cost: 50.5,
|
||||
percentage: 4.04
|
||||
}
|
||||
],
|
||||
relatedMeters: [
|
||||
{
|
||||
meterCode: 'METER-001',
|
||||
energyTypeName: '电',
|
||||
model: 'DL-2000',
|
||||
manufacturer: '施耐德',
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
meterCode: 'METER-002',
|
||||
energyTypeName: '水',
|
||||
model: 'WM-500',
|
||||
manufacturer: '西门子',
|
||||
status: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
coilCode: 'COIL-20231201-002',
|
||||
logicWarehouseName: '库区B',
|
||||
startTime: '2023-12-01 09:00:00',
|
||||
endTime: '2023-12-01 17:00:00',
|
||||
duration: 8.0,
|
||||
totalCost: 980.30,
|
||||
energyCosts: [
|
||||
{
|
||||
energyTypeId: 1,
|
||||
energyTypeName: '电',
|
||||
consumption: 700,
|
||||
consumptionUnit: 'kWh',
|
||||
rate: 1.2,
|
||||
cost: 840,
|
||||
percentage: 85.75
|
||||
},
|
||||
{
|
||||
energyTypeId: 2,
|
||||
energyTypeName: '水',
|
||||
consumption: 80,
|
||||
consumptionUnit: '吨',
|
||||
rate: 1.5,
|
||||
cost: 120,
|
||||
percentage: 12.24
|
||||
},
|
||||
{
|
||||
energyTypeId: 3,
|
||||
energyTypeName: '气',
|
||||
consumption: 20,
|
||||
consumptionUnit: '立方米',
|
||||
rate: 3.2,
|
||||
cost: 20.3,
|
||||
percentage: 2.07
|
||||
}
|
||||
],
|
||||
relatedMeters: [
|
||||
{
|
||||
meterCode: 'METER-003',
|
||||
energyTypeName: '电',
|
||||
model: 'DL-2000',
|
||||
manufacturer: '施耐德',
|
||||
status: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
coilCode: 'COIL-20231201-003',
|
||||
logicWarehouseName: '库区C',
|
||||
startTime: '2023-12-01 10:00:00',
|
||||
endTime: '2023-12-01 18:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1520.80,
|
||||
energyCosts: [
|
||||
{
|
||||
energyTypeId: 1,
|
||||
energyTypeName: '电',
|
||||
consumption: 950,
|
||||
consumptionUnit: 'kWh',
|
||||
rate: 1.2,
|
||||
cost: 1140,
|
||||
percentage: 74.93
|
||||
},
|
||||
{
|
||||
energyTypeId: 2,
|
||||
energyTypeName: '水',
|
||||
consumption: 150,
|
||||
consumptionUnit: '吨',
|
||||
rate: 1.5,
|
||||
cost: 225,
|
||||
percentage: 14.79
|
||||
},
|
||||
{
|
||||
energyTypeId: 3,
|
||||
energyTypeName: '气',
|
||||
consumption: 80,
|
||||
consumptionUnit: '立方米',
|
||||
rate: 3.2,
|
||||
cost: 155.8,
|
||||
percentage: 10.24
|
||||
}
|
||||
],
|
||||
relatedMeters: [
|
||||
{
|
||||
meterCode: 'METER-004',
|
||||
energyTypeName: '电',
|
||||
model: 'DL-3000',
|
||||
manufacturer: '施耐德',
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
meterCode: 'METER-005',
|
||||
energyTypeName: '水',
|
||||
model: 'WM-600',
|
||||
manufacturer: '西门子',
|
||||
status: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}, 500);
|
||||
},
|
||||
showDetail(coil) {
|
||||
this.selectedCoil = coil;
|
||||
this.detailDialogVisible = true;
|
||||
},
|
||||
closeDetail() {
|
||||
this.selectedCoil = null;
|
||||
this.detailDialogVisible = false;
|
||||
},
|
||||
formatTime(row, column, cellValue) {
|
||||
if (!cellValue) return '-';
|
||||
return new Date(cellValue).toLocaleString('zh-CN');
|
||||
},
|
||||
formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined) return '0.00';
|
||||
return parseFloat(value).toFixed(decimals);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coil-cost-list {
|
||||
padding: 20px;
|
||||
background: #f6f7fb;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
.statistics-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
|
||||
&.cost-highlight {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
::v-deep .el-input,
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
|
||||
&.highlight {
|
||||
color: #f56c6c;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
572
klp-ui/src/views/ems/cost/energyCostSummary.vue
Normal file
572
klp-ui/src/views/ems/cost/energyCostSummary.vue
Normal file
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<div class="energy-cost-summary-page">
|
||||
<!-- 查询条件 -->
|
||||
<el-card class="search-card">
|
||||
<el-form :model="queryParams" label-width="100px" size="small">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="统计维度:">
|
||||
<el-select v-model="queryParams.dimension" placeholder="请选择维度" @change="handleQuery">
|
||||
<el-option label="按钢卷" value="coil"></el-option>
|
||||
<el-option label="按库区" value="warehouse"></el-option>
|
||||
<el-option label="按时间" value="time"></el-option>
|
||||
<el-option label="按能源" value="energy"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="开始日期:">
|
||||
<el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="结束日期:">
|
||||
<el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
|
||||
</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-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 按钢卷统计 -->
|
||||
<div v-if="queryParams.dimension === 'coil'">
|
||||
<el-card class="summary-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">钢卷能源成本汇总</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="coilSummaryList" stripe border max-height="600">
|
||||
<el-table-column prop="coilCode" label="钢卷编号" width="150"></el-table-column>
|
||||
<el-table-column prop="logicWarehouseName" label="逻辑库区" width="120"></el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.startTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="完成时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.endTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="生产时长" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.duration, 1) }}h
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalCost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.totalCost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitCost" label="单位成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.unitCost, 2) }}/h
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="viewCoilDetail(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 按库区统计 -->
|
||||
<div v-if="queryParams.dimension === 'warehouse'">
|
||||
<el-card class="summary-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">库区能源成本汇总</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="warehouseSummaryList" stripe border max-height="600">
|
||||
<el-table-column prop="logicWarehouseName" label="逻辑库区" width="150"></el-table-column>
|
||||
<el-table-column prop="coilCount" label="生产钢卷数" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.coilCount }} 卷
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalDuration" label="总生产时长" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.totalDuration, 1) }}h
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalCost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.totalCost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="averageUnitCost" label="平均单位成本" width="140">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.averageUnitCost, 2) }}/卷
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="viewWarehouseDetail(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 按时间统计 -->
|
||||
<div v-if="queryParams.dimension === 'time'">
|
||||
<el-card class="chart-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源成本趋势</span>
|
||||
</div>
|
||||
<div id="costTrendChart" style="height: 400px;"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="summary-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">按日期统计</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="timeSummaryList" stripe border max-height="600">
|
||||
<el-table-column prop="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column prop="coilCount" label="生产钢卷数" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.coilCount }} 卷
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalDuration" label="总生产时长" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.totalDuration, 1) }}h
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalCost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.totalCost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="averageUnitCost" label="平均单位成本" width="140">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.averageUnitCost, 2) }}/卷
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 按能源统计 -->
|
||||
<div v-if="queryParams.dimension === 'energy'">
|
||||
<el-card class="chart-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源成本占比</span>
|
||||
</div>
|
||||
<div id="energyCostPieChart" style="height: 400px;"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="summary-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源成本明细</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="energySummaryList" stripe border max-height="600">
|
||||
<el-table-column prop="energyTypeName" label="能源类型" width="150"></el-table-column>
|
||||
<el-table-column prop="totalConsumption" label="总消耗量" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.totalConsumption, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="consumptionUnit" label="单位" width="100"></el-table-column>
|
||||
<el-table-column prop="totalCost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.totalCost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="percentage" label="成本占比" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.percentage, 2) }}%
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="averageRate" label="平均费率" width="120">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.averageRate, 4) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { listEnergyCoilDaily } from '@/api/ems/energyAllocation'
|
||||
|
||||
export default {
|
||||
name: 'EnergyCostSummary',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
dimension: 'coil',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
coilSummaryList: [],
|
||||
warehouseSummaryList: [],
|
||||
timeSummaryList: [],
|
||||
energySummaryList: [],
|
||||
chartInstances: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.handleQuery();
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.loading = true;
|
||||
// 调用后端API获取钢卷能源成本数据
|
||||
listEnergyCoilDaily(this.queryParams).then(response => {
|
||||
const data = response.rows || [];
|
||||
// 根据选择的维度处理数据
|
||||
if (this.queryParams.dimension === 'coil') {
|
||||
this.coilSummaryList = data;
|
||||
} else {
|
||||
this.processDataByDimension(data);
|
||||
}
|
||||
this.initCharts();
|
||||
}).catch(() => {
|
||||
this.$message.error('加载能源成本数据失败');
|
||||
// 加载模拟数据作为备用
|
||||
this.loadMockData();
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
processDataByDimension(data) {
|
||||
if (this.queryParams.dimension === 'warehouse') {
|
||||
// 按库区聚合
|
||||
const warehouseMap = {};
|
||||
data.forEach(item => {
|
||||
const key = item.warehouseId;
|
||||
if (!warehouseMap[key]) {
|
||||
warehouseMap[key] = {
|
||||
warehouseId: item.warehouseId,
|
||||
logicWarehouseName: item.logicWarehouseName,
|
||||
coilCount: 0,
|
||||
totalDuration: 0,
|
||||
totalCost: 0
|
||||
};
|
||||
}
|
||||
warehouseMap[key].coilCount++;
|
||||
warehouseMap[key].totalDuration += (item.allocationBasisDays || 0);
|
||||
warehouseMap[key].totalCost += (item.costAmount || 0);
|
||||
});
|
||||
this.warehouseSummaryList = Object.values(warehouseMap).map(w => ({
|
||||
...w,
|
||||
averageUnitCost: w.coilCount > 0 ? (w.totalCost / w.coilCount).toFixed(2) : 0
|
||||
}));
|
||||
} else if (this.queryParams.dimension === 'time') {
|
||||
// 按时间聚合
|
||||
const timeMap = {};
|
||||
data.forEach(item => {
|
||||
const date = item.calcDate;
|
||||
if (!timeMap[date]) {
|
||||
timeMap[date] = {
|
||||
date: date,
|
||||
coilCount: 0,
|
||||
totalDuration: 0,
|
||||
totalCost: 0
|
||||
};
|
||||
}
|
||||
timeMap[date].coilCount++;
|
||||
timeMap[date].totalDuration += (item.allocationBasisDays || 0);
|
||||
timeMap[date].totalCost += (item.costAmount || 0);
|
||||
});
|
||||
this.timeSummaryList = Object.values(timeMap).map(t => ({
|
||||
...t,
|
||||
averageUnitCost: t.coilCount > 0 ? (t.totalCost / t.coilCount).toFixed(2) : 0
|
||||
}));
|
||||
} else if (this.queryParams.dimension === 'energy') {
|
||||
// 按能源类型聚合
|
||||
const energyMap = {};
|
||||
data.forEach(item => {
|
||||
const key = item.energyTypeId;
|
||||
if (!energyMap[key]) {
|
||||
energyMap[key] = {
|
||||
energyTypeId: item.energyTypeId,
|
||||
energyTypeName: item.energyTypeName,
|
||||
totalConsumption: 0,
|
||||
totalCost: 0
|
||||
};
|
||||
}
|
||||
energyMap[key].totalConsumption += (item.consumptionQty || 0);
|
||||
energyMap[key].totalCost += (item.costAmount || 0);
|
||||
});
|
||||
const totalCost = Object.values(energyMap).reduce((sum, e) => sum + e.totalCost, 0);
|
||||
this.energySummaryList = Object.values(energyMap).map(e => ({
|
||||
...e,
|
||||
percentage: totalCost > 0 ? ((e.totalCost / totalCost) * 100).toFixed(2) : 0,
|
||||
averageRate: e.totalConsumption > 0 ? (e.totalCost / e.totalConsumption).toFixed(4) : 0
|
||||
}));
|
||||
}
|
||||
},
|
||||
loadMockData() {
|
||||
setTimeout(() => {
|
||||
this.coilSummaryList = [
|
||||
{
|
||||
coilCode: 'COIL-20231201-001',
|
||||
logicWarehouseName: '库区A',
|
||||
startTime: '2023-12-01 08:00:00',
|
||||
endTime: '2023-12-01 16:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1250.50,
|
||||
unitCost: 147.12
|
||||
},
|
||||
{
|
||||
coilCode: 'COIL-20231201-002',
|
||||
logicWarehouseName: '库区A',
|
||||
startTime: '2023-12-01 17:00:00',
|
||||
endTime: '2023-12-02 01:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1248.75,
|
||||
unitCost: 146.88
|
||||
}
|
||||
];
|
||||
|
||||
this.warehouseSummaryList = [
|
||||
{
|
||||
logicWarehouseName: '库区A',
|
||||
coilCount: 45,
|
||||
totalDuration: 382.5,
|
||||
totalCost: 56325.50,
|
||||
averageUnitCost: 1251.67
|
||||
},
|
||||
{
|
||||
logicWarehouseName: '库区B',
|
||||
coilCount: 38,
|
||||
totalDuration: 323.0,
|
||||
totalCost: 47850.25,
|
||||
averageUnitCost: 1259.22
|
||||
}
|
||||
];
|
||||
|
||||
this.timeSummaryList = [
|
||||
{
|
||||
date: '2023-12-01',
|
||||
coilCount: 12,
|
||||
totalDuration: 102.0,
|
||||
totalCost: 15125.50,
|
||||
averageUnitCost: 1260.46
|
||||
},
|
||||
{
|
||||
date: '2023-12-02',
|
||||
coilCount: 15,
|
||||
totalDuration: 127.5,
|
||||
totalCost: 18950.75,
|
||||
averageUnitCost: 1263.38
|
||||
},
|
||||
{
|
||||
date: '2023-12-03',
|
||||
coilCount: 18,
|
||||
totalDuration: 153.0,
|
||||
totalCost: 22750.25,
|
||||
averageUnitCost: 1263.91
|
||||
}
|
||||
];
|
||||
|
||||
this.energySummaryList = [
|
||||
{
|
||||
energyTypeId: 1,
|
||||
energyTypeName: '电',
|
||||
totalConsumption: 32500,
|
||||
consumptionUnit: 'kWh',
|
||||
totalCost: 45875,
|
||||
percentage: 81.45,
|
||||
averageRate: 1.4115
|
||||
},
|
||||
{
|
||||
energyTypeId: 2,
|
||||
energyTypeName: '水',
|
||||
totalConsumption: 4200,
|
||||
consumptionUnit: '吨',
|
||||
totalCost: 8400,
|
||||
percentage: 14.91,
|
||||
averageRate: 2.0
|
||||
},
|
||||
{
|
||||
energyTypeId: 3,
|
||||
energyTypeName: '气',
|
||||
totalConsumption: 1550,
|
||||
consumptionUnit: '立方米',
|
||||
totalCost: 2050.5,
|
||||
percentage: 3.64,
|
||||
averageRate: 1.3229
|
||||
}
|
||||
];
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
dimension: 'coil',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
};
|
||||
this.handleQuery();
|
||||
},
|
||||
initCharts() {
|
||||
if (this.queryParams.dimension === 'time') {
|
||||
this.initCostTrendChart();
|
||||
} else if (this.queryParams.dimension === 'energy') {
|
||||
this.initEnergyCostPieChart();
|
||||
}
|
||||
},
|
||||
initCostTrendChart() {
|
||||
const chartDom = document.getElementById('costTrendChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
const instance = echarts.init(chartDom);
|
||||
this.chartInstances.trend = instance;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['总成本', '平均单位成本']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.timeSummaryList.map(item => item.date)
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '总成本',
|
||||
axisLabel: {
|
||||
formatter: '¥{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '平均单位成本',
|
||||
axisLabel: {
|
||||
formatter: '¥{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '总成本',
|
||||
type: 'bar',
|
||||
data: this.timeSummaryList.map(item => item.totalCost),
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '平均单位成本',
|
||||
type: 'line',
|
||||
data: this.timeSummaryList.map(item => item.averageUnitCost),
|
||||
yAxisIndex: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
instance.setOption(option);
|
||||
},
|
||||
initEnergyCostPieChart() {
|
||||
const chartDom = document.getElementById('energyCostPieChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
const instance = echarts.init(chartDom);
|
||||
this.chartInstances.energy = instance;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: ¥{c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '能源成本',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.energySummaryList.map(item => ({
|
||||
value: item.totalCost,
|
||||
name: item.energyTypeName
|
||||
})),
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
instance.setOption(option);
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '-';
|
||||
return new Date(time).toLocaleString('zh-CN');
|
||||
},
|
||||
formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined) return '0.00';
|
||||
return parseFloat(value).toFixed(decimals);
|
||||
},
|
||||
viewCoilDetail(row) {
|
||||
this.$router.push({
|
||||
path: '/ems/cost/coilCost',
|
||||
query: { coilId: row.coilId }
|
||||
});
|
||||
},
|
||||
viewWarehouseDetail(row) {
|
||||
this.$router.push({
|
||||
path: '/ems/cost/warehouseProduction',
|
||||
query: { logicWarehouseId: row.logicWarehouseId }
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
Object.values(this.chartInstances).forEach(instance => {
|
||||
instance?.dispose();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.energy-cost-summary-page {
|
||||
padding: 20px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-card,
|
||||
.summary-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
367
klp-ui/src/views/ems/cost/index.vue
Normal file
367
klp-ui/src/views/ems/cost/index.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="energy-cost-page">
|
||||
<section class="filter-card">
|
||||
<el-form :inline="true" :model="filters" size="small">
|
||||
<el-form-item label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="filters.energyTypeId" placeholder="全部" clearable @change="refreshAll">
|
||||
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区">
|
||||
<el-select v-model="filters.warehouseId" placeholder="全部" clearable filterable @change="refreshAll">
|
||||
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="refreshAll">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<section class="overview-grid">
|
||||
<div class="metal-card" v-for="item in overviewCards" :key="item.key">
|
||||
<div class="card-label">{{ item.label }}</div>
|
||||
<div class="card-value">{{ item.value }}</div>
|
||||
<div class="card-sub">{{ item.sub }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-grid">
|
||||
<div class="metal-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">能源成本汇总</div>
|
||||
<el-radio-group v-model="groupBy" size="small" @change="loadSummary">
|
||||
<el-radio-button label="energyType">能源</el-radio-button>
|
||||
<el-radio-button label="warehouse">库区</el-radio-button>
|
||||
<el-radio-button label="meter">仪表</el-radio-button>
|
||||
<el-radio-button label="task">任务</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-table
|
||||
:data="summaryList"
|
||||
height="300px"
|
||||
stripe
|
||||
v-loading="summaryLoading"
|
||||
>
|
||||
<el-table-column label="分组" prop="groupName" min-width="120" />
|
||||
<el-table-column label="能耗 (kWh)" prop="totalConsumption" min-width="120">
|
||||
<template slot-scope="scope">{{ formatNumber(scope.row.totalConsumption) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="费用 (元)" prop="totalCost" min-width="120">
|
||||
<template slot-scope="scope">￥{{ formatNumber(scope.row.totalCost) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="钢卷数" prop="coilCount" min-width="100" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="metal-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">能源明细</div>
|
||||
<div class="panel-actions">
|
||||
<el-input v-model="detailFilters.currentCoilNo" placeholder="当前卷号" size="small" clearable @keyup.enter.native="loadDetail" />
|
||||
<el-button size="small" type="primary" @click="loadDetail">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="detailList"
|
||||
height="300px"
|
||||
stripe
|
||||
v-loading="detailLoading"
|
||||
>
|
||||
<el-table-column label="日期" prop="calcDate" min-width="110" />
|
||||
<el-table-column label="当前卷号" prop="currentCoilNo" min-width="140" />
|
||||
<el-table-column label="能源类型" prop="energyTypeId" min-width="100" />
|
||||
<el-table-column label="能耗" prop="consumptionQty" min-width="100">
|
||||
<template slot-scope="scope">{{ formatNumber(scope.row.consumptionQty) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="费用 (元)" prop="costAmount" min-width="110">
|
||||
<template slot-scope="scope">￥{{ formatNumber(scope.row.costAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分摊系数" prop="allocationFactor" min-width="110">
|
||||
<template slot-scope="scope">{{ toPercent(scope.row.allocationFactor) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="detailTotal > 0"
|
||||
:total="detailTotal"
|
||||
:page.sync="detailFilters.pageNum"
|
||||
:limit.sync="detailFilters.pageSize"
|
||||
@pagination="loadDetail"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchEnergyOverview, fetchEnergySummary, fetchEnergyDetail } from '@/api/ems/energyCostReport'
|
||||
import { listEnergyType } from '@/api/ems/energyType'
|
||||
import { listWarehouse } from '@/api/wms/warehouse'
|
||||
|
||||
export default {
|
||||
name: 'EnergyCostDashboard',
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
energyTypeId: undefined,
|
||||
warehouseId: undefined
|
||||
},
|
||||
dateRange: [],
|
||||
energyTypeList: [],
|
||||
warehouseList: [],
|
||||
overview: {
|
||||
coilCount: 0,
|
||||
totalConsumption: 0,
|
||||
totalCost: 0
|
||||
},
|
||||
summaryList: [],
|
||||
summaryLoading: false,
|
||||
groupBy: 'energyType',
|
||||
detailList: [],
|
||||
detailTotal: 0,
|
||||
detailLoading: false,
|
||||
detailFilters: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
currentCoilNo: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
overviewCards() {
|
||||
return [
|
||||
{
|
||||
key: 'coil',
|
||||
label: '钢卷数量',
|
||||
value: this.formatNumber(this.overview.coilCount),
|
||||
sub: 'Coils involved'
|
||||
},
|
||||
{
|
||||
key: 'consumption',
|
||||
label: '总能耗 (kWh)',
|
||||
value: this.formatNumber(this.overview.totalConsumption),
|
||||
sub: 'Total consumption'
|
||||
},
|
||||
{
|
||||
key: 'cost',
|
||||
label: '总费用 (元)',
|
||||
value: '￥' + this.formatNumber(this.overview.totalCost),
|
||||
sub: 'Total cost'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initMeta()
|
||||
},
|
||||
methods: {
|
||||
initMeta() {
|
||||
listEnergyType({ pageNum: 1, pageSize: 999 }).then(res => {
|
||||
this.energyTypeList = res.rows || []
|
||||
})
|
||||
listWarehouse().then(res => {
|
||||
this.warehouseList = res.data || []
|
||||
})
|
||||
this.refreshAll()
|
||||
},
|
||||
handleDateChange(range) {
|
||||
if (range && range.length === 2) {
|
||||
this.filters.startDate = range[0]
|
||||
this.filters.endDate = range[1]
|
||||
} else {
|
||||
this.filters.startDate = ''
|
||||
this.filters.endDate = ''
|
||||
}
|
||||
this.refreshAll()
|
||||
},
|
||||
resetFilter() {
|
||||
this.dateRange = []
|
||||
this.filters = {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
energyTypeId: undefined,
|
||||
warehouseId: undefined
|
||||
}
|
||||
this.detailFilters.currentCoilNo = ''
|
||||
this.refreshAll()
|
||||
},
|
||||
refreshAll() {
|
||||
this.loadOverview()
|
||||
this.loadSummary()
|
||||
this.detailFilters.pageNum = 1
|
||||
this.loadDetail()
|
||||
},
|
||||
loadOverview() {
|
||||
fetchEnergyOverview(this.mergeFilters()).then(res => {
|
||||
this.overview = res.data || { coilCount: 0, totalConsumption: 0, totalCost: 0 }
|
||||
})
|
||||
},
|
||||
loadSummary() {
|
||||
this.summaryLoading = true
|
||||
fetchEnergySummary({ ...this.mergeFilters(), groupBy: this.groupBy }).then(res => {
|
||||
this.summaryList = res.data || []
|
||||
}).finally(() => {
|
||||
this.summaryLoading = false
|
||||
})
|
||||
},
|
||||
loadDetail() {
|
||||
this.detailLoading = true
|
||||
const params = {
|
||||
...this.mergeFilters(),
|
||||
...this.detailFilters
|
||||
}
|
||||
fetchEnergyDetail(params).then(res => {
|
||||
this.detailList = res.rows || []
|
||||
this.detailTotal = res.total || 0
|
||||
}).finally(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
mergeFilters() {
|
||||
const { startDate, endDate, energyTypeId, warehouseId } = this.filters
|
||||
return {
|
||||
startDate,
|
||||
endDate,
|
||||
energyTypeId,
|
||||
warehouseId
|
||||
}
|
||||
},
|
||||
formatNumber(val) {
|
||||
if (val === undefined || val === null) return '-'
|
||||
const num = Number(val)
|
||||
if (Number.isNaN(num)) return val
|
||||
return num.toLocaleString(undefined, { maximumFractionDigits: 2 })
|
||||
},
|
||||
toPercent(val) {
|
||||
if (!val) return '0%'
|
||||
return (Number(val) * 100).toFixed(2) + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.energy-cost-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #0f131a;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background: linear-gradient(135deg, #1f242b, #181c23);
|
||||
border: 1px solid #2f353f;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metal-card {
|
||||
background: linear-gradient(160deg, #2b3038, #1c1f27);
|
||||
border: 1px solid #3c434f;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
color: #d9dee9;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 14px;
|
||||
color: #8f96a3;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
margin-top: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #f6f7fb;
|
||||
}
|
||||
|
||||
.card-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #707684;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metal-panel {
|
||||
background: #1b1f27;
|
||||
border: 1px solid #303641;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 16px;
|
||||
color: #f0f3ff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
background: transparent;
|
||||
color: #dfe3ee;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 10px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
540
klp-ui/src/views/ems/cost/warehouseProduction.vue
Normal file
540
klp-ui/src/views/ems/cost/warehouseProduction.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<div class="warehouse-production-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.logicWarehouseId" 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-date-picker v-model="queryParams.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="结束日期:">
|
||||
<el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
|
||||
</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-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.coilCount }}</div>
|
||||
<div class="stat-unit">卷</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">{{ formatNumber(statistics.totalDuration, 1) }}</div>
|
||||
<div class="stat-unit">小时</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">¥ {{ formatNumber(statistics.totalCost, 2) }}</div>
|
||||
<div class="stat-unit">元</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card highlight">
|
||||
<div class="stat-label">单位成本</div>
|
||||
<div class="stat-value">¥ {{ formatNumber(statistics.unitCost, 2) }}</div>
|
||||
<div class="stat-unit">元/卷</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 能源成本分解 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-card class="chart-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源成本占比</span>
|
||||
</div>
|
||||
<div id="energyCostPieChart" style="height: 350px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-card class="chart-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源消耗占比</span>
|
||||
</div>
|
||||
<div id="energyConsumptionPieChart" style="height: 350px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 能源成本明细表 -->
|
||||
<el-card class="detail-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源成本明细</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="energyBreakdown" stripe border>
|
||||
<el-table-column prop="energyTypeName" label="能源类型" width="150"></el-table-column>
|
||||
<el-table-column prop="consumption" label="总消耗量" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.consumption, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="consumptionUnit" label="单位" width="100"></el-table-column>
|
||||
<el-table-column prop="cost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.cost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="percentage" label="成本占比" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.percentage, 2) }}%
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="averageUnitCost" label="单位成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.averageUnitCost, 4) }}/单位
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 钢卷列表 -->
|
||||
<el-card class="coil-list-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">该库区生产的钢卷列表</span>
|
||||
<span class="count">(共 {{ coilList.length }} 卷)</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="coilList" stripe border max-height="500">
|
||||
<el-table-column prop="coilCode" label="钢卷编号" width="150"></el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.startTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="完成时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.endTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="duration" label="生产时长" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.duration, 1) }}h
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalCost" label="能源成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">¥ {{ formatNumber(scope.row.totalCost, 2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="viewCoilDetail(scope.row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { listEnergyCoilDaily, listWarehouse } from '@/api/ems/energyAllocation'
|
||||
|
||||
export default {
|
||||
name: 'WarehouseProduction',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
logicWarehouseId: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
},
|
||||
warehouseList: [],
|
||||
statistics: {
|
||||
coilCount: 0,
|
||||
totalDuration: 0,
|
||||
totalConsumption: 0,
|
||||
totalCost: 0,
|
||||
unitCost: 0
|
||||
},
|
||||
energyBreakdown: [],
|
||||
coilList: [],
|
||||
chartInstances: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadWarehouseList();
|
||||
this.handleQuery();
|
||||
},
|
||||
methods: {
|
||||
loadWarehouseList() {
|
||||
// 调用后端API获取库区列表
|
||||
listWarehouse().then(response => {
|
||||
this.warehouseList = response.data || [];
|
||||
if (this.warehouseList.length === 0) {
|
||||
this.$message.warning('暂无库区数据');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error('加载库区列表失败');
|
||||
// 加载模拟数据作为备用
|
||||
this.warehouseList = [
|
||||
{ id: 1, name: '库区A' },
|
||||
{ id: 2, name: '库区B' },
|
||||
{ id: 3, name: '库区C' }
|
||||
];
|
||||
});
|
||||
},
|
||||
handleQuery() {
|
||||
this.loading = true;
|
||||
// 调用后端API获取库区生产统计
|
||||
listEnergyCoilDaily(this.queryParams).then(response => {
|
||||
const data = response.rows || [];
|
||||
this.processWarehouseData(data);
|
||||
this.initCharts();
|
||||
}).catch(() => {
|
||||
this.$message.error('加载库区生产统计失败');
|
||||
// 加载模拟数据作为备用
|
||||
this.loadMockData();
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
processWarehouseData(data) {
|
||||
if (!data || data.length === 0) {
|
||||
this.statistics = {
|
||||
coilCount: 0,
|
||||
totalDuration: 0,
|
||||
totalConsumption: 0,
|
||||
totalCost: 0,
|
||||
unitCost: 0
|
||||
};
|
||||
this.energyBreakdown = [];
|
||||
this.coilList = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 统计基本信息
|
||||
const coilCount = new Set(data.map(d => d.coilId)).size;
|
||||
const totalDuration = data.reduce((sum, d) => sum + (d.allocationBasisDays || 0), 0);
|
||||
const totalCost = data.reduce((sum, d) => sum + (d.costAmount || 0), 0);
|
||||
const totalConsumption = data.reduce((sum, d) => sum + (d.consumptionQty || 0), 0);
|
||||
|
||||
this.statistics = {
|
||||
coilCount: coilCount,
|
||||
totalDuration: totalDuration.toFixed(2),
|
||||
totalConsumption: totalConsumption.toFixed(2),
|
||||
totalCost: totalCost.toFixed(2),
|
||||
unitCost: coilCount > 0 ? (totalCost / coilCount).toFixed(2) : 0
|
||||
};
|
||||
|
||||
// 按能源类型聚合
|
||||
const energyMap = {};
|
||||
data.forEach(item => {
|
||||
const key = item.energyTypeId;
|
||||
if (!energyMap[key]) {
|
||||
energyMap[key] = {
|
||||
energyTypeId: item.energyTypeId,
|
||||
energyTypeName: item.energyTypeName,
|
||||
consumption: 0,
|
||||
consumptionUnit: item.consumptionUnit || '单位',
|
||||
cost: 0
|
||||
};
|
||||
}
|
||||
energyMap[key].consumption += (item.consumptionQty || 0);
|
||||
energyMap[key].cost += (item.costAmount || 0);
|
||||
});
|
||||
|
||||
this.energyBreakdown = Object.values(energyMap).map(e => ({
|
||||
...e,
|
||||
percentage: totalCost > 0 ? ((e.cost / totalCost) * 100).toFixed(2) : 0,
|
||||
averageUnitCost: e.consumption > 0 ? (e.cost / e.consumption).toFixed(4) : 0
|
||||
}));
|
||||
|
||||
// 按钢卷聚合
|
||||
const coilMap = {};
|
||||
data.forEach(item => {
|
||||
const key = item.coilId;
|
||||
if (!coilMap[key]) {
|
||||
coilMap[key] = {
|
||||
coilId: item.coilId,
|
||||
coilCode: item.currentCoilNo || item.enterCoilNo,
|
||||
startTime: item.calcDate,
|
||||
endTime: item.calcDate,
|
||||
duration: item.allocationBasisDays || 0,
|
||||
totalCost: 0
|
||||
};
|
||||
}
|
||||
coilMap[key].totalCost += (item.costAmount || 0);
|
||||
});
|
||||
|
||||
this.coilList = Object.values(coilMap);
|
||||
},
|
||||
loadMockData() {
|
||||
setTimeout(() => {
|
||||
this.statistics = {
|
||||
coilCount: 45,
|
||||
totalDuration: 382.5,
|
||||
totalConsumption: 38250,
|
||||
totalCost: 56325.50,
|
||||
unitCost: 1251.67
|
||||
};
|
||||
|
||||
this.energyBreakdown = [
|
||||
{
|
||||
energyTypeId: 1,
|
||||
energyTypeName: '电',
|
||||
consumption: 32500,
|
||||
consumptionUnit: 'kWh',
|
||||
cost: 45875,
|
||||
percentage: 81.45,
|
||||
averageUnitCost: 1.4115
|
||||
},
|
||||
{
|
||||
energyTypeId: 2,
|
||||
energyTypeName: '水',
|
||||
consumption: 4200,
|
||||
consumptionUnit: '吨',
|
||||
cost: 8400,
|
||||
percentage: 14.91,
|
||||
averageUnitCost: 2.0
|
||||
},
|
||||
{
|
||||
energyTypeId: 3,
|
||||
energyTypeName: '气',
|
||||
consumption: 1550,
|
||||
consumptionUnit: '立方米',
|
||||
cost: 2050.5,
|
||||
percentage: 3.64,
|
||||
averageUnitCost: 1.3229
|
||||
}
|
||||
];
|
||||
|
||||
this.coilList = [
|
||||
{
|
||||
coilCode: 'COIL-20231201-001',
|
||||
startTime: '2023-12-01 08:00:00',
|
||||
endTime: '2023-12-01 16:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1250.50
|
||||
},
|
||||
{
|
||||
coilCode: 'COIL-20231201-002',
|
||||
startTime: '2023-12-01 17:00:00',
|
||||
endTime: '2023-12-02 01:30:00',
|
||||
duration: 8.5,
|
||||
totalCost: 1248.75
|
||||
},
|
||||
{
|
||||
coilCode: 'COIL-20231202-001',
|
||||
startTime: '2023-12-02 08:00:00',
|
||||
endTime: '2023-12-02 16:15:00',
|
||||
duration: 8.25,
|
||||
totalCost: 1205.30
|
||||
}
|
||||
];
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
logicWarehouseId: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
};
|
||||
this.handleQuery();
|
||||
},
|
||||
initCharts() {
|
||||
this.initCostPieChart();
|
||||
this.initConsumptionPieChart();
|
||||
},
|
||||
initCostPieChart() {
|
||||
const chartDom = document.getElementById('energyCostPieChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
const instance = echarts.init(chartDom);
|
||||
this.chartInstances.cost = instance;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: ¥{c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '能源成本',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.energyBreakdown.map(item => ({
|
||||
value: item.cost,
|
||||
name: item.energyTypeName
|
||||
})),
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
instance.setOption(option);
|
||||
},
|
||||
initConsumptionPieChart() {
|
||||
const chartDom = document.getElementById('energyConsumptionPieChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
const instance = echarts.init(chartDom);
|
||||
this.chartInstances.consumption = instance;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '能源消耗',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.energyBreakdown.map(item => ({
|
||||
value: item.consumption,
|
||||
name: item.energyTypeName
|
||||
})),
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
instance.setOption(option);
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '-';
|
||||
return new Date(time).toLocaleString('zh-CN');
|
||||
},
|
||||
formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined) return '0.00';
|
||||
return parseFloat(value).toFixed(decimals);
|
||||
},
|
||||
viewCoilDetail(row) {
|
||||
this.$router.push({
|
||||
path: '/ems/cost/coilCost',
|
||||
query: { coilId: row.coilId }
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
Object.values(this.chartInstances).forEach(instance => {
|
||||
instance?.dispose();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warehouse-production-page {
|
||||
padding: 20px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statistics-row {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card,
|
||||
.detail-card,
|
||||
.coil-list-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,365 +1,14 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<!-- <el-form-item label="关联计量设备" prop="meterId">
|
||||
<el-input
|
||||
v-model="queryParams.meterId"
|
||||
placeholder="请输入关联计量设备"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="起始读数" prop="startReading">
|
||||
<el-input
|
||||
v-model="queryParams.startReading"
|
||||
placeholder="请输入起始读数"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束读数" prop="endReading">
|
||||
<el-input
|
||||
v-model="queryParams.endReading"
|
||||
placeholder="请输入结束读数"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量" prop="consumption">
|
||||
<el-input
|
||||
v-model="queryParams.consumption"
|
||||
placeholder="请输入消耗量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始时间" prop="startTime">
|
||||
<el-date-picker clearable
|
||||
v-model="queryParams.startTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择起始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker clearable
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人" prop="recordedBy">
|
||||
<el-input
|
||||
v-model="queryParams.recordedBy"
|
||||
placeholder="请输入记录人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="energyConsumptionList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="" align="center" prop="energyConsumptionId" v-if="true"/>
|
||||
<el-table-column label="计量设备" align="center" prop="meterId" />
|
||||
<el-table-column label="起始读数" align="center" prop="startReading" />
|
||||
<el-table-column label="结束读数" align="center" prop="endReading" />
|
||||
<el-table-column label="消耗量" align="center" prop="consumption" />
|
||||
<el-table-column label="起始时间" align="center" prop="startTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="记录人" align="center" prop="recordedBy" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改能耗记录对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="计量设备" prop="meterId">
|
||||
<el-input v-model="form.meterId" placeholder="请输入关联计量设备" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始读数" prop="startReading">
|
||||
<el-input v-model="form.startReading" placeholder="请输入起始读数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束读数" prop="endReading">
|
||||
<el-input v-model="form.endReading" placeholder="请输入结束读数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量" prop="consumption">
|
||||
<el-input v-model="form.consumption" placeholder="请输入消耗量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始时间" prop="startTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择起始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人" prop="recordedBy">
|
||||
<el-input v-model="form.recordedBy" placeholder="请输入记录人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<record />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEnergyConsumption, getEnergyConsumption, delEnergyConsumption, addEnergyConsumption, updateEnergyConsumption } from "@/api/ems/energyConsumption";
|
||||
import Record from './record.vue'
|
||||
|
||||
export default {
|
||||
name: "EnergyConsumption",
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 能耗记录表格数据
|
||||
energyConsumptionList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
meterId: undefined,
|
||||
startReading: undefined,
|
||||
endReading: undefined,
|
||||
consumption: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
recordedBy: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询能耗记录列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEnergyConsumption(this.queryParams).then(response => {
|
||||
this.energyConsumptionList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
energyConsumptionId: undefined,
|
||||
meterId: undefined,
|
||||
startReading: undefined,
|
||||
endReading: undefined,
|
||||
consumption: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
recordedBy: undefined,
|
||||
createBy: undefined,
|
||||
updateBy: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.energyConsumptionId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加能耗记录";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const energyConsumptionId = row.energyConsumptionId || this.ids
|
||||
getEnergyConsumption(energyConsumptionId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改能耗记录";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.energyConsumptionId != null) {
|
||||
updateEnergyConsumption(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEnergyConsumption(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const energyConsumptionIds = row.energyConsumptionId || this.ids;
|
||||
this.$modal.confirm('是否确认删除能耗记录编号为"' + energyConsumptionIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEnergyConsumption(energyConsumptionIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('ems/energyConsumption/export', {
|
||||
...this.queryParams
|
||||
}, `energyConsumption_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
name: 'EnergyData',
|
||||
components: {
|
||||
Record
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
420
klp-ui/src/views/ems/data/manage.vue
Normal file
420
klp-ui/src/views/ems/data/manage.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="energy-consumption-manage">
|
||||
<!-- 统计卡片 -->
|
||||
<el-row :gutter="20" class="statistics-row" v-loading="statsLoading">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总记录数</div>
|
||||
<div class="stat-value">{{ statistics.totalCount || 0 }}</div>
|
||||
<div class="stat-unit">条</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">{{ formatNumber(statistics.totalConsumption, 2) }}</div>
|
||||
<div class="stat-unit">{{ consumptionUnit }}</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">{{ formatNumber(statistics.avgConsumption, 2) }}</div>
|
||||
<div class="stat-unit">{{ consumptionUnit }}</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 max-value">{{ formatNumber(statistics.maxConsumption, 2) }}</div>
|
||||
<div class="stat-unit">{{ consumptionUnit }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 搜索面板 -->
|
||||
<el-collapse-transition>
|
||||
<div class="search-panel" v-show="showSearch">
|
||||
<el-form :model="queryParams" label-width="100px" 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.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="起始时间">
|
||||
<el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="queryParams.endTime" type="date" placeholder="选择结束时间" value-format="yyyy-MM-dd" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24">
|
||||
<el-form-item>
|
||||
<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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
<el-button icon="el-icon-search" @click="showSearch = !showSearch">{{ showSearch ? '隐藏' : '显示' }}搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table :data="tableList" stripe border v-loading="loading" style="width: 100%" max-height="600">
|
||||
<el-table-column prop="meterCode" label="设备编号" min-width="150" />
|
||||
<el-table-column prop="energyTypeName" label="能源类型" min-width="120" />
|
||||
<el-table-column prop="startReading" label="起始读数" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.startReading, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endReading" label="结束读数" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.endReading, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="consumption" label="消耗量" min-width="120" align="right">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.consumption, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="起始时间" min-width="160" :formatter="formatDate" />
|
||||
<el-table-column prop="endTime" label="结束时间" min-width="160" :formatter="formatDate" />
|
||||
<el-table-column prop="recordedByName" label="记录人" min-width="100" />
|
||||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="queryParams.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
style="text-align: right; margin-top: 20px"
|
||||
/>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog :title="isEditMode ? '编辑能耗记录' : '新增能耗记录'" :visible.sync="dialogVisible" width="600px" @close="resetForm">
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
||||
<el-form-item label="计量设备" prop="meterId">
|
||||
<el-select v-model="form.meterId" placeholder="请选择计量设备" filterable>
|
||||
<el-option v-for="item in meterList" :key="item.meterId" :label="`${item.meterCode} (${item.energyTypeName})`" :value="item.meterId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始读数" prop="startReading">
|
||||
<el-input-number v-model="form.startReading" :precision="2" :step="0.01" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束读数" prop="endReading">
|
||||
<el-input-number v-model="form.endReading" :precision="2" :step="0.01" />
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量" prop="consumption">
|
||||
<el-input-number v-model="form.consumption" :precision="2" :step="0.01" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人" prop="recordedBy">
|
||||
<el-input v-model="form.recordedByName" placeholder="记录人名称（自动填充）" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始时间" prop="startTime">
|
||||
<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择起始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入备注信息" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEnergyConsumption, getEnergyConsumption, addEnergyConsumption, updateEnergyConsumption, deleteEnergyConsumption, getStatistics } from '@/api/ems/energyConsumption'
|
||||
|
||||
export default {
|
||||
name: 'EnergyConsumptionManage',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
statsLoading: false,
|
||||
showSearch: true,
|
||||
dialogVisible: false,
|
||||
isEditMode: false,
|
||||
tableList: [],
|
||||
total: 0,
|
||||
energyTypeList: [],
|
||||
meterList: [],
|
||||
statistics: {
|
||||
totalCount: 0,
|
||||
totalConsumption: 0,
|
||||
avgConsumption: 0,
|
||||
maxConsumption: 0,
|
||||
minConsumption: 0
|
||||
},
|
||||
consumptionUnit: '单位',
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 30,
|
||||
energyTypeId: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined
|
||||
},
|
||||
form: {
|
||||
energyConsumptionId: undefined,
|
||||
meterId: undefined,
|
||||
startReading: 0,
|
||||
endReading: 0,
|
||||
consumption: 0,
|
||||
recordedBy: undefined,
|
||||
recordedByName: '',
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
meterId: [{ required: true, message: '计量设备不能为空', trigger: 'change' }],
|
||||
startReading: [{ required: true, message: '起始读数不能为空', trigger: 'blur' }],
|
||||
endReading: [{ required: true, message: '结束读数不能为空', trigger: 'blur' }],
|
||||
startTime: [{ required: true, message: '起始时间不能为空', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getEnergyTypeList()
|
||||
this.getMeterList()
|
||||
this.getList()
|
||||
this.getStatistics()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
listEnergyConsumption(this.queryParams).then(response => {
|
||||
this.tableList = response.rows
|
||||
this.total = response.total
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
getEnergyTypeList() {
|
||||
// TODO: 调用后端API获取能源类型列表
|
||||
// 临时使用模拟数据
|
||||
this.energyTypeList = [
|
||||
{ energyTypeId: 1, name: '电', unit: 'kWh' },
|
||||
{ energyTypeId: 2, name: '水', unit: 'm³' },
|
||||
{ energyTypeId: 3, name: '气', unit: 'm³' }
|
||||
]
|
||||
// 初始化单位为第一个能源类型的单位
|
||||
if (this.energyTypeList.length > 0) {
|
||||
this.consumptionUnit = this.energyTypeList[0].unit
|
||||
}
|
||||
},
|
||||
getMeterList() {
|
||||
// TODO: 调用后端API获取计量设备列表
|
||||
// 临时使用模拟数据
|
||||
this.meterList = [
|
||||
{ meterId: 1, meterCode: 'METER001', energyTypeName: '电' },
|
||||
{ meterId: 2, meterCode: 'METER002', energyTypeName: '水' },
|
||||
{ meterId: 3, meterCode: 'METER003', energyTypeName: '气' }
|
||||
]
|
||||
},
|
||||
getStatistics() {
|
||||
this.statsLoading = true
|
||||
getStatistics(this.queryParams).then(response => {
|
||||
this.statistics = response.data || {}
|
||||
}).catch(() => {
|
||||
this.$message.error('加载统计信息失败')
|
||||
}).finally(() => {
|
||||
this.statsLoading = false
|
||||
})
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 如果选择了能源类型，更新单位
|
||||
if (this.queryParams.energyTypeId) {
|
||||
const selectedType = this.energyTypeList.find(t => t.energyTypeId === this.queryParams.energyTypeId)
|
||||
if (selectedType) {
|
||||
this.consumptionUnit = selectedType.unit
|
||||
}
|
||||
} else {
|
||||
// 如果没有选择能源类型，使用第一个的单位
|
||||
if (this.energyTypeList.length > 0) {
|
||||
this.consumptionUnit = this.energyTypeList[0].unit
|
||||
}
|
||||
}
|
||||
this.getList()
|
||||
this.getStatistics()
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 30,
|
||||
energyTypeId: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined
|
||||
}
|
||||
this.getList()
|
||||
this.getStatistics()
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.queryParams.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
handlePageSizeChange(val) {
|
||||
this.queryParams.pageSize = val
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
handleAdd() {
|
||||
this.isEditMode = false
|
||||
this.resetForm()
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.isEditMode = true
|
||||
this.form = JSON.parse(JSON.stringify(row))
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$confirm('确定删除该记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteEnergyConsumption(row.energyConsumptionId).then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
}).catch(() => {
|
||||
this.$message.error('删除失败')
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (valid) {
|
||||
// 计算消耗量
|
||||
this.form.consumption = this.form.endReading - this.form.startReading
|
||||
|
||||
const submitFn = this.isEditMode ? updateEnergyConsumption : addEnergyConsumption
|
||||
submitFn(this.form).then(() => {
|
||||
this.$message.success(this.isEditMode ? '编辑成功' : '新增成功')
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
}).catch(() => {
|
||||
this.$message.error(this.isEditMode ? '编辑失败' : '新增失败')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.form = {
|
||||
energyConsumptionId: undefined,
|
||||
meterId: undefined,
|
||||
startReading: 0,
|
||||
endReading: 0,
|
||||
consumption: 0,
|
||||
recordedBy: undefined,
|
||||
recordedByName: '',
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
remark: ''
|
||||
}
|
||||
this.$refs.formRef && this.$refs.formRef.resetFields()
|
||||
},
|
||||
formatDate(row, column) {
|
||||
const date = row[column.property]
|
||||
return date ? new Date(date).toLocaleString() : '-'
|
||||
},
|
||||
formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined) return '0.00'
|
||||
return parseFloat(value).toFixed(decimals)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.energy-consumption-manage {
|
||||
padding: 20px;
|
||||
|
||||
.statistics-row {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.max-value {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
954
klp-ui/src/views/ems/data/record.vue
Normal file
954
klp-ui/src/views/ems/data/record.vue
Normal file
@@ -0,0 +1,954 @@
|
||||
<template>
|
||||
<div class="energy-consumption-record">
|
||||
<!-- 筛选面板 -->
|
||||
<div class="filter-panel">
|
||||
<el-form :model="filterParams" size="small" :inline="true" label-width="80px">
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="filterParams.energyTypeId" placeholder="选择能源类型" clearable @change="handleFilterChange">
|
||||
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区">
|
||||
<el-select v-model="filterParams.warehouseId" placeholder="选择库区" clearable @change="handleFilterChange">
|
||||
<el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号">
|
||||
<el-input v-model="filterParams.meterCode" placeholder="搜索设备编号" clearable @input="handleFilterChange" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 左右布局 -->
|
||||
<el-row :gutter="20" class="main-container">
|
||||
<!-- 左侧设备卡片列表 -->
|
||||
<el-col :xs="24" :sm="24" :md="12" class="device-column">
|
||||
<div v-if="allFilteredMeters.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📦</div>
|
||||
<div class="empty-text">暂无设备</div>
|
||||
</div>
|
||||
<div v-else class="device-list-wrapper">
|
||||
<el-row :gutter="12" class="device-list">
|
||||
<el-col
|
||||
v-for="meter in filteredMeters"
|
||||
:key="meter.meterId"
|
||||
:xs="24" :sm="12" :md="8"
|
||||
>
|
||||
<div
|
||||
:class="['device-card', { active: selectedMeter && selectedMeter.meterId === meter.meterId }]"
|
||||
@click="selectMeter(meter)"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="meter-code">{{ meter.meterCode }}</div>
|
||||
<el-tag size="small" type="info">{{ getEnergyName(meter.energyTypeId) }}</el-tag>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="label">型号：</span>
|
||||
<span class="value">{{ meter.model || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">制造商：</span>
|
||||
<span class="value">{{ meter.manufacturer || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">库区：</span>
|
||||
<span class="value">{{ getWarehouseName(meter) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">状态：</span>
|
||||
<el-tag :type="getStatusType(meter.status)" size="small">
|
||||
{{ getStatusText(meter.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="device-pagination"
|
||||
:current-page="pageParams.pageNum"
|
||||
:page-size="pageParams.pageSize"
|
||||
:total="allFilteredMeters.length"
|
||||
layout="prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧抄表表单 -->
|
||||
<el-col :xs="24" :sm="24" :md="12" class="form-column">
|
||||
<div v-if="selectedMeter" class="record-container">
|
||||
<!-- 费率信息卡片 -->
|
||||
<el-card class="rate-info-card" v-if="rateInfo">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="title">费率信息</span>
|
||||
</div>
|
||||
<div class="rate-content">
|
||||
<!-- 固定费率模式 -->
|
||||
<div v-if="rateInfo.usePeakValley === 0 && rateInfo.useTieredPricing === 0">
|
||||
<div class="rate-item">
|
||||
<span class="label">费率类型：</span>
|
||||
<span class="value">固定费率</span>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">当前费率：</span>
|
||||
<span class="rate-value">{{ rateInfo.rate }}</span>
|
||||
<span class="unit">{{ rateInfo.currency }}/单位</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 峰谷模式 -->
|
||||
<div v-else-if="rateInfo.usePeakValley === 1 && rateInfo.useTieredPricing === 0">
|
||||
<div class="rate-item">
|
||||
<span class="label">费率类型：</span>
|
||||
<span class="value">峰谷分时</span>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">时段费率：</span>
|
||||
<div class="period-rates">
|
||||
<span v-for="period in rateInfo.periods" :key="period.periodId" class="period-badge">
|
||||
{{ getPeriodName(period.periodType) }}: ¥{{ period.rate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">平均费率：</span>
|
||||
<span class="rate-value">¥{{ calculateAvgRate(rateInfo.periods) }}</span>
|
||||
<span class="unit">（预计费用按此计算）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 梯度模式 -->
|
||||
<div v-else-if="rateInfo.usePeakValley === 0 && rateInfo.useTieredPricing === 1">
|
||||
<div class="rate-item">
|
||||
<span class="label">费率类型：</span>
|
||||
<span class="value">梯度收费</span>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">梯度费率：</span>
|
||||
<div class="tier-rates">
|
||||
<span v-for="tier in rateInfo.tiers" :key="tier.tierId" class="tier-badge">
|
||||
第{{ tier.tierLevel }}档({{ tier.minUsage }}-{{ tier.maxUsage ? tier.maxUsage : '∞' }}): ¥{{ tier.rate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 梯度+峰谷组合模式 -->
|
||||
<div v-else-if="rateInfo.usePeakValley === 1 && rateInfo.useTieredPricing === 1">
|
||||
<div class="rate-item">
|
||||
<span class="label">费率类型：</span>
|
||||
<span class="value">梯度+峰谷组合</span>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">梯度费率：</span>
|
||||
<div class="tier-rates">
|
||||
<span v-for="tier in rateInfo.tiers" :key="tier.tierId" class="tier-badge">
|
||||
第{{ tier.tierLevel }}档({{ tier.minUsage }}-{{ tier.maxUsage ? tier.maxUsage : '∞' }}): ¥{{ tier.rate }}（峰）
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">平均费率：</span>
|
||||
<span class="rate-value">¥{{ calculateAvgRate(rateInfo.tiers) }}</span>
|
||||
<span class="unit">（预计费用按此计算）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月统计信息 -->
|
||||
<div class="rate-item" style="border-top: 1px solid #ebeef5; padding-top: 12px; margin-top: 12px;">
|
||||
<span class="label">本月累计：</span>
|
||||
<span class="rate-value">{{ rateInfo.monthlyConsumption }}</span>
|
||||
<span class="unit">{{ getEnergyUnit(selectedMeter.energyTypeId) }}</span>
|
||||
</div>
|
||||
<!-- 仅在固定费率或梯度模式下显示预估成本 -->
|
||||
<div v-if="(parseInt(rateInfo.usePeakValley) === 0 && parseInt(rateInfo.useTieredPricing) === 0) || (parseInt(rateInfo.usePeakValley) === 0 && parseInt(rateInfo.useTieredPricing) === 1)" class="rate-item">
|
||||
<span class="label">本月预估成本：</span>
|
||||
<span class="rate-value">¥{{ rateInfo.monthlyEstimatedCost }}</span>
|
||||
</div>
|
||||
<!-- 峰谷或组合模式下显示说明 -->
|
||||
<div v-else class="rate-item" style="color: #909399; font-size: 12px;">
|
||||
<span class="label">说明：</span>
|
||||
<span>峰谷模式需知道各时段消耗分布才能准确计算成本</span>
|
||||
</div>
|
||||
|
||||
<!-- 公共信息 -->
|
||||
<div class="rate-item">
|
||||
<span class="label">生效日期：</span>
|
||||
<span class="value">{{ formatDate(rateInfo.effectiveDate) }}</span>
|
||||
</div>
|
||||
<div class="rate-item">
|
||||
<span class="label">失效日期：</span>
|
||||
<span class="value">{{ formatDate(rateInfo.expiryDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 抄表表单 -->
|
||||
<el-card class="record-form-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="title">抄表记录</span>
|
||||
</div>
|
||||
<el-form :model="recordForm" :rules="recordRules" ref="recordFormRef" label-width="100px">
|
||||
<el-form-item label="起始读数" prop="startReading">
|
||||
<el-input-number
|
||||
v-model="recordForm.startReading"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
:disabled="recordForm.startReading > 0"
|
||||
@change="onStartReadingChange"
|
||||
placeholder="请输入起始读数"
|
||||
/>
|
||||
<span v-if="recordForm.startReading > 0" class="helper-text">
|
||||
自动填充自上次抄表的结束读数，不可修改
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束读数" prop="endReading">
|
||||
<el-input-number
|
||||
v-model="recordForm.endReading"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
:min="recordForm.startReading"
|
||||
@change="calculateCost"
|
||||
placeholder="请输入结束读数"
|
||||
/>
|
||||
<span v-if="recordForm.endReading === recordForm.startReading" class="helper-text">
|
||||
默认为起始读数，消耗量为 0
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗量">
|
||||
<el-input-number v-model="recordForm.consumption" :precision="2" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="本月预计费用" v-if="recordForm.consumption > 0">
|
||||
<div class="cost-display">
|
||||
<span class="cost-value">{{ recordForm.estimatedCost }}</span>
|
||||
<span class="cost-unit">元</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始时间" prop="startTime">
|
||||
<el-date-picker v-model="recordForm.startTime" type="datetime" placeholder="选择起始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker v-model="recordForm.endTime" type="datetime" placeholder="选择结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="recordForm.remark" type="textarea" rows="2" placeholder="请输入备注信息" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitRecord">提交抄表</el-button>
|
||||
<el-button @click="resetRecord">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else class="empty-placeholder">
|
||||
<div class="empty-icon">📋</div>
|
||||
<div class="empty-text">请在左侧选择设备开始抄表</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMeter } from '@/api/ems/meter'
|
||||
import { listEnergyType } from '@/api/ems/energyType'
|
||||
import { listWarehouse } from '@/api/ems/warehouse'
|
||||
import { listEnergyRate } from '@/api/ems/energyRate'
|
||||
import { addEnergyConsumption, getLastReading, getMonthlyConsumption } from '@/api/ems/energyConsumption'
|
||||
|
||||
export default {
|
||||
name: 'EnergyConsumptionRecord',
|
||||
data() {
|
||||
return {
|
||||
selectedMeter: null,
|
||||
meterList: [],
|
||||
allMeterList: [],
|
||||
energyTypeList: [],
|
||||
warehouseList: [],
|
||||
filterParams: {
|
||||
energyTypeId: undefined,
|
||||
warehouseId: undefined,
|
||||
meterCode: ''
|
||||
},
|
||||
// 分页参数
|
||||
pageParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
totalMeters: 0,
|
||||
recordForm: {
|
||||
meterId: undefined,
|
||||
startReading: 0,
|
||||
endReading: 0,
|
||||
consumption: 0,
|
||||
estimatedCost: 0,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
recordedBy: undefined,
|
||||
remark: ''
|
||||
},
|
||||
recordRules: {
|
||||
startReading: [{ required: true, message: '起始读数不能为空', trigger: 'blur' }],
|
||||
endReading: [
|
||||
{ required: true, message: '结束读数不能为空', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value < this.recordForm.startReading) {
|
||||
callback(new Error('结束读数不能小于起始读数'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
startTime: [{ required: true, message: '起始时间不能为空', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
|
||||
},
|
||||
rateInfo: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 所有过滤后的设备（不分页）
|
||||
allFilteredMeters() {
|
||||
return this.allMeterList.filter(meter => {
|
||||
// 筛选能源类型
|
||||
if (this.filterParams.energyTypeId && meter.energyTypeId !== this.filterParams.energyTypeId) {
|
||||
return false
|
||||
}
|
||||
// 筛选库区（使用后端返回的库区信息）
|
||||
if (this.filterParams.warehouseId && meter.warehouseId !== this.filterParams.warehouseId) {
|
||||
return false
|
||||
}
|
||||
// 搜索设备编号
|
||||
if (this.filterParams.meterCode && !meter.meterCode.includes(this.filterParams.meterCode)) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
},
|
||||
// 当前页的设备（分页后）
|
||||
filteredMeters() {
|
||||
const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize
|
||||
const end = start + this.pageParams.pageSize
|
||||
return this.allFilteredMeters.slice(start, end)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getMeterList()
|
||||
this.getEnergyTypeList()
|
||||
this.getWarehouseList()
|
||||
},
|
||||
methods: {
|
||||
getMeterList() {
|
||||
// 只加载第一页，避免一次性加载过多数据
|
||||
listMeter({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||
this.allMeterList = response.rows
|
||||
this.totalMeters = response.total
|
||||
this.pageParams.pageNum = 1
|
||||
})
|
||||
},
|
||||
getEnergyTypeList() {
|
||||
// 能源类型通常数量不多，可以全部加载
|
||||
listEnergyType({ pageNum: 1, pageSize: 100 }).then(response => {
|
||||
this.energyTypeList = response.rows
|
||||
})
|
||||
},
|
||||
getWarehouseList() {
|
||||
// 库区通常数量不多，可以全部加载
|
||||
listWarehouse({ pageNum: 1, pageSize: 100 }).then(response => {
|
||||
this.warehouseList = response.rows
|
||||
})
|
||||
},
|
||||
getEnergyName(energyTypeId) {
|
||||
const item = this.energyTypeList.find(e => e.energyTypeId === energyTypeId)
|
||||
return item ? item.name : '-'
|
||||
},
|
||||
getEnergyUnit(energyTypeId) {
|
||||
const item = this.energyTypeList.find(e => e.energyTypeId === energyTypeId)
|
||||
return item ? item.unit : '度'
|
||||
},
|
||||
getWarehouseName(meter) {
|
||||
// 直接使用后端返回的库区信息
|
||||
return meter.warehouseName || '-'
|
||||
},
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
0: '在用',
|
||||
1: '停用',
|
||||
2: '维护'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
},
|
||||
getStatusType(status) {
|
||||
const typeMap = {
|
||||
0: 'success',
|
||||
1: 'danger',
|
||||
2: 'warning'
|
||||
}
|
||||
return typeMap[status] || 'info'
|
||||
},
|
||||
getPeriodName(periodType) {
|
||||
const nameMap = {
|
||||
0: '峰',
|
||||
1: '谷',
|
||||
2: '平'
|
||||
}
|
||||
return nameMap[periodType] || '未知'
|
||||
},
|
||||
calculateAvgRate(items) {
|
||||
if (!items || items.length === 0) return 0
|
||||
const sum = items.reduce((total, item) => total + (parseFloat(item.rate) || 0), 0)
|
||||
return (sum / items.length).toFixed(2)
|
||||
},
|
||||
handleFilterChange() {
|
||||
// 筛选条件变化时，重置分页到第一页
|
||||
this.pageParams.pageNum = 1
|
||||
// 如果当前选中的设备不在筛选结果中，则清空选择
|
||||
if (this.selectedMeter && !this.allFilteredMeters.find(m => m.meterId === this.selectedMeter.meterId)) {
|
||||
this.selectedMeter = null
|
||||
this.resetRecord()
|
||||
}
|
||||
},
|
||||
handlePageChange(pageNum) {
|
||||
this.pageParams.pageNum = pageNum
|
||||
// 当翻页时，动态加载该页的数据
|
||||
this.loadMeterPage(pageNum)
|
||||
},
|
||||
loadMeterPage(pageNum) {
|
||||
// 根据当前的筛选条件加载指定页的数据
|
||||
const params = {
|
||||
pageNum: pageNum,
|
||||
pageSize: this.pageParams.pageSize,
|
||||
energyTypeId: this.filterParams.energyTypeId,
|
||||
meterCode: this.filterParams.meterCode || undefined
|
||||
}
|
||||
listMeter(params).then(response => {
|
||||
// 合并新加载的数据到现有列表
|
||||
const startIndex = (pageNum - 1) * this.pageParams.pageSize
|
||||
this.allMeterList.splice(startIndex, this.pageParams.pageSize, ...response.rows)
|
||||
this.totalMeters = response.total
|
||||
})
|
||||
},
|
||||
selectMeter(meter) {
|
||||
this.selectedMeter = meter
|
||||
this.recordForm.meterId = meter.meterId
|
||||
this.resetRecord()
|
||||
this.loadRateInfo(meter)
|
||||
this.loadLastReading(meter)
|
||||
},
|
||||
loadLastReading(meter) {
|
||||
// 获取上次抄表记录
|
||||
getLastReading(meter.meterId).then(response => {
|
||||
if (response.data) {
|
||||
// 如果有上次抄表记录，自动填充起始读数为上次的结束读数
|
||||
this.recordForm.startReading = response.data.endReading
|
||||
this.recordForm.startTime = response.data.endTime
|
||||
} else {
|
||||
// 首次抄表，需要用户手动填写起始读数
|
||||
this.recordForm.startReading = 0
|
||||
this.$message.info('首次抄表，请填写起始读数')
|
||||
}
|
||||
}).catch(() => {
|
||||
// 出错时，默认为首次抄表
|
||||
this.recordForm.startReading = 0
|
||||
})
|
||||
},
|
||||
loadRateInfo(meter) {
|
||||
if (!meter || !meter.energyTypeId) return
|
||||
listEnergyRate({ energyTypeId: meter.energyTypeId, pageNum: 1, pageSize: 1 }).then(response => {
|
||||
if (response.rows && response.rows.length > 0) {
|
||||
const rate = response.rows[0]
|
||||
this.rateInfo = {
|
||||
energyRateId: rate.energyRateId,
|
||||
rate: rate.rate,
|
||||
currency: rate.currency === 0 ? '元' : (rate.currency === 1 ? '$' : '€'),
|
||||
effectiveDate: rate.effectiveDate,
|
||||
expiryDate: rate.expiryDate,
|
||||
usePeakValley: rate.usePeakValley,
|
||||
useTieredPricing: rate.useTieredPricing,
|
||||
tiers: rate.tiers || [], // 梯度列表
|
||||
periods: rate.periods || [], // 峰谷时段列表
|
||||
monthlyConsumption: 0, // 本月累计消耗量
|
||||
monthlyEstimatedCost: 0 // 本月预估成本
|
||||
}
|
||||
// 加载本月的抄表记录
|
||||
this.loadMonthlyConsumption(meter.meterId)
|
||||
} else {
|
||||
this.rateInfo = null
|
||||
this.$message.warning('未找到该能源类型的费率信息')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.rateInfo = null
|
||||
this.$message.error('获取费率信息失败')
|
||||
})
|
||||
},
|
||||
loadMonthlyConsumption(meterId) {
|
||||
// 调用后端接口获取本月累计消耗量
|
||||
getMonthlyConsumption(meterId).then(response => {
|
||||
if (response.data !== null && response.data !== undefined) {
|
||||
const totalConsumption = parseFloat(response.data) || 0
|
||||
this.rateInfo.monthlyConsumption = totalConsumption.toFixed(2)
|
||||
// 计算本月预估成本
|
||||
this.rateInfo.monthlyEstimatedCost = this.calculateCostByConsumption(totalConsumption, this.rateInfo)
|
||||
console.log('本月累计消耗量:', this.rateInfo.monthlyConsumption, '本月预估成本:', this.rateInfo.monthlyEstimatedCost)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.rateInfo.monthlyConsumption = 0
|
||||
this.rateInfo.monthlyEstimatedCost = 0
|
||||
console.error('获取本月累计消耗量失败')
|
||||
})
|
||||
},
|
||||
calculateCostByConsumption(consumption, rateInfo) {
|
||||
if (!rateInfo) return 0
|
||||
|
||||
let cost = 0
|
||||
|
||||
// 固定费率模式
|
||||
if (parseInt(rateInfo.usePeakValley) === 0 && parseInt(rateInfo.useTieredPricing) === 0) {
|
||||
cost = consumption * parseFloat(rateInfo.rate)
|
||||
}
|
||||
// 峰谷模式 - 无法准确计算（需要知道各时段的消耗量）
|
||||
else if (parseInt(rateInfo.usePeakValley) === 1 && parseInt(rateInfo.useTieredPricing) === 0) {
|
||||
// 峰谷模式无法按实际计算，因为不知道各时段的消耗分布
|
||||
// 这里返回0，前端不显示预估成本
|
||||
cost = 0
|
||||
}
|
||||
// 梯度模式 - 按实际梯度计算
|
||||
else if (parseInt(rateInfo.usePeakValley) === 0 && parseInt(rateInfo.useTieredPricing) === 1) {
|
||||
cost = this.calculateTieredCost(consumption, rateInfo.tiers)
|
||||
}
|
||||
// 梯度+峰谷组合模式 - 无法准确计算（需要知道各时段的消耗量）
|
||||
else if (parseInt(rateInfo.usePeakValley) === 1 && parseInt(rateInfo.useTieredPricing) === 1) {
|
||||
// 组合模式无法按实际计算，因为不知道各时段的消耗分布
|
||||
// 这里返回0，前端不显示预估成本
|
||||
cost = 0
|
||||
}
|
||||
|
||||
return isNaN(cost) ? 0 : cost.toFixed(2)
|
||||
},
|
||||
formatDate(date) {
|
||||
if (!date) return '-'
|
||||
return new Date(date).toLocaleDateString()
|
||||
},
|
||||
calculateCost() {
|
||||
if (this.recordForm.startReading >= 0 && this.recordForm.endReading >= 0) {
|
||||
this.recordForm.consumption = this.recordForm.endReading - this.recordForm.startReading
|
||||
if (this.rateInfo) {
|
||||
// 计算本次抄表的预估成本
|
||||
// 需要加上本月已有的消耗量，这样才能正确计算梯度
|
||||
const monthlyConsumption = parseFloat(this.rateInfo.monthlyConsumption) || 0
|
||||
const totalConsumption = monthlyConsumption + this.recordForm.consumption
|
||||
|
||||
console.log('calculateCost - monthlyConsumption:', monthlyConsumption, 'consumption:', this.recordForm.consumption, 'totalConsumption:', totalConsumption)
|
||||
|
||||
let cost = 0
|
||||
|
||||
// 固定费率模式
|
||||
if (parseInt(this.rateInfo.usePeakValley) === 0 && parseInt(this.rateInfo.useTieredPricing) === 0) {
|
||||
const rate = parseFloat(this.rateInfo.rate) || 0
|
||||
cost = totalConsumption * rate
|
||||
console.log('固定费率模式 - rate:', rate, 'cost:', cost)
|
||||
}
|
||||
// 梯度模式 - 按总消耗量计算
|
||||
else if (parseInt(this.rateInfo.usePeakValley) === 0 && parseInt(this.rateInfo.useTieredPricing) === 1) {
|
||||
cost = this.calculateTieredCost(totalConsumption, this.rateInfo.tiers)
|
||||
console.log('梯度模式 - totalConsumption:', totalConsumption, 'cost:', cost)
|
||||
}
|
||||
// 其他模式暂不计算
|
||||
else {
|
||||
cost = 0
|
||||
}
|
||||
|
||||
this.recordForm.estimatedCost = isNaN(cost) ? 0 : cost.toFixed(2)
|
||||
console.log('最终estimatedCost:', this.recordForm.estimatedCost)
|
||||
}
|
||||
}
|
||||
},
|
||||
calculateTieredCost(consumption, tiers) {
|
||||
if (!tiers || tiers.length === 0) {
|
||||
console.log('calculateTieredCost - 无梯度数据')
|
||||
return 0
|
||||
}
|
||||
|
||||
let cost = 0
|
||||
let remainingConsumption = consumption
|
||||
|
||||
// 按梯度等级排序
|
||||
const sortedTiers = [...tiers].sort((a, b) => a.tierLevel - b.tierLevel)
|
||||
console.log('calculateTieredCost - sortedTiers:', sortedTiers)
|
||||
|
||||
for (const tier of sortedTiers) {
|
||||
if (remainingConsumption <= 0) break
|
||||
|
||||
const minUsage = parseFloat(tier.minUsage) || 0
|
||||
const maxUsage = tier.maxUsage === null || tier.maxUsage === undefined ? null : parseFloat(tier.maxUsage)
|
||||
const rate = parseFloat(tier.rate) || 0
|
||||
|
||||
let tierConsumption = 0
|
||||
if (maxUsage === null) {
|
||||
// 最后一个梯度，无上限
|
||||
tierConsumption = remainingConsumption
|
||||
} else {
|
||||
// 计算该梯度的消耗量
|
||||
const tierRange = maxUsage - minUsage
|
||||
tierConsumption = Math.min(remainingConsumption, tierRange)
|
||||
}
|
||||
|
||||
const tierCost = tierConsumption * rate
|
||||
cost += tierCost
|
||||
remainingConsumption -= tierConsumption
|
||||
|
||||
console.log(`梯度${tier.tierLevel} - minUsage: ${minUsage}, maxUsage: ${maxUsage}, rate: ${rate}, tierConsumption: ${tierConsumption}, tierCost: ${tierCost}`)
|
||||
}
|
||||
|
||||
console.log('calculateTieredCost - 总费用:', cost)
|
||||
return cost
|
||||
},
|
||||
submitRecord() {
|
||||
this.$refs.recordFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.recordForm.consumption = this.recordForm.endReading - this.recordForm.startReading
|
||||
|
||||
// 格式化日期为后端能接受的格式
|
||||
const submitData = {
|
||||
...this.recordForm,
|
||||
startTime: this.formatDateForSubmit(this.recordForm.startTime),
|
||||
endTime: this.formatDateForSubmit(this.recordForm.endTime)
|
||||
}
|
||||
|
||||
addEnergyConsumption(submitData).then(() => {
|
||||
this.$message.success('抄表记录提交成功')
|
||||
this.resetRecord()
|
||||
}).catch(() => {
|
||||
this.$message.error('提交失败')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
formatDateForSubmit(date) {
|
||||
if (!date) return null
|
||||
// 将日期转换为 yyyy-MM-dd HH:mm:ss 格式
|
||||
const d = new Date(date)
|
||||
const year = d.getFullYear()
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hours = String(d.getHours()).padStart(2, '0')
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
},
|
||||
resetRecord() {
|
||||
this.recordForm = {
|
||||
meterId: this.selectedMeter ? this.selectedMeter.meterId : undefined,
|
||||
startReading: 0,
|
||||
endReading: 0, // 默认等于起始读数
|
||||
consumption: 0,
|
||||
estimatedCost: 0,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
recordedBy: undefined,
|
||||
remark: ''
|
||||
}
|
||||
this.$refs.recordFormRef && this.$refs.recordFormRef.resetFields()
|
||||
},
|
||||
// 当起始读数变化时，同步更新结束读数的最小值
|
||||
onStartReadingChange() {
|
||||
// 如果结束读数小于起始读数，自动设置为起始读数
|
||||
if (this.recordForm.endReading < this.recordForm.startReading) {
|
||||
this.recordForm.endReading = this.recordForm.startReading
|
||||
}
|
||||
this.calculateCost()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.energy-consumption-record {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
|
||||
.filter-panel {
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
.device-column {
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
color: #909399;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.device-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-pagination {
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
|
||||
::v-deep .el-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-list .device-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 6px;
|
||||
gap: 4px;
|
||||
|
||||
.meter-code {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.label {
|
||||
color: #909399;
|
||||
min-width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-column {
|
||||
.record-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.rate-info-card,
|
||||
.record-form-card {
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
::v-deep .el-card__header {
|
||||
background: #f9f9f9;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 16px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.rate-info-card {
|
||||
.rate-content {
|
||||
.rate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
min-width: 80px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rate-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #f56c6c;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-form-card {
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #fef0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
.cost-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.cost-unit {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 400px;
|
||||
color: #909399;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
257
klp-ui/src/views/ems/meter/components/LocationTreeNode.vue
Normal file
257
klp-ui/src/views/ems/meter/components/LocationTreeNode.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="location-tree-node">
|
||||
<!-- 节点头部 -->
|
||||
<div class="node-header" :class="{ expanded: isExpanded }">
|
||||
<div class="node-title">
|
||||
<span
|
||||
v-if="node.children && node.children.length > 0"
|
||||
class="expand-icon"
|
||||
@click="toggleExpand"
|
||||
>
|
||||
{{ isExpanded ? '▼' : '▶' }}
|
||||
</span>
|
||||
<span v-else class="expand-icon-placeholder" />
|
||||
|
||||
<span class="location-name">{{ node.name }}</span>
|
||||
<el-tag type="info" size="small">{{ getDeviceCount(node.locationId) }}个设备</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="node-actions">
|
||||
<el-button type="text" size="small" @click="$emit('edit', node)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click="$emit('add-device', node)">添加设备</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<div v-if="isExpanded" class="device-list">
|
||||
<div
|
||||
v-for="device in getLocationDevices(node.locationId)"
|
||||
:key="device.meterId"
|
||||
class="device-item"
|
||||
@click="$emit('device-click', device)"
|
||||
>
|
||||
<div class="device-info">
|
||||
<span class="device-code">{{ device.meterCode }}</span>
|
||||
<span class="device-energy">{{ getEnergyName(device.energyTypeId) }}</span>
|
||||
<el-tag
|
||||
:type="getStatusType(device.status)"
|
||||
size="small"
|
||||
>
|
||||
{{ getStatusLabel(device.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="device-location">
|
||||
{{ device.model }} / {{ device.manufacturer }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="getLocationDevices(node.locationId).length === 0" class="no-devices">
|
||||
暂无设备
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子节点 -->
|
||||
<div v-if="isExpanded && node.children && node.children.length > 0" class="children-nodes">
|
||||
<location-tree-node
|
||||
v-for="child in node.children"
|
||||
:key="child.locationId"
|
||||
:node="child"
|
||||
:meter-list="meterList"
|
||||
:energy-type-list="energyTypeList"
|
||||
@edit="$emit('edit', $event)"
|
||||
@add-device="$emit('add-device', $event)"
|
||||
@device-click="$emit('device-click', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LocationTreeNode',
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
meterList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
energyTypeList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['edit', 'add-device', 'device-click'],
|
||||
data() {
|
||||
return {
|
||||
isExpanded: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleExpand() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
},
|
||||
|
||||
getLocationDevices(locationId) {
|
||||
return this.meterList.filter(m => m.locationId === locationId);
|
||||
},
|
||||
|
||||
getDeviceCount(locationId) {
|
||||
return this.getLocationDevices(locationId).length;
|
||||
},
|
||||
|
||||
getEnergyName(energyTypeId) {
|
||||
const energy = this.energyTypeList.find(item => item.energyTypeId === energyTypeId);
|
||||
return energy ? energy.name : '-';
|
||||
},
|
||||
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '在用',
|
||||
1: '停用',
|
||||
2: '维护'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
},
|
||||
|
||||
getStatusType(status) {
|
||||
const typeMap = {
|
||||
0: 'success',
|
||||
1: 'info',
|
||||
2: 'warning'
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.location-tree-node {
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.node-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: #f5f7fa;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #e8f4f8;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
background: #e8f4f8;
|
||||
}
|
||||
|
||||
.node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
.expand-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.expand-icon-placeholder {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-list {
|
||||
padding: 12px 16px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.device-item {
|
||||
padding: 10px 12px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.device-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.device-code {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.device-energy {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-location {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-devices {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 20px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.children-nodes {
|
||||
padding: 12px 16px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #ebeef5;
|
||||
margin-left: 16px;
|
||||
border-left: 2px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
827
klp-ui/src/views/ems/meter/manage.vue
Normal file
827
klp-ui/src/views/ems/meter/manage.vue
Normal file
@@ -0,0 +1,827 @@
|
||||
<template>
|
||||
<div class="meter-manage-page">
|
||||
<!-- 统计数据展示 -->
|
||||
<div class="statistics-panel">
|
||||
<div
|
||||
v-for="energyType in energyTypeList"
|
||||
:key="energyType.energyTypeId"
|
||||
class="stat-item"
|
||||
>
|
||||
<div class="stat-label">{{ energyType.name }}</div>
|
||||
<div class="stat-value">{{ statistics[`energy_${energyType.energyTypeId}`] || 0 }}</div>
|
||||
<div class="stat-sub">
|
||||
停用 {{ statistics[`energy_${energyType.energyTypeId}_disabled`] || 0 }}
|
||||
维护 {{ statistics[`energy_${energyType.energyTypeId}_maintenance`] || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAddMeter">新增设备</el-button>
|
||||
<el-button icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>
|
||||
<el-button icon="el-icon-upload" @click="handleImport">导入设备</el-button>
|
||||
<el-button icon="el-icon-search" @click="showSearch = !showSearch">{{ showSearch ? '隐藏' : '显示' }}搜索</el-button>
|
||||
<input
|
||||
ref="importFile"
|
||||
type="file"
|
||||
accept=".xlsx,.xls"
|
||||
style="display: none"
|
||||
@change="onFileSelected"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 搜索过滤区 -->
|
||||
<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>
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="全部" clearable @change="handleQuery">
|
||||
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="型号">
|
||||
<el-input v-model="queryParams.model" placeholder="设备型号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="制造商">
|
||||
<el-input v-model="queryParams.manufacturer" placeholder="请输入制造商" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
|
||||
<!-- 设备卡片列表 -->
|
||||
<div class="devices-container" v-loading="loading">
|
||||
<div v-if="meterList.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📦</div>
|
||||
<div class="empty-text">暂无设备数据</div>
|
||||
</div>
|
||||
<el-row :gutter="20" class="device-cards" v-else>
|
||||
<el-col
|
||||
v-for="meter in meterList"
|
||||
:key="meter.meterId"
|
||||
:xs="24" :sm="12" :md="8" :lg="6"
|
||||
>
|
||||
<div class="device-card">
|
||||
<!-- 卡片头部 -->
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<div class="meter-code">{{ meter.meterCode }}</div>
|
||||
<div class="energy-type">{{ getEnergyName(meter.energyTypeId) }}</div>
|
||||
</div>
|
||||
<el-tag
|
||||
:type="getStatusType(meter.status)"
|
||||
size="small"
|
||||
>
|
||||
{{ getStatusText(meter.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 卡片主体 -->
|
||||
<div class="card-body">
|
||||
<div class="info-item">
|
||||
<span class="label">型号</span>
|
||||
<span class="value">{{ meter.model || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">制造商</span>
|
||||
<span class="value">{{ meter.manufacturer || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">安装日期</span>
|
||||
<span class="value">{{ meter.installDate || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">绑定库区</span>
|
||||
<el-tag
|
||||
v-if="getBindingWarehouse(meter.meterId)"
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
{{ getBindingWarehouse(meter.meterId) }}
|
||||
</el-tag>
|
||||
<el-tag v-else type="info" size="small">未绑定</el-tag>
|
||||
</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-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片底部操作 -->
|
||||
<div class="card-footer">
|
||||
<el-button type="primary" size="small" @click="handleEditMeter(meter)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDeleteMeter(meter)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑设备对话框 -->
|
||||
<el-dialog title="设备信息" :visible.sync="meterDialogVisible" width="800px" @close="resetMeterForm">
|
||||
<el-form :model="meterForm" :rules="meterRules" ref="meterFormRef" label-width="120px">
|
||||
<!-- 能源类型选择 -->
|
||||
<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>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 设备编号 -->
|
||||
<el-form-item label="设备编号" prop="meterCode">
|
||||
<el-input
|
||||
v-model="meterForm.meterCode"
|
||||
placeholder="请输入设备编号（如 W-001）"
|
||||
:disabled="isEditMode"
|
||||
maxlength="50"
|
||||
/>
|
||||
<div class="form-hint">选择能源类型后前缀会自动填入</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-input v-model="meterForm.model" placeholder="请输入设备型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="制造商" prop="manufacturer">
|
||||
<el-input v-model="meterForm.manufacturer" placeholder="请输入制造商" />
|
||||
</el-form-item>
|
||||
<el-form-item label="安装日期" prop="installDate">
|
||||
<el-date-picker v-model="meterForm.installDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="meterDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitMeterForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMeter, getMeter, 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'
|
||||
|
||||
export default {
|
||||
name: "MeterManage",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
importLoading: false,
|
||||
showSearch: false,
|
||||
meterList: [],
|
||||
energyTypeList: [],
|
||||
warehouseList: [],
|
||||
matrixData: [],
|
||||
|
||||
// 统计数据
|
||||
statistics: {
|
||||
waterMeters: 0,
|
||||
electricMeters: 0,
|
||||
gasMeters: 0,
|
||||
waterDisabled: 0,
|
||||
electricDisabled: 0,
|
||||
gasDisabled: 0,
|
||||
waterMaintenance: 0,
|
||||
electricMaintenance: 0,
|
||||
gasMaintenance: 0
|
||||
},
|
||||
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 9999,
|
||||
meterCode: undefined,
|
||||
energyTypeId: undefined,
|
||||
model: undefined,
|
||||
manufacturer: undefined,
|
||||
installDate: undefined,
|
||||
},
|
||||
|
||||
meterDialogVisible: false,
|
||||
isEditMode: false,
|
||||
meterForm: {},
|
||||
meterRules: {
|
||||
meterCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
|
||||
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }],
|
||||
model: [{ required: true, message: '型号不能为空', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
Promise.all([
|
||||
this.getList(),
|
||||
this.getEnergyTypeList(),
|
||||
this.loadWarehouseList(),
|
||||
this.loadMatrix()
|
||||
]).then(() => {
|
||||
this.calculateStatistics();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
return listMeter(this.queryParams).then(response => {
|
||||
this.meterList = response.rows;
|
||||
this.calculateStatistics();
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
getEnergyTypeList() {
|
||||
return listEnergyType().then(response => {
|
||||
this.energyTypeList = response.rows;
|
||||
});
|
||||
},
|
||||
|
||||
loadWarehouseList() {
|
||||
return listWarehouse({ pageNum: 1, pageSize: 9999 }).then(response => {
|
||||
this.warehouseList = response.rows;
|
||||
});
|
||||
},
|
||||
|
||||
loadMatrix() {
|
||||
fetchEnergyLinkMatrix().then(res => {
|
||||
this.matrixData = res.data || [];
|
||||
});
|
||||
},
|
||||
|
||||
getEnergyName(energyTypeId) {
|
||||
const item = this.energyTypeList.find(e => e.energyTypeId === energyTypeId);
|
||||
return item ? item.name : '-';
|
||||
},
|
||||
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
0: '在用',
|
||||
1: '停用',
|
||||
2: '维护'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
},
|
||||
|
||||
getStatusType(status) {
|
||||
const typeMap = {
|
||||
0: 'success',
|
||||
1: 'danger',
|
||||
2: 'warning'
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
},
|
||||
|
||||
getBindingWarehouse(meterId) {
|
||||
for (let warehouse of this.matrixData) {
|
||||
for (let link of (warehouse.links || [])) {
|
||||
if (link.meterId === meterId) {
|
||||
return warehouse.warehouseName;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
calculateStatistics() {
|
||||
// 根据能源类型表动态生成统计数据结构
|
||||
this.statistics = {};
|
||||
|
||||
// 为每个能源类型初始化统计数据
|
||||
this.energyTypeList.forEach(energyType => {
|
||||
const key = energyType.energyTypeId;
|
||||
this.statistics[`energy_${key}`] = 0;
|
||||
this.statistics[`energy_${key}_disabled`] = 0;
|
||||
this.statistics[`energy_${key}_maintenance`] = 0;
|
||||
});
|
||||
|
||||
// 统计设备数量
|
||||
this.meterList.forEach(meter => {
|
||||
const key = meter.energyTypeId;
|
||||
// 转换 status 为数字，处理字符串和 null 的情况
|
||||
const status = meter.status !== null && meter.status !== undefined ? parseInt(meter.status) : 0;
|
||||
|
||||
if (this.statistics[`energy_${key}`] !== undefined) {
|
||||
this.statistics[`energy_${key}`]++;
|
||||
if (status === 1) this.statistics[`energy_${key}_disabled`]++;
|
||||
if (status === 2) this.statistics[`energy_${key}_maintenance`]++;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
resetQuery() {
|
||||
this.$refs.queryForm.resetFields();
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
handleAddMeter() {
|
||||
this.isEditMode = false;
|
||||
this.meterForm = {
|
||||
meterCode: '',
|
||||
energyTypeId: null,
|
||||
model: '',
|
||||
manufacturer: '',
|
||||
installDate: null
|
||||
};
|
||||
this.meterDialogVisible = true;
|
||||
},
|
||||
|
||||
handleEditMeter(meter) {
|
||||
this.isEditMode = true;
|
||||
this.meterForm = JSON.parse(JSON.stringify(meter));
|
||||
this.meterDialogVisible = true;
|
||||
},
|
||||
|
||||
selectEnergyType(energyType) {
|
||||
this.meterForm.energyTypeId = energyType.energyTypeId;
|
||||
// 新增模式下，直接设置编号前缀
|
||||
if (!this.isEditMode) {
|
||||
const prefix = this.getEnergyPrefix(energyType.name);
|
||||
this.meterForm.meterCode = prefix;
|
||||
}
|
||||
},
|
||||
|
||||
getEnergyPrefix(energyName) {
|
||||
const prefixMap = {
|
||||
'水': 'W-',
|
||||
'电': 'E-',
|
||||
'天然气': 'G-'
|
||||
};
|
||||
return prefixMap[energyName] || '';
|
||||
},
|
||||
|
||||
getEnergyIcon(energyName) {
|
||||
const iconMap = {
|
||||
'水': 'shuibiao',
|
||||
'电': 'dianbiao',
|
||||
'天然气': 'qibiao'
|
||||
};
|
||||
return iconMap[energyName] || 'shuibiao';
|
||||
},
|
||||
|
||||
selectWarehouse(warehouse) {
|
||||
this.meterForm.warehouseId = warehouse ? warehouse.warehouseId : null;
|
||||
if (!warehouse) {
|
||||
this.meterForm.allocationMode = null;
|
||||
this.meterForm.weightRatio = null;
|
||||
}
|
||||
},
|
||||
|
||||
submitMeterForm() {
|
||||
this.$refs.meterFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
const submitFn = this.isEditMode ? updateMeter : addMeter;
|
||||
submitFn(this.meterForm).then(() => {
|
||||
this.$message.success(this.isEditMode ? '编辑成功' : '新增成功');
|
||||
this.meterDialogVisible = false;
|
||||
this.getList();
|
||||
this.loadMatrix();
|
||||
|
||||
// 如果绑定了库区，自动创建绑定关系
|
||||
if (this.meterForm.warehouseId && !this.isEditMode) {
|
||||
const linkData = {
|
||||
meterId: this.meterForm.meterId,
|
||||
warehouseId: this.meterForm.warehouseId,
|
||||
energyTypeId: this.meterForm.energyTypeId,
|
||||
allocationMode: this.meterForm.allocationMode || 'average',
|
||||
weightRatio: this.meterForm.weightRatio || 1,
|
||||
requirePendingAction: 0
|
||||
};
|
||||
addEnergyLink(linkData).then(() => {
|
||||
this.$message.success('设备绑定成功');
|
||||
this.loadMatrix();
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error(this.isEditMode ? '编辑失败' : '新增失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
resetMeterForm() {
|
||||
this.$refs.meterFormRef.resetFields();
|
||||
this.meterForm = {};
|
||||
this.isEditMode = false;
|
||||
},
|
||||
|
||||
handleDeleteMeter(meter) {
|
||||
this.$confirm('确定删除该设备吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delMeter(meter.meterId).then(() => {
|
||||
this.$message.success('删除成功');
|
||||
this.getList();
|
||||
this.loadMatrix();
|
||||
}).catch(() => {
|
||||
this.$message.error('删除失败');
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
|
||||
handleStatusChange(meter) {
|
||||
// 确保状态值是数字
|
||||
const status = typeof meter.status === 'string' ? parseInt(meter.status) : meter.status;
|
||||
|
||||
// 更新设备状态
|
||||
updateMeter({
|
||||
meterId: meter.meterId,
|
||||
status: status
|
||||
}).then(() => {
|
||||
this.$message.success('状态更新成功');
|
||||
this.calculateStatistics();
|
||||
}).catch(() => {
|
||||
this.$message.error('状态更新失败');
|
||||
// 恢复原状态
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
|
||||
downloadTemplate() {
|
||||
this.$message.success('正在下载模板...');
|
||||
downloadMeterTemplate().then(res => {
|
||||
const url = window.URL.createObjectURL(res);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = '设备导入模板.xlsx';
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
this.$message.success('模板下载成功');
|
||||
}).catch(() => {
|
||||
this.$message.error('模板下载失败');
|
||||
});
|
||||
},
|
||||
|
||||
handleImport() {
|
||||
this.$refs.importFile.click();
|
||||
},
|
||||
|
||||
onFileSelected(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
this.importLoading = true;
|
||||
const loadingInstance = this.$loading({
|
||||
lock: true,
|
||||
text: '正在导入设备...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
importMeters(file).then(res => {
|
||||
loadingInstance.close();
|
||||
this.$message.success('设备导入成功');
|
||||
this.getList();
|
||||
this.loadMatrix();
|
||||
this.calculateStatistics();
|
||||
// 重置文件输入
|
||||
this.$refs.importFile.value = '';
|
||||
}).catch(err => {
|
||||
loadingInstance.close();
|
||||
this.$message.error(err.msg || '设备导入失败');
|
||||
// 重置文件输入
|
||||
this.$refs.importFile.value = '';
|
||||
}).finally(() => {
|
||||
this.importLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.meter-manage-page {
|
||||
padding: 20px;
|
||||
background: #f6f7fb;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
.statistics-panel {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.devices-container {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.device-cards {
|
||||
.device-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e8e8e8;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.meter-code {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.energy-type {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&.status-selector {
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
|
||||
.el-radio {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片按钮样式
|
||||
::v-deep .device-card .card-footer .el-button {
|
||||
flex: 1;
|
||||
padding: 6px 0 !important;
|
||||
font-size: 12px !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 能源类型卡片选择
|
||||
.energy-type-selector {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.energy-card {
|
||||
flex: 0 0 calc(33.333% - 11px);
|
||||
min-width: 100px;
|
||||
padding: 12px;
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #ffffff;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
|
||||
.energy-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
|
||||
.energy-name {
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 库区卡片选择
|
||||
.warehouse-selector {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.warehouse-card {
|
||||
flex: 0 0 calc(25% - 9px);
|
||||
min-width: 140px;
|
||||
padding: 16px;
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #409eff;
|
||||
background: #f0f9ff;
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
|
||||
&.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.warehouse-name {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.warehouse-code {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提示
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
// 对话框样式
|
||||
::v-deep .el-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1327
klp-ui/src/views/ems/meter/topology.vue
Normal file
1327
klp-ui/src/views/ems/meter/topology.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
311
klp-ui/src/views/ems/task/allocationTask.vue
Normal file
311
klp-ui/src/views/ems/task/allocationTask.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="allocation-task-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-date-picker v-model="queryParams.taskDate" type="date" placeholder="选择任务日期" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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.status" placeholder="请选择任务状态" clearable @change="handleQuery">
|
||||
<el-option label="待执行" :value="0"></el-option>
|
||||
<el-option label="执行中" :value="1"></el-option>
|
||||
<el-option label="已完成" :value="2"></el-option>
|
||||
<el-option label="失败" :value="3"></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-card class="list-card" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="card-title">能源分摊任务列表</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="taskList" stripe border>
|
||||
<el-table-column prop="taskId" label="任务ID" width="100"></el-table-column>
|
||||
<el-table-column prop="taskDate" label="任务日期" width="120"></el-table-column>
|
||||
<el-table-column prop="energyTypeName" label="能源类型" width="100"></el-table-column>
|
||||
<el-table-column prop="allocationScope" label="分摊范围" width="100"></el-table-column>
|
||||
<el-table-column prop="status" label="任务状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.status === 0" type="info">待执行</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 1" type="warning">执行中</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 2" type="success">已完成</el-tag>
|
||||
<el-tag v-else type="danger">失败</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="executeMode" label="执行方式" width="100"></el-table-column>
|
||||
<el-table-column prop="totalConsumption" label="总消耗量" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatNumber(scope.row.totalConsumption, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalCost" label="总成本" width="120">
|
||||
<template slot-scope="scope">
|
||||
¥ {{ formatNumber(scope.row.totalCost, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.status === 0 || scope.row.status === 3"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="runTask(scope.row)">
|
||||
执行
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.status === 2"
|
||||
type="warning"
|
||||
size="mini"
|
||||
@click="rerunTask(scope.row)">
|
||||
重新执行
|
||||
</el-button>
|
||||
<el-button type="info" size="mini" @click="viewDetail(scope.row)">详情</el-button>
|
||||
<el-button type="danger" size="mini" @click="deleteTask(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="新增分摊任务" :visible.sync="addDialogVisible" width="500px" @close="closeAddDialog">
|
||||
<el-form :model="addForm" label-width="120px" size="small" ref="addFormRef">
|
||||
<el-form-item label="任务日期:" prop="taskDate">
|
||||
<el-date-picker v-model="addForm.taskDate" type="date" placeholder="选择任务日期" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="能源类型:" prop="energyTypeId">
|
||||
<el-select v-model="addForm.energyTypeId" placeholder="请选择能源类型（留空则全部）">
|
||||
<el-option label="全部能源类型" :value="null"></el-option>
|
||||
<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="allocationScope">
|
||||
<el-select v-model="addForm.allocationScope" placeholder="请选择分摊范围">
|
||||
<el-option label="按库区" value="warehouse"></el-option>
|
||||
<el-option label="按仪表" value="meter"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeAddDialog">取消</el-button>
|
||||
<el-button type="primary" @click="submitAddTask">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog title="任务详情" :visible.sync="detailDialogVisible" width="600px" @close="closeDetailDialog">
|
||||
<el-descriptions :column="2" border v-if="selectedTask">
|
||||
<el-descriptions-item label="任务ID">{{ selectedTask.taskId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务日期">{{ selectedTask.taskDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="能源类型">{{ selectedTask.energyTypeName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="分摊范围">{{ selectedTask.allocationScope }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务状态">
|
||||
<el-tag v-if="selectedTask.status === 0" type="info">待执行</el-tag>
|
||||
<el-tag v-else-if="selectedTask.status === 1" type="warning">执行中</el-tag>
|
||||
<el-tag v-else-if="selectedTask.status === 2" type="success">已完成</el-tag>
|
||||
<el-tag v-else type="danger">失败</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="执行方式">{{ selectedTask.executeMode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总消耗量">{{ formatNumber(selectedTask.totalConsumption, 2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总成本">¥ {{ formatNumber(selectedTask.totalCost, 2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">{{ selectedTask.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="错误信息" :span="2" v-if="selectedTask.message">
|
||||
<el-alert :title="selectedTask.message" type="error" :closable="false"></el-alert>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEnergyTask } from '@/api/ems/energyAllocation'
|
||||
|
||||
export default {
|
||||
name: 'AllocationTask',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
queryParams: {
|
||||
taskDate: null,
|
||||
energyTypeId: null,
|
||||
status: null,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
taskList: [],
|
||||
energyTypeList: [
|
||||
{ id: 1, name: '电' },
|
||||
{ id: 2, name: '水' },
|
||||
{ id: 3, name: '气' }
|
||||
],
|
||||
addDialogVisible: false,
|
||||
addForm: {
|
||||
taskDate: null,
|
||||
energyTypeId: null,
|
||||
allocationScope: 'warehouse'
|
||||
},
|
||||
detailDialogVisible: false,
|
||||
selectedTask: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.handleQuery();
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.loading = true;
|
||||
listEnergyTask(this.queryParams).then(response => {
|
||||
this.taskList = response.rows || [];
|
||||
this.total = response.total || 0;
|
||||
}).catch(() => {
|
||||
this.$message.error('加载任务列表失败');
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
taskDate: null,
|
||||
energyTypeId: null,
|
||||
status: null,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
};
|
||||
this.handleQuery();
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.queryParams.pageNum = page;
|
||||
this.handleQuery();
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.queryParams.pageSize = size;
|
||||
this.handleQuery();
|
||||
},
|
||||
openAddDialog() {
|
||||
this.addForm = {
|
||||
taskDate: null,
|
||||
energyTypeId: null,
|
||||
allocationScope: 'warehouse'
|
||||
};
|
||||
this.addDialogVisible = true;
|
||||
},
|
||||
closeAddDialog() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addFormRef && this.$refs.addFormRef.clearValidate();
|
||||
},
|
||||
submitAddTask() {
|
||||
if (!this.addForm.taskDate) {
|
||||
this.$message.error('请选择任务日期');
|
||||
return;
|
||||
}
|
||||
// TODO: 调用后端API创建任务
|
||||
this.$message.success('任务创建成功');
|
||||
this.closeAddDialog();
|
||||
this.handleQuery();
|
||||
},
|
||||
runTask(row) {
|
||||
this.$confirm('确定要执行该任务吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// TODO: 调用后端API执行任务
|
||||
this.$message.success('任务已提交执行');
|
||||
this.handleQuery();
|
||||
}).catch(() => {});
|
||||
},
|
||||
rerunTask(row) {
|
||||
this.$confirm('确定要重新执行该任务吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// TODO: 调用后端API重新执行任务
|
||||
this.$message.success('任务已重新提交执行');
|
||||
this.handleQuery();
|
||||
}).catch(() => {});
|
||||
},
|
||||
viewDetail(row) {
|
||||
this.selectedTask = row;
|
||||
this.detailDialogVisible = true;
|
||||
},
|
||||
closeDetailDialog() {
|
||||
this.detailDialogVisible = false;
|
||||
this.selectedTask = null;
|
||||
},
|
||||
deleteTask(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>
|
||||
.allocation-task-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.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