添加实时库存表功能,支持查看WMS类型1记录数据,优化表格布局和滚动条样式

master
huangjinysf 2 months ago
parent 82b7d678ba
commit ad1f7877e6

@ -10,6 +10,7 @@ export const API_CONFIG = {
PARETO_ANALYSIS: '/api/qc/pareto',
WORKBENCH_BADNESS: '/api/qc/badness/workbench',
EQUIPMENT_STATUS: '/api/plan/equipment/status/',
REPAIR_SUMMARY: '/api/eq-repair/enamelling-repair-summary'
REPAIR_SUMMARY: '/api/eq-repair/enamelling-repair-summary',
WMS_TYPE_1_RECORDS: '/api/wms/type/1/records'
}
}

@ -0,0 +1,257 @@
<template>
<div class="inventory-table-container">
<div class="table-header">
<h3>实时库存表</h3>
<div class="table-actions">
<el-button @click="refreshData" type="primary" size="small">刷新数据</el-button>
</div>
</div>
<!-- 调试信息 -->
<div v-if="!loading" style="margin-bottom: 10px; font-size: 12px; color: #666;">
调试信息: 获取到 {{ records.length }} 条记录表格共 {{ tableData.length }}
</div>
<div v-loading="loading" class="table-wrapper">
<el-table
:data="tableData"
style="width: 100%; min-width: max-content;"
border
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
empty-text="暂无数据"
:scrollbar-always-on="true"
>
<!-- 规格列 -->
<el-table-column
prop="specification"
label="规格"
width="120"
fixed="left"
/>
<!-- 动态列model-wire_disc 组合 -->
<el-table-column
v-for="column in dynamicColumns"
:key="column.key"
:label="column.label"
:prop="column.prop"
min-width="150"
>
<template #default="scope">
{{ scope.row[column.prop] || '-' }}
</template>
</el-table-column>
<!-- 总计列 -->
<el-table-column
label="总计"
width="100"
fixed="right"
>
<template #default="scope">
{{ scope.row.total }}
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { API_CONFIG } from "@/config/api"
//
const loading = ref(false)
const records = ref([])
//
const dynamicColumns = computed(() => {
if (!records.value.length) return [];
// 使 '::'
const combinations = [...new Set(records.value.map(item => {
if (item.wire_disc && item.wire_disc.trim() !== '') {
return `${item.model}::${item.wire_disc}`;
} else {
return item.model;
}
}))].sort(); //
return combinations.map(comb => {
return {
key: comb,
prop: comb,
label: comb.replace('::', '-') // '-'
};
});
});
//
const tableData = computed(() => {
console.log('计算表格数据, records.value:', records.value);
if (!records.value.length) {
console.log('records为空返回空数组');
return [];
}
//
const specifications = [...new Set(records.value.map(item => item.specification))]
.sort((a, b) => parseFloat(a) - parseFloat(b)); // "0.800"
console.log('获取到的规格列表:', specifications);
// model::wire_disc
const combinations = [...new Set(records.value.map(item => {
if (item.wire_disc && item.wire_disc.trim() !== '') {
return `${item.model}::${item.wire_disc}`;
} else {
return item.model;
}
}))];
console.log('获取到的model::wire_disc组合:', combinations);
//
const tableDataResult = specifications.map(specification => {
const row = { specification };
let total = 0;
combinations.forEach(comb => {
// wire_disc '::'
const hasWireDisc = comb.includes('::');
let model, wire_disc;
if (hasWireDisc) {
[model, wire_disc] = comb.split('::'); // 使 '::'
} else {
model = comb;
wire_disc = null;
}
//
const record = records.value.find(r => {
const specMatch = r.specification === specification;
const modelMatch = r.model === model;
const wireDiscMatch = hasWireDisc
? (r.wire_disc === wire_disc)
: (!r.wire_disc || r.wire_disc.trim() === '');
return specMatch && modelMatch && wireDiscMatch;
});
row[comb] = record ? record.total_number : null;
if (record) total += record.total_number;
});
row.total = total;
return row;
});
console.log('生成的表格数据:', tableDataResult);
return tableDataResult;
});
//
const fetchData = async () => {
loading.value = true;
try {
console.log('正在请求API:', `${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.WMS_TYPE_1_RECORDS}`);
const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.WMS_TYPE_1_RECORDS}`);
const result = await response.json();
console.log('API返回结果:', result);
if (result.code === 200 && result.data && result.data.records) {
records.value = result.data.records;
console.log('设置records值:', records.value);
} else {
console.error('获取实时库存数据失败:', result.message);
}
} catch (error) {
console.error('API调用失败:', error);
} finally {
loading.value = false;
}
};
//
const refreshData = () => {
fetchData();
};
//
onMounted(() => {
fetchData();
});
</script>
<style scoped>
.inventory-table-container {
padding: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table-header h3 {
margin: 0;
font-size: 18px;
color: #303133;
}
.table-actions {
display: flex;
gap: 10px;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
/* 确保滚动条始终可见 */
scrollbar-width: thin; /* Firefox */
}
:deep(.el-table) {
font-size: 14px;
/* 确保表格最小宽度正确计算 */
width: max-content !important;
min-width: 100% !important;
}
:deep(.el-table th) {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
white-space: nowrap;
}
:deep(.el-table td) {
padding: 8px 0;
white-space: nowrap;
}
/* Webkit 浏览器的滚动条样式 */
.table-wrapper::-webkit-scrollbar {
height: 10px;
}
.table-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-wrapper::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 5px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
</style>

@ -9,6 +9,12 @@
@click="handleEquipmentStatus"
v-hasPermi="['warehouse:WmsImportResult:query']"
>设备运行状态</el-button>
<el-button
type="warning"
plain
@click="handleRealTimeInventory"
v-hasPermi="['warehouse:WmsImportResult:query']"
>实时库存表</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -53,6 +59,7 @@ import { getDateRangeByTimeRange } from "@/utils/dateFormat"
import ParetoAnalysis from './ParetoAnalysis.vue'
import ItemAnalysis from './ItemAnalysis.vue'
import EquipmentStatus from './EquipmentStatus.vue'
import RealTimeInventory from './RealTimeInventory.vue'
import EmptyContent from './EmptyContent.vue'
const showSearch = ref(true)
@ -156,6 +163,13 @@ function handleEquipmentStatus() {
});
}
//
function handleRealTimeInventory() {
message.value = '正在获取实时库存数据...';
//
currentComponent.value = RealTimeInventory;
}
</script>
<style>

@ -34,7 +34,7 @@
icon="Edit"
@click="handleItemAnalysis"
v-hasPermi="['warehouse:WmsImportResult:edit']"
>项目分析</el-button>
>机台-项目分析</el-button>
</el-col>
<el-col :span="1.5">

@ -137,7 +137,7 @@ const updateTimes = ref([])
//
const selectedUpdateTime = ref('')
const basetime = ref('2025-07-02 09:11:00')
const basetime = ref('2025-12-25 09:09:00')
const matrixDiff = ref([])
const baseMatrix = ref([])
const showDiff = ref(false) // toggle
@ -246,13 +246,13 @@ function generateUpdateTimes() {
const now = new Date()
const currentMinutes = now.getMinutes()
if (currentMinutes >= 42) {
now.setMinutes(41)
} else if (currentMinutes >= 11) {
now.setMinutes(11)
if (currentMinutes >= 39) {
now.setMinutes(39)
} else if (currentMinutes >= 9) {
now.setMinutes(9)
} else {
now.setHours(now.getHours() - 1)
now.setMinutes(41)
now.setMinutes(39)
}
now.setSeconds(0)

Loading…
Cancel
Save