290 lines
13 KiB
Vue
290 lines
13 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>
|
||
|
||
<!-- 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="mt-6 pt-4" style="border-top: 1px solid #F0F0F0">
|
||
<div class="text-sm font-medium mb-3">授权功能模块</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span v-for="m in authModules" :key="m" class="px-3 py-1 rounded text-xs" style="background-color: #eef5f0; color: #4a7c59; border: 1px solid #a3c4ad">{{ m }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex items-center gap-4">
|
||
<div class="text-sm" style="color: rgba(0,0,0,0.45)">授权文件：</div>
|
||
<button class="text-sm" style="color: #4a7c59">auth_gd30_v2.3.lic</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Assembly Record 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-4 mb-6">
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配工单</div>
|
||
<div class="text-sm">ASM-2025-000001</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配人员</div>
|
||
<div class="text-sm">张工程师</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配日期</div>
|
||
<div class="text-sm">2025-01-15</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">测试人员</div>
|
||
<div class="text-sm">李工程师</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">测试结果</div>
|
||
<span class="px-2 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">通过</span>
|
||
</div>
|
||
<div>
|
||
<div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">Checklist完成</div>
|
||
<div class="text-sm">22/22 项</div>
|
||
</div>
|
||
</div>
|
||
<!-- Checklist摘要 -->
|
||
<div class="p-4 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
|
||
<div class="text-sm font-medium mb-2">装配Checklist摘要</div>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div v-for="item in checklistSummary" :key="item.name" class="flex items-center gap-2 text-sm">
|
||
<span style="color: #52C41A">✓</span>
|
||
<span style="color: rgba(0,0,0,0.65)">{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sub-Device List 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="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead style="background-color: #FAFAFA">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">板卡类型</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">SN号</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">硬件版本</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">固件版本</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">校准状态</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="sub in subDevices" :key="sub.sn" class="border-b" style="border-color: #F0F0F0">
|
||
<td class="px-4 py-3 text-sm">{{ sub.type }}</td>
|
||
<td class="px-4 py-3 text-sm" style="color: #4a7c59">{{ sub.sn }}</td>
|
||
<td class="px-4 py-3 text-sm" style="color: rgba(0,0,0,0.65)">{{ sub.hwVersion }}</td>
|
||
<td class="px-4 py-3 text-sm" style="color: rgba(0,0,0,0.65)">{{ sub.fwVersion }}</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-0.5 rounded text-xs" :style="sub.calibration === '已校准' ? { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' } : { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }">{{ sub.calibration }}</span>
|
||
</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">{{ sub.status }}</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</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>
|
||
<router-link to="/repair" class="text-sm" style="color: #4a7c59">查看全部</router-link>
|
||
</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: #eef5f0; border: 2px solid #4a7c59"
|
||
>
|
||
<Clock :size="20" style="color: #4a7c59" />
|
||
</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: '#eef5f0', color: '#4a7c59' },
|
||
{ 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: '清洁设备，检查线路连接，测试功能正常' },
|
||
]
|
||
|
||
const authModules = ['1D SP', '2D SP', '3D SP', '1D VES', '2D ERT', '3D ERT', '1D IP', '2D IP', '3D IP']
|
||
|
||
const checklistSummary = [
|
||
{ name: '主板SN扫码绑定主机' }, { name: '采集板SN录入' }, { name: '发射板SN录入' },
|
||
{ name: '内置升压模块检查' }, { name: 'GPS/北斗检测' }, { name: '电池安装与容量检测' },
|
||
{ name: '系统启动正常' }, { name: '采集APP连接' }, { name: 'IP66防护与密封' }, { name: '出厂装箱核对' },
|
||
]
|
||
|
||
const subDevices = [
|
||
{ type: '主板', sn: 'MB20240308001', hwVersion: 'A1', fwVersion: 'v2.3.5', calibration: '无需校准', status: '正常' },
|
||
{ type: '采集板', sn: 'RX20240308002', hwVersion: 'A1', fwVersion: 'v1.8.2', calibration: '已校准', status: '正常' },
|
||
{ type: '发射板', sn: 'TX20240308003', hwVersion: 'A1', fwVersion: 'v1.5.0', calibration: '无需校准', status: '正常' },
|
||
{ type: '测控板', sn: 'MC20240308004', hwVersion: 'A1', fwVersion: 'v1.5.1', calibration: '无需校准', status: '正常' },
|
||
{ type: '升压板', sn: 'BO20240308005', hwVersion: 'A1', fwVersion: 'v1.0.0', calibration: '无需校准', status: '正常' },
|
||
]
|
||
</script>
|