28 lines
1.2 KiB
Vue
28 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
defineProps<{ store: any; actions: any }>()
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="panel">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>设备状态</h2>
|
|||
|
|
<div class="actions">
|
|||
|
|
<button class="primary" :disabled="store.statusLoading" @click="actions.refreshStatus()">
|
|||
|
|
{{ store.statusLoading ? '刷新中...' : '刷新状态' }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template v-if="store.status">
|
|||
|
|
<div class="metrics">
|
|||
|
|
<div class="metric"><div class="label">自检</div><div class="value">{{ store.status.self_check }}</div></div>
|
|||
|
|
<div class="metric"><div class="label">网口1</div><div class="value">{{ store.status.net1 }}</div></div>
|
|||
|
|
<div class="metric"><div class="label">网口2</div><div class="value">{{ store.status.net2 }}</div></div>
|
|||
|
|
<div class="metric"><div class="label">串口1</div><div class="value">{{ store.status.uart1 }}</div></div>
|
|||
|
|
<div class="metric"><div class="label">串口2</div><div class="value">{{ store.status.uart2 }}</div></div>
|
|||
|
|
</div>
|
|||
|
|
<p class="hint">最后刷新：{{ store.statusUpdatedAt || '--' }}</p>
|
|||
|
|
</template>
|
|||
|
|
<p v-else>正在加载状态...</p>
|
|||
|
|
</section>
|
|||
|
|
</template>
|