You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
<template>
|
|
<div
|
|
v-if="open"
|
|
class="command-progress-float"
|
|
role="status"
|
|
aria-live="polite"
|
|
>
|
|
<header>
|
|
<div>
|
|
<strong>{{ title }}</strong>
|
|
<small>{{ deviceName }}</small>
|
|
</div>
|
|
<button type="button" class="icon-button" title="关闭" @click="$emit('close')">
|
|
<svg><use href="#i-x" /></svg>
|
|
</button>
|
|
</header>
|
|
<ol>
|
|
<li :class="{ done: step > 1, active: step === 1 }">
|
|
<i></i><span>确认下发</span><em>已确认</em>
|
|
</li>
|
|
<li :class="{ done: step > 2, active: step === 2 }">
|
|
<i></i><span>已下发</span><em>{{ step >= 2 ? '等待应答' : '…' }}</em>
|
|
</li>
|
|
<li
|
|
:class="{
|
|
done: step >= 3 && !error && status === 'acked',
|
|
active: step === 3,
|
|
fail: step >= 3 && (status === 'timeout' || status === 'terminal' || !!error),
|
|
}"
|
|
>
|
|
<i></i>
|
|
<span>{{ terminalLabel }}</span>
|
|
<em>{{ error || result || '…' }}</em>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
open: { type: Boolean, default: false },
|
|
title: { type: String, default: '' },
|
|
deviceName: { type: String, default: '' },
|
|
step: { type: Number, default: 1 },
|
|
status: { type: String, default: '' },
|
|
result: { type: String, default: '' },
|
|
error: { type: String, default: '' },
|
|
terminalLabel: { type: String, default: '' },
|
|
})
|
|
|
|
defineEmits(['close'])
|
|
</script>
|
|
|