refactor: 更新点位详细卡片的操作展示，添加操作摘要和工具提示以提升用户体验
This commit is contained in:
parent
3c63594d1a
commit
8bf968d273
@ -296,23 +296,35 @@ const binTaskData = computed(() => {
|
||||
<div v-for="(task, taskIndex) in binLocation.binTasks" :key="taskIndex" class="bin-task-item">
|
||||
<div v-if="task && task.Load && typeof task.Load === 'object'" class="task-operation">
|
||||
<a-typography-text class="operation-title">装载</a-typography-text>
|
||||
<div class="operation-details">
|
||||
<div v-for="(value, key) in task.Load" :key="key" class="detail-item">
|
||||
<span class="detail-key">{{ key }}:</span>
|
||||
<span class="detail-value">
|
||||
{{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
|
||||
</span>
|
||||
<div class="operation-summary">
|
||||
<span class="operation-type">{{ task.Load.operation || '未知操作' }}</span>
|
||||
<div class="operation-tooltip">
|
||||
<i class="icon detail" />
|
||||
<div class="tooltip-content">
|
||||
<div v-for="(value, key) in task.Load" :key="key" class="detail-item">
|
||||
<span class="detail-key">{{ key }}:</span>
|
||||
<span class="detail-value">
|
||||
{{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="task && task.Unload && typeof task.Unload === 'object'" class="task-operation">
|
||||
<a-typography-text class="operation-title">卸载</a-typography-text>
|
||||
<div class="operation-details">
|
||||
<div v-for="(value, key) in task.Unload" :key="key" class="detail-item">
|
||||
<span class="detail-key">{{ key }}:</span>
|
||||
<span class="detail-value">
|
||||
{{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
|
||||
</span>
|
||||
<div class="operation-summary">
|
||||
<span class="operation-type">{{ task.Unload.operation || '未知操作' }}</span>
|
||||
<div class="operation-tooltip">
|
||||
<i class="icon detail" />
|
||||
<div class="tooltip-content">
|
||||
<div v-for="(value, key) in task.Unload" :key="key" class="detail-item">
|
||||
<span class="detail-key">{{ key }}:</span>
|
||||
<span class="detail-value">
|
||||
{{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -442,28 +454,97 @@ const binTaskData = computed(() => {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.operation-details {
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
.operation-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.operation-type {
|
||||
font-weight: 500;
|
||||
color: get-color(primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.operation-tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.icon.detail {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-image: url('/src/assets/icons/dark/detail.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-key {
|
||||
color: get-color(text2);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
@media (prefers-color-scheme: light) {
|
||||
.icon.detail {
|
||||
background-image: url('/src/assets/icons/light/detail.png');
|
||||
}
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
.tooltip-content {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: get-color(fill1);
|
||||
color: get-color(text1);
|
||||
text-align: right;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
max-width: 200px;
|
||||
word-break: break-all;
|
||||
border: 1px solid get-color(border1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
visibility 0.2s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
background: get-color(fill1) !important;
|
||||
}
|
||||
|
||||
&:hover .tooltip-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-key {
|
||||
color: get-color(text2);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: get-color(text1);
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,6 +195,7 @@ const selectRobot = (id: string) => {
|
||||
width: 320px;
|
||||
height: calc(100% - 96px);
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
|
||||
@ -293,6 +293,7 @@ const show = ref<boolean>(true);
|
||||
width: 320px;
|
||||
height: calc(100% - 96px);
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
|
||||
@ -257,6 +257,7 @@ const handleAutoSaveAndRestoreViewState = async () => {
|
||||
width: 320px;
|
||||
height: calc(100% - 96px);
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user