huangjin
/
huaerda-front-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化设备轴号处理逻辑，添加规格型号显示样式和当前订单详情

Browse Source
master
huangjinysf 2 months ago
parent c401f71cff
commit d8c2c7eaeb
2 changed files with 102 additions and 32 deletions
Show Stats Download Patch File Download Diff File

4
src/config/api.js
Unescape Escape View File

@ -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: {

110
src/views/plan/EquipmentStatus.vue
Unescape Escape View File

@ -11,13 +11,13 @@
<div class="equipment-body">
<div class="axle-container">
<div class="axle-side left">
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`"
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
class="axle-item"
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
@dblclick="showAxleDetails(record, equipment.equipment_code)">
<div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
<div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
<div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
<div class="axle-spec" v-if="record.update_time">规格: {{ record.specification }}</div>
<div class="axle-model" v-if="record.update_time">型号: {{ record.model }}</div>
<div class="axle-disc" v-if="record.update_time">线盘: {{ record.raw_wire_disc || '无' }}</div>
<div class="axle-progress" v-if="record.update_time">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
<div class="axle-stock" v-if="record.update_time && (record.total_number || record.total_net_weight || record.total_gross_weight)">
@ -28,13 +28,13 @@
</div>
</div>
<div class="axle-side right">
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`"
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
class="axle-item"
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
@dblclick="showAxleDetails(record, equipment.equipment_code)">
<div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
<div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
<div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
<div class="axle-spec" v-if="record.update_time">规格: {{ record.specification }}</div>
<div class="axle-model" v-if="record.update_time">型号: {{ record.model }}</div>
<div class="axle-disc" v-if="record.update_time">线盘: {{ record.raw_wire_disc || '无' }}</div>
<div class="axle-progress" v-if="record.update_time">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
<div class="axle-stock" v-if="record.update_time && (record.total_number || record.total_net_weight || record.total_gross_weight)">
@ -121,10 +121,17 @@
<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 v-if="selectedAxle.update_time" class="current-order-details">
<div class="detail-title">当前订单</div>
<div class="detail-row">
<span class="detail-label">设备轴号:</span>
<span class="detail-value">{{ selectedAxle.axle_number }}</span>
</div>
<div v-if="selectedAxle.total_quantity" class="detail-row">
<span class="detail-label">总轴数:</span>
<span class="detail-value">{{ selectedAxle.total_quantity }}</span>
</div>
</div>
</div>
<!-- 右侧：历史数据图表 -->
@ -263,9 +270,9 @@ const getLeftAxles = (equipment) => {
axle.includes('左') || axle.includes('left')
);
// 记录已经处理的轴号，避免重复显示
const processedAxles = new Set();
// 存储所有的轴记录，包括重复的轴号
const resultAxles = [];
const processedAxles = new Set(); // 用于跟踪已处理的轴号
// 处理运行中的记录
for (const record of equipment.status_records) {
@ -273,12 +280,27 @@ const getLeftAxles = (equipment) => {
// 检查记录中包含哪些左侧轴
for (const axleNumber of validLeftAxles) {
if (record.axle_number.includes(axleNumber) && !processedAxles.has(axleNumber)) {
if (record.axle_number.includes(axleNumber)) {
// 对于复合轴号（如"左1,左2"）需要特殊处理
if (record.axle_number.includes(',')) {
// 分割复合轴号，检查是否包含当前轴号
const axleNumbers = record.axle_number.split(',');
if (axleNumbers.includes(axleNumber)) {
resultAxles.push({
...record,
axle_number: axleNumber, // 使用单个轴号
axle_count: axleNumbers.length // 更新轴数为实际数量
});
processedAxles.add(axleNumber);
}
} else {
// 单个轴号
resultAxles.push({
...record,
axle_number: axleNumber // 使用实际的轴号而不是复合轴号
axle_number: axleNumber // 使用实际的轴号
});
processedAxles.add(axleNumber);
}
}
}
}
@ -300,11 +322,19 @@ const getLeftAxles = (equipment) => {
}
}
// 按照有效轴号列表的顺序排序
// 按照有效轴号列表的顺序排序，相同轴号的记录会排在一起
return resultAxles.sort((a, b) => {
const aIndex = validLeftAxles.indexOf(a.axle_number);
const bIndex = validLeftAxles.indexOf(b.axle_number);
if (aIndex !== bIndex) {
return aIndex - bIndex;
}
// 如果轴号相同，按更新时间排序（最新的在前）
if (a.update_time && b.update_time) {
return new Date(b.update_time) - new Date(a.update_time);
}
// 如果一个有更新时间一个没有，有更新时间的在前
return a.update_time ? -1 : 1;
});
};
@ -332,9 +362,9 @@ const getRightAxles = (equipment) => {
axle.includes('右') || axle.includes('right')
);
// 记录已经处理的轴号，避免重复显示
const processedAxles = new Set();
// 存储所有的轴记录，包括重复的轴号
const resultAxles = [];
const processedAxles = new Set(); // 用于跟踪已处理的轴号
// 处理运行中的记录
for (const record of equipment.status_records) {
@ -342,12 +372,27 @@ const getRightAxles = (equipment) => {
// 检查记录中包含哪些右侧轴
for (const axleNumber of validRightAxles) {
if (record.axle_number.includes(axleNumber) && !processedAxles.has(axleNumber)) {
if (record.axle_number.includes(axleNumber)) {
// 对于复合轴号（如"右1,右2"）需要特殊处理
if (record.axle_number.includes(',')) {
// 分割复合轴号，检查是否包含当前轴号
const axleNumbers = record.axle_number.split(',');
if (axleNumbers.includes(axleNumber)) {
resultAxles.push({
...record,
axle_number: axleNumber, // 使用单个轴号
axle_count: axleNumbers.length // 更新轴数为实际数量
});
processedAxles.add(axleNumber);
}
} else {
// 单个轴号
resultAxles.push({
...record,
axle_number: axleNumber // 使用实际的轴号而不是复合轴号
axle_number: axleNumber // 使用实际的轴号
});
processedAxles.add(axleNumber);
}
}
}
}
@ -369,11 +414,19 @@ const getRightAxles = (equipment) => {
}
}
// 按照有效轴号列表的顺序排序
// 按照有效轴号列表的顺序排序，相同轴号的记录会排在一起
return resultAxles.sort((a, b) => {
const aIndex = validRightAxles.indexOf(a.axle_number);
const bIndex = validRightAxles.indexOf(b.axle_number);
if (aIndex !== bIndex) {
return aIndex - bIndex;
}
// 如果轴号相同，按更新时间排序（最新的在前）
if (a.update_time && b.update_time) {
return new Date(b.update_time) - new Date(a.update_time);
}
// 如果一个有更新时间一个没有，有更新时间的在前
return a.update_time ? -1 : 1;
});
};
@ -959,18 +1012,30 @@ const updateCharts = () => {
font-size: 12px;
color: #606266;
margin-bottom: 2px;
background-color: rgba(64, 158, 255, 0.1);
padding: 2px 4px;
border-radius: 3px;
display: inline-block;
}
.axle-model {
font-size: 12px;
color: #909399;
margin-bottom: 2px;
background-color: rgba(103, 194, 58, 0.1);
padding: 2px 4px;
border-radius: 3px;
display: inline-block;
}
.axle-disc {
font-size: 12px;
color: #606266;
margin-bottom: 2px;
background-color: rgba(230, 162, 60, 0.1);
padding: 2px 4px;
border-radius: 3px;
display: inline-block;
}
.axle-progress {
@ -1121,6 +1186,11 @@ const updateCharts = () => {
margin-top: 10px;
}
/* 当前订单面板样式 */
.current-order-details {
margin-top: 10px;
}
/* 添加悬停效果，提示用户可以双击 */
.axle-item {
cursor: pointer;

Write Preview
Loading…
Cancel
Save