feat(发货报表): 新增发货报表统计功能
添加发货报表页面，包含日期范围筛选、汇总信息展示和详细数据表格 新增API接口获取发货报表数据 实现数据计算和格式化显示功能
This commit is contained in:
砂糖
@@ -42,3 +42,18 @@ export function delDeliveryPlan(planId) {
|
|||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取发货报表统计信息
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {*} query.startTime 开始时间
|
||||||
|
* @param {*} query.endTime 结束时间
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function getDeliveryReport(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/deliveryPlan/report',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -355,7 +355,6 @@ export default {
|
|||||||
})
|
})
|
||||||
return acidAction ? parseInt(acidAction.value) : null
|
return acidAction ? parseInt(acidAction.value) : null
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表
|
// 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表
|
||||||
|
|||||||
250
klp-ui/src/views/wms/delivery/report/index.vue
Normal file
250
klp-ui/src/views/wms/delivery/report/index.vue
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 时间筛选 -->
|
||||||
|
<div class="filter-container">
|
||||||
|
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"
|
||||||
|
@change="handleDateChange" />
|
||||||
|
<el-button type="primary" @click="getReport">查询</el-button>
|
||||||
|
<el-button @click="resetDate">重置</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 汇总信息 -->
|
||||||
|
<el-card class="summary-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>发货报表汇总</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-descriptions :column="4" border>
|
||||||
|
<el-descriptions-item label="产品种类">{{ summary.productCount }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="总运单数">{{ summary.totalWaybillCount }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="总卷数">{{ summary.totalCoilCount }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="总重量(吨)">{{ summary.totalWeight }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="统计周期">{{ summary.dateRange }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="日均运单数">{{ summary.avgDailyWaybillCount }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="日均卷数">{{ summary.avgDailyCoilCount }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="日均重量(吨)">{{ summary.avgDailyWeight }}</el-descriptions-item>
|
||||||
|
|
||||||
|
</el-descriptions>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 详细数据表格 -->
|
||||||
|
<el-card class="table-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>详细发货数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-table :data="reports" style="width: 100%" height="400" stripe v-loading="loading">
|
||||||
|
<el-table-column prop="productName" label="产品名称" min-width="120" fixed="left" />
|
||||||
|
<el-table-column prop="waybillCount" label="运单数量" min-width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ row.waybillCount || 0 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="coilCount" label="卷数" min-width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ row.coilCount || 0 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="totalWeight" label="总重量(吨)" min-width="120" align="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ formatWeight(row.totalWeight) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dailyWaybillCount" label="日均运单数" min-width="120" align="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ formatDailyValue(row.dailyWaybillCount) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dailyCoilCount" label="日均卷数" min-width="120" align="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ formatDailyValue(row.dailyCoilCount) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dailyWeight" label="日均重量(吨)" min-width="120" align="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span>{{ formatWeight(row.dailyWeight) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getDeliveryReport } from '@/api/wms/deliveryPlan'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DeliveryReport',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
reports: [],
|
||||||
|
dateRange: [],
|
||||||
|
loading: false,
|
||||||
|
summary: {
|
||||||
|
productCount: 0,
|
||||||
|
totalWaybillCount: 0,
|
||||||
|
totalCoilCount: 0,
|
||||||
|
totalWeight: 0,
|
||||||
|
avgDailyWaybillCount: 0,
|
||||||
|
avgDailyCoilCount: 0,
|
||||||
|
avgDailyWeight: 0,
|
||||||
|
dateRange: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initDateRange()
|
||||||
|
this.getReport()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化日期范围（当月）
|
||||||
|
initDateRange() {
|
||||||
|
const now = new Date()
|
||||||
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||||
|
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
|
||||||
|
|
||||||
|
this.dateRange = [
|
||||||
|
this.formatDate(firstDay),
|
||||||
|
this.formatDate(lastDay)
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化日期为 YYYY-MM-dd
|
||||||
|
formatDate(date) {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理日期变化
|
||||||
|
handleDateChange() {
|
||||||
|
this.getReport()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置日期
|
||||||
|
resetDate() {
|
||||||
|
this.initDateRange()
|
||||||
|
this.getReport()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取报表数据
|
||||||
|
async getReport() {
|
||||||
|
if (!this.dateRange || this.dateRange.length !== 2) {
|
||||||
|
this.$message.warning('请选择日期范围')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const query = {
|
||||||
|
startTime: `${this.dateRange[0]} 00:00:00`,
|
||||||
|
endTime: `${this.dateRange[1]} 23:59:59`
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await getDeliveryReport(query)
|
||||||
|
this.reports = res.data || []
|
||||||
|
this.calculateSummary()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取发货报表失败:', error)
|
||||||
|
this.$message.error('获取数据失败')
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算汇总数据
|
||||||
|
calculateSummary() {
|
||||||
|
const summary = {
|
||||||
|
productCount: this.reports.length,
|
||||||
|
totalWaybillCount: 0,
|
||||||
|
totalCoilCount: 0,
|
||||||
|
totalWeight: 0,
|
||||||
|
avgDailyWaybillCount: 0,
|
||||||
|
avgDailyCoilCount: 0,
|
||||||
|
avgDailyWeight: 0,
|
||||||
|
dateRange: `${this.dateRange[0]} 至 ${this.dateRange[1]}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算总和
|
||||||
|
this.reports.forEach(item => {
|
||||||
|
summary.totalWaybillCount += Number(item.waybillCount) || 0
|
||||||
|
summary.totalCoilCount += Number(item.coilCount) || 0
|
||||||
|
summary.totalWeight += Number(item.totalWeight) || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算日均值
|
||||||
|
const days = this.calculateDays()
|
||||||
|
if (days > 0) {
|
||||||
|
summary.avgDailyWaybillCount = (summary.totalWaybillCount / days).toFixed(2)
|
||||||
|
summary.avgDailyCoilCount = (summary.totalCoilCount / days).toFixed(2)
|
||||||
|
summary.avgDailyWeight = (summary.totalWeight / days).toFixed(3)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.summary = summary
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算日期范围内的天数
|
||||||
|
calculateDays() {
|
||||||
|
if (!this.dateRange || this.dateRange.length !== 2) return 0
|
||||||
|
|
||||||
|
const start = new Date(this.dateRange[0])
|
||||||
|
const end = new Date(this.dateRange[1])
|
||||||
|
const timeDiff = end.getTime() - start.getTime()
|
||||||
|
return Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1 // 包含起止日期
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化重量显示
|
||||||
|
formatWeight(weight) {
|
||||||
|
if (!weight) return '0.000'
|
||||||
|
const num = Number(weight)
|
||||||
|
return isNaN(num) ? '0.000' : num.toFixed(3)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化日均值显示
|
||||||
|
formatDailyValue(value) {
|
||||||
|
if (!value) return '0.00'
|
||||||
|
const num = Number(value)
|
||||||
|
return isNaN(num) ? '0.00' : num.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.delivery-report {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-descriptions__label) {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-descriptions__content) {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user