feat(发货报表): 新增发货报表统计功能
添加发货报表页面，包含日期范围筛选、汇总信息展示和详细数据表格 新增API接口获取发货报表数据 实现数据计算和格式化显示功能
This commit is contained in:
砂糖
@@ -42,3 +42,18 @@ export function delDeliveryPlan(planId) {
|
||||
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
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
// 监听字典数据加载，当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