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

Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

Browse Source
This commit is contained in:
Joshi
2026-01-14 07:56:37 +08:00
parent d43eb8e2b9 57134e1359
commit 90b45649ad
8 changed files with 972 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
klp-ui/src/views/wms/coil/Inventory/itemSummary.vue
View File

@@ -5,31 +5,48 @@
<el-form inline>
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
<el-form-item label="逻辑库位">
<!-- <el-form-item label="逻辑库位">
<WarehouseSelect v-model="queryParams.warehouseId" @change="handleWarehouseChange" />
</el-form-item>
</el-form-item> -->
<!-- 真实库区 -->
<el-form-item label="真实库区">
<!-- <el-form-item label="真实库区">
<ActualWarehouseSelect
v-model="queryParams.actualWarehouseId"
@change="handleActualWarehouseChange"
:width="220"
/>
</el-form-item>
</el-form-item> -->
</el-form>
<!-- el-descriptions 汇总数据 -->
<!-- 汇总数据展示 -->
<div class="summary-container" v-if="list.length > 0">
<h3>数据汇总</h3>
<el-descriptions :column="3" border class="summary-descriptions">
<el-descriptions-item label="总卷数">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
<el-descriptions :column="4" border class="summary-descriptions">
<el-descriptions-item label="总卷数" :span="2">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="成品卷数">{{ summaryData.productCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="原料卷数">{{ summaryData.rawMaterialCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="总重(t)">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{ summaryData.productTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{ summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="总重(t)" :span="2">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight
}}</el-descriptions-item>
<el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{
summaryData.productTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{
summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="冷硬卷数">{{ summaryData.lowHardCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="冷轧卷数">{{ summaryData.coldRollCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="镀锌卷数">{{ summaryData.zincCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="热轧卷板数">{{ summaryData.hotRollCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="冷硬卷总重(t)">{{ summaryData.lowHardTotalNetWeight }} / {{
summaryData.lowHardTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="冷轧卷总重(t)">{{ summaryData.coldRollTotalNetWeight }} / {{
summaryData.coldRollTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="镀锌卷总重(t)">{{ summaryData.zincTotalNetWeight }} / {{ summaryData.zincTotalGrossWeight
}}</el-descriptions-item>
<el-descriptions-item label="热轧卷板总重(t)">{{ summaryData.hotRollTotalNetWeight }} / {{
summaryData.hotRollTotalGrossWeight }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 汇总总卷数，成品卷数，原料卷数，总毛重(t)，总净重(t)，成品总毛重(t)，成品总净重(t)，原料总毛重(t)，原料总净重(t) -->
@@ -54,6 +71,68 @@
<el-table-column prop="itemType" label="物料类型" align="center" min-width="120"
:formatter="formatItemType"></el-table-column>
</el-table>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
如果当前是仓库统计，将仓库id作为筛选条件 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<div class="drill-down-content">
<!-- 钻取条件显示 -->
<div class="drill-down-header">
<el-tag size="large" v-if="drillDownParams.itemType">
{{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.itemName" type="primary">
{{ drillDownParams.itemName }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
{{ drillDownParams.warehouseName }}
</el-tag>
</div>
<!-- 加载状态 -->
<el-skeleton :loading="drillDownLoading" animated>
<template #template>
<div class="demo-skeleton">
<el-skeleton-item variant="p" style="width: 80%" />
<el-skeleton-item variant="text" style="width: 30%" />
<el-skeleton-item variant="text" style="width: 60%" />
</div>
</template>
<!-- 钻取表格 -->
<el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe
style="width: 100%" v-if="!drillDownLoading">
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
<el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
<el-table-column prop="supplierCoilNo" label="厂家卷号" align="center" min-width="180"></el-table-column>
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="产品类型" align="center" min-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="updateTime" />
<el-table-column prop="grossWeight" label="毛重(t)" align="center" min-width="100"></el-table-column>
<el-table-column prop="netWeight" label="净重(t)" align="center" min-width="100"></el-table-column>
</el-table>
</el-skeleton>
<!-- 分页 -->
<div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
<el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
:page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
@size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
@@ -89,7 +168,22 @@ export default {
productTotalGrossWeight: 0, // 成品总毛重(t)
productTotalNetWeight: 0, // 成品总净重(t)
rawMaterialTotalGrossWeight: 0, // 原料总毛重(t)
rawMaterialTotalNetWeight: 0 // 原料总净重(t)
rawMaterialTotalNetWeight: 0, // 原料总净重(t)
lowHardCoilCount: 0, // 冷硬卷数
coldRollCoilCount: 0, // 冷轧卷数
zincCoilCount: 0, // 镀锌卷数
hotRollCoilCount: 0, // 热轧卷数
lowHardTotalNetWeight: 0, // 冷硬卷总净重(t)
coldRollTotalNetWeight: 0, // 冷轧卷总净重(t)
zincTotalNetWeight: 0, // 镀锌卷总净重(t)
hotRollTotalNetWeight: 0, // 热轧卷总净重(t)
lowHardTotalGrossWeight: 0, // 冷硬卷总毛重(t)
coldRollTotalGrossWeight: 0, // 冷轧卷总毛重(t)
zincTotalGrossWeight: 0, // 镀锌卷总毛重(t)
hotRollTotalGrossWeight: 0, // 热轧卷总毛重(t)
}
}
},
@@ -161,7 +255,22 @@ export default {
productTotalGrossWeight: 0,
productTotalNetWeight: 0,
rawMaterialTotalGrossWeight: 0,
rawMaterialTotalNetWeight: 0
rawMaterialTotalNetWeight: 0,
lowHardCoilCount: 0, // 冷硬卷数
coldRollCoilCount: 0, // 冷轧卷数
zincCoilCount: 0, // 镀锌卷数
hotRollCoilCount: 0, // 热轧卷数
lowHardTotalNetWeight: 0, // 冷硬卷总净重(t)
coldRollTotalNetWeight: 0, // 冷轧卷总净重(t)
zincTotalNetWeight: 0, // 镀锌卷总净重(t)
hotRollTotalNetWeight: 0, // 热轧卷总净重(t)
lowHardTotalGrossWeight: 0, // 冷硬卷总毛重(t)
coldRollTotalGrossWeight: 0, // 冷轧卷总毛重(t)
zincTotalGrossWeight: 0, // 镀锌卷总毛重(t)
hotRollTotalGrossWeight: 0, // 热轧卷总毛重(t)
};
// 遍历列表数据累加计算
@@ -180,13 +289,32 @@ export default {
summary.totalGrossWeight += grossWeight;
summary.totalNetWeight += netWeight;
let itemName = '';
if (item.itemType === 'product') {
summary.productTotalGrossWeight += grossWeight;
summary.productTotalNetWeight += netWeight;
itemName = item.product.productName;
} else if (item.itemType === 'raw_material') {
summary.rawMaterialTotalGrossWeight += grossWeight;
summary.rawMaterialTotalNetWeight += netWeight;
itemName = item.rawMaterial.rawMaterialName;
}
if (itemName == '冷轧卷') {
summary.coldRollCoilCount += item.coilCount || 0;
summary.coldRollTotalNetWeight += netWeight;
summary.coldRollTotalGrossWeight += grossWeight;
} else if (itemName == '镀锌卷') {
summary.zincCoilCount += item.coilCount || 0;
summary.zincTotalNetWeight += netWeight;
summary.zincTotalGrossWeight += grossWeight;
} else if (itemName == '热轧卷板') {
summary.hotRollCoilCount += item.coilCount || 0;
summary.hotRollTotalNetWeight += netWeight;
summary.hotRollTotalGrossWeight += grossWeight;
} else if (itemName == '冷硬卷') {
summary.lowHardCoilCount += item.coilCount || 0;
summary.lowHardTotalNetWeight += netWeight;
summary.lowHardTotalGrossWeight += grossWeight;
}
});

492
klp-ui/src/views/wms/coil/box2.vue
View File

@@ -1,492 +0,0 @@
<template>
<div class="statistics-container" v-loading="loading">
<!-- 按照物料类型盘点 -->
<!-- 统计方式选择 -->
<el-form inline>
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
<!-- <el-form-item label="逻辑库位">
<WarehouseSelect v-model="queryParams.warehouseId" @change="handleWarehouseChange" />
</el-form-item> -->
<!-- 真实库区 -->
<!-- <el-form-item label="真实库区">
<ActualWarehouseSelect
v-model="queryParams.actualWarehouseId"
@change="handleActualWarehouseChange"
:width="220"
/>
</el-form-item> -->
</el-form>
<!-- el-descriptions 汇总数据 -->
<!-- 汇总数据展示 -->
<div class="summary-container" v-if="list.length > 0">
<h3>数据汇总</h3>
<el-descriptions :column="3" border class="summary-descriptions">
<el-descriptions-item label="总卷数">{{ summaryData.totalCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="成品卷数">{{ summaryData.productCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="原料卷数">{{ summaryData.rawMaterialCoilCount }} 卷</el-descriptions-item>
<el-descriptions-item label="总重(t)">{{ summaryData.totalNetWeight }} / {{ summaryData.totalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="成品总重(t)">{{ summaryData.productTotalNetWeight }} / {{ summaryData.productTotalGrossWeight }}</el-descriptions-item>
<el-descriptions-item label="原料总重(t)">{{ summaryData.rawMaterialTotalNetWeight }} / {{ summaryData.rawMaterialTotalGrossWeight }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 汇总总卷数，成品卷数，原料卷数，总毛重(t)，总净重(t)，成品总毛重(t)，成品总净重(t)，原料总毛重(t)，原料总净重(t) -->
<!-- 数据表格 -->
<div class="table-container">
<el-table max-height="800" :data="list" border stripe style="width: 100%; margin-top: 20px"
@row-click="handleTableRowClick" row-class-name="table-row-hover">
<!-- 物料ID/名称列：仅物料统计时有效 -->
<el-table-column label="物料信息" align="center" min-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 prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
<el-table-column prop="totalGrossWeight" label="总毛重(t)" align="center" min-width="120"></el-table-column>
<el-table-column prop="totalNetWeight" label="总净重(t)" align="center" min-width="120"></el-table-column>
<!-- 物料类型列：仅物料统计时有效 -->
<el-table-column prop="itemType" label="物料类型" align="center" min-width="120"
:formatter="formatItemType"></el-table-column>
</el-table>
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
如果当前是仓库统计，将仓库id作为筛选条件 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
<div class="drill-down-content">
<!-- 钻取条件显示 -->
<div class="drill-down-header">
<el-tag size="large" v-if="drillDownParams.itemType">
{{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.itemName" type="primary">
{{ drillDownParams.itemName }}
</el-tag>
<el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
{{ drillDownParams.warehouseName }}
</el-tag>
</div>
<!-- 加载状态 -->
<el-skeleton :loading="drillDownLoading" animated>
<template #template>
<div class="demo-skeleton">
<el-skeleton-item variant="p" style="width: 80%" />
<el-skeleton-item variant="text" style="width: 30%" />
<el-skeleton-item variant="text" style="width: 60%" />
</div>
</template>
<!-- 钻取表格 -->
<el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe
style="width: 100%" v-if="!drillDownLoading">
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
<el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
<el-table-column prop="supplierCoilNo" label="厂家卷号" align="center" min-width="180"></el-table-column>
<el-table-column label="物料类型" align="center" prop="itemType">
<template slot-scope="scope">
{{ scope.row.itemType == 'product' ? '成品' : '原料' }}
</template>
</el-table-column>
<el-table-column label="产品类型" align="center" min-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="updateTime" />
<el-table-column prop="grossWeight" label="毛重(t)" align="center" min-width="100"></el-table-column>
<el-table-column prop="netWeight" label="净重(t)" align="center" min-width="100"></el-table-column>
</el-table>
</el-skeleton>
<!-- 分页 -->
<div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
<el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
:page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
@size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { getMaterialCoilDistributionByType, distributionByActualItemType } from "@/api/wms/coil";
import { listMaterialCoil } from "@/api/wms/coil";
import MaterialSelect from "@/components/KLPService/MaterialSelect";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
export default {
components: {
MaterialSelect,
RawMaterialInfo,
ProductInfo,
WarehouseSelect,
ActualWarehouseSelect,
},
data() {
return {
data() {
return {
// 原有变量保持不变...
summaryData: {
totalCoilCount: 0, // 总卷数
productCoilCount: 0, // 成品卷数
rawMaterialCoilCount: 0, // 原料卷数
totalGrossWeight: 0, // 总毛重(t)
totalNetWeight: 0, // 总净重(t)
productTotalGrossWeight: 0, // 成品总毛重(t)
productTotalNetWeight: 0, // 成品总净重(t)
rawMaterialTotalGrossWeight: 0, // 原料总毛重(t)
rawMaterialTotalNetWeight: 0 // 原料总净重(t)
}
}
},
queryParams: {
statType: '1',
itemType: undefined,
itemId: undefined,
warehouseId: undefined,
actualWarehouseId: undefined,
},
loading: false,
list: [],
// 科技风配色方案（蓝色系为主，体现科技感）
techColors: [
'#165DFF', // 主蓝色
'#36CFC9', // 青绿色
'#4080FF', // 中蓝色
'#0FC6C2', // 深青色
'#6AA1FF', // 浅蓝色
'#2BBEBA', // 浅青色
'#8CAAFF', // 极浅蓝色
'#08A8A5' // 暗青色
],
// 图表实例
treeChart: null,
barChart: null,
pieChart: null,
// 钻取相关数据
dialogVisible: false,
dialogTitle: '',
drillDownLoading: false,
drillDownList: [],
drillDownTotal: 0,
drillDownParams: {
itemType: null,
itemId: null,
itemName: '',
warehouseId: null,
warehouseName: '',
dataType: 1
},
drillDownQueryParams: {
pageNum: 1,
pageSize: 20
}
}
},
mounted() {
// this.initCharts();
this.getList();
},
beforeDestroy() {
// 销毁图表实例
if (this.treeChart) this.treeChart.dispose();
if (this.barChart) this.barChart.dispose();
if (this.pieChart) this.pieChart.dispose();
window.removeEventListener('resize', this.handleResize);
},
methods: {
// 计算汇总数据
calculateSummary() {
// 初始化汇总数据为0
const summary = {
totalCoilCount: 0,
productCoilCount: 0,
rawMaterialCoilCount: 0,
totalGrossWeight: 0,
totalNetWeight: 0,
productTotalGrossWeight: 0,
productTotalNetWeight: 0,
rawMaterialTotalGrossWeight: 0,
rawMaterialTotalNetWeight: 0
};
// 遍历列表数据累加计算
this.list.forEach(item => {
// 卷数统计
summary.totalCoilCount += item.coilCount || 0;
if (item.itemType === 'product') {
summary.productCoilCount += item.coilCount || 0;
} else if (item.itemType === 'raw_material') {
summary.rawMaterialCoilCount += item.coilCount || 0;
}
// 重量统计（保留2位小数）
const grossWeight = Number(item.totalGrossWeight) || 0;
const netWeight = Number(item.totalNetWeight) || 0;
summary.totalGrossWeight += grossWeight;
summary.totalNetWeight += netWeight;
if (item.itemType === 'product') {
summary.productTotalGrossWeight += grossWeight;
summary.productTotalNetWeight += netWeight;
} else if (item.itemType === 'raw_material') {
summary.rawMaterialTotalGrossWeight += grossWeight;
summary.rawMaterialTotalNetWeight += netWeight;
}
});
// 格式化重量数据为2位小数
Object.keys(summary).forEach(key => {
if (key.includes('Weight')) {
summary[key] = Number(summary[key].toFixed(2));
}
});
this.summaryData = summary;
},
// 处理逻辑库位选择变化
handleWarehouseChange() {
this.queryParams.actualWarehouseId = null; // 清空真实库区
this.queryParams.statType = '1'; // 切换为逻辑库位统计
this.getList();
},
// 处理真实库区选择变化
handleActualWarehouseChange() {
this.queryParams.warehouseId = null; // 清空逻辑库区
this.queryParams.statType = '2'; // 切换为真实库位统计
this.getList();
},
getList() {
this.loading = true;
if (this.queryParams.statType === '1') {
getMaterialCoilDistributionByType(this.queryParams).then(res => {
this.list = res.data || [];
this.calculateSummary(); // 新增：计算汇总数据
this.loading = false;
})
} else if (this.queryParams.statType === '2') {
distributionByActualItemType(this.queryParams).then(res => {
this.list = res.data || [];
this.calculateSummary(); // 新增：计算汇总数据
this.loading = false;
})
}
},
// 获取科技风颜色（循环使用配色方案）
getTechColor(index) {
return this.techColors[index % this.techColors.length];
},
// 生成物料名称（简化版，实际可根据组件返回值优化）
getMaterialName(item) {
if (item.itemType === 'product') {
return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
} else if (item.itemType === 'raw_material') {
return `原材料(${item.itemId.slice(-6)})`;
}
return '未知物料';
},
// 格式化物料类型
formatItemType(row) {
const typeMap = {
'raw_material': '原材料',
'product': '成品'
};
return typeMap[row.itemType] || '未知';
},
// 处理表格行点击
handleTableRowClick(row) {
// 构建点击数据对象
const clickData = {};
if (this.queryParams.statType === '1') {
// 物料统计
clickData.itemType = row.itemType;
clickData.itemId = row.itemId;
clickData.name = this.getMaterialName(row);
} else {
// 仓库统计
clickData.warehouseId = row.warehouseId;
clickData.warehouseName = row.warehouseName;
}
// 调用图表点击处理函数
this.handleChartItemClick(clickData);
},
// 获取钻取数据列表
getDrillDownList() {
this.drillDownLoading = true;
// 构建查询参数
const params = {
...this.drillDownQueryParams,
itemType: this.drillDownParams.itemType,
itemId: this.drillDownParams.itemId,
warehouseId: this.drillDownParams.warehouseId
};
// 调用API获取数据
listMaterialCoil(params).then(res => {
this.drillDownList = res.rows || [];
this.drillDownTotal = res.total || 0;
this.drillDownLoading = false;
}).catch(error => {
console.error('获取钻取数据失败:', error);
this.drillDownLoading = false;
this.$message.error('获取明细数据失败');
});
},
// 处理钻取分页大小变化
handleDrillDownSizeChange(val) {
this.drillDownQueryParams.pageSize = val;
this.getDrillDownList();
},
// 处理钻取当前页变化
handleDrillDownCurrentChange(val) {
this.drillDownQueryParams.pageNum = val;
this.getDrillDownList();
},
// 格式化卷材状态
formatCoilStatus(status) {
const statusMap = {
'IN_STOCK': '在库',
'OUT_STOCK': '出库',
'TRANSFERING': '转移中',
'MAINTAINING': '维护中'
};
return statusMap[status] || '未知';
},
// 获取卷材状态标签类型
getCoilStatusTagType(status) {
const typeMap = {
'IN_STOCK': 'success',
'OUT_STOCK': 'info',
'TRANSFERING': 'warning',
'MAINTAINING': 'danger'
};
return typeMap[status] || 'default';
}
}
}
</script>
<style scoped>
.statistics-container {
padding: 20px;
background-color: #fafafa;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.chart-item {
flex: 1;
min-width: 300px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.chart-box {
width: 100%;
height: 300px;
}
.table-container {
margin-top: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
h3 {
margin: 0 0 15px 0;
font-size: 16px;
color: #1D2129;
font-weight: 500;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
/* 表格行悬停效果 */
.table-row-hover:hover {
background-color: #f5f7fa;
cursor: pointer;
}
/* 钻取弹窗样式 */
.drill-down-content {
padding: 10px 0;
}
.drill-down-header {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.drill-down-header .el-tag {
margin-right: 10px;
margin-bottom: 10px;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
/* 骨架屏样式 */
.demo-skeleton {
padding: 20px 0;
}
/* 汇总区域样式 */
.summary-container {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
margin-top: 20px;
}
.summary-descriptions {
margin-top: 10px;
}
.el-descriptions-item__content {
font-weight: 500;
color: #165DFF;
/* 科技蓝强调汇总数据 */
}
</style>

8
klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
View File

@@ -97,9 +97,11 @@
<div class="footer-info">
<div class="address">
地址：山东省济宁市嘉祥县开发区生物产业园区新民路北<br />
<span class="english-address">Address: Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.</span>
<span class="english-address">Address: North Extension of Xinmin Road,Bio-Industrial Park,Development Zone,<br />
Jiaxiang County,Jining City,Shandong Province</span>
<br />
<span>
TEL：0537-6625068
TEL：0537-6625068 0537-6625067
</span>
</div>
<div class="contact-timestamp">
@@ -373,7 +375,7 @@ export default {
.address {
line-height: 1.25;
width: 65%;
width: 80%;
font-size: 1.3em;
}

9
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -251,10 +251,10 @@
<!-- 标签预览弹窗 -->
<el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
<label-render :content="labelRender.data" :labelType="labelType" />
<label-render :content="labelRender.data" :labelType="labelRender.type" />
</el-dialog>
<label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelType" />
<label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" />
<!-- 批量导出标签PDF弹窗 -->
<el-dialog title="批量导出标签PDF" :visible.sync="batchPrint.visible" width="520px" append-to-body>
@@ -582,15 +582,13 @@ export default {
const item = row.itemType === 'product' ? row.product : row.rawMaterial;
const itemName = row.itemType === 'product' ? item?.productName || '' : item?.rawMaterialName || '';
this.labelRender.type = row.itemType === 'product' ? '3' : '2';
this.labelRender.data = {
...row,
itemName: itemName,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$refs.labelRender.printLabel();
// this.labelRender.visible = true;
// this.labelRender.data = row;
// this.labelRender.type = '2';
},
// 处理材料类型变化
handleMaterialTypeChange(value) {
@@ -661,6 +659,7 @@ export default {
const item = row.itemType === 'product' ? row.product : row.rawMaterial;
const itemName = row.itemType === 'product' ? item?.productName || '' : item?.rawMaterialName || '';
this.labelRender.type = row.itemType === 'product' ? '3' : '2';
this.labelRender.data = {
...row,
itemName: itemName,

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>