Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
@@ -112,3 +112,11 @@ export function mergeMaterialCoil(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function distributionByActualItemType(query) {
|
||||
return request({
|
||||
url: '/wms/materialCoil/distributionByActualItemType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@@ -1,21 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="product-name" @click.stop="clickHandle">
|
||||
<slot name="default" :product="product">
|
||||
{{ product && product.productName ? product.productName : '--' }}
|
||||
<slot name="default" :product="productFull">
|
||||
{{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质:{{ productFull.material || '无材质' }})
|
||||
</slot>
|
||||
</span>
|
||||
<el-dialog
|
||||
:visible="showDetail"
|
||||
@close="showDetail = false"
|
||||
:title="product && product.productName ? product.productName : '--' "
|
||||
:title="productFull.productName || '--' "
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-descriptions :column="1" border>
|
||||
<!-- <el-descriptions-item label="产品ID">
|
||||
{{ product.productId || '--' }}
|
||||
</el-descriptions-item> -->
|
||||
<el-descriptions-item label="产品名称">
|
||||
{{ product.productName || '--' }}
|
||||
</el-descriptions-item>
|
||||
@@ -71,6 +68,24 @@ export default {
|
||||
// product: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
productFull() {
|
||||
// 完整的product, 确保每个字段都有值
|
||||
if (!this.product) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
productId: this.product.productId || '',
|
||||
productName: this.product.productName || '',
|
||||
productCode: this.product.productCode || '',
|
||||
specification: this.product.specification || '',
|
||||
material: this.product.material || '',
|
||||
surfaceTreatment: this.product.surfaceTreatment || '',
|
||||
zincLayer: this.product.zincLayer || '',
|
||||
manufacturer: this.product.manufacturer || '',
|
||||
}
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// ...mapState({
|
||||
// productMap: state => state.category.productMap
|
||||
|
||||
@@ -2,30 +2,30 @@
|
||||
<div>
|
||||
<!-- 作用域插槽 -->
|
||||
<span class="material-name" @click.stop="showDetail = true">
|
||||
<slot name="default" :material="material">
|
||||
{{ material.rawMaterialName ? material.rawMaterialName : '-' }}
|
||||
<slot name="default" :material="materialFull">
|
||||
{{ materialFull.rawMaterialName || '未知' }}[{{ materialFull.specification || '无规格' }}] - (材质:{{ materialFull.material || '无材质' }})
|
||||
</slot>
|
||||
</span>
|
||||
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.rawMaterialName" width="600px"
|
||||
<el-dialog :visible="showDetail" @close="showDetail = false" :title="materialFull.rawMaterialName || '--'" width="600px"
|
||||
append-to-body>
|
||||
<el-descriptions :column="1" border>
|
||||
<!-- <el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item> -->
|
||||
<el-descriptions-item label="原材料名称">{{ material.rawMaterialName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="原材料编码">{{ material.rawMaterialCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格">{{ material.specification }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="原材料ID">{{ materialFull.rawMaterialId }}</el-descriptions-item> -->
|
||||
<el-descriptions-item label="原材料名称">{{ materialFull.rawMaterialName || '--' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="原材料编码">{{ materialFull.rawMaterialCode || '--' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格">{{ materialFull.specification || '--' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="材质">
|
||||
{{ material.material || '--' }}
|
||||
{{ materialFull.material || '--' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="表面处理">
|
||||
{{ material.surfaceTreatment || '--' }}
|
||||
{{ materialFull.surfaceTreatment || '--' }}
|
||||
</el-descriptions-item>
|
||||
<!-- 锌层 -->
|
||||
<el-descriptions-item label="锌层">
|
||||
{{ material.zincLayer || '--' }}
|
||||
{{ materialFull.zincLayer || '--' }}
|
||||
</el-descriptions-item>
|
||||
<!-- 厂家 -->
|
||||
<el-descriptions-item label="厂家">
|
||||
{{ material.manufacturer || '--' }}
|
||||
{{ materialFull.manufacturer || '--' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- <BomInfo :bomId="material.bomId" /> -->
|
||||
@@ -54,6 +54,24 @@ export default {
|
||||
// material: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
materialFull() {
|
||||
// 完整的material, 确保每个字段都有值
|
||||
if (!this.material) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
rawMaterialId: this.material.rawMaterialId || '',
|
||||
rawMaterialName: this.material.rawMaterialName || '',
|
||||
rawMaterialCode: this.material.rawMaterialCode || '',
|
||||
specification: this.material.specification || '',
|
||||
material: this.material.material || '',
|
||||
surfaceTreatment: this.material.surfaceTreatment || '',
|
||||
zincLayer: this.material.zincLayer || '',
|
||||
manufacturer: this.material.manufacturer || '',
|
||||
}
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// ...mapState({
|
||||
// materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
||||
|
||||
@@ -1,58 +1,50 @@
|
||||
<template>
|
||||
<div class="statistics-container" v-loading="loading">
|
||||
<!-- 按照物料类型盘点 -->
|
||||
<!-- 统计方式选择 -->
|
||||
<el-form inline>
|
||||
<!-- <el-form-item label="统计方式" prop="statType">
|
||||
<el-radio-group v-model="queryParams.statType" @change="getList">
|
||||
<el-radio label="1">物料</el-radio>
|
||||
<el-radio label="2">仓库</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item> -->
|
||||
|
||||
<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" />
|
||||
</el-form-item>
|
||||
</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> -->
|
||||
<!-- 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">
|
||||
<!-- 仓库相关列:仅仓库统计时有效 -->
|
||||
<el-table-column v-if="queryParams.statType === '2'" prop="warehouseName" 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>
|
||||
|
||||
<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 v-if="queryParams.statType === '1'" label="物料信息" align="center" min-width="250">
|
||||
<el-table-column label="物料信息" align="center" min-width="250">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo v-if="scope.row.itemType === 'product'" :product="scope.row.product">
|
||||
<template #default="{ product }">
|
||||
{{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
|
||||
{{ product.productName || '未知' }}[{{ product.specification || '无规格' }}] - (材质:{{ product.material || '无材质' }})
|
||||
</template>
|
||||
</ProductInfo>
|
||||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial">
|
||||
<template #default="{ material }">
|
||||
{{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
|
||||
{{ material.rawMaterialName || '未知' }}[{{ material.specification || '无规格' }}] - (材质:{{ material.material || '无材质' }})
|
||||
</template>
|
||||
</RawMaterialInfo>
|
||||
</template>
|
||||
@@ -60,8 +52,11 @@
|
||||
|
||||
<!-- 通用列 -->
|
||||
<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-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;
|
||||
@@ -92,8 +87,8 @@
|
||||
</template>
|
||||
|
||||
<!-- 钻取表格 -->
|
||||
<el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe style="width: 100%"
|
||||
v-if="!drillDownLoading">
|
||||
<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>
|
||||
@@ -117,8 +112,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" />
|
||||
<el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
|
||||
<el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
|
||||
<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>
|
||||
|
||||
@@ -136,26 +131,46 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
|
||||
import { getMaterialCoilDistributionByType, distributionByActualItemType } from "@/api/wms/coil";
|
||||
import { listMaterialCoil } 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 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: [],
|
||||
@@ -206,294 +221,90 @@ export default {
|
||||
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.updateCharts();
|
||||
this.calculateSummary(); // 新增:计算汇总数据
|
||||
this.loading = false;
|
||||
})
|
||||
} else if (this.queryParams.statType === '2') {
|
||||
// 仓库统计:物料字段无效,以仓库为核心
|
||||
getMaterialCoilDistributionByWarehouse(this.queryParams).then(res => {
|
||||
distributionByActualItemType(this.queryParams).then(res => {
|
||||
this.list = res.data || [];
|
||||
// this.updateCharts();
|
||||
this.calculateSummary(); // 新增:计算汇总数据
|
||||
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) },
|
||||
// children: [{
|
||||
// name: `卷数: ${item.coilCount}`,
|
||||
// value: item.coilCount,
|
||||
// itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
|
||||
// }]
|
||||
}))
|
||||
};
|
||||
} else {
|
||||
// 仓库统计:一级为仓库,二级为卷数信息
|
||||
treeData = {
|
||||
name: '仓库库存总览',
|
||||
children: this.list.map((item, index) => ({
|
||||
name: item.warehouseName || '未知仓库',
|
||||
value: item.coilCount,
|
||||
warehouseId: item.warehouseId,
|
||||
warehouseName: item.warehouseName,
|
||||
itemStyle: { color: this.getTechColor(index) },
|
||||
// children: [{
|
||||
// name: `卷数: ${item.coilCount}`,
|
||||
// value: item.coilCount,
|
||||
// itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
|
||||
// }]
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
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.warehouseName || '未知仓库');
|
||||
seriesData = this.list.map((item, index) => ({
|
||||
value: item.coilCount,
|
||||
warehouseId: item.warehouseId,
|
||||
warehouseName: item.warehouseName
|
||||
}));
|
||||
}
|
||||
|
||||
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.warehouseName || '未知仓库',
|
||||
value: item.coilCount,
|
||||
warehouseId: item.warehouseId,
|
||||
warehouseName: item.warehouseName,
|
||||
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') {
|
||||
@@ -513,42 +324,6 @@ export default {
|
||||
return typeMap[row.itemType] || '未知';
|
||||
},
|
||||
|
||||
// 处理图表项点击,实现数据钻取
|
||||
handleChartItemClick(data) {
|
||||
// 重置钻取参数
|
||||
this.drillDownParams = {
|
||||
itemType: null,
|
||||
itemId: null,
|
||||
itemName: '',
|
||||
warehouseId: null,
|
||||
warehouseName: '',
|
||||
dataType: 1
|
||||
};
|
||||
|
||||
// 根据数据类型设置钻取参数
|
||||
if (data.itemType && data.itemId) {
|
||||
// 物料统计钻取
|
||||
this.drillDownParams.itemType = data.itemType;
|
||||
this.drillDownParams.itemId = data.itemId;
|
||||
// 从store中获取物料名称
|
||||
const item = findItemWithBom(data.itemType, data.itemId);
|
||||
console.log('item', item, data);
|
||||
this.drillDownParams.itemName = item ? item.itemName : data.name;
|
||||
this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
|
||||
} else if (data.warehouseId && data.warehouseName) {
|
||||
// 仓库统计钻取
|
||||
this.drillDownParams.warehouseId = data.warehouseId;
|
||||
this.drillDownParams.warehouseName = data.warehouseName;
|
||||
this.dialogTitle = `仓库库存明细 - ${data.warehouseName}`;
|
||||
}
|
||||
|
||||
// 重置分页并打开弹窗
|
||||
this.drillDownQueryParams.pageNum = 1;
|
||||
this.dialogVisible = true;
|
||||
// 获取钻取数据
|
||||
this.getDrillDownList();
|
||||
},
|
||||
|
||||
// 处理表格行点击
|
||||
handleTableRowClick(row) {
|
||||
// 构建点击数据对象
|
||||
@@ -707,9 +482,22 @@ h3 {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 图表项悬停效果增强 */
|
||||
:deep(.echarts-tooltip) {
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
/* 汇总区域样式 */
|
||||
.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>
|
||||
|
||||
@@ -47,16 +47,8 @@
|
||||
</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">
|
||||
<template #default="{ product }">
|
||||
{{ product.productName || '未知' }}({{ product.productCode || '无编码' }})
|
||||
</template>
|
||||
</ProductInfo>
|
||||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial">
|
||||
<template #default="{ material }">
|
||||
{{ material.rawMaterialName || '未知' }}({{ material.rawMaterialCode || '无编码' }})
|
||||
</template>
|
||||
</RawMaterialInfo>
|
||||
<ProductInfo v-if="scope.row.itemType === 'product'" :product="scope.row.product"></ProductInfo>
|
||||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial"></RawMaterialInfo>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" />
|
||||
|
||||
@@ -124,29 +124,6 @@
|
||||
<el-table-column v-if="querys.materialType === '成品'" label="切边要求" align="center" prop="trimmingRequirement" />
|
||||
<el-table-column v-if="querys.materialType === '成品'" label="打包状态" align="center" prop="packingStatus" />
|
||||
<el-table-column v-if="querys.materialType === '成品'" label="包装要求" align="center" prop="packagingRequirement" />
|
||||
<!-- <el-form-item v-if="form.materialType === '成品'" label="质量状态" prop="qualityStatus">
|
||||
<el-input v-model="form.qualityStatus" placeholder="请输入质量状态"
|
||||
:disabled="readonly">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.materialType === '成品'" label="切边要求" prop="trimmingRequirement">
|
||||
<el-input v-model="form.trimmingRequirement" placeholder="请输入切边要求"
|
||||
:disabled="readonly">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.materialType === '成品'" label="打包状态" prop="packingStatus">
|
||||
<el-input v-model="form.packingStatus" placeholder="请输入打包状态"
|
||||
:disabled="readonly">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.materialType === '成品'" label="包装要求" prop="packagingRequirement">
|
||||
<el-input v-model="form.packagingRequirement" placeholder="请输入包装要求"
|
||||
:disabled="readonly">
|
||||
</el-input>
|
||||
</el-form-item> -->
|
||||
<el-table-column label="关联信息" align="center" prop="parentCoilNos" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 1 && scope.row.dataType === 1">
|
||||
@@ -673,7 +650,7 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const coilIds = row.coilId || this.ids;
|
||||
this.$modal.confirm('是否确认删除钢卷物料编号为"' + coilIds + '"的数据项?').then(() => {
|
||||
this.$modal.confirm('是否确认删除钢卷物料编号为"' + coilIds + '"的数据项,会同时清理刚钢卷相关的待操作记录且无法恢复!!!是否继续删除?').then(() => {
|
||||
this.loading = true;
|
||||
return delMaterialCoil(coilIds);
|
||||
}).then(() => {
|
||||
|
||||
@@ -67,48 +67,6 @@
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
|
||||
<!-- 添加或修改库存对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="仓库/库区/库位ID" prop="warehouseId">
|
||||
<warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物品类型" prop="itemType">
|
||||
<el-select v-model="form.itemType" placeholder="请选择物品类型">
|
||||
<el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品" prop="itemId">
|
||||
<raw-material-select v-if="form.itemType === 'rawMaterial'" v-model="form.itemId" placeholder="请选择原材料"
|
||||
style="width: 100%;" clearable />
|
||||
<product-select v-else-if="form.itemType === 'product'" v-model="form.itemId" placeholder="请选择产品"
|
||||
style="width: 100%;" clearable />
|
||||
<el-input v-else v-model="form.itemId" placeholder="请先选择物品类型" :disabled="true" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入库存数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="stockBoxVisible" title="暂存单据" width="800px" append-to-body>
|
||||
<stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 钻取明细对话框 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
|
||||
Reference in New Issue
Block a user