231 lines
7.4 KiB
Vue
231 lines
7.4 KiB
Vue
<template>
|
|
<div class="current-situation-area">
|
|
<el-row :gutter="20" v-if="mode === 'normal'">
|
|
<!-- 订单所需的产品统计 -->
|
|
<el-col :span="8">
|
|
<el-card shadow="hover" class="situation-card">
|
|
<div slot="header" class="card-header">
|
|
<span>订单所需的产品统计</span>
|
|
</div>
|
|
<div class="table-container">
|
|
<KLPTable :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" />
|
|
</KLPTable>
|
|
<div v-if="!orderProductStatistics.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">
|
|
<KLPTable :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>
|
|
</KLPTable>
|
|
<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">
|
|
<KLPTable :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>
|
|
</KLPTable>
|
|
<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 class="current-situation-area-mini" v-else>
|
|
<el-card shadow="hover" class="situation-card">
|
|
<div slot="header" class="card-header">
|
|
<span>订单所需的产品统计</span>
|
|
</div>
|
|
<div class="table-container">
|
|
<KLPTable :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
|
|
<el-table-column prop="productName" label="产品名称" />
|
|
<el-table-column prop="orderDemandQuantity" label="需求数量" />
|
|
<el-table-column prop="currentStockQuantity" label="库存数量" />
|
|
<el-table-column prop="stockGap" label="库存缺口">
|
|
<template slot-scope="scope">
|
|
<span :class="getStockGapClass(scope.row.stockGap)">
|
|
{{ scope.row.stockGap }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="relatedOrderCount" label="相关订单" />
|
|
</KLPTable>
|
|
<div v-if="!orderProductStatistics.length" class="empty-data">
|
|
<i class="el-icon-warning-outline"></i>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CurrentSituationArea',
|
|
props: {
|
|
currentSituationArea: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'normal'
|
|
}
|
|
},
|
|
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> |