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

数据看板更新前后端

Browse Source
This commit is contained in:
Joshi
2025-07-30 10:54:11 +08:00
parent 5c42bf666a
commit 064d1dd41b
18 changed files with 1414 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
klp-ui/src/views/wms/order/components/CurrentSituationArea.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div class="current-situation-area">
<el-row :gutter="20">
<!-- 订单所需的产品统计 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
<div slot="header" class="card-header">
<span>订单所需的产品统计</span>
</div>
<div class="table-container">
<el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
<el-table-column prop="productName" label="产品名称" width="120" />
<el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
<el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
<el-table-column prop="stockGap" label="库存缺口" width="80">
<template slot-scope="scope">
<span :class="getStockGapClass(scope.row.stockGap)">
{{ scope.row.stockGap }}
</span>
</template>
</el-table-column>
<el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
</el-table>
<div v-if="!orderProductStatistics.length" class="empty-data">
<i class="el-icon-warning-outline"></i>
<p>暂无数据</p>
</div>
</div>
</el-card>
</el-col>
<!-- 根据BOM计算的原料需求 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
<div slot="header" class="card-header">
<span>BOM原料需求</span>
</div>
<div class="table-container">
<el-table :data="productMaterialRequirements" size="small" height="320" v-loading="!productMaterialRequirements.length">
<el-table-column prop="productName" label="产品" width="100" />
<el-table-column prop="materialName" label="原料" width="100" />
<el-table-column prop="requiredQuantity" label="需求数量" width="80" />
<el-table-column prop="currentStockQuantity" label="库存" width="60" />
<el-table-column prop="inTransitQuantity" label="在途" width="60" />
<el-table-column prop="stockGap" label="缺口" width="60">
<template slot-scope="scope">
<span :class="getStockGapClass(scope.row.stockGap)">
{{ scope.row.stockGap }}
</span>
</template>
</el-table-column>
</el-table>
<div v-if="!productMaterialRequirements.length" class="empty-data">
<i class="el-icon-warning-outline"></i>
<p>暂无数据</p>
</div>
</div>
</el-card>
</el-col>
<!-- 原料库存和需求情况 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
<div slot="header" class="card-header">
<span>原料库存情况</span>
</div>
<div class="table-container">
<el-table :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
<el-table-column prop="materialName" label="原料名称" width="120" />
<el-table-column prop="currentStockQuantity" label="库存" width="60" />
<el-table-column prop="inTransitQuantity" label="在途" width="60" />
<el-table-column prop="totalRequiredQuantity" label="需求" width="60" />
<el-table-column prop="stockGap" label="缺口" width="60">
<template slot-scope="scope">
<span :class="getStockGapClass(scope.row.stockGap)">
{{ scope.row.stockGap }}
</span>
</template>
</el-table-column>
<el-table-column prop="stockStatus" label="状态" width="60">
<template slot-scope="scope">
<el-tag :type="getStockStatusType(scope.row.stockStatus)" size="mini">
{{ scope.row.stockStatus }}
</el-tag>
</template>
</el-table-column>
</el-table>
<div v-if="!rawMaterialInventory.length" class="empty-data">
<i class="el-icon-warning-outline"></i>
<p>暂无数据</p>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'CurrentSituationArea',
props: {
currentSituationArea: {
type: Object,
required: true,
default: () => ({})
}
},
computed: {
orderProductStatistics() {
return this.currentSituationArea.orderProductStatistics || []
},
productMaterialRequirements() {
return this.currentSituationArea.productMaterialRequirements || []
},
rawMaterialInventory() {
return this.currentSituationArea.rawMaterialInventory || []
}
},
methods: {
getStockGapClass(stockGap) {
if (stockGap > 0) {
return 'text-danger'
} else if (stockGap === 0) {
return 'text-success'
} else {
return 'text-warning'
}
},
getStockStatusType(status) {
switch (status) {
case '充足':
return 'success'
case '不足':
return 'warning'
case '紧急':
return 'danger'
default:
return 'info'
}
}
}
}
</script>
<style scoped>
.current-situation-area {
margin-bottom: 20px;
}
.situation-card {
height: 400px;
}
.card-header {
font-weight: bold;
color: #303133;
}
.table-container {
height: 320px;
overflow: hidden;
}
.text-danger {
color: #f56c6c;
font-weight: bold;
}
.text-success {
color: #67c23a;
font-weight: bold;
}
.text-warning {
color: #e6a23c;
font-weight: bold;
}
.empty-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #909399;
}
.empty-data i {
font-size: 48px;
margin-bottom: 10px;
}
.empty-data p {
margin: 0;
font-size: 14px;
}
</style>