feat(wms): 新增6个报表页面以及报表总汇
1.退库原因分析报表returnReasonAnalysis 统计各类退库（生产退库、销售退库等）的数量、占比及主要退库原因（如质量问题、订单变更），为改进生产、销售和质量管理提供数据支持。 2.库存变动趋势分析表inventoryTrendAnalysis 内容：以折线图/柱状图展示某物料或类别在一段时间内的库存数量变化（如近3个月每周结存），标注关键节点（如大额入库/出库）。 作用：识别库存波动规律（如季节性增减），预测未来库存需求，避免积压或短缺。 3.安全库存预警表safetyStockAlert 内容：对比物料当前库存与设定的“安全库存值”，列出“低于安全库存”（短缺预警）或“高于最高库存”（积压预警）的物料及差异量。 4.呆滞料库存报表stagnantInventory 内容：定义“呆滞标准”（如6个月未出库），统计符合标准的物料及数量、金额，标注呆滞原因（如订单取消/设计变更）。 作用：推动呆滞料处理（如折价处理、返工利用），减少资金占用和仓储成本。 5.库存差异报表inventoryDifference 内容：记录盘点后实际数量与系统账面数量的差异（差异量、差异率），标注差异物料及可能原因（如漏记、丢失、计数错误）。 作用：跟踪差异处理进度（如调账、追责），改进仓库操作规范（如加强入库扫码校验）。 6定期生成库存周转报表inventoryTurnover 库存周转率=(销售数量/库存数量)x100%例如6月销售31台，期末库存65台库存周转率=(31/65)*100%=47.69% 库存周转率=(该期间的出库总金额/该期间的平均库存金额)x100%=该期间出库总金额x2/(期初库存金额+期末库存金额)x100%库存周转率=312*2/(490+589)=56.9%master
parent
0285999cf3
commit
6a109dc6b6
@ -0,0 +1,97 @@
|
|||||||
|
export interface ReportQuery {
|
||||||
|
tenantId?: string;
|
||||||
|
materialCategoryId?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReturnReasonAnalysisVO {
|
||||||
|
tenantId?: string;
|
||||||
|
returnReasonCategory?: string;
|
||||||
|
returnOrderCount?: number;
|
||||||
|
totalReturnAmount?: number;
|
||||||
|
orderCountRatio?: number;
|
||||||
|
amountRatio?: number;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
materialCode?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InventoryTrendAnalysisVO {
|
||||||
|
tenantId?: string;
|
||||||
|
materialId?: number;
|
||||||
|
materialCode?: string;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
statisticsMonth?: string;
|
||||||
|
statisticsWeek?: number;
|
||||||
|
currentInventoryQty?: number;
|
||||||
|
weekInstockQty?: number;
|
||||||
|
weekOutstockQty?: number;
|
||||||
|
lastWeekInventoryQty?: number;
|
||||||
|
keyNodeMark?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SafetyStockAlertVO {
|
||||||
|
tenantId?: string;
|
||||||
|
materialId?: number;
|
||||||
|
materialCode?: string;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
currentInventoryQty?: number;
|
||||||
|
safeStockAmount?: number;
|
||||||
|
minStockAmount?: number;
|
||||||
|
maxStockAmount?: number;
|
||||||
|
alertStatus?: string;
|
||||||
|
differenceAmount?: number;
|
||||||
|
lastUpdateTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StagnantInventoryVO {
|
||||||
|
tenantId?: string;
|
||||||
|
materialId?: number;
|
||||||
|
materialCode?: string;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
stagnantInventoryQty?: number;
|
||||||
|
materialUnit?: string;
|
||||||
|
lastOutstockTime?: string;
|
||||||
|
stagnantDays?: number;
|
||||||
|
stagnantReason?: string;
|
||||||
|
materialSpec?: string;
|
||||||
|
warehouseName?: string;
|
||||||
|
lastActivityTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InventoryDifferenceVO {
|
||||||
|
tenantId?: string;
|
||||||
|
checkCode?: string;
|
||||||
|
checkType?: string;
|
||||||
|
warehouseId?: number;
|
||||||
|
warehouseName?: string;
|
||||||
|
materialId?: number;
|
||||||
|
materialCode?: string;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
bookInventoryQty?: number;
|
||||||
|
actualInventoryQty?: number;
|
||||||
|
differenceQty?: number;
|
||||||
|
differenceType?: string;
|
||||||
|
differenceRate?: number;
|
||||||
|
differenceLevel?: string;
|
||||||
|
checkTime?: string;
|
||||||
|
checkBy?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InventoryTurnoverVO {
|
||||||
|
tenantId?: string;
|
||||||
|
materialId?: number;
|
||||||
|
materialCode?: string;
|
||||||
|
materialName?: string;
|
||||||
|
materialCategoryName?: string;
|
||||||
|
statisticsMonth?: string;
|
||||||
|
beginInventoryQty?: number;
|
||||||
|
endInventoryQty?: number;
|
||||||
|
monthOutstockQty?: number;
|
||||||
|
inventoryTurnoverRate?: number;
|
||||||
|
simpleTurnoverRate?: number;
|
||||||
|
turnoverEvaluation?: string;
|
||||||
|
}
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||||
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
|
<el-form-item label="物料大类" prop="materialCategoryId">
|
||||||
|
<el-select v-model="queryParams.materialCategoryId" placeholder="请选择物料大类" clearable>
|
||||||
|
<el-option v-for="item in materialCategoryOptions"
|
||||||
|
:key="item.materialCategoryId"
|
||||||
|
:label="item.materialCategoryName"
|
||||||
|
:value="item.materialCategoryId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 图表展示区域 -->
|
||||||
|
<el-row :gutter="20" class="mb-4">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<span>库存变动趋势图</span>
|
||||||
|
</template>
|
||||||
|
<div ref="lineChartRef" style="height: 400px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<el-table v-loading="loading" :data="reportList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="物料编码" align="center" prop="materialCode" />
|
||||||
|
<el-table-column label="物料名称" align="center" prop="materialName" show-overflow-tooltip />
|
||||||
|
<el-table-column label="物料大类" align="center" prop="materialCategoryName" />
|
||||||
|
<el-table-column label="统计月份" align="center" prop="statisticsMonth" />
|
||||||
|
<el-table-column label="统计周" align="center" prop="statisticsWeek" />
|
||||||
|
<el-table-column label="当前库存数量" align="center" prop="currentInventoryQty" />
|
||||||
|
<el-table-column label="本周入库数量" align="center" prop="weekInstockQty" />
|
||||||
|
<el-table-column label="本周出库数量" align="center" prop="weekOutstockQty" />
|
||||||
|
<el-table-column label="上周结存数量" align="center" prop="lastWeekInventoryQty" />
|
||||||
|
<el-table-column label="关键节点标注" align="center" prop="keyNodeMark">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="getNodeMarkType(scope.row.keyNodeMark)">
|
||||||
|
{{ scope.row.keyNodeMark }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="InventoryTrendAnalysis" lang="ts">
|
||||||
|
import { getInventoryTrendAnalysis, exportInventoryTrendAnalysis } from '@/api/wms/report';
|
||||||
|
import { listBaseMaterialCategoryInWMS } from '@/api/wms/baseMaterialCategory';
|
||||||
|
import { InventoryTrendAnalysisVO, ReportQuery } from '@/api/wms/report/types';
|
||||||
|
import { BaseMaterialCategoryVO } from '@/api/wms/baseMaterialCategory/types';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
|
const reportList = ref<InventoryTrendAnalysisVO[]>([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
const single = ref(true);
|
||||||
|
const multiple = ref(true);
|
||||||
|
const materialCategoryOptions = ref<BaseMaterialCategoryVO[]>([]);
|
||||||
|
|
||||||
|
// 图表引用
|
||||||
|
const lineChartRef = ref<HTMLDivElement>();
|
||||||
|
let lineChart: echarts.ECharts;
|
||||||
|
|
||||||
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
|
||||||
|
const queryParams = ref<ReportQuery>({
|
||||||
|
tenantId: undefined,
|
||||||
|
materialCategoryId: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 查询库存变动趋势分析报表列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await getInventoryTrendAnalysis(queryParams.value);
|
||||||
|
reportList.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
|
||||||
|
// 更新图表
|
||||||
|
nextTick(() => {
|
||||||
|
updateChart();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
handleQuery();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
const handleSelectionChange = (selection: InventoryTrendAnalysisVO[]) => {
|
||||||
|
ids.value = selection.map(item => item.materialId!);
|
||||||
|
single.value = selection.length !== 1;
|
||||||
|
multiple.value = !selection.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = () => {
|
||||||
|
proxy?.download('/wms/report/inventoryTrendAnalysis/export', {
|
||||||
|
...queryParams.value
|
||||||
|
}, `库存变动趋势分析报表_${new Date().getTime()}.xlsx`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取物料大类选项 */
|
||||||
|
const getMaterialCategoryOptions = async () => {
|
||||||
|
const res = await listBaseMaterialCategoryInWMS({});
|
||||||
|
materialCategoryOptions.value = res.data.rows || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取关键节点标注类型 */
|
||||||
|
const getNodeMarkType = (mark: string) => {
|
||||||
|
switch (mark) {
|
||||||
|
case '大额入库': return 'success';
|
||||||
|
case '大额出库': return 'danger';
|
||||||
|
default: return 'info';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 初始化图表 */
|
||||||
|
const initChart = () => {
|
||||||
|
if (lineChartRef.value) {
|
||||||
|
lineChart = echarts.init(lineChartRef.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 更新图表数据 */
|
||||||
|
const updateChart = () => {
|
||||||
|
if (!reportList.value.length || !lineChart) return;
|
||||||
|
|
||||||
|
// 按物料分组数据
|
||||||
|
const materialGroups = reportList.value.reduce((groups, item) => {
|
||||||
|
const key = item.materialName || '';
|
||||||
|
if (!groups[key]) {
|
||||||
|
groups[key] = [];
|
||||||
|
}
|
||||||
|
groups[key].push(item);
|
||||||
|
return groups;
|
||||||
|
}, {} as Record<string, InventoryTrendAnalysisVO[]>);
|
||||||
|
|
||||||
|
const series: any[] = [];
|
||||||
|
const xAxisData = [...new Set(reportList.value.map(item => `第${item.statisticsWeek}周`))];
|
||||||
|
|
||||||
|
Object.keys(materialGroups).slice(0, 5).forEach((materialName, index) => {
|
||||||
|
const data = xAxisData.map(week => {
|
||||||
|
const weekNum = parseInt(week.replace('第', '').replace('周', ''));
|
||||||
|
const item = materialGroups[materialName].find(d => d.statisticsWeek === weekNum);
|
||||||
|
return item?.currentInventoryQty || 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
series.push({
|
||||||
|
name: materialName,
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
smooth: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '库存变动趋势',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: Object.keys(materialGroups).slice(0, 5),
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: xAxisData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '库存数量'
|
||||||
|
},
|
||||||
|
series: series
|
||||||
|
};
|
||||||
|
|
||||||
|
lineChart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 窗口大小改变时重新调整图表 */
|
||||||
|
const handleResize = () => {
|
||||||
|
lineChart?.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getMaterialCategoryOptions();
|
||||||
|
getList();
|
||||||
|
initChart();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
lineChart?.dispose();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,258 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||||
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
|
<el-form-item label="物料大类" prop="materialCategoryId">
|
||||||
|
<el-select v-model="queryParams.materialCategoryId" placeholder="请选择物料大类" clearable>
|
||||||
|
<el-option v-for="item in materialCategoryOptions"
|
||||||
|
:key="item.materialCategoryId"
|
||||||
|
:label="item.materialCategoryName"
|
||||||
|
:value="item.materialCategoryId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 图表展示区域 -->
|
||||||
|
<el-row :gutter="20" class="mb-4">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<span>退库原因分布</span>
|
||||||
|
</template>
|
||||||
|
<div ref="pieChartRef" style="height: 300px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<span>退库数量统计</span>
|
||||||
|
</template>
|
||||||
|
<div ref="barChartRef" style="height: 300px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<el-table v-loading="loading" :data="reportList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="退库原因分类" align="center" prop="returnReasonCategory" />
|
||||||
|
<el-table-column label="退库单数" align="center" prop="returnOrderCount" />
|
||||||
|
<el-table-column label="退库总数量" align="center" prop="totalReturnAmount" />
|
||||||
|
<el-table-column label="退库单数占比(%)" align="center" prop="orderCountRatio" />
|
||||||
|
<el-table-column label="退库数量占比(%)" align="center" prop="amountRatio" />
|
||||||
|
<el-table-column label="主要物料名称" align="center" prop="materialName" show-overflow-tooltip />
|
||||||
|
<el-table-column label="物料大类" align="center" prop="materialCategoryName" />
|
||||||
|
<el-table-column label="物料编码" align="center" prop="materialCode" />
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="ReturnReasonAnalysis" lang="ts">
|
||||||
|
import { getReturnReasonAnalysis, exportReturnReasonAnalysis } from '@/api/wms/report';
|
||||||
|
import { listBaseMaterialCategoryInWMS } from '@/api/wms/baseMaterialCategory';
|
||||||
|
import { ReturnReasonAnalysisVO, ReportQuery } from '@/api/wms/report/types';
|
||||||
|
import { BaseMaterialCategoryVO } from '@/api/wms/baseMaterialCategory/types';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
|
const reportList = ref<ReturnReasonAnalysisVO[]>([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
const single = ref(true);
|
||||||
|
const multiple = ref(true);
|
||||||
|
const total = ref(0);
|
||||||
|
const materialCategoryOptions = ref<BaseMaterialCategoryVO[]>([]);
|
||||||
|
|
||||||
|
// 图表引用
|
||||||
|
const pieChartRef = ref<HTMLDivElement>();
|
||||||
|
const barChartRef = ref<HTMLDivElement>();
|
||||||
|
let pieChart: echarts.ECharts;
|
||||||
|
let barChart: echarts.ECharts;
|
||||||
|
|
||||||
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
|
||||||
|
const queryParams = ref<ReportQuery>({
|
||||||
|
tenantId: undefined,
|
||||||
|
materialCategoryId: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 查询退库原因分析报表列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await getReturnReasonAnalysis(queryParams.value);
|
||||||
|
reportList.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
|
||||||
|
// 更新图表
|
||||||
|
nextTick(() => {
|
||||||
|
updateCharts();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
handleQuery();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
const handleSelectionChange = (selection: ReturnReasonAnalysisVO[]) => {
|
||||||
|
ids.value = selection.map(item => item.tenantId!);
|
||||||
|
single.value = selection.length !== 1;
|
||||||
|
multiple.value = !selection.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = () => {
|
||||||
|
proxy?.download('/wms/report/returnReasonAnalysis/export', {
|
||||||
|
...queryParams.value
|
||||||
|
}, `退库原因分析报表_${new Date().getTime()}.xlsx`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取物料大类选项 */
|
||||||
|
const getMaterialCategoryOptions = async () => {
|
||||||
|
const res = await listBaseMaterialCategoryInWMS({});
|
||||||
|
materialCategoryOptions.value = res.data.rows || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 初始化图表 */
|
||||||
|
const initCharts = () => {
|
||||||
|
if (pieChartRef.value) {
|
||||||
|
pieChart = echarts.init(pieChartRef.value);
|
||||||
|
}
|
||||||
|
if (barChartRef.value) {
|
||||||
|
barChart = echarts.init(barChartRef.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 更新图表数据 */
|
||||||
|
const updateCharts = () => {
|
||||||
|
if (!reportList.value.length) return;
|
||||||
|
|
||||||
|
// 饼图数据
|
||||||
|
const pieData = reportList.value.map(item => ({
|
||||||
|
name: item.returnReasonCategory,
|
||||||
|
value: item.returnOrderCount
|
||||||
|
}));
|
||||||
|
|
||||||
|
const pieOption = {
|
||||||
|
title: {
|
||||||
|
text: '退库原因分布',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '退库原因',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: pieData,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 柱状图数据
|
||||||
|
const barData = reportList.value.map(item => item.totalReturnAmount);
|
||||||
|
const barCategories = reportList.value.map(item => item.returnReasonCategory);
|
||||||
|
|
||||||
|
const barOption = {
|
||||||
|
title: {
|
||||||
|
text: '退库数量统计',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: barCategories,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 45
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '退库数量',
|
||||||
|
type: 'bar',
|
||||||
|
data: barData,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#409EFF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
pieChart?.setOption(pieOption);
|
||||||
|
barChart?.setOption(barOption);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 窗口大小改变时重新调整图表 */
|
||||||
|
const handleResize = () => {
|
||||||
|
pieChart?.resize();
|
||||||
|
barChart?.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getMaterialCategoryOptions();
|
||||||
|
getList();
|
||||||
|
initCharts();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
pieChart?.dispose();
|
||||||
|
barChart?.dispose();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,321 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||||
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
|
<el-form-item label="物料大类" prop="materialCategoryId">
|
||||||
|
<el-select v-model="queryParams.materialCategoryId" placeholder="请选择物料大类" clearable>
|
||||||
|
<el-option v-for="item in materialCategoryOptions"
|
||||||
|
:key="item.materialCategoryId"
|
||||||
|
:label="item.materialCategoryName"
|
||||||
|
:value="item.materialCategoryId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 统计卡片 -->
|
||||||
|
<el-row :gutter="20" class="mb-4">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card shadow="hover" class="stat-card">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value text-red-500">{{ alertStats.shortage }}</div>
|
||||||
|
<div class="stat-label">短缺预警</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card shadow="hover" class="stat-card">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value text-orange-500">{{ alertStats.belowSafety }}</div>
|
||||||
|
<div class="stat-label">低于安全库存</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card shadow="hover" class="stat-card">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value text-yellow-500">{{ alertStats.overstock }}</div>
|
||||||
|
<div class="stat-label">积压预警</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card shadow="hover" class="stat-card">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value text-green-500">{{ alertStats.normal }}</div>
|
||||||
|
<div class="stat-label">正常</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 图表展示区域 -->
|
||||||
|
<el-row :gutter="20" class="mb-4">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<span>安全库存预警分布</span>
|
||||||
|
</template>
|
||||||
|
<div ref="chartRef" style="height: 400px;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<el-table v-loading="loading" :data="reportList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="物料编码" align="center" prop="materialCode" />
|
||||||
|
<el-table-column label="物料名称" align="center" prop="materialName" show-overflow-tooltip />
|
||||||
|
<el-table-column label="物料大类" align="center" prop="materialCategoryName" />
|
||||||
|
<el-table-column label="当前库存数量" align="center" prop="currentInventoryQty" />
|
||||||
|
<el-table-column label="安全库存值" align="center" prop="safeStockAmount" />
|
||||||
|
<el-table-column label="最小库存值" align="center" prop="minStockAmount" />
|
||||||
|
<el-table-column label="最大库存值" align="center" prop="maxStockAmount" />
|
||||||
|
<el-table-column label="预警状态" align="center" prop="alertStatus">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="getAlertType(scope.row.alertStatus)">
|
||||||
|
{{ scope.row.alertStatus }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="差异量" align="center" prop="differenceAmount" />
|
||||||
|
<el-table-column label="最后更新时间" align="center" prop="lastUpdateTime" width="180" />
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="SafetyStockAlert" lang="ts">
|
||||||
|
import { getSafetyStockAlert, exportSafetyStockAlert } from '@/api/wms/report';
|
||||||
|
import { listBaseMaterialCategoryInWMS } from '@/api/wms/baseMaterialCategory';
|
||||||
|
import { SafetyStockAlertVO, ReportQuery } from '@/api/wms/report/types';
|
||||||
|
import { BaseMaterialCategoryVO } from '@/api/wms/baseMaterialCategory/types';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
|
const reportList = ref<SafetyStockAlertVO[]>([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
const single = ref(true);
|
||||||
|
const multiple = ref(true);
|
||||||
|
const materialCategoryOptions = ref<BaseMaterialCategoryVO[]>([]);
|
||||||
|
|
||||||
|
// 统计数据
|
||||||
|
const alertStats = ref({
|
||||||
|
shortage: 0,
|
||||||
|
belowSafety: 0,
|
||||||
|
overstock: 0,
|
||||||
|
normal: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 图表引用
|
||||||
|
const chartRef = ref<HTMLDivElement>();
|
||||||
|
let chart: echarts.ECharts;
|
||||||
|
|
||||||
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
|
|
||||||
|
const queryParams = ref<ReportQuery>({
|
||||||
|
tenantId: undefined,
|
||||||
|
materialCategoryId: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 查询安全库存预警报表列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await getSafetyStockAlert(queryParams.value);
|
||||||
|
reportList.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
|
||||||
|
// 计算统计数据
|
||||||
|
calculateStats();
|
||||||
|
|
||||||
|
// 更新图表
|
||||||
|
nextTick(() => {
|
||||||
|
updateChart();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 计算统计数据 */
|
||||||
|
const calculateStats = () => {
|
||||||
|
alertStats.value = {
|
||||||
|
shortage: reportList.value.filter(item => item.alertStatus === '短缺预警').length,
|
||||||
|
belowSafety: reportList.value.filter(item => item.alertStatus === '低于安全库存').length,
|
||||||
|
overstock: reportList.value.filter(item => item.alertStatus === '积压预警').length,
|
||||||
|
normal: reportList.value.filter(item => item.alertStatus === '正常').length
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
handleQuery();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
const handleSelectionChange = (selection: SafetyStockAlertVO[]) => {
|
||||||
|
ids.value = selection.map(item => item.materialId!);
|
||||||
|
single.value = selection.length !== 1;
|
||||||
|
multiple.value = !selection.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = () => {
|
||||||
|
proxy?.download('/wms/report/safetyStockAlert/export', {
|
||||||
|
...queryParams.value
|
||||||
|
}, `安全库存预警报表_${new Date().getTime()}.xlsx`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取物料大类选项 */
|
||||||
|
const getMaterialCategoryOptions = async () => {
|
||||||
|
const res = await listBaseMaterialCategoryInWMS({});
|
||||||
|
materialCategoryOptions.value = res.data.rows || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取预警状态类型 */
|
||||||
|
const getAlertType = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case '短缺预警': return 'danger';
|
||||||
|
case '低于安全库存': return 'warning';
|
||||||
|
case '积压预警': return 'info';
|
||||||
|
case '正常': return 'success';
|
||||||
|
default: return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 初始化图表 */
|
||||||
|
const initChart = () => {
|
||||||
|
if (chartRef.value) {
|
||||||
|
chart = echarts.init(chartRef.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 更新图表数据 */
|
||||||
|
const updateChart = () => {
|
||||||
|
if (!reportList.value.length || !chart) return;
|
||||||
|
|
||||||
|
// 按预警状态统计
|
||||||
|
const statusCount = reportList.value.reduce((acc, item) => {
|
||||||
|
const status = item.alertStatus || '未知';
|
||||||
|
acc[status] = (acc[status] || 0) + 1;
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
|
const pieData = Object.keys(statusCount).map(status => ({
|
||||||
|
name: status,
|
||||||
|
value: statusCount[status]
|
||||||
|
}));
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '安全库存预警分布',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '预警状态',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: pieData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 窗口大小改变时重新调整图表 */
|
||||||
|
const handleResize = () => {
|
||||||
|
chart?.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getMaterialCategoryOptions();
|
||||||
|
getList();
|
||||||
|
initChart();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
chart?.dispose();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue