添加轴详情排产信息展示功能,优化对话框高度和样式

master
huangjinysf 3 months ago
parent 076285bcba
commit c401f71cff

@ -1,8 +1,8 @@
// API配置文件
export const API_CONFIG = {
// API服务器基础地址
BASE_URL: 'http://192.168.110.38:8100',
// BASE_URL: 'http://localhost:8100',
// BASE_URL: 'http://192.168.110.38:8100',
BASE_URL: 'http://localhost:8100',
// API端点
ENDPOINTS: {

@ -57,6 +57,7 @@
v-model="dialogVisible"
title="轴详细信息"
width="80%"
top="5vh"
:before-close="handleClose">
<div v-if="selectedAxle" class="axle-details-container">
<!-- 左侧轴基本信息 -->
@ -107,10 +108,23 @@
<span class="detail-value">{{ selectedAxle.total_gross_weight }}kg</span>
</div>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<div v-if="productionScheduleLoading" v-loading="true" class="production-schedule-loading"></div>
<div v-else-if="productionScheduleData" class="production-schedule-details">
<div class="detail-title">排产信息</div>
<div v-if="productionScheduleData.axle_final_average_speed" class="detail-row">
<span class="detail-label">产速:</span>
<span class="detail-value">{{ productionScheduleData.axle_final_average_speed }} kg/小时</span>
</div>
<div v-if="productionScheduleData.axle_final_average_weight" class="detail-row">
<span class="detail-label">每轴均重:</span>
<span class="detail-value">{{ productionScheduleData.axle_final_average_weight }}kg</span>
</div>
</div>
<!-- <div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">最后更新:</span>
<span class="detail-value">{{ selectedAxle.update_time }}</span>
</div>
</div> -->
</div>
<!-- 右侧历史数据图表 -->
@ -414,6 +428,10 @@ const selectedTimeRange = ref('近1周');
const activeChartTab = ref('totalNumber');
const hasHistoryData = ref(false);
//
const productionScheduleData = ref(null);
const productionScheduleLoading = ref(false);
//
const totalNumberChartRef = ref(null);
const totalNetWeightChartRef = ref(null);
@ -430,9 +448,13 @@ const showAxleDetails = (record, equipmentCode) => {
selectedEquipmentCode.value = equipmentCode;
dialogVisible.value = true;
// 线
if (record.update_time && record.specification && record.wire_disc) {
//
productionScheduleData.value = null;
// 线
if (record.update_time && record.model && record.specification && record.wire_disc) {
fetchHistoryData(record.model, record.specification, record.wire_disc);
fetchProductionScheduleData(record.model, record.specification, record.wire_disc, equipmentCode, record.axle_number);
} else {
hasHistoryData.value = false;
}
@ -560,6 +582,41 @@ const fetchHistoryData = (model, specification, wireDisc) => {
});
};
//
const fetchProductionScheduleData = (model, specification, wireDisc, equipmentCode, axleNumber) => {
productionScheduleLoading.value = true;
// API URL
let apiUrl = `${API_CONFIG.BASE_URL}/api/plan/qb_machine_unit_stats?model=${model}&specification=${specification}&wire_disc=${wireDisc}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.code === 200 && data.data && data.data.qb_machine_unit_stats && data.data.qb_machine_unit_stats.data) {
// "equipment_code-axle_number"
const matchKey = `${equipmentCode}-${axleNumber}`;
//
if (data.data.qb_machine_unit_stats.data[matchKey]) {
productionScheduleData.value = data.data.qb_machine_unit_stats.data[matchKey];
} else {
console.log(`未找到匹配的排产数据: ${matchKey}`);
productionScheduleData.value = null;
}
} else {
console.log('排产信息API返回格式不正确或无数据');
productionScheduleData.value = null;
}
})
.catch(error => {
console.error('排产信息API调用失败:', error);
productionScheduleData.value = null;
})
.finally(() => {
productionScheduleLoading.value = false;
});
};
//
const initCharts = () => {
//
@ -960,7 +1017,7 @@ const updateCharts = () => {
/* 对话框样式 */
.axle-details-container {
display: flex;
min-height: 500px;
min-height: 650px;
}
/* 左侧面板样式 */
@ -968,7 +1025,7 @@ const updateCharts = () => {
flex: 1;
padding: 10px 20px 10px 10px;
border-right: 1px solid #EBEEF5;
max-height: 500px;
max-height: 650px;
overflow-y: auto;
}
@ -1029,13 +1086,13 @@ const updateCharts = () => {
}
.chart {
height: 400px;
height: 500px;
width: 100%;
}
/* 加载状态 */
.chart-loading {
height: 400px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
@ -1043,7 +1100,7 @@ const updateCharts = () => {
/* 无数据状态 */
.no-history-data {
height: 400px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
@ -1051,6 +1108,19 @@ const updateCharts = () => {
font-size: 16px;
}
/* 排产信息加载状态 */
.production-schedule-loading {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 排产信息面板样式 */
.production-schedule-details {
margin-top: 10px;
}
/* 添加悬停效果,提示用户可以双击 */
.axle-item {
cursor: pointer;

Loading…
Cancel
Save