Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
@@ -84,6 +84,17 @@ export function getMaterialCoilDistributionByType(query) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查询不同类型的钢卷在不同库区的分布情况
|
||||||
|
export function getMaterialCoilDistributionByActualWarehouse(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/materialCoil/distributionByActualWarehouse',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 钢卷分卷
|
// 钢卷分卷
|
||||||
export function splitMaterialCoil(data) {
|
export function splitMaterialCoil(data) {
|
||||||
return request({
|
return request({
|
||||||
|
|||||||
@@ -9,6 +9,14 @@ export function listStock(query) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getStockByActual(query) {
|
||||||
|
return request({
|
||||||
|
url: '/wms/stock/listActual',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 查询库存:原材料/产品与库区/库位的存放关系详细
|
// 查询库存:原材料/产品与库区/库位的存放关系详细
|
||||||
export function getStock(stockId) {
|
export function getStock(stockId) {
|
||||||
return request({
|
return request({
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-tree
|
<el-tree
|
||||||
|
v-loading="loading"
|
||||||
:data="treeData"
|
:data="treeData"
|
||||||
:props="treeProps"
|
:props="treeProps"
|
||||||
node-key="warehouseId"
|
node-key="warehouseId"
|
||||||
@@ -14,32 +15,57 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listWarehouse } from '@/api/wms/warehouse';
|
import { listWarehouse } from '@/api/wms/warehouse';
|
||||||
|
import { listActualWarehouse } from '@/api/wms/actualWarehouse';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "WarehouseTree",
|
name: "WarehouseTree",
|
||||||
props: {
|
props: {
|
||||||
treeProps: {
|
warehouseType: {
|
||||||
type: Object,
|
type: String,
|
||||||
default: () => ({
|
default: 'real'
|
||||||
children: 'children',
|
},
|
||||||
label: 'warehouseName',
|
|
||||||
isLeaf: () => false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
treeData: []
|
treeData: [],
|
||||||
|
loading: true,
|
||||||
|
treeProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'warehouseLabel',
|
||||||
|
isLeaf: () => false
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
watch: {
|
||||||
this.getWarehouseTree();
|
warehouseType: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
this.getWarehouseTree()
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getWarehouseTree() {
|
getWarehouseTree() {
|
||||||
listWarehouse().then(response => {
|
this.loading = true;
|
||||||
this.treeData = [{ warehouseName: '全部', value: undefined }, ...this.handleTree(response.data, 'warehouseId', 'parentId')];
|
if (this.warehouseType === 'real') {
|
||||||
});
|
listActualWarehouse({ pageSize: 1000 }).then(response => {
|
||||||
|
this.treeData = response.rows.map(item => ({
|
||||||
|
...item,
|
||||||
|
warehouseLabel: item.actualWarehouseName
|
||||||
|
}))
|
||||||
|
this.loading = false;
|
||||||
|
// this.treeData = [{ warehouseName: '全部', value: undefined }, ...this.handleTree(response.rows, 'warehouseId', 'parentId')];
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
listWarehouse().then(response => {
|
||||||
|
this.treeData = response.data.map(item => ({
|
||||||
|
...item,
|
||||||
|
warehouseLabel: item.warehouseName
|
||||||
|
}))
|
||||||
|
this.loading = false;
|
||||||
|
// this.treeData = [{ warehouseName: '全部', value: undefined }, ...this.handleTree(response.data, 'warehouseId', 'parentId')];
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
handleTree(data, id, parentId) {
|
handleTree(data, id, parentId) {
|
||||||
const cloneData = JSON.parse(JSON.stringify(data));
|
const cloneData = JSON.parse(JSON.stringify(data));
|
||||||
|
|||||||
@@ -156,7 +156,7 @@ export default {
|
|||||||
drillDownQueryParams: {
|
drillDownQueryParams: {
|
||||||
warehouseId: null,
|
warehouseId: null,
|
||||||
itemType: null,
|
itemType: null,
|
||||||
itemId: null
|
itemId: null,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -405,12 +405,12 @@ export default {
|
|||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
},
|
},
|
||||||
legend: {
|
// legend: {
|
||||||
orient: 'vertical',
|
// orient: 'vertical',
|
||||||
left: 10,
|
// left: 10,
|
||||||
data: pieData.map(item => item.name),
|
// data: pieData.map(item => item.name),
|
||||||
textStyle: { color: '#666' }
|
// textStyle: { color: '#666' }
|
||||||
},
|
// },
|
||||||
series: [{
|
series: [{
|
||||||
name: '库存分布',
|
name: '库存分布',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
|
|||||||
593
klp-ui/src/views/wms/coil/box3.vue
Normal file
593
klp-ui/src/views/wms/coil/box3.vue
Normal file
@@ -0,0 +1,593 @@
|
|||||||
|
<template>
|
||||||
|
<div class="statistics-container" v-loading="loading">
|
||||||
|
<!-- 统计方式选择 -->
|
||||||
|
<el-form inline>
|
||||||
|
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 图表展示区域 -->
|
||||||
|
<div class="charts-container">
|
||||||
|
<!-- 矩形树图 -->
|
||||||
|
<div class="chart-item">
|
||||||
|
<h3>{{ queryParams.statType === '1' ? '物料库存分布矩形树图' : '仓库库存分布矩形树图' }}</h3>
|
||||||
|
<div ref="treeChart" class="chart-box"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 柱状图 -->
|
||||||
|
<div class="chart-item">
|
||||||
|
<h3>{{ queryParams.statType === '1' ? '物料卷数对比柱状图' : '仓库卷数对比柱状图' }}</h3>
|
||||||
|
<div ref="barChart" class="chart-box"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 饼图 -->
|
||||||
|
<div class="chart-item">
|
||||||
|
<h3>{{ queryParams.statType === '1' ? '物料库存占比饼图' : '仓库库存占比饼图' }}</h3>
|
||||||
|
<div ref="pieChart" class="chart-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
max-height="400"
|
||||||
|
:data="list"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
style="width: 100%; margin-top: 20px"
|
||||||
|
@row-click="handleTableRowClick"
|
||||||
|
row-class-name="table-row-hover"
|
||||||
|
>
|
||||||
|
<!-- 仓库相关列:仅仓库统计时有效 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="queryParams.statType === '2'"
|
||||||
|
prop="actualWarehouseName"
|
||||||
|
label="仓库名称"
|
||||||
|
align="center"
|
||||||
|
min-width="150"
|
||||||
|
></el-table-column>
|
||||||
|
|
||||||
|
<!-- 物料类型列:仅物料统计时有效 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="queryParams.statType === '1'"
|
||||||
|
prop="itemType"
|
||||||
|
label="物料类型"
|
||||||
|
align="center"
|
||||||
|
min-width="120"
|
||||||
|
:formatter="formatItemType"
|
||||||
|
></el-table-column>
|
||||||
|
|
||||||
|
<!-- 物料ID/名称列:仅物料统计时有效 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="queryParams.statType === '1'"
|
||||||
|
label="物料信息"
|
||||||
|
align="center"
|
||||||
|
min-width="250"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
|
||||||
|
<template #default="{ product }">
|
||||||
|
{{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
|
||||||
|
</template>
|
||||||
|
</ProductInfo>
|
||||||
|
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
|
||||||
|
<template #default="{ material }">
|
||||||
|
{{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
|
||||||
|
</template>
|
||||||
|
</RawMaterialInfo>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 通用列 -->
|
||||||
|
<el-table-column prop="coilCount" label="卷数" align="center" min-width="80"></el-table-column>
|
||||||
|
<el-table-column prop="totalGrossWeight" label="总毛重(kg)" align="center" min-width="120"></el-table-column>
|
||||||
|
<el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
|
||||||
|
<el-dialog
|
||||||
|
:title="dialogTitle"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="80%"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
>
|
||||||
|
<!-- 使用封装的钻取表格组件 -->
|
||||||
|
<DrillDownTable
|
||||||
|
:query-params="drillDownQueryParams"
|
||||||
|
:item-name="drillDownParams.itemName"
|
||||||
|
:warehouse-name="drillDownParams.actualWarehouseName"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByActualWarehouse } from "@/api/wms/coil";
|
||||||
|
import MaterialSelect from "@/components/KLPService/MaterialSelect";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||||
|
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||||
|
import { findItemWithBom } from "@/store/modules/category";
|
||||||
|
// 导入封装的钻取表格组件
|
||||||
|
import DrillDownTable from './panels/DrillDownTable.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
MaterialSelect,
|
||||||
|
RawMaterialInfo,
|
||||||
|
ProductInfo,
|
||||||
|
DrillDownTable // 注册组件
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
statType: '2',
|
||||||
|
itemType: undefined,
|
||||||
|
itemId: undefined,
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
list: [],
|
||||||
|
// 科技风配色方案(蓝色系为主,体现科技感)
|
||||||
|
techColors: [
|
||||||
|
'#165DFF', // 主蓝色
|
||||||
|
'#36CFC9', // 青绿色
|
||||||
|
'#4080FF', // 中蓝色
|
||||||
|
'#0FC6C2', // 深青色
|
||||||
|
'#6AA1FF', // 浅蓝色
|
||||||
|
'#2BBEBA', // 浅青色
|
||||||
|
'#8CAAFF', // 极浅蓝色
|
||||||
|
'#08A8A5' // 暗青色
|
||||||
|
],
|
||||||
|
// 图表实例
|
||||||
|
treeChart: null,
|
||||||
|
barChart: null,
|
||||||
|
pieChart: null,
|
||||||
|
// 钻取相关数据
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogTitle: '',
|
||||||
|
drillDownParams: {
|
||||||
|
itemType: null,
|
||||||
|
itemId: null,
|
||||||
|
itemName: '',
|
||||||
|
actualWarehouseId: null,
|
||||||
|
actualWarehouseName: '',
|
||||||
|
},
|
||||||
|
// 传给钻取表格组件的查询参数
|
||||||
|
drillDownQueryParams: {
|
||||||
|
actualWarehouseId: null,
|
||||||
|
itemType: null,
|
||||||
|
itemId: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
if (this.queryParams.statType === '1') {
|
||||||
|
// 物料统计:仓库字段无效,以物料为核心
|
||||||
|
getMaterialCoilDistributionByType(this.queryParams).then(res => {
|
||||||
|
this.list = res.data || [];
|
||||||
|
this.updateCharts();
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
} else if (this.queryParams.statType === '2') {
|
||||||
|
// 仓库统计:物料字段无效,以仓库为核心
|
||||||
|
getMaterialCoilDistributionByActualWarehouse(this.queryParams).then(res => {
|
||||||
|
this.list = res.data || [];
|
||||||
|
this.updateCharts();
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
initCharts() {
|
||||||
|
this.treeChart = echarts.init(this.$refs.treeChart);
|
||||||
|
this.barChart = echarts.init(this.$refs.barChart);
|
||||||
|
this.pieChart = echarts.init(this.$refs.pieChart);
|
||||||
|
this.handleResize = () => {
|
||||||
|
this.treeChart.resize();
|
||||||
|
this.barChart.resize();
|
||||||
|
this.pieChart.resize();
|
||||||
|
};
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新图表数据
|
||||||
|
updateCharts() {
|
||||||
|
this.updateTreeChart();
|
||||||
|
this.updateBarChart();
|
||||||
|
this.updatePieChart();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取科技风颜色(循环使用配色方案)
|
||||||
|
getTechColor(index) {
|
||||||
|
return this.techColors[index % this.techColors.length];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新矩形树图
|
||||||
|
updateTreeChart() {
|
||||||
|
let treeData;
|
||||||
|
if (this.queryParams.statType === '1') {
|
||||||
|
// 物料统计:一级为物料,二级为卷数信息
|
||||||
|
treeData = {
|
||||||
|
name: '物料库存总览',
|
||||||
|
children: this.list.map((item, index) => ({
|
||||||
|
name: this.getMaterialName(item), // 物料名称
|
||||||
|
value: item.coilCount,
|
||||||
|
itemType: item.itemType,
|
||||||
|
itemId: item.itemId,
|
||||||
|
itemStyle: { color: this.getTechColor(index) }
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 仓库统计:一级为仓库,二级为卷数信息
|
||||||
|
treeData = {
|
||||||
|
name: '仓库库存总览',
|
||||||
|
children: this.list.map((item, index) => ({
|
||||||
|
name: item.actualWarehouseName || '未知仓库',
|
||||||
|
value: item.coilCount,
|
||||||
|
actualWarehouseId: item.actualWarehouseId,
|
||||||
|
actualWarehouseName: item.actualWarehouseName,
|
||||||
|
itemStyle: { color: this.getTechColor(index) }
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.treeChart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
formatter: params => `${params.data.name}<br>卷数: ${params.data.value}`
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'treemap',
|
||||||
|
data: [treeData],
|
||||||
|
roam: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#fff', // 文字白色更贴合科技风深色背景
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'descendant',
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
breadcrumb: {
|
||||||
|
show: true,
|
||||||
|
itemStyle: { color: '#666' }
|
||||||
|
},
|
||||||
|
// 添加点击事件,实现数据钻取
|
||||||
|
itemStyle: {
|
||||||
|
cursor: 'pointer'
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(22, 93, 255, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绑定点击事件
|
||||||
|
this.treeChart.off('click');
|
||||||
|
this.treeChart.on('click', params => {
|
||||||
|
// 确保点击的是一级节点而不是子节点
|
||||||
|
if (params.data.children && params.data.children.length > 0) {
|
||||||
|
this.handleChartItemClick(params.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新柱状图
|
||||||
|
updateBarChart() {
|
||||||
|
let xAxisData, seriesData;
|
||||||
|
if (this.queryParams.statType === '1') {
|
||||||
|
// 物料统计:x轴为物料名称,为数据添加额外信息用于钻取
|
||||||
|
xAxisData = this.list.map(item => this.getMaterialName(item));
|
||||||
|
seriesData = this.list.map((item, index) => ({
|
||||||
|
value: item.coilCount,
|
||||||
|
itemType: item.itemType,
|
||||||
|
itemId: item.itemId
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
// 仓库统计:x轴为仓库名称,为数据添加额外信息用于钻取
|
||||||
|
xAxisData = this.list.map(item => item.actualWarehouseName || '未知仓库');
|
||||||
|
seriesData = this.list.map((item, index) => ({
|
||||||
|
value: item.coilCount,
|
||||||
|
actualWarehouseId: item.actualWarehouseId,
|
||||||
|
actualWarehouseName: item.actualWarehouseName
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.barChart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' },
|
||||||
|
formatter: params => {
|
||||||
|
const data = params[0];
|
||||||
|
return `${data.name}<br/>卷数: ${data.value}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: xAxisData,
|
||||||
|
axisLabel: { rotate: 30, color: '#666' },
|
||||||
|
axisLine: { lineStyle: { color: '#ddd' } }
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
name: '卷数',
|
||||||
|
minInterval: 1,
|
||||||
|
axisLabel: { color: '#666' },
|
||||||
|
axisLine: { lineStyle: { color: '#ddd' } },
|
||||||
|
splitLine: { lineStyle: { color: '#f0f0f0' } }
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: '卷数',
|
||||||
|
type: 'bar',
|
||||||
|
data: seriesData,
|
||||||
|
itemStyle: {
|
||||||
|
// 柱状图使用渐变色增强科技感
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#165DFF' },
|
||||||
|
{ offset: 1, color: '#6AA1FF' }
|
||||||
|
]),
|
||||||
|
cursor: 'pointer'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#0E42D2' },
|
||||||
|
{ offset: 1, color: '#4080FF' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绑定点击事件
|
||||||
|
this.barChart.off('click');
|
||||||
|
this.barChart.on('click', params => {
|
||||||
|
this.handleChartItemClick(params.data);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新饼图
|
||||||
|
updatePieChart() {
|
||||||
|
let pieData;
|
||||||
|
if (this.queryParams.statType === '1') {
|
||||||
|
// 物料统计:按物料分组,为数据添加额外信息用于钻取
|
||||||
|
pieData = this.list.map((item, index) => ({
|
||||||
|
name: this.getMaterialName(item),
|
||||||
|
value: item.coilCount,
|
||||||
|
itemType: item.itemType,
|
||||||
|
itemId: item.itemId,
|
||||||
|
itemStyle: { color: this.getTechColor(index) }
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
// 仓库统计:按仓库分组,为数据添加额外信息用于钻取
|
||||||
|
pieData = this.list.map((item, index) => ({
|
||||||
|
name: item.actualWarehouseName || '未知仓库',
|
||||||
|
value: item.coilCount,
|
||||||
|
actualWarehouseId: item.actualWarehouseId,
|
||||||
|
actualWarehouseName: item.actualWarehouseName,
|
||||||
|
itemStyle: { color: this.getTechColor(index) }
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pieChart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// orient: 'vertical',
|
||||||
|
// left: 10,
|
||||||
|
// data: pieData.map(item => item.name),
|
||||||
|
// textStyle: { color: '#666' }
|
||||||
|
// },
|
||||||
|
series: [{
|
||||||
|
name: '库存分布',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 6,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
cursor: 'pointer',
|
||||||
|
// 饼图扇区添加光泽感
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(22, 93, 255, 0.2)'
|
||||||
|
},
|
||||||
|
label: { show: false },
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#165DFF'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 15,
|
||||||
|
shadowColor: 'rgba(22, 93, 255, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: pieData
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绑定点击事件
|
||||||
|
this.pieChart.off('click');
|
||||||
|
this.pieChart.on('click', params => {
|
||||||
|
this.handleChartItemClick(params.data);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成物料名称
|
||||||
|
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] || '未知';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理图表项点击,实现数据钻取
|
||||||
|
handleChartItemClick(data) {
|
||||||
|
// 重置钻取参数
|
||||||
|
this.drillDownParams = {
|
||||||
|
itemType: null,
|
||||||
|
itemId: null,
|
||||||
|
itemName: '',
|
||||||
|
actualWarehouseId: null,
|
||||||
|
actualWarehouseName: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置传给子组件的查询参数
|
||||||
|
this.drillDownQueryParams = {
|
||||||
|
actualWarehouseId: null,
|
||||||
|
itemType: null,
|
||||||
|
itemId: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据数据类型设置钻取参数
|
||||||
|
if (data.itemType && data.itemId) {
|
||||||
|
// 物料统计钻取
|
||||||
|
this.drillDownParams.itemType = data.itemType;
|
||||||
|
this.drillDownParams.itemId = data.itemId;
|
||||||
|
this.drillDownQueryParams.itemType = data.itemType;
|
||||||
|
this.drillDownQueryParams.itemId = data.itemId;
|
||||||
|
|
||||||
|
// 从store中获取物料名称
|
||||||
|
const item = findItemWithBom(data.itemType, data.itemId);
|
||||||
|
this.drillDownParams.itemName = item ? item.itemName : data.name;
|
||||||
|
this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
|
||||||
|
} else if (data.actualWarehouseId && data.actualWarehouseName) {
|
||||||
|
// 仓库统计钻取
|
||||||
|
this.drillDownParams.actualWarehouseId = data.actualWarehouseId;
|
||||||
|
this.drillDownParams.actualWarehouseName = data.actualWarehouseName;
|
||||||
|
this.drillDownQueryParams.actualWarehouseId = data.actualWarehouseId;
|
||||||
|
|
||||||
|
this.dialogTitle = `仓库库存明细 - ${data.actualWarehouseName}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理表格行点击
|
||||||
|
handleTableRowClick(row) {
|
||||||
|
// 构建点击数据对象
|
||||||
|
const clickData = {};
|
||||||
|
|
||||||
|
if (this.queryParams.statType === '1') {
|
||||||
|
// 物料统计
|
||||||
|
clickData.itemType = row.itemType;
|
||||||
|
clickData.itemId = row.itemId;
|
||||||
|
clickData.name = this.getMaterialName(row);
|
||||||
|
} else {
|
||||||
|
// 仓库统计
|
||||||
|
clickData.actualWarehouseId = row.actualWarehouseId;
|
||||||
|
clickData.actualWarehouseName = row.actualWarehouseName;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用图表点击处理函数
|
||||||
|
this.handleChartItemClick(clickData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图表项悬停效果增强 */
|
||||||
|
:deep(.echarts-tooltip) {
|
||||||
|
border-radius: 6px !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
<div class="flow-left">
|
<div class="flow-left">
|
||||||
<div class="flow-section-title">
|
<div class="flow-section-title">
|
||||||
<span>源卷列表</span>
|
<span>源卷列表</span>
|
||||||
<el-button v-if="!readonly" type="text" size="mini" @click="addSourceCoil" icon="el-icon-plus">添加钢卷</el-button>
|
<!-- <el-button v-if="!readonly" type="text" size="mini" @click="addSourceCoil" icon="el-icon-plus">添加钢卷</el-button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="source-list">
|
<div class="source-list">
|
||||||
|
|||||||
@@ -11,6 +11,9 @@
|
|||||||
<el-tag size="large" v-if="warehouseName" type="success">
|
<el-tag size="large" v-if="warehouseName" type="success">
|
||||||
{{ warehouseName }}
|
{{ warehouseName }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
|
<el-tag size="large" v-if="actualWarehouseName" type="info">
|
||||||
|
{{ actualWarehouseName }}
|
||||||
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 加载状态 -->
|
<!-- 加载状态 -->
|
||||||
@@ -33,7 +36,8 @@
|
|||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-if="!loading"
|
v-if="!loading"
|
||||||
>
|
>
|
||||||
<el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
|
<el-table-column prop="warehouseName" label="库位" align="center" min-width="150"></el-table-column>
|
||||||
|
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" v-if="!hideWarehouseQuery"/>
|
||||||
<el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></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="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
|
||||||
<el-table-column label="物料类型" align="center" prop="itemType">
|
<el-table-column label="物料类型" align="center" prop="itemType">
|
||||||
@@ -94,7 +98,8 @@ export default {
|
|||||||
default: () => ({
|
default: () => ({
|
||||||
warehouseId: null,
|
warehouseId: null,
|
||||||
itemType: null,
|
itemType: null,
|
||||||
itemId: null
|
itemId: null,
|
||||||
|
actualWarehouseId: null
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 物料名称(用于显示标签)
|
// 物料名称(用于显示标签)
|
||||||
@@ -106,6 +111,11 @@ export default {
|
|||||||
warehouseName: {
|
warehouseName: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
},
|
||||||
|
// 实际库区名称(用于显示标签)
|
||||||
|
actualWarehouseName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|||||||
@@ -165,15 +165,15 @@
|
|||||||
style="width: 100%;" clearable />
|
style="width: 100%;" clearable />
|
||||||
<div v-else>请先选择物料类型</div>
|
<div v-else>请先选择物料类型</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="毛重" prop="grossWeight">
|
<el-form-item label="毛重" prop="grossWeight">
|
||||||
<el-input v-model="form.grossWeight" placeholder="请输入毛重" />
|
<el-input v-model="form.grossWeight" placeholder="请输入毛重" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="净重" prop="NetWeight">
|
<el-form-item label="净重" prop="netWeight">
|
||||||
<el-input v-model="form.netWeight" placeholder="请输入净重" />
|
<el-input v-model="form.netWeight" placeholder="请输入净重" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||||
@@ -316,7 +316,14 @@ export default {
|
|||||||
],
|
],
|
||||||
itemType: [
|
itemType: [
|
||||||
{ required: true, message: "物品类型不能为空", trigger: "change" }
|
{ required: true, message: "物品类型不能为空", trigger: "change" }
|
||||||
]
|
],
|
||||||
|
// 净重和毛重
|
||||||
|
netWeight: [
|
||||||
|
{ required: true, message: "净重不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
grossWeight: [
|
||||||
|
{ required: true, message: "毛重不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
},
|
},
|
||||||
labelRender: {
|
labelRender: {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
|||||||
@@ -3,8 +3,19 @@
|
|||||||
<!-- 左侧树结构 -->
|
<!-- 左侧树结构 -->
|
||||||
<div class="stock-tree-col">
|
<div class="stock-tree-col">
|
||||||
<el-card shadow="never" class="stock-tree-card">
|
<el-card shadow="never" class="stock-tree-card">
|
||||||
<div slot="header" class="stock-tree-title">仓库结构</div>
|
<div slot="header" class="stock-tree-title">
|
||||||
<WarehouseTree @node-click="handleTreeSelect" />
|
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||||
|
<span>
|
||||||
|
仓库结构
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<el-select v-model="warehouseType" placeholder="请选择仓库类别" style="width: 50%;">
|
||||||
|
<el-option label="真实库区" value="real" />
|
||||||
|
<el-option label="逻辑库位" value="virtual" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<WarehouseTree @node-click="handleTreeSelect" :warehouseType="warehouseType" />
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧内容 -->
|
<!-- 右侧内容 -->
|
||||||
@@ -116,7 +127,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listStock, delStock, addStock, updateStock } from "@/api/wms/stock";
|
import { listStock, delStock, addStock, updateStock, getStockByActual } from "@/api/wms/stock";
|
||||||
import { addStockIoWithDetail } from "@/api/wms/stockIo";
|
import { addStockIoWithDetail } from "@/api/wms/stockIo";
|
||||||
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
|
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
|
||||||
import ProductSelect from "@/components/KLPService/ProductSelect";
|
import ProductSelect from "@/components/KLPService/ProductSelect";
|
||||||
@@ -182,6 +193,7 @@ export default {
|
|||||||
batchNo: undefined,
|
batchNo: undefined,
|
||||||
mergeBatch: false,
|
mergeBatch: false,
|
||||||
},
|
},
|
||||||
|
warehouseType: 'real',
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
@@ -223,7 +235,8 @@ export default {
|
|||||||
drillDownQueryParams: {
|
drillDownQueryParams: {
|
||||||
warehouseId: null,
|
warehouseId: null,
|
||||||
itemType: null,
|
itemType: null,
|
||||||
itemId: null
|
itemId: null,
|
||||||
|
actualWarehouseId: null,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -234,15 +247,24 @@ export default {
|
|||||||
/** 查询库存列表 */
|
/** 查询库存列表 */
|
||||||
getList() {
|
getList() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
listStock(this.queryParams).then(response => {
|
if (this.warehouseType === 'real') {
|
||||||
this.stockList = response.rows;
|
getStockByActual(this.queryParams).then(response => {
|
||||||
this.total = response.total;
|
this.stockList = response.rows;
|
||||||
this.loading = false;
|
this.total = response.total;
|
||||||
});
|
this.loading = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
listStock(this.queryParams).then(response => {
|
||||||
|
this.stockList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 树节点点击
|
// 树节点点击
|
||||||
handleTreeSelect(node) {
|
handleTreeSelect(node) {
|
||||||
this.queryParams.warehouseId = node.warehouseId;
|
this.queryParams.warehouseId = node.warehouseId;
|
||||||
|
this.queryParams.actualWarehouseId = node.actualWarehouseId;
|
||||||
this.queryParams.pageNum = 1;
|
this.queryParams.pageNum = 1;
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
@@ -371,7 +393,8 @@ export default {
|
|||||||
this.drillDownQueryParams = {
|
this.drillDownQueryParams = {
|
||||||
warehouseId: this.queryParams.warehouseId || row.warehouseId,
|
warehouseId: this.queryParams.warehouseId || row.warehouseId,
|
||||||
itemType: row.itemType,
|
itemType: row.itemType,
|
||||||
itemId: row.itemId
|
itemId: row.itemId,
|
||||||
|
actualWarehouseId: row.actualWarehouseId
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置钻取参数
|
// 设置钻取参数
|
||||||
|
|||||||
Reference in New Issue
Block a user