104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { NGrid, NGridItem, NInput } from 'naive-ui'
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
// 模拟数据结构
|
|||
|
|
const hardwareGroups = ref([
|
|||
|
|
{
|
|||
|
|
groupId: '01',
|
|||
|
|
pens: [
|
|||
|
|
{ label: 'T1', sn: '', online: false },
|
|||
|
|
{ label: 'T2', sn: '', online: true },
|
|||
|
|
{ label: 'T3', sn: '', online: true },
|
|||
|
|
{ label: 'T4', sn: '', online: false },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
groupId: '02',
|
|||
|
|
pens: [
|
|||
|
|
{ label: 'T1', sn: '', online: true },
|
|||
|
|
{ label: 'T2', sn: '', online: false },
|
|||
|
|
{ label: 'T3', sn: '', online: false },
|
|||
|
|
{ label: 'T4', sn: '', online: true },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
groupId: '03',
|
|||
|
|
pens: [
|
|||
|
|
{ label: 'T1', sn: '', online: false },
|
|||
|
|
{ label: 'T2', sn: '', online: false },
|
|||
|
|
{ label: 'T3', sn: '', online: true },
|
|||
|
|
{ label: 'T4', sn: '', online: true },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="py-4">
|
|||
|
|
<!-- 状态提示栏 -->
|
|||
|
|
<div class="mb-6 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
|
|||
|
|
<div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" /> <!-- 图标占位 -->
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-indigo-900 font-bold">
|
|||
|
|
自动发现模式已开启
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-1 text-xs text-indigo-400">
|
|||
|
|
系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 硬件状态卡片 -->
|
|||
|
|
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
|
|||
|
|
<NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
|
|||
|
|
<div class="border border-gray-200 rounded-xl p-5">
|
|||
|
|
<div class="mb-4 text-gray-700 font-bold">
|
|||
|
|
分组 {{ group.groupId }} 硬件状态
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex flex-col gap-3">
|
|||
|
|
<div
|
|||
|
|
v-for="pen in group.pens"
|
|||
|
|
:key="pen.label"
|
|||
|
|
class="flex items-center gap-3 rounded bg-gray-50 p-2"
|
|||
|
|
>
|
|||
|
|
<div class="w-6 text-center text-gray-700 font-bold">
|
|||
|
|
{{ pen.label }}
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<NInput
|
|||
|
|
size="small"
|
|||
|
|
placeholder="笔SN编号"
|
|||
|
|
:value="pen.sn"
|
|||
|
|
readonly
|
|||
|
|
class="bg-transparent"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<span class="mr-2 text-xs text-gray-400">笔SN编号 (如: SN88219)</span>
|
|||
|
|
</template>
|
|||
|
|
</NInput>
|
|||
|
|
</div>
|
|||
|
|
<!-- 状态点: 绿色在线，灰色离线 -->
|
|||
|
|
<div
|
|||
|
|
class="h-2.5 w-2.5 rounded-full"
|
|||
|
|
:class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</NGridItem>
|
|||
|
|
</NGrid>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 针对 Input 进行样式微调以匹配设计稿 */
|
|||
|
|
:deep(.n-input) {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
:deep(.n-input .n-input__input-el) {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
</style>
|