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

master
huangjinysf 3 months ago
parent 076285bcba
commit c401f71cff

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

@ -57,6 +57,7 @@
v-model="dialogVisible" v-model="dialogVisible"
title="轴详细信息" title="轴详细信息"
width="80%" width="80%"
top="5vh"
:before-close="handleClose"> :before-close="handleClose">
<div v-if="selectedAxle" class="axle-details-container"> <div v-if="selectedAxle" class="axle-details-container">
<!-- 左侧轴基本信息 --> <!-- 左侧轴基本信息 -->
@ -107,10 +108,23 @@
<span class="detail-value">{{ selectedAxle.total_gross_weight }}kg</span> <span class="detail-value">{{ selectedAxle.total_gross_weight }}kg</span>
</div> </div>
</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-label">最后更新:</span>
<span class="detail-value">{{ selectedAxle.update_time }}</span> <span class="detail-value">{{ selectedAxle.update_time }}</span>
</div> </div> -->
</div> </div>
<!-- 右侧历史数据图表 --> <!-- 右侧历史数据图表 -->
@ -414,6 +428,10 @@ const selectedTimeRange = ref('近1周');
const activeChartTab = ref('totalNumber'); const activeChartTab = ref('totalNumber');
const hasHistoryData = ref(false); const hasHistoryData = ref(false);
//
const productionScheduleData = ref(null);
const productionScheduleLoading = ref(false);
// //
const totalNumberChartRef = ref(null); const totalNumberChartRef = ref(null);
const totalNetWeightChartRef = ref(null); const totalNetWeightChartRef = ref(null);
@ -430,9 +448,13 @@ const showAxleDetails = (record, equipmentCode) => {
selectedEquipmentCode.value = equipmentCode; selectedEquipmentCode.value = equipmentCode;
dialogVisible.value = true; 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); fetchHistoryData(record.model, record.specification, record.wire_disc);
fetchProductionScheduleData(record.model, record.specification, record.wire_disc, equipmentCode, record.axle_number);
} else { } else {
hasHistoryData.value = false; 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 = () => { const initCharts = () => {
// //
@ -960,7 +1017,7 @@ const updateCharts = () => {
/* 对话框样式 */ /* 对话框样式 */
.axle-details-container { .axle-details-container {
display: flex; display: flex;
min-height: 500px; min-height: 650px;
} }
/* 左侧面板样式 */ /* 左侧面板样式 */
@ -968,7 +1025,7 @@ const updateCharts = () => {
flex: 1; flex: 1;
padding: 10px 20px 10px 10px; padding: 10px 20px 10px 10px;
border-right: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;
max-height: 500px; max-height: 650px;
overflow-y: auto; overflow-y: auto;
} }
@ -1029,13 +1086,13 @@ const updateCharts = () => {
} }
.chart { .chart {
height: 400px; height: 500px;
width: 100%; width: 100%;
} }
/* 加载状态 */ /* 加载状态 */
.chart-loading { .chart-loading {
height: 400px; height: 500px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1043,7 +1100,7 @@ const updateCharts = () => {
/* 无数据状态 */ /* 无数据状态 */
.no-history-data { .no-history-data {
height: 400px; height: 500px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1051,6 +1108,19 @@ const updateCharts = () => {
font-size: 16px; font-size: 16px;
} }
/* 排产信息加载状态 */
.production-schedule-loading {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 排产信息面板样式 */
.production-schedule-details {
margin-top: 10px;
}
/* 添加悬停效果,提示用户可以双击 */ /* 添加悬停效果,提示用户可以双击 */
.axle-item { .axle-item {
cursor: pointer; cursor: pointer;

Loading…
Cancel
Save