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

feat(wms): 新增发货报表页面及图表组件

Browse Source 
新增发货报表页面，包含时间趋势折线图和维度汇总柱状图
添加报表数据统计展示和明细表格功能
优化库存汇总页面，增加冷硬卷、冷轧卷等分类统计
重构发货报表页面布局和交互逻辑
This commit is contained in:
砂糖
2026-01-13 17:59:42 +08:00
parent 396b3de4c4
commit 57134e1359
6 changed files with 963 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
klp-ui/src/views/wms/delivery/report/charts/bar.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<div class="category-bar-chart-container" style="position: relative;">
<!-- 维度筛选下拉框 - 选择要汇总的维度 -->
<div class="chart-select" style="position: absolute; top: 10px; right: 10px; z-index: 10; text-align: right;">
<select v-model="selectedType" @change="renderChart">
<option value="itemName">按物料名称汇总</option>
<option value="specification">按规格汇总</option>
<option value="material">按材质汇总</option>
<option value="manufacturer">按厂家汇总</option>
</select>
</div>
<!-- 柱状图容器 -->
<div class="chart-content" ref="chartRef"></div>
</div>
</template>
<script>
// 引入ECharts，全局引入的项目可删除该行
import * as echarts from 'echarts'
export default {
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
chartInstance: null, // ECharts实例
selectedType: 'itemName', // 默认选中：按物料名称汇总
// 维度名称映射 - 用于图表标题/提示框展示
typeLabel: {
itemName: '物料名称',
specification: '规格',
material: '材质',
manufacturer: '厂家'
}
}
},
watch: {
// 监听数据源变化，深度监听，数据更新重新渲染
data: {
deep: true,
handler() {
this.renderChart()
}
}
},
mounted() {
// 挂载后初始化图表
this.renderChart()
// 窗口大小变化，图表自适应
window.addEventListener('resize', this.resizeChart)
},
beforeDestroy() {
// 销毁资源，防止内存泄漏
window.removeEventListener('resize', this.resizeChart)
this.chartInstance && this.chartInstance.dispose()
},
methods: {
/**
* 核心处理方法：按选择的维度 + itemType自动匹配字段，汇总数据
* ✅ 核心规则：itemType=product → 取嵌套的product对象内的对应字段
* ✅ 其他itemType → 取根级的对应字段
*/
formatChartData() {
const sourceData = this.data || []
if (sourceData.length === 0) return { xData: [], yData: [] }
// 分组汇总的核心对象
const countObj = {}
sourceData.forEach(item => {
if (!item) return
let targetValue = ''
const { itemType } = item
// ✅ 核心判断：根据itemType决定取值来源
switch (this.selectedType) {
case 'itemName':
targetValue = itemType === 'product'
? (item.product?.productName || item.product?.name || '无名称')
: (item.itemName || '无名称')
break
case 'specification':
targetValue = itemType === 'product'
? (item.product?.specification || '无规格')
: (item.specification || '无规格')
break
case 'material':
targetValue = itemType === 'product'
? (item.product?.material || '无材质')
: (item.material || '无材质')
break
case 'manufacturer':
targetValue = itemType === 'product'
? (item.product?.manufacturer || '无厂家')
: (item.manufacturer || '无厂家')
break
}
// 空值统一处理为【无数据】，避免图表展示空字符串
const key = targetValue || '无数据'
countObj[key] = countObj[key] ? countObj[key] + 1 : 1
})
// 转为数组并按【数量倒序】排列，数量多的柱子在前，更直观
const sortArr = Object.entries(countObj).sort((a, b) => b[1] - a[1])
// 分离x轴类目 和 y轴数量
const xData = sortArr.map(item => item[0])
const yData = sortArr.map(item => item[1])
return { xData, yData }
},
// 初始化渲染柱状图
renderChart() {
const { xData, yData } = this.formatChartData()
const chartDom = this.$refs.chartRef
if (!chartDom) return
// 初始化ECharts实例
this.chartInstance = echarts.init(chartDom)
const option = {
grid: { left: '8%', right: '8%', bottom: '8%', top: '8%' },
// 图表标题，根据选中维度动态变化
title: {
text: `${this.typeLabel[this.selectedType]} 数据汇总`,
left: 'center',
textStyle: { fontSize: 16 }
},
// 悬浮提示框
tooltip: {
trigger: 'axis',
formatter: `{b}<br/>数量：{c} 条`,
axisPointer: { type: 'shadow' }
},
// x轴：类目轴（名称/规格/材质/厂家）
xAxis: [
{
type: 'category',
data: xData,
axisLabel: {
rotate: 30, // 文字旋转，防止类目名称过长重叠
fontSize: 12,
overflow: 'truncate'
},
axisTick: { alignWithLabel: true }
}
],
// y轴：数量轴，最小值为0
yAxis: [
{
type: 'value',
name: '数据数量',
min: 0,
axisLabel: { formatter: '{value}' }
}
],
// 柱状图核心配置
series: [
{
name: '数据数量',
type: 'bar',
barWidth: '60%', // 柱子宽度
data: yData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0088ff' },
{ offset: 1, color: '#0055bb' }
])
},
// 柱子上显示具体数值
label: {
show: true,
position: 'top',
fontSize: 12
}
}
]
}
// 设置配置项渲染
this.chartInstance.setOption(option, true)
},
// 窗口大小变化，图表自适应
resizeChart() {
this.chartInstance && this.chartInstance.resize()
}
}
}
</script>
<style scoped>
/* 外层容器样式 */
.category-bar-chart-container {
width: 100%;
height: 550px;
}
/* 筛选下拉框样式 */
.chart-select {
width: 100%;
padding: 8px 0;
text-align: center;
}
.chart-select select {
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #dcdcdc;
cursor: pointer;
}
/* 图表容器样式 */
.chart-content {
width: 100%;
height: calc(100% - 40px);
}
</style>

204
klp-ui/src/views/wms/delivery/report/charts/line.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<!-- 折线图容器，必须设置宽高，ref用于挂载ECharts实例 -->
<div class="export-time-line-chart" ref="chartRef"></div>
</template>
<script>
// 引入ECharts核心，项目如果全局引入了ECharts可删除此行
import * as echarts from 'echarts'
export default {
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
chartInstance: null, // 保存ECharts实例，防止重复创建
}
},
watch: {
// 监听数据变化，数据更新时重新渲染图表
data: {
deep: true,
handler() {
this.renderChart()
}
}
},
mounted() {
// 组件挂载后初始化图表
this.renderChart()
// 监听窗口大小变化，图表自适应
window.addEventListener('resize', this.resizeChart)
},
beforeDestroy() {
// 销毁前释放资源，防止内存泄漏
window.removeEventListener('resize', this.resizeChart)
this.chartInstance && this.chartInstance.dispose()
},
methods: {
/**
* 核心方法：处理原始数据，按exportTime分组汇总 + 智能分组粒度
* 根据数据的时间跨度 自动决定分组方式：分钟/小时/天，完美匹配你的需求
*/
formatChartData() {
const sourceData = this.data || []
// 1. 边界处理：无数据直接返回空结构
if (sourceData.length === 0) {
return { xAxisData: [], seriesData: [] }
}
// 2. 过滤有效数据 + 提取exportTime并转成Date对象，过滤无exportTime的脏数据
const validData = sourceData.filter(item => item.exportTime)
if (validData.length === 0) {
return { xAxisData: [], seriesData: [] }
}
// 3. 提取所有时间戳 + 获取【时间范围】：最早时间、最晚时间
const timeList = validData.map(item => {
return {
time: new Date(item.exportTime),
originItem: item
}
})
const minTime = new Date(Math.min(...timeList.map(item => item.time.getTime()))) // 最早导出时间
const maxTime = new Date(Math.max(...timeList.map(item => item.time.getTime()))) // 最晚导出时间
const timeDiff = maxTime.getTime() - minTime.getTime() // 时间跨度(毫秒)
// 4. ✅ 核心逻辑：根据时间跨度 智能决定分组粒度 + 分组格式
let groupFormat = '' // 分组格式化规则
let groupFn = null // 分组匹配函数
const oneHour = 60 * 60 * 1000 // 1小时毫秒数
const oneDay = 24 * oneHour // 1天毫秒数
const threeDay = 3 * oneDay // 3天毫秒数
const sevenDay = 7 * oneDay // 7天毫秒数
// 🔸 时间跨度 < 1小时 → 按【分钟】分组 (粒度:5分钟/组，分组数量自动适配)
if (timeDiff < oneHour) {
groupFormat = 'yyyy-MM-dd HH:mm'
groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())} ${this.addZero(date.getHours())}:${this.addZero(Math.floor(date.getMinutes()/5)*5)}`
}
// 🔸 1小时 ≤ 跨度 < 1天 → 按【小时】分组 (粒度:1小时/组)
else if (timeDiff >= oneHour && timeDiff < oneDay) {
groupFormat = 'yyyy-MM-dd HH:00'
groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())} ${this.addZero(date.getHours())}:00`
}
// 🔸 1天 ≤ 跨度 < 7天 → 按【自然日】分组 (粒度:1天/组)
else if (timeDiff >= oneDay && timeDiff < sevenDay) {
groupFormat = 'yyyy-MM-dd'
groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())}`
}
// 🔸 时间跨度 ≥7天 → 按【日期】分组，粒度自动放宽，分组数量控制在10-20组内
else {
groupFormat = 'yyyy-MM-dd'
groupFn = (date) => `${date.getFullYear()}-${this.addZero(date.getMonth()+1)}-${this.addZero(date.getDate())}`
}
// 5. 按规则分组汇总数据，默认汇总：每组的【数据条数】
const groupObj = {}
timeList.forEach(item => {
const groupKey = groupFn(item.time)
if (!groupObj[groupKey]) {
groupObj[groupKey] = 0
}
groupObj[groupKey] += 1 // 【核心汇总】统计每组数量，如需汇总净重可修改此行
})
// 6. 对分组后的时间排序（正序），保证折线图时间轴正确
const xAxisData = Object.keys(groupObj).sort((a, b) => new Date(a) - new Date(b))
const seriesData = xAxisData.map(key => groupObj[key])
return { xAxisData, seriesData }
},
// 补零工具函数：格式化 月/日/时/分 为 两位数（如：01、09）
addZero(num) {
return num < 10 ? `0${num}` : num
},
// 初始化并渲染折线图
renderChart() {
const { xAxisData, seriesData } = this.formatChartData()
const chartDom = this.$refs.chartRef
if (!chartDom) return
// 初始化ECharts实例
this.chartInstance = echarts.init(chartDom)
const option = {
// 图表内边距，优化视觉
grid: { left: '8%', right: '8%', bottom: '8%', top: '8%' },
// 标题
title: {
text: '时间趋势',
left: 'center',
textStyle: { fontSize: 16 }
},
// 提示框：hover显示详情
tooltip: {
trigger: 'axis',
formatter: '{b}<br/>数据量：{c} 条',
axisPointer: { type: 'shadow' }
},
// 图例
// legend: { data: ['数据条数'], left: 'left' },
// x轴：时间轴
xAxis: {
type: 'category',
data: xAxisData,
// axisLabel: {
// rotate: 30, // 时间文字旋转30度，防止重叠
// fontSize: 12
// },
boundaryGap: false // 折线图紧贴坐标轴
},
// y轴：数量轴，必须是正数
yAxis: {
type: 'value',
name: '数据条数',
min: 0,
axisLabel: { formatter: '{value}' }
},
// 折线图核心数据
series: [
{
name: '数据条数',
type: 'line',
data: seriesData,
smooth: true, // 平滑折线，美观
symbol: 'circle', // 拐点显示圆点
symbolSize: 6, // 拐点大小
lineStyle: { width: 2 }, // 线条宽度
itemStyle: { color: '#1677ff' }, // 折线/拐点颜色
areaStyle: { // 折线下方渐变背景，增强视觉效果
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(22, 119, 255, 0.3)' },
{ offset: 1, color: 'rgba(22, 119, 255, 0)' }
])
}
}
]
}
// 设置配置项并渲染
this.chartInstance.setOption(option)
},
// 窗口大小变化时，图表自适应
resizeChart() {
this.chartInstance && this.chartInstance.resize()
}
}
}
</script>
<style scoped>
/* 图表容器必须设置宽高，否则图表无法显示 */
.export-time-line-chart {
width: 100%;
height: 500px;
}
</style>

376
klp-ui/src/views/wms/delivery/report/index.vue
View File

@@ -1,220 +1,204 @@
<template>
<div class="delivery-report" v-loading="loading">
<!-- 时间筛选 -->
<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>
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeStart" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeEnd" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
</el-form-item>
<el-form-item label="入场钢卷号" prop="endTime">
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="当前钢卷号" prop="endTime">
<el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="逻辑库位" prop="endTime">
<warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
style="width: 100%; display: inline-block; width: 200px;" clearable />
</el-form-item>
<el-form-item label="产品名称" prop="endTime">
<el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="规格" prop="endTime">
<memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="材质" prop="endTime">
<muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="厂家" prop="endTime">
<muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
:options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item prop="endTime">
<el-button type="primary" @click="getList">查询</el-button>
<el-button type="primary" @click="exportData">导出</el-button>
</el-form-item>
</el-form>
</el-row>
<!-- 汇总信息 -->
<el-card class="summary-card" v-if="summary">
<template #header>
<div class="card-header">
<span>发货报表汇总</span>
</div>
</template>
<el-descriptions :column="3" border>
<el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
<el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
<el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
<el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
<el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
<el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-descriptions title="统计信息" :column="3" border>
<el-descriptions-item label="总钢卷数量">{{ summary.totalCount }}</el-descriptions-item>
<el-descriptions-item label="总重">{{ summary.totalWeight }}t</el-descriptions-item>
<el-descriptions-item label="均重">{{ summary.avgWeight }}t</el-descriptions-item>
</el-descriptions>
<!-- 详细数据表格 -->
<el-card class="table-card" v-if="details && details.length > 0">
<template #header>
<div class="card-header">
<span>产品发货明细</span>
<span>共 {{ details.length }} 种产品</span>
</div>
</template>
<el-table
:data="details"
style="width: 100%"
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>
<el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
<el-col :span="12">
<line-chart :data="list"></line-chart>
</el-col>
<el-col :span="12">
<bar-chart :data="list"></bar-chart>
</el-col>
</el-row>
<!-- 空状态 -->
<el-card v-else-if="!loading">
<el-empty description="暂无数据" />
</el-card>
<el-descriptions title="明细信息" :column="3" border>
</el-descriptions>
<el-table :data="list" border height="calc(100vh - 320px)">
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
<template slot-scope="scope">
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
</template>
</el-table-column>
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
<template slot-scope="scope">
<coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="逻辑库位" align="center" prop="warehouseName" />
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
<el-table-column label="产品类型" align="center" width="250">
<template slot-scope="scope">
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
</template>
</el-table-column>
<el-table-column label="重量 (吨)" align="center" prop="netWeight" />
<el-table-column label="长度 (米)" align="center" prop="length" />
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
<el-table-column label="发货时间" align="center" prop="exportTime" />
<el-table-column label="出库状态" align="center" prop="status">
<!-- 0在库，1已出库 -->
<template slot-scope="scope">
{{ scope.row.status === 0 ? '在库' : '已出库' }}
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updateByName" />
<el-table-column label="更新时间" align="center" prop="updateTime" />
</el-table>
</div>
</template>
<script>
import { getDeliveryReport } from '@/api/wms/deliveryPlan'
import { listCoilWithIds } from "@/api/wms/coil";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
import MemoInput from "@/components/MemoInput";
import MutiSelect from "@/components/MutiSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import BarChart from "./charts/bar.vue";
import LineChart from "./charts/line.vue";
export default {
name: 'DeliveryReport',
components: {
ProductInfo,
RawMaterialInfo,
CoilNo,
MemoInput,
MutiSelect,
WarehouseSelect,
BarChart,
LineChart,
},
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
data() {
// 工具函数：个位数补零，保证格式统一（比如 9 → 09，5 → 05）
const addZero = (num) => num.toString().padStart(2, '0')
const now = new Date() // 当前本地北京时间
// 核心：获取【昨天】的日期对象（自动处理跨月/跨年，无边界问题）
const yesterday = new Date(now)
yesterday.setDate(yesterday.getDate() - 1)
// 昨天的年、月、日（补零格式化）
const yesYear = yesterday.getFullYear()
const yesMonth = addZero(yesterday.getMonth() + 1)
const yesDay = addZero(yesterday.getDate())
// 今天的年、月、日（补零格式化）
const nowYear = now.getFullYear()
const nowMonth = addZero(now.getMonth() + 1)
const nowDay = addZero(now.getDate())
// ✅ 目标时间区间：昨天早上6点 至 今天早上6点
const startTime = `${yesYear}-${yesMonth}-${yesDay} 06:00:00`
const endTime = `${nowYear}-${nowMonth}-${nowDay} 06:00:00`
return {
summary: null,
details: [],
dateRange: [],
loading: false
list: [],
queryParams: {
pageNum: 1,
pageSize: 9999,
status: 1,
byExportTimeStart: startTime,
byExportTimeEnd: endTime,
selectType: 'product',
enterCoilNo: '',
currentCoilNo: '',
warehouseId: '',
productName: '',
itemSpecification: '',
itemMaterial: '',
itemManufacturer: '',
},
loading: false,
}
},
mounted() {
this.initDateRange()
this.getReport()
computed: {
summary() {
// 总钢卷数量、总重、均重
const totalCount = this.list.length
const totalWeight = this.list.reduce((acc, cur) => acc + parseFloat(cur.netWeight), 0)
const avgWeight = totalCount > 0 ? (totalWeight / totalCount).toFixed(2) : 0
return {
totalCount,
totalWeight: totalWeight.toFixed(2),
avgWeight,
}
}
},
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)
const today = new Date()
this.dateRange = [
this.formatDate(firstDay),
this.formatDate(today)
]
},
// 格式化日期为 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
}
getList() {
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.summary = res.data?.summary || null
this.details = res.data?.details || []
} catch (error) {
console.error('获取发货报表失败:', error)
this.$message.error('获取数据失败')
this.summary = null
this.details = []
} finally {
listCoilWithIds({
...this.queryParams
}).then(res => {
this.list = res.rows
this.loading = false
}
})
},
// 格式化重量显示
formatWeight(weight) {
if (!weight && weight !== 0) return '0.000'
const num = Number(weight)
return isNaN(num) ? '0.000' : num.toFixed(3)
// 导出
exportData() {
this.download('wms/materialCoil/export', {
coilIds: this.list.map(item => item.coilId).join(','),
status: 1
}, `materialCoil_${new Date().getTime()}.xlsx`)
},
// 格式化日均值显示
formatDailyValue(value) {
if (!value && value !== 0) return '0.00'
const num = Number(value)
return isNaN(num) ? '0.00' : num.toFixed(2)
}
},
mounted() {
this.getList()
}
}
</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>
<style scoped></style>

220
klp-ui/src/views/wms/delivery/report/index_snap.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<div class="delivery-report" v-loading="loading">
<!-- 时间筛选 -->
<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" v-if="summary">
<template #header>
<div class="card-header">
<span>发货报表汇总</span>
</div>
</template>
<el-descriptions :column="3" border>
<el-descriptions-item label="总运单数">{{ summary.waybillCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="总卷数">{{ summary.coilCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="总重量(吨)">{{ formatWeight(summary.totalWeight) }}</el-descriptions-item>
<el-descriptions-item label="日均运单数">{{ formatDailyValue(summary.dailyWaybillCount) }}</el-descriptions-item>
<el-descriptions-item label="日均卷数">{{ formatDailyValue(summary.dailyCoilCount) }}</el-descriptions-item>
<el-descriptions-item label="日均重量(吨)">{{ formatWeight(summary.dailyWeight) }}</el-descriptions-item>
<el-descriptions-item label="开始时间" :span="2">{{ summary.startTime || '-' }}</el-descriptions-item>
<el-descriptions-item label="结束时间" :span="2">{{ summary.endTime || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 详细数据表格 -->
<el-card class="table-card" v-if="details && details.length > 0">
<template #header>
<div class="card-header">
<span>产品发货明细</span>
<span>共 {{ details.length }} 种产品</span>
</div>
</template>
<el-table
:data="details"
style="width: 100%"
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>
<!-- 空状态 -->
<el-card v-else-if="!loading">
<el-empty description="暂无数据" />
</el-card>
</div>
</template>
<script>
import { getDeliveryReport } from '@/api/wms/deliveryPlan'
export default {
name: 'DeliveryReport',
data() {
return {
summary: null,
details: [],
dateRange: [],
loading: false
}
},
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)
const today = new Date()
this.dateRange = [
this.formatDate(firstDay),
this.formatDate(today)
]
},
// 格式化日期为 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.summary = res.data?.summary || null
this.details = res.data?.details || []
} catch (error) {
console.error('获取发货报表失败:', error)
this.$message.error('获取数据失败')
this.summary = null
this.details = []
} finally {
this.loading = false
}
},
// 格式化重量显示
formatWeight(weight) {
if (!weight && weight !== 0) return '0.000'
const num = Number(weight)
return isNaN(num) ? '0.000' : num.toFixed(3)
},
// 格式化日均值显示
formatDailyValue(value) {
if (!value && value !== 0) 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>