224 lines
9.0 KiB
Vue
224 lines
9.0 KiB
Vue
<template>
|
||
<div class="p-6">
|
||
<!-- Page Header -->
|
||
<div class="mb-6">
|
||
<div class="flex items-center gap-4 mb-2">
|
||
<button
|
||
class="p-2 rounded hover:bg-gray-100 transition-colors"
|
||
style="color: rgba(0, 0, 0, 0.65)"
|
||
@click="router.go(-1)"
|
||
>
|
||
<ArrowLeft :size="20" />
|
||
</button>
|
||
<h2 class="text-2xl font-semibold">GD30-2025-000001</h2>
|
||
<span
|
||
class="px-3 py-1 rounded text-sm"
|
||
style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
|
||
>
|
||
已激活
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Basic Info Card -->
|
||
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
||
<h3 class="text-lg font-semibold mb-6">基本信息</h3>
|
||
<div class="grid grid-cols-3 gap-x-12 gap-y-6">
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">设备型号</div>
|
||
<div>GD30 高密度电法仪</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">主机SN号</div>
|
||
<div>GD30-2025-000001</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">设备状态</div>
|
||
<span
|
||
class="inline-block px-2 py-1 rounded text-xs"
|
||
style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
|
||
>
|
||
已激活
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">生产日期</div>
|
||
<div>2025-01-15</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">出厂日期</div>
|
||
<div>2025-02-01</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">激活日期</div>
|
||
<div>2025-02-10</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">装配人员</div>
|
||
<div>张工程师</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">测试人员</div>
|
||
<div>李工程师</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">客户名称</div>
|
||
<div>北京地质研究院</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hardware Topology Card -->
|
||
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
||
<h3 class="text-lg font-semibold mb-6">硬件拓扑</h3>
|
||
<div class="flex items-center justify-center gap-6">
|
||
<template v-for="(board, i) in boards" :key="board.name">
|
||
<div class="flex items-center gap-6">
|
||
<div class="text-center">
|
||
<div
|
||
class="w-28 h-28 rounded-lg flex flex-col items-center justify-center mb-3"
|
||
:style="{ backgroundColor: board.bg, border: '2px solid ' + board.color }"
|
||
>
|
||
<div class="text-base font-semibold" :style="{ color: board.color }">{{ board.name }}</div>
|
||
<div class="text-xs mt-2" :style="{ color: board.color }">{{ board.version }}</div>
|
||
</div>
|
||
<div class="text-xs" style="color: rgba(0, 0, 0, 0.45)">{{ board.sn }}</div>
|
||
</div>
|
||
<div v-if="Number(i) < boards.length - 1" style="color: #D9D9D9; font-size: 24px">→</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- License Info Card -->
|
||
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
||
<h3 class="text-lg font-semibold mb-6">授权信息</h3>
|
||
<div class="grid grid-cols-3 gap-x-12 gap-y-6">
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权ID</div>
|
||
<div>LIC-2025-0001</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权状态</div>
|
||
<span
|
||
class="inline-block px-2 py-1 rounded text-xs"
|
||
style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
|
||
>
|
||
已激活
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权类型</div>
|
||
<div>正式授权</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">生效日期</div>
|
||
<div>2025-02-10</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">到期日期</div>
|
||
<div>2026-02-10</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">剩余天数</div>
|
||
<div style="color: #52C41A">317天</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权功能模块</div>
|
||
<div>1D(SP/VES/IP) / 2D(SP/ERT/IP) / 3D(SP/ERT/IP)</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权文件</div>
|
||
<button class="text-sm" style="color: #1890FF">auth_gd30_v2.3.lic</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Firmware Info Card -->
|
||
<div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
||
<h3 class="text-lg font-semibold mb-6">固件信息</h3>
|
||
<div class="grid grid-cols-3 gap-x-12 gap-y-6">
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">当前固件版本</div>
|
||
<div>v2.3.5</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">最后更新时间</div>
|
||
<div>2024-03-01 10:30</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">更新方式</div>
|
||
<div>远程OTA</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置文件版本</div>
|
||
<div>v1.2.0</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置同步时间</div>
|
||
<div>2024-03-01 10:35</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Maintenance History Card -->
|
||
<div class="bg-white p-6 rounded-lg" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="text-lg font-semibold">维修历史</h3>
|
||
<button class="text-sm" style="color: #1890FF">查看全部</button>
|
||
</div>
|
||
<div class="relative">
|
||
<!-- Timeline line -->
|
||
<div
|
||
class="absolute left-6 top-6 bottom-6 w-0.5"
|
||
style="background-color: #F0F0F0"
|
||
></div>
|
||
|
||
<div class="space-y-6">
|
||
<div v-for="(entry, index) in maintenanceHistory" :key="index" class="flex gap-4">
|
||
<div class="flex flex-col items-center flex-shrink-0">
|
||
<div
|
||
class="w-12 h-12 rounded-full flex items-center justify-center relative z-10"
|
||
style="background-color: #E6F7FF; border: 2px solid #1890FF"
|
||
>
|
||
<Clock :size="20" style="color: #1890FF" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 pt-2">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<span class="font-medium">{{ entry.type }}</span>
|
||
<span class="text-sm" style="color: rgba(0, 0, 0, 0.45)">{{ entry.date }}</span>
|
||
<span class="text-sm" style="color: rgba(0, 0, 0, 0.45)">操作人：{{ entry.operator }}</span>
|
||
</div>
|
||
<div class="text-sm" style="color: rgba(0, 0, 0, 0.65)">
|
||
{{ entry.description }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
import { ArrowLeft, StopCircle, Edit2, Download, Clock } from 'lucide-vue-next'
|
||
|
||
const router = useRouter()
|
||
|
||
const boards = [
|
||
{ name: '主板', version: 'MB-V2.3', sn: 'MB20240308001', bg: '#E6F7FF', color: '#1890FF' },
|
||
{ name: '采集板', version: 'RX-V1.8', sn: 'RX20240308002', bg: '#F0F5FF', color: '#597EF7' },
|
||
{ name: '发射板', version: 'TX-V1.2', sn: 'TX20240308003', bg: '#FFF7E6', color: '#FA8C16' },
|
||
{ name: '测控板', version: 'MC-V1.5', sn: 'MC20240308004', bg: '#F6FFED', color: '#52C41A' },
|
||
{ name: '升压板', version: 'BO-V1.0', sn: 'BO20240308005', bg: '#FFF0F6', color: '#EB2F96' },
|
||
]
|
||
|
||
const maintenanceHistory = [
|
||
{ date: '2024-03-01', type: '固件升级', operator: '王工程师', description: '升级固件至v2.3.5，解决数据采集异常问题' },
|
||
{ date: '2024-02-15', type: '主板更换', operator: '李工程师', description: '更换主控板（旧：MB20231215001 → 新：MB20240215001）' },
|
||
{ date: '2024-01-20', type: '常规保养', operator: '张工程师', description: '清洁设备，检查线路连接，测试功能正常' },
|
||
]
|
||
</script>
|