Initial commit: 景耀JY1.0项目
This commit is contained in:
481
src/views/WarehouseManagement/WarehouseSummary/index.vue
Normal file
481
src/views/WarehouseManagement/WarehouseSummary/index.vue
Normal file
@@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card style="height: 850px">
|
||||
<div style="margin-top: 20px; margin-bottom: 20px">
|
||||
<h2 style="text-align: center; margin-bottom: 20px">仓储汇总</h2>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('待入库')">
|
||||
<div class="stat-number">{{ statistics.待入库 }}</div>
|
||||
<div class="stat-label">待入库</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('待出库')">
|
||||
<div class="stat-number">{{ statistics.待出库 }}</div>
|
||||
<div class="stat-label">待出库</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('可出库')">
|
||||
<div class="stat-number">{{ statistics.可出库 }}</div>
|
||||
<div class="stat-label">可出库</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('补货中')">
|
||||
<div class="stat-number">{{ statistics.补货中 }}</div>
|
||||
<div class="stat-label">补货中</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('生产中')">
|
||||
<div class="stat-number">{{ statistics.生产中 }}</div>
|
||||
<div class="stat-label">生产中</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" @click.native="showDetail('待投产')">
|
||||
<div class="stat-number">{{ statistics.待投产 }}</div>
|
||||
<div class="stat-label">待投产</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<h3 style="margin-bottom: 10px">{{ currentDetail }}详情</h3>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="detailData"
|
||||
highlight-current-row
|
||||
border
|
||||
stripe
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
height="400">
|
||||
<el-table-column
|
||||
v-for="(column, index) in detailColumns"
|
||||
:key="index"
|
||||
:width="column.width"
|
||||
:label="column.label"
|
||||
:align="column.align">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[column.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
statistics: {
|
||||
待入库: 0,
|
||||
待出库: 0,
|
||||
可出库: 0,
|
||||
补货中: 0,
|
||||
生产中: 0,
|
||||
待投产: 0
|
||||
},
|
||||
currentDetail: '',
|
||||
detailData: [],
|
||||
detailColumns: [],
|
||||
领料单流水号列表: [],
|
||||
statisticsTimer: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'id',
|
||||
'token'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
this.getStatistics()
|
||||
// 每半小时运行一次getStatistics
|
||||
this.statisticsTimer = setInterval(() => {
|
||||
this.getStatistics()
|
||||
console.log(1)
|
||||
}, 60 * 1000) // 30分钟 = 30 * 60 * 1000 毫秒
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清除定时器
|
||||
if (this.statisticsTimer) {
|
||||
clearInterval(this.statisticsTimer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取统计数据
|
||||
getStatistics() {
|
||||
this.loading = true
|
||||
|
||||
// 待入库数据:采购合同组件中状态为为到货的订单数量
|
||||
this.getPendingInStorage()
|
||||
|
||||
// 待出库数据:物料出库组件中所有领料单还未领的物料种类数量
|
||||
this.getPendingOutStorage()
|
||||
|
||||
// 可出库数据:待出库数据的基础上又库存的数量
|
||||
this.getAvailableOutStorage()
|
||||
|
||||
// 补货中数据:补货件查询组件中状态已到以外的订单数量
|
||||
this.getReplenishing()
|
||||
|
||||
// 生产中数据:补货件查询组件中状态为加工中的订单数量
|
||||
this.getInProduction()
|
||||
|
||||
// 待投产数据:补货件查询组件中状态为未开始的订单数量
|
||||
this.getPendingProduction()
|
||||
|
||||
this.loading = false
|
||||
},
|
||||
|
||||
// 获取待入库数据
|
||||
getPendingInStorage() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
let count = 0
|
||||
response.data.forEach(item => {
|
||||
if (item.状态 === '未到' || item.状态 === '加工中' || item.状态 === '部分到') {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.待入库 = count
|
||||
})
|
||||
},
|
||||
|
||||
// 获取待出库数据
|
||||
getPendingOutStorage() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '装配管理_未领完领料单_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
// 获取领料单流水号
|
||||
this.领料单流水号列表 = response.data.map(item => item.领料单流水号)
|
||||
if (this.领料单流水号列表.length > 0) {
|
||||
// 用领料单流水号查询物料明细
|
||||
var param2 = []
|
||||
param2[0] = ['领料单流水号列表', this.领料单流水号列表]
|
||||
var Data2 = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param2)
|
||||
this.ExecDatabase(Data2).then(response2 => {
|
||||
// 计算物料种类数量
|
||||
let count = 0
|
||||
response2.data.forEach(item => {
|
||||
if (item.已领数 < item.申请数) {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.待出库 = count
|
||||
})
|
||||
} else {
|
||||
this.statistics.待出库 = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取可出库数据
|
||||
getAvailableOutStorage() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '装配管理_未领完领料单_查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
// 获取领料单流水号
|
||||
const 领料单流水号列表 = response.data.map(item => item.领料单流水号)
|
||||
|
||||
if (领料单流水号列表.length > 0) {
|
||||
// 用领料单流水号查询物料明细
|
||||
var param2 = []
|
||||
param2[0] = ['领料单流水号列表', 领料单流水号列表]
|
||||
var Data2 = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param2)
|
||||
this.ExecDatabase(Data2).then(response2 => {
|
||||
// 计算库存数不为0的物料种类数量
|
||||
let count = 0
|
||||
response2.data.forEach(item => {
|
||||
// 假设库存数字段名为"库存"或"库存数量"
|
||||
if (item.已领数 < item.申请数 && item.库存数 > 0) {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.可出库 = count
|
||||
})
|
||||
} else {
|
||||
this.statistics.可出库 = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取补货中数据
|
||||
getReplenishing() {
|
||||
let count = 0
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
response.data.forEach(item => {
|
||||
if (item.状态 !== '已到' && item.状态 !== '完成' && item.状态 !== '已完成' && item.状态 !== '入库' && item.状态 !== '已编制') {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.补货中 = count
|
||||
})
|
||||
},
|
||||
|
||||
// 获取生产中数据
|
||||
getInProduction() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
let count = 0
|
||||
response.data.forEach(item => {
|
||||
if (item.状态 === '加工中') {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.生产中 = count
|
||||
})
|
||||
},
|
||||
|
||||
// 获取待投产数据
|
||||
getPendingProduction() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
let count = 0
|
||||
response.data.forEach(item => {
|
||||
if (item.状态 === '未开始') {
|
||||
count++
|
||||
}
|
||||
})
|
||||
this.statistics.待投产 = count
|
||||
})
|
||||
},
|
||||
|
||||
// 显示详情
|
||||
showDetail(type) {
|
||||
this.currentDetail = type
|
||||
this.loading = true
|
||||
|
||||
switch (type) {
|
||||
case '待入库':
|
||||
this.getPendingInStorageDetail()
|
||||
break
|
||||
case '待出库':
|
||||
this.getPendingOutStorageDetail()
|
||||
break
|
||||
case '可出库':
|
||||
this.getAvailableOutStorageDetail()
|
||||
break
|
||||
case '补货中':
|
||||
this.getReplenishingDetail()
|
||||
break
|
||||
case '生产中':
|
||||
this.getInProductionDetail()
|
||||
break
|
||||
case '待投产':
|
||||
this.getPendingProductionDetail()
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 获取待入库详情
|
||||
getPendingInStorageDetail() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => item.状态 === '未到' || item.状态 === '加工中' || item.状态 === '部分到')
|
||||
this.detailColumns = [
|
||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
||||
{ prop: '补货人', label: '补货人', width: '100px', align: 'center' },
|
||||
{ prop: '状态', label: '状态', width: '120px', align: 'center' },
|
||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
||||
{ prop: '补货期限', label: '补货期限', width: '180px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取待出库详情
|
||||
getPendingOutStorageDetail() {
|
||||
var param = []
|
||||
param[0] = ['领料单流水号列表', this.领料单流水号列表]
|
||||
var Data = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => (item.已领数 || 0) < (item.申请数 || 0))
|
||||
this.detailColumns = [
|
||||
{ prop: '领料单号', label: '领料单号', width: '100px', align: 'center' },
|
||||
{ prop: '物料名称', label: '物料名称', width: '150px', align: 'center' },
|
||||
{ prop: '图号或型号', label: '图号或型号', width: '150px', align: 'center' },
|
||||
{ prop: '货位名称', label: '库位', width: '180px', align: 'center' },
|
||||
{ prop: '库存数', label: '库存数', width: '100px', align: 'center' },
|
||||
{ prop: '申请数', label: '申请数', width: '100px', align: 'center' },
|
||||
{ prop: '已领数', label: '已领数', width: '100px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取可出库详情
|
||||
getAvailableOutStorageDetail() {
|
||||
var param = []
|
||||
param[0] = ['领料单流水号列表', this.领料单流水号列表]
|
||||
var Data = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => item.已领数 < item.申请数 && item.库存数 > 0)
|
||||
this.detailColumns = [
|
||||
{ prop: '领料单号', label: '领料单号', width: '100px', align: 'center' },
|
||||
{ prop: '物料名称', label: '物料名称', width: '150px', align: 'center' },
|
||||
{ prop: '图号或型号', label: '图号或型号', width: '150px', align: 'center' },
|
||||
{ prop: '货位名称', label: '库位', width: '180px', align: 'center' },
|
||||
{ prop: '库存数', label: '库存数', width: '100px', align: 'center' },
|
||||
{ prop: '申请数', label: '申请数', width: '100px', align: 'center' },
|
||||
{ prop: '已领数', label: '已领数', width: '100px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取补货中详情
|
||||
getReplenishingDetail() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => item.状态 !== '已到' && item.状态 !== '完成' && item.状态 !== '已完成' && item.状态 !== '入库' && item.状态 !== '已编制')
|
||||
this.detailColumns = [
|
||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
||||
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
||||
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
||||
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
||||
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取生产中详情
|
||||
getInProductionDetail() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => item.状态 === '加工中')
|
||||
this.detailColumns = [
|
||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
||||
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
||||
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
||||
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
||||
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取待投产详情
|
||||
getPendingProductionDetail() {
|
||||
var param = []
|
||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
||||
this.ExecDatabase(Data).then(response => {
|
||||
this.detailData = response.data.filter(item => item.状态 === '未开始')
|
||||
this.detailColumns = [
|
||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
||||
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
||||
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
||||
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
||||
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' }
|
||||
]
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
height: 120px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 为不同类型的卡片设置不同的颜色 */
|
||||
.stat-card:nth-child(1) .stat-number {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(2) .stat-number {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(3) .stat-number {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(4) .stat-number {
|
||||
color: #9c27b0;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(5) .stat-number {
|
||||
color: #e91e63;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(6) .stat-number {
|
||||
color: #607d8b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user