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

添加轴详情对话框，支持双击查看详细信息

Browse Source
master
huangjinysf 3 months ago
parent 5329a212a2
commit 2051354f9e
1 changed files with 134 additions and 3 deletions
Show Stats Download Patch File Download Diff File

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

@ -13,7 +13,8 @@
<div class="axle-side left">
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`"
class="axle-item"
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
: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>
@ -29,7 +30,8 @@
<div class="axle-side right">
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`"
class="axle-item"
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
: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>
@ -49,11 +51,76 @@
</div>
</div>
</div>
<!-- 轴详情对话框 -->
<el-dialog
v-model="dialogVisible"
title="轴详细信息"
width="50%"
:before-close="handleClose">
<div v-if="selectedAxle" class="axle-details">
<div class="detail-row">
<span class="detail-label">设备编号:</span>
<span class="detail-value">{{ selectedEquipmentCode }}</span>
</div>
<div class="detail-row">
<span class="detail-label">轴号:</span>
<span class="detail-value">{{ selectedAxle.axle_number }}</span>
</div>
<div class="detail-row">
<span class="detail-label">运行状态:</span>
<span class="detail-value" :class="{ 'status-running': selectedAxle.update_time, 'status-stopped': !selectedAxle.update_time }">
{{ selectedAxle.update_time ? '运行中' : '不在运行' }}
</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">规格:</span>
<span class="detail-value">{{ selectedAxle.specification || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">型号:</span>
<span class="detail-value">{{ selectedAxle.model || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">线盘:</span>
<span class="detail-value">{{ selectedAxle.raw_wire_disc || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">完成度:</span>
<span class="detail-value">{{ (selectedAxle.degree_of_completion * 100).toFixed(1) }}%</span>
</div>
<div v-if="selectedAxle.update_time && (selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight)" class="stock-details">
<div class="detail-title">库存信息</div>
<div v-if="selectedAxle.total_number" class="detail-row">
<span class="detail-label">总箱数:</span>
<span class="detail-value">{{ selectedAxle.total_number }}</span>
</div>
<div v-if="selectedAxle.total_net_weight" class="detail-row">
<span class="detail-label">总净重:</span>
<span class="detail-value">{{ selectedAxle.total_net_weight }}kg</span>
</div>
<div v-if="selectedAxle.total_gross_weight" class="detail-row">
<span class="detail-label">总毛重:</span>
<span class="detail-value">{{ selectedAxle.total_gross_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>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { defineProps, computed } from 'vue';
import { defineProps, computed, ref } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
const props = defineProps({
equipmentData: {
@ -292,6 +359,23 @@ const getCompletionClass = (degree) => {
if (percentage < 100) return 'completion-high';
return 'completion-full';
};
// 对话框相关状态
const dialogVisible = ref(false);
const selectedAxle = ref(null);
const selectedEquipmentCode = ref('');
// 显示轴详情对话框
const showAxleDetails = (record, equipmentCode) => {
selectedAxle.value = { ...record };
selectedEquipmentCode.value = equipmentCode;
dialogVisible.value = true;
};
// 关闭对话框
const handleClose = () => {
dialogVisible.value = false;
};
</script>
<style scoped>
@ -483,4 +567,51 @@ const getCompletionClass = (degree) => {
color: #f56c6c;
font-weight: normal;
}
/* 对话框样式 */
.axle-details {
padding: 10px 0;
}
.detail-row {
display: flex;
margin-bottom: 12px;
line-height: 1.5;
}
.detail-label {
min-width: 100px;
font-weight: bold;
color: #606266;
}
.detail-value {
flex: 1;
color: #303133;
}
.detail-title {
font-weight: bold;
color: #303133;
margin: 15px 0 10px;
padding-bottom: 5px;
border-bottom: 1px solid #e4e7ed;
}
.status-running {
color: #67c23a;
}
.status-stopped {
color: #f56c6c;
}
/* 添加悬停效果，提示用户可以双击 */
.axle-item {
cursor: pointer;
}
.axle-item:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>
Write Preview
Loading…
Cancel
Save