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

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

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

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

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

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

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