DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): 优化数据加载逻辑和缓存处理

Browse Source 
- 移除不必要的初始化数据加载，保留关键数据请求
- 重构产品/原材料信息组件，改用计算属性替代watch
- 分批加载产品/原材料数据，避免大请求阻塞
- 为数据加载添加loading状态提示
- 优化统计面板数据加载方式，改为顺序请求
This commit is contained in:
砂糖
2025-11-15 14:11:12 +08:00
parent 62340519d1
commit e24f0f77eb
8 changed files with 197 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
klp-ui/src/components/HomeModules/StatisticGroup.vue
View File

@@ -1,16 +1,7 @@
<template>
<el-row :gutter="10" class="panel-group">
<el-col
v-if="!loading"
:xs="12"
:sm="12"
:md="8"
:lg="4"
:xl="4"
class="card-panel-col"
v-for="(item, index) in statsData"
:key="index"
>
<el-col v-loading="loading" :xs="12" :sm="12" :md="8" :lg="4" :xl="4" class="card-panel-col"
v-for="(item, index) in statsData" :key="index">
<div class="card-panel" @click="handleSetLineChartData(item.type)">
<div class="card-panel-icon-wrapper" :class="item.iconClass">
<svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
@@ -19,23 +10,10 @@
<div class="card-panel-text">
{{ item.title }}
</div>
<count-to
:start-val="0"
:end-val="item.value"
:duration="item.duration"
class="card-panel-num"
/>
<count-to :start-val="0" :end-val="item.value" :duration="item.duration" class="card-panel-num" />
</div>
</div>
</el-col>
<div v-else>
<!-- 骨架屏 -->
<el-skeleton
:rows="1"
:loading="loading"
/>
</div>
</el-row>
</template>
@@ -47,7 +25,7 @@ import { listMaterialCoil } from '@/api/wms/coil'
import { listEquipmentManagement } from '@/api/mes/eqp/equipmentManagement'
import { listOrder } from '@/api/wms/order'
import { listCustomer } from '@/api/wms/customer'
import { listSupplier } from '@/api/wms/supplier'
// import { listSupplier } from '@/api/wms/supplier'
export default {
components: {
@@ -88,14 +66,14 @@ export default {
value: 0,
duration: 3600
},
{
type: 'supplierCount',
title: '供应商',
icon: 'peoples',
iconClass: 'icon-supplier',
value: 0,
duration: 3600
},
// {
// type: 'supplierCount',
// title: '供应商',
// icon: 'peoples',
// iconClass: 'icon-supplier',
// value: 0,
// duration: 3600
// },
{
type: 'equipmentCount',
title: '设备数量',
@@ -109,48 +87,50 @@ export default {
}
},
mounted() {
this.loadCount()
this.fetchStatsData()
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
loadCount() {
this.loading = true
Promise.all([
listProduct({ pageSise: 1, pageNum: 1 }),
listRawMaterial({ pageSise: 1, pageNum: 1 }),
listMaterialCoil({ pageSise: 1, pageNum: 1, dataType: 1 }),
listEquipmentManagement({ pageSise: 1, pageNum: 1, status: 'in_service' }),
listOrder({ pageSise: 1, pageNum: 1 }),
listCustomer({ pageSise: 1, pageNum: 1 }),
listSupplier({ pageSise: 1, pageNum: 1 })
]).then(([
productRes,
rawMaterialRes,
materialCoilRes,
equipmentRes,
orderRes,
customerRes,
supplierRes
]) => {
this.loading = false
// 假设这段代码在一个方法中，给方法添加 async 关键字
async fetchStatsData() {
this.loading = true; // 先开启加载状态
try {
// 顺序请求：前一个请求完成后，再执行下一个
const productRes = await listProduct({ pageSize: 10, pageNum: 1 });
const rawMaterialRes = await listRawMaterial({ pageSize: 10, pageNum: 1 });
const materialCoilRes = await listMaterialCoil({ pageSize: 10, pageNum: 1, dataType: 1 });
const equipmentRes = await listEquipmentManagement({ pageSize: 1, pageNum: 1, status: 'in_service' });
const orderRes = await listOrder({ pageSize: 1, pageNum: 1 });
const customerRes = await listCustomer({ pageSize: 1, pageNum: 1 });
// 如果需要供应商数据，取消下面这行注释（与原代码注释对应）
// const supplierRes = await listSupplier({ pageSize: 1, pageNum: 1 });
// 处理统计数据（注意：如果不请求supplierRes，需注释掉对应的逻辑）
this.statsData.forEach(item => {
if (item.type === 'materialCount') {
item.value = productRes.total + rawMaterialRes.total
item.value = (productRes.total || 0) + (rawMaterialRes.total || 0);
} else if (item.type === 'steelCoilCount') {
item.value = materialCoilRes.total
item.value = materialCoilRes.total || 0;
} else if (item.type === 'orderCount') {
item.value = orderRes.total
item.value = orderRes.total || 0;
} else if (item.type === 'customerCount') {
item.value = customerRes.total
item.value = customerRes.total || 0;
} else if (item.type === 'supplierCount') {
item.value = supplierRes.total
// 如果不请求供应商数据，这里可以设置默认值（如0）或注释掉
item.value = 0; // 若取消了supplierRes的请求注释，这里改为 supplierRes.total || 0
} else if (item.type === 'equipmentCount') {
item.value = equipmentRes.total
item.value = equipmentRes.total || 0;
}
})
})
});
} catch (error) {
// 处理请求失败的情况（如打印错误、提示用户等）
console.error('统计数据请求失败：', error);
} finally {
// 无论成功失败，最终关闭加载状态
this.loading = false;
}
}
}
}
@@ -195,7 +175,7 @@ export default {
.icon-customer {
background: #34bfa3;
}
.icon-equipment {
background: #722ed1;
}
@@ -220,7 +200,7 @@ export default {
.icon-customer {
color: #34bfa3;
}
.icon-equipment {
color: #722ed1;
}
@@ -267,7 +247,7 @@ export default {
.card-panel-description .card-panel-text {
font-size: 14px;
}
.card-panel-num {
font-size: 18px !important;
}
@@ -277,11 +257,11 @@ export default {
.card-panel-description {
margin: 16px;
}
.card-panel-icon-wrapper {
padding: 12px;
}
.card-panel-icon {
font-size: 40px;
}
@@ -305,5 +285,4 @@ export default {
}
}
}
</style>
</style>

41
klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div v-loading="loading" loading-text="加载中...">
<span class="product-name" @click.stop="clickHandle">
<slot name="default" :product="product">
{{ product && product.productName ? product.productName : '--' }}
@@ -67,31 +67,44 @@ export default {
data() {
return {
showDetail: false,
product: {},
// product: {},
};
},
computed: {
...mapState({
productMap: state => state.category.productMap
}),
product() {
// 检查 productMap 是否已加载
if (!this.productMap || Object.keys(this.productMap).length === 0) {
return {};
}
if (!this.productId) {
return {};
}
return this.productMap[this.productId.toString()] || {};
},
loading() {
return !this.productMap || Object.keys(this.productMap).length === 0
}
},
methods: {
clickHandle() {
this.showDetail = true;
}
},
watch: {
productId: {
handler(newVal) {
if (!newVal) {
this.product = {};
}
const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
this.product = res;
},
immediate: true
}
}
// watch: {
// productId: {
// handler(newVal) {
// if (!newVal) {
// this.product = {};
// }
// const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
// this.product = res;
// },
// immediate: true
// }
// }
};
</script>

37
klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div v-loading="loading" loading-text="加载中...">
<!-- 作用域插槽 -->
<span class="material-name" @click.stop="showDetail = true">
<slot name="default" :material="material">
@@ -9,7 +9,7 @@
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.rawMaterialName" width="600px"
append-to-body>
<el-descriptions :column="1" border>
<el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item>
<!-- <el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item> -->
<el-descriptions-item label="原材料名称">{{ material.rawMaterialName }}</el-descriptions-item>
<el-descriptions-item label="原材料编码">{{ material.rawMaterialCode }}</el-descriptions-item>
<el-descriptions-item label="规格">{{ material.specification }}</el-descriptions-item>
@@ -51,23 +51,36 @@ export default {
data() {
return {
showDetail: false,
material: {},
// material: {},
};
},
computed: {
...mapState({
materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
}),
},
watch: {
materialId: {
handler: function (newVal) {
const res = this.materialMap[this.materialId] ? this.materialMap[this.materialId] : {};
this.material = res;
},
immediate: true
material() {
// 检查 materialMap 是否已加载
if (!this.materialMap || Object.keys(this.materialMap).length === 0) {
return {};
}
if (!this.materialId) {
return {};
}
return this.materialMap[this.materialId.toString()] || {};
},
loading() {
return !this.materialMap || Object.keys(this.materialMap).length === 0
}
}
},
// watch: {
// materialId: {
// handler: function (newVal) {
// const res = this.materialMap[newVal.toString()] ? this.materialMap[newVal.toString()] : {};
// this.material = res;
// },
// immediate: true
// }
// }
}
</script>