Hugging Face's logo

Spaces:
maomaobj
/
lab4
Running

App Files Community
maomaobj commited on
Commit
2e64e9a
·
verified ·
1 Parent(s): 0cf064c

设计一个实验室管理系统的后台页面，模块名称为“实验设备管理子系统”。页面结构包含顶部页头、左侧导航栏、右侧为主内容区。页面风格专业、扁平化、蓝白色调。 --- ### 1. 顶部页头 - 左侧显示系统名称：“实验室管理系统” - 中部模块标题：“实验设备管理子系统” - 右上角显示用户信息：“admin”，带头像和下拉菜单（含退出登录） - 页头为深蓝色背景，白色字体 --- ### 2. 左侧导航菜单（竖向排列，灰色背景） 菜单项包括： - 实验计划管理 - 实验任务管理 - 实验协同规划设计 - ✅ 实验设备管理（当前高亮） - 实验场地管理 - 系统设置 --- ### 3. 主工作区（右侧页面）：实验设备管理功能界面 #### 3.1 页面顶部操作栏 - 页面标题：“实验设备总览与台账管理” - 操作按钮： - “+ 添加设备”（蓝色主按钮） - “批量导入设备” - “导出设备列表” - 搜索框 + 放大镜图标 --- #### 3.2 筛选区（横向排列） - 设备分类：下拉框（仪器、工装、传感器、平台、易耗品） - 所属部门：下拉框 - 当前状态：多选（在用、空闲、维修中、校验中、报废） - 计量状态筛选：是否到期 - 查询按钮（蓝色） --- #### 3.3 设备列表区域（表格展示） 字段包括： - 设备编号（唯一） - 设备名称 - 型号/规格 - 所属部门 - 当前状态（彩色标签） - 启用日期 - 最近计量时间 - 校验有效期 - 使用次数 - 操作（查看 / 编辑 / 维修 / 报废） 示例数据： - DEV-001 / 精密温控箱 / WT-X100 / 环境试验部 / 🟢 在用 / 2022-05-01 / 2024-07-01 / 2025-07-01 / 18次 - DEV-023 / 电磁兼容测试仪 / EMC-8K / 电测组 / 🔴 校验中 / 2023-01-01 / 2025-01-15 / 2026-01-15 / 42次 --- #### 3.4 设备状态看板（可视化展示区域，位于列表上方或右侧） - 图形方式展示设备状态分布： - 仪表盘或饼图显示当前设备状态占比（在用、空闲、维修中等） - 条形图展示各部门设备使用数量、故障次数 - 提供计量到期提醒条数、维修中设备数量高亮显示 --- #### 3.5 设备详情弹窗（点击“查看”按钮弹出） 展示完整设备信息： - 基本信息：编号、名称、规格、分类、状态、所属部门、启用时间 - 计量信息：周期、最近校验时间、下次提醒时间 - 保养信息：周期设置、维修记录、保养记录（时间、人员、内容） - 使用日志：被哪个任务使用、时间段、使用人 --- #### 3.6 分页器 - 位于列表底部，支持每页显示10/20/50条记录 --- ### 页面样式要求： - 所有状态使用彩色标签区分（绿色=在用、灰色=空闲、红色=维修中、蓝色=校验中、黑色=报废） - 图标统一风格，支持图形化与表格混合展示 - 支持响应式布局，可适配大屏设备管理后台场景 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +764 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab4
3
- emoji: 📈
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: lab4
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,764 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>实验室管理系统 - 实验设备管理子系统</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1e40af',
16
+ secondary: '#1d4ed8',
17
+ dark: '#0f172a',
18
+ light: '#f1f5f9',
19
+ status: {
20
+ using: '#10b981',
21
+ idle: '#64748b',
22
+ repairing: '#ef4444',
23
+ calibrating: '#3b82f6',
24
+ scrapped: '#1e293b'
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style type="text/css">
32
+ .sidebar-scroll {
33
+ scrollbar-width: thin;
34
+ scrollbar-color: #cbd5e1 #f1f5f9;
35
+ }
36
+ .sidebar-scroll::-webkit-scrollbar {
37
+ width: 6px;
38
+ }
39
+ .sidebar-scroll::-webkit-scrollbar-track {
40
+ background: #f1f5f9;
41
+ }
42
+ .sidebar-scroll::-webkit-scrollbar-thumb {
43
+ background-color: #cbd5e1;
44
+ border-radius: 20px;
45
+ }
46
+ .chart-container {
47
+ position: relative;
48
+ height: 250px;
49
+ width: 100%;
50
+ }
51
+ .status-badge {
52
+ @apply px-2 py-1 rounded-full text-xs font-medium;
53
+ }
54
+ .modal {
55
+ transition: opacity 0.3s ease, visibility 0.3s ease;
56
+ }
57
+ .shadow-custom {
58
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
59
+ }
60
+ .rotate {
61
+ animation: rotate 1.5s linear infinite;
62
+ }
63
+ @keyframes rotate {
64
+ from { transform: rotate(0deg); }
65
+ to { transform: rotate(360deg); }
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="bg-gray-50 h-screen flex flex-col overflow-hidden">
70
+ <!-- 顶部页头 -->
71
+ <header class="bg-primary text-white p-4 flex items-center justify-between shadow-md sticky top-0 z-50">
72
+ <div class="flex items-center space-x-4">
73
+ <div class="bg-white bg-opacity-20 p-2 rounded-lg">
74
+ <i class="fas fa-flask text-xl"></i>
75
+ </div>
76
+ <h1 class="text-lg font-semibold">实验室管理系统</h1>
77
+ </div>
78
+ <div class="text-center">
79
+ <h2 class="text-xl font-bold">实验设备管理子系统</h2>
80
+ </div>
81
+ <div class="flex items-center space-x-4 relative">
82
+ <div class="flex items-center space-x-2 cursor-pointer group" id="user-menu">
83
+ <div class="bg-blue-200 text-primary rounded-full w-8 h-8 flex items-center justify-center">
84
+ <i class="fas fa-user"></i>
85
+ </div>
86
+ <span>admin</span>
87
+ <i class="fas fa-chevron-down text-sm transition-transform group-hover:rotate-180"></i>
88
+ </div>
89
+ <div class="absolute top-12 right-0 w-48 bg-white text-gray-700 p-2 rounded-lg shadow-xl hidden z-50 border border-gray-100" id="dropdown">
90
+ <div class="p-2 hover:bg-gray-100 rounded cursor-pointer">
91
+ <i class="fas fa-user-circle mr-2"></i>
92
+ <span>我的账户</span>
93
+ </div>
94
+ <div class="p-2 hover:bg-gray-100 rounded cursor-pointer">
95
+ <i class="fas fa-cog mr-2"></i>
96
+ <span>系统设置</span>
97
+ </div>
98
+ <div class="p-2 hover:bg-gray-100 rounded cursor-pointer flex items-center text-red-500 border-t border-gray-100 mt-1">
99
+ <i class="fas fa-sign-out-alt mr-2"></i>
100
+ <span>退出登录</span>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <div class="flex flex-1 overflow-hidden">
107
+ <!-- 左侧导航菜单 -->
108
+ <nav id="sidebar" class="bg-gray-100 w-64 py-4 flex-shrink-0 hidden md:flex flex-col sidebar-scroll overflow-y-auto">
109
+ <ul class="space-y-1 px-2">
110
+ <li>
111
+ <a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
112
+ <i class="fas fa-calendar-alt w-6 text-center mr-2"></i>
113
+ <span>实验计划管理</span>
114
+ </a>
115
+ </li>
116
+ <li>
117
+ <a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
118
+ <i class="fas fa-tasks w-6 text-center mr-2"></i>
119
+ <span>实验任务管理</span>
120
+ </a>
121
+ </li>
122
+ <li>
123
+ <a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
124
+ <i class="fas fa-object-group w-6 text-center mr-2"></i>
125
+ <span>实验协同规划设计</span>
126
+ </a>
127
+ </li>
128
+ <li>
129
+ <a href="#" class="flex items-center p-3 text-white bg-primary rounded-lg">
130
+ <i class="fas fa-microscope w-6 text-center mr-2"></i>
131
+ <span>实验设备管理</span>
132
+ <i class="fas fa-check-circle text-xs ml-auto"></i>
133
+ </a>
134
+ </li>
135
+ <li>
136
+ <a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
137
+ <i class="fas fa-map-marker-alt w-6 text-center mr-2"></i>
138
+ <span>实验场地管理</span>
139
+ </a>
140
+ </li>
141
+ <hr class="my-1 border-gray-300">
142
+ <li>
143
+ <a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
144
+ <i class="fas fa-cog w-6 text-center mr-2"></i>
145
+ <span>系统设置</span>
146
+ </a>
147
+ </li>
148
+ </ul>
149
+
150
+ <!-- 移动端侧边栏闭合按钮 -->
151
+ <div class="md:hidden mt-auto px-4 pb-4">
152
+ <button id="close-menu" class="w-full py-2 bg-gray-200 text-gray-700 rounded-lg">
153
+ <i class="fas fa-times mr-2"></i>关闭菜单
154
+ </button>
155
+ </div>
156
+ </nav>
157
+
158
+ <!-- 右侧主工作区 -->
159
+ <main class="flex-1 flex flex-col overflow-hidden">
160
+ <!-- 小型屏幕菜单按钮 -->
161
+ <div class="md:hidden p-2 bg-gray-100 text-gray-600">
162
+ <button id="toggle-menu" class="p-2">
163
+ <i class="fas fa-bars text-xl"></i>
164
+ </button>
165
+ </div>
166
+
167
+ <!-- 3.1 页面顶部操作栏 -->
168
+ <div class="p-4 border-b border-gray-200 shadow-sm">
169
+ <div class="flex flex-wrap justify-between items-center gap-4">
170
+ <h1 class="text-xl font-bold text-gray-800">实验设备总览与台账管理</h1>
171
+ <div class="flex flex-wrap gap-2">
172
+ <button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center font-medium">
173
+ <i class="fas fa-plus mr-2"></i>添加设备
174
+ </button>
175
+ <button class="border border-blue-500 text-blue-500 hover:bg-blue-50 py-2 px-4 rounded-lg flex items-center">
176
+ <i class="fas fa-file-import mr-2"></i>批量导入设备
177
+ </button>
178
+ <button class="border border-green-500 text-green-500 hover:bg-green-50 py-2 px-4 rounded-lg flex items-center">
179
+ <i class="fas fa-file-export mr-2"></i>导出设备列表
180
+ </button>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="mt-4">
185
+ <div class="relative max-w-md">
186
+ <input type="text" placeholder="搜索设备..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300">
187
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- 3.2 筛选区 -->
193
+ <div class="p-4 border-b border-gray-200 bg-white shadow-sm">
194
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
195
+ <div>
196
+ <label class="block text-sm font-medium text-gray-700 mb-1">设备分类</label>
197
+ <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
198
+ <option>全部类型</option>
199
+ <option>仪器</option>
200
+ <option>工装</option>
201
+ <option selected>传感器</option>
202
+ <option>平台</option>
203
+ <option>易耗品</option>
204
+ </select>
205
+ </div>
206
+ <div>
207
+ <label class="block text-sm font-medium text-gray-700 mb-1">所属部门</label>
208
+ <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
209
+ <option>全部部门</option>
210
+ <option selected>环境试验部</option>
211
+ <option>电测组</option>
212
+ <option>材料分析部</option>
213
+ <option>化学实验室</option>
214
+ </select>
215
+ </div>
216
+ <div>
217
+ <label class="block text-sm font-medium text-gray-700 mb-1">当前状态</label>
218
+ <div class="flex flex-wrap gap-2">
219
+ <label class="flex items-center">
220
+ <input type="checkbox" checked class="rounded text-status-using focus:ring-status-using">
221
+ <span class="ml-1 text-sm text-gray-700">在用</span>
222
+ </label>
223
+ <label class="flex items-center">
224
+ <input type="checkbox" class="rounded text-status-idle focus:ring-status-idle">
225
+ <span class="ml-1 text-sm text-gray-700">空闲</span>
226
+ </label>
227
+ <label class="flex items-center">
228
+ <input type="checkbox" class="rounded text-status-repairing focus:ring-status-repairing">
229
+ <span class="ml-1 text-sm text-gray-700">维修中</span>
230
+ </label>
231
+ </div>
232
+ </div>
233
+ <div>
234
+ <label class="block text-sm font-medium text-gray-700 mb-1">计量状态</label>
235
+ <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
236
+ <option>全部状态</option>
237
+ <option selected>已到期</option>
238
+ <option>未到期</option>
239
+ <option>即将到期</option>
240
+ </select>
241
+ </div>
242
+ <div class="flex items-end">
243
+ <button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg w-full flex items-center justify-center">
244
+ <i class="fas fa-filter mr-2"></i>查询设备
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- 3.4 设备状态看板 -->
251
+ <div class="p-4 bg-white shadow-sm">
252
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
253
+ <div class="col-span-1 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
254
+ <div class="flex justify-between items-center">
255
+ <h3 class="font-semibold text-gray-800">设备状态总览</h3>
256
+ <span class="text-xs text-gray-500">最近更新：10分钟前</span>
257
+ </div>
258
+ <div class="chart-container mt-4">
259
+ <canvas id="statusChart"></canvas>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="col-span-1 bg-gradient-to-r from-emerald-50 to-green-50 rounded-xl p-4 border border-green-100">
264
+ <h3 class="font-semibold text-gray-800 mb-4">部门使用统计</h3>
265
+ <div class="chart-container">
266
+ <canvas id="departmentChart"></canvas>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="col-span-1 flex flex-col space-y-4">
271
+ <div class="bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-100 rounded-xl p-4 flex-1">
272
+ <h3 class="font-semibold text-gray-800 mb-2">计量到期提醒</h3>
273
+ <div class="flex items-center">
274
+ <div class="w-16 h-16 mr-4 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center">
275
+ <i class="fas fa-exclamation-triangle text-3xl text-white"></i>
276
+ </div>
277
+ <div class="flex-1">
278
+ <div class="text-3xl font-bold text-amber-600">17台</div>
279
+ <div class="text-sm text-gray-600 mt-1">设备将于30天内到期校验</div>
280
+ </div>
281
+ <button class="text-sm text-blue-600 font-medium">查看清单</button>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="bg-gradient-to-r from-rose-50 to-pink-50 border border-rose-100 rounded-xl p-4 flex-1">
286
+ <h3 class="font-semibold text-gray-800 mb-2">设备维修状况</h3>
287
+ <div class="flex items-center">
288
+ <div class="w-16 h-16 mr-4 bg-gradient-to-br from-rose-500 to-pink-600 rounded-full flex items-center justify-center">
289
+ <i class="fas fa-tools text-3xl text-white"></i>
290
+ </div>
291
+ <div class="flex-1">
292
+ <div class="text-3xl font-bold text-rose-600">9台</div>
293
+ <div class="text-sm text-gray-600 mt-1">设备正在维修中</div>
294
+ </div>
295
+ <button class="text-sm text-blue-600 font-medium">处理</button>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- 设备列表区域 -->
303
+ <div class="flex-1 overflow-auto">
304
+ <div class="min-w-full">
305
+ <table class="min-w-full divide-y divide-gray-200">
306
+ <thead class="bg-gray-100 sticky top-0 z-10">
307
+ <tr>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备编号</th>
309
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
310
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号/规格</th>
311
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属部门</th>
312
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前状态</th>
313
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">启用日期</th>
314
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近计量</th>
315
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">校验有效期</th>
316
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">使用次数</th>
317
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
318
+ </tr>
319
+ </thead>
320
+ <tbody class="bg-white divide-y divide-gray-200">
321
+ <!-- 示例设备数据 -->
322
+ <tr class="hover:bg-blue-50 transition-colors">
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-001</td>
324
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">精密温控箱</td>
325
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">WT-X100</td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">环境试验部</td>
327
+ <td class="px-6 py-4 whitespace-nowrap">
328
+ <span class="status-badge bg-status-using text-white">在用</span>
329
+ </td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022-05-01</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-07-01</td>
332
+ <td class="px-6 py-4 whitespace-nowrap">
333
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
334
+ 2025-07-01
335
+ </span>
336
+ </td>
337
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18次</td>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
339
+ <button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="1"><i class="fas fa-eye"></i></button>
340
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
341
+ <button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
342
+ </td>
343
+ </tr>
344
+ <tr class="bg-yellow-50 hover:bg-yellow-100">
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-009</td>
346
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">高频示波器</td>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">OSC-2G</td>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电测组</td>
349
+ <td class="px-6 py-4 whitespace-nowrap">
350
+ <span class="status-badge bg-status-repairing text-white">维修中</span>
351
+ </td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2021-09-15</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-20</td>
354
+ <td class="px-6 py-4 whitespace-nowrap">
355
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
356
+ 2024-11-20
357
+ </span>
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">152次</td>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
361
+ <button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="2"><i class="fas fa-eye"></i></button>
362
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
363
+ <button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
364
+ </td>
365
+ </tr>
366
+ <tr class="hover:bg-blue-50">
367
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-023</td>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">电磁兼容测试仪</td>
369
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EMC-8K</td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电测组</td>
371
+ <td class="px-6 py-4 whitespace-nowrap">
372
+ <span class="status-badge bg-status-calibrating text-white">校验中</span>
373
+ </td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-01</td>
375
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-01-15</td>
376
+ <td class="px-6 py-4 whitespace-nowrap">
377
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
378
+ 2026-01-15
379
+ </span>
380
+ </td>
381
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42次</td>
382
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
383
+ <button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="3"><i class="fas fa-eye"></i></button>
384
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
385
+ <button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
386
+ </td>
387
+ </tr>
388
+ <tr class="hover:bg-blue-50">
389
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-048</td>
390
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">激光测距仪</td>
391
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">LDM-100Pro</td>
392
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">材料分析部</td>
393
+ <td class="px-6 py-4 whitespace-nowrap">
394
+ <span class="status-badge bg-status-idle text-white">空闲</span>
395
+ </td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-20</td>
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-02-10</td>
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
400
+ 2025-08-10
401
+ </span>
402
+ </td>
403
+ <td class="px=6 py-4 whitespace-nowrap text-sm text-gray-500">31次</td>
404
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
405
+ <button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="4"><i class="fas fa-eye"></i></button>
406
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
407
+ <button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
408
+ </td>
409
+ </tr>
410
+ </tbody>
411
+ </table>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- 分页器 -->
416
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
417
+ <div class="flex-1 flex justify-between sm:hidden">
418
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a>
419
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a>
420
+ </div>
421
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
422
+ <div>
423
+ <p class="text-sm text-gray-700">
424
+ 显示第 <span class="font-medium">1</span> 到 <span class="font-medium">4</span>条，
425
+ 共 <span class="font-medium">386</span> 条设备记录
426
+ </p>
427
+ </div>
428
+ <div>
429
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
430
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
431
+ <span class="sr-only">上一页</span>
432
+ <i class="fas fa-chevron-left"></i>
433
+ </a>
434
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
435
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
436
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
437
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
438
+ <span class="sr-only">下一页</span>
439
+ <i class="fas fa-chevron-right"></i>
440
+ </a>
441
+ </nav>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- 设备详情弹窗 -->
447
+ <div id="deviceModal" class="fixed z-50 inset-0 overflow-y-auto modal hidden">
448
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
449
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
450
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
451
+ </div>
452
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
453
+ <div class="inline-block align-bottom bg-white text-left overflow-hidden shadow-custom rounded-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:max-h-[90vh] w-full overflow-auto" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
454
+ <div class="bg-gray-50 p-4 flex justify-between items-center border-b">
455
+ <h3 class="text-lg font-bold text-gray-800">设备详细信息</h3>
456
+ <button id="closeModal" class="text-gray-400 hover:text-gray-500">
457
+ <i class="fas fa-times text-xl"></i>
458
+ </button>
459
+ </div>
460
+ <div class="p-6">
461
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
462
+ <div class="col-span-1">
463
+ <h4 class="text-lg font-semibold mb-2 text-gray-700 border-b pb-2">
464
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>基本信息
465
+ </h4>
466
+ <table class="w-full text-sm text-gray-700">
467
+ <tbody>
468
+ <tr class="border-b border-gray-100">
469
+ <td class="py-2 font-medium w-1/3">设备编号</td>
470
+ <td class="py-2" id="device-id">DEV-023</td>
471
+ </tr>
472
+ <tr class="border-b border-gray-100">
473
+ <td class="py-2 font-medium">设备名称</td>
474
+ <td class="py-2" id="device-name">电磁兼容测试仪</td>
475
+ </tr>
476
+ <tr class="border-b border-gray-100">
477
+ <td class="py-2 font-medium">型号规格</td>
478
+ <td class="py-2" id="device-model">EMC-8K</td>
479
+ </tr>
480
+ <tr class="border-b border-gray-100">
481
+ <td class="py-2 font-medium">设备分类</td>
482
+ <td class="py-2">传感器</td>
483
+ </tr>
484
+ <tr class="border-b border-gray-100">
485
+ <td class="py-2 font-medium">设备状态</td>
486
+ <td class="py-2">
487
+ <span class="status-badge bg-status-calibrating text-white">校验中</span>
488
+ </td>
489
+ </tr>
490
+ <tr class="border-b border-gray-100">
491
+ <td class="py-2 font-medium">所属部门</td>
492
+ <td class="py-2">电测组</td>
493
+ </tr>
494
+ <tr>
495
+ <td class="py-2 font-medium">启用时间</td>
496
+ <td class="py-2">2023-01-01</td>
497
+ </tr>
498
+ </tbody>
499
+ </table>
500
+
501
+ <h4 class="text-lg font-semibold my-4 text-gray-700 border-b pb-2">
502
+ <i class="fas fa-ruler text-blue-500 mr-2"></i>计量信息
503
+ </h4>
504
+ <table class="w-full text-sm text-gray-700">
505
+ <tbody>
506
+ <tr class="border-b border-gray-100">
507
+ <td class="py-2 font-medium w-1/3">计量周期</td>
508
+ <td class="py-2">12个月</td>
509
+ </tr>
510
+ <tr class="border-b border-gray-100">
511
+ <td class="py-2 font-medium">最近计量时间</td>
512
+ <td class="py-2">2025-01-15</td>
513
+ </tr>
514
+ <tr>
515
+ <td class="py-2 font-medium">下次计量时间</td>
516
+ <td class="py-2 font-semibold text-green-600">2026-01-15</td>
517
+ </tr>
518
+ </tbody>
519
+ </table>
520
+ </div>
521
+
522
+ <div class="col-span-1">
523
+ <h4 class="text-lg font-semibold mb-2 text-gray-700 border-b pb-2">
524
+ <i class="fas fa-tools text-blue-500 mr-2"></i>保养信息
525
+ </h4>
526
+ <div class="mb-4">
527
+ <div class="flex justify-between mb-1">
528
+ <span class="text-xs font-medium">保养周期: 6个月</span>
529
+ <span class="text-xs text-gray-600">下次保养: 2023-11-01</span>
530
+ </div>
531
+ <div class="w-full bg-gray-200 rounded-full h-2">
532
+ <div class="bg-amber-500 h-2 rounded-full" style="width: 75%"></div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="bg-gray-50 p-3 rounded-lg max-h-32 overflow-auto">
537
+ <div class="border-l-4 border-blue-500 pl-3 mb-3">
538
+ <div class="flex justify-between">
539
+ <strong>维修记录 #1024</strong>
540
+ <span class="text-xs text-gray-500">2023-08-23</span>
541
+ </div>
542
+ <p class="text-sm mt-1">更换传感器模块，优化接线</p>
543
+ <p class="text-xs text-gray-600">工程师: 张工</p>
544
+ </div>
545
+ <div class="border-l-4 border-green-500 pl-3 mb-3">
546
+ <div class="flex justify-between">
547
+ <strong>定期保养 #0914</strong>
548
+ <span class="text-xs text-gray-500">2023-02-15</span>
549
+ </div>
550
+ <p class="text-sm mt-1">常规清洁，参数校准</p>
551
+ <p class="text-xs text-gray-600">工程师: 李工</p>
552
+ </div>
553
+ </div>
554
+
555
+ <h4 class="text-lg font-semibold my-4 text-gray-700 border-b pb-2">
556
+ <i class="fas fa-history text-blue-500 mr-2"></i>使用日志
557
+ </h4>
558
+ <div class="bg-gray-50 p-3 rounded-lg max-h-40 overflow-auto">
559
+ <div class="text-sm border-l-2 border-gray-300 pl-3 mb-2">
560
+ <div class="flex justify-between">
561
+ <span>#23-08-0415</span>
562
+ <span class="text-xs text-gray-500">2023-08-21 14:00</span>
563
+ </div>
564
+ <p class="mt-1">任务: 基站电磁兼容性测试</p>
565
+ <p class="text-xs">使用人: 王工程师</p>
566
+ </div>
567
+ <div class="text-sm border-l-2 border-gray-300 pl-3 mb-2">
568
+ <div class="flex justify-between">
569
+ <span>#23-07-0322</span>
570
+ <span class="text-xs text-gray-500">2023-07-15 09:30</span>
571
+ </div>
572
+ <p class="mt-1">任务: 信号收发器兼容测试</p>
573
+ <p class="text-xs">使用人: 刘工程师</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="mt-6 flex justify-center">
580
+ <button class="bg-primary hover:bg-blue-700 text-white py-2 px-6 rounded-lg mx-2 flex items-center">
581
+ <i class="far fa-file-pdf mr-2"></i>导出设备报告
582
+ </button>
583
+ <button class="border border-primary text-primary hover:bg-blue-50 py-2 px-6 rounded-lg mx-2 flex items-center">
584
+ 编辑信息
585
+ </button>
586
+ <button class="border border-red-500 text-red-500 hover:bg-red-50 py-2 px-6 rounded-lg mx-2 flex items-center">
587
+ 设备报废申请
588
+ </button>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </main>
595
+ </div>
596
+
597
+ <!-- 底部信息栏 -->
598
+ <footer class="bg-white py-2 border-t border-gray-200 text-center text-sm text-gray-500">
599
+ 实验室管理系统 © 2023 版权所有 | 当前版本: v2.4.1
600
+ </footer>
601
+
602
+ <script>
603
+ // 图表初始化
604
+ document.addEventListener('DOMContentLoaded', function() {
605
+ // 设备状态分布饼图
606
+ const statusChart = new Chart(
607
+ document.getElementById('statusChart'),
608
+ {
609
+ type: 'doughnut',
610
+ data: {
611
+ labels: ['在用', '空闲', '维修中', '校验中', '报废'],
612
+ datasets: [{
613
+ data: [155, 79, 9, 11, 8],
614
+ backgroundColor: [
615
+ '#10b981',
616
+ '#64748b',
617
+ '#ef4444',
618
+ '#3b82f6',
619
+ '#1e293b'
620
+ ],
621
+ borderWidth: 0,
622
+ }]
623
+ },
624
+ options: {
625
+ maintainAspectRatio: false,
626
+ cutout: '70%',
627
+ plugins: {
628
+ legend: {
629
+ position: 'right',
630
+ labels: {
631
+ boxWidth: 12,
632
+ padding: 15,
633
+ font: {
634
+ size: 11
635
+ }
636
+ }
637
+ }
638
+ }
639
+ }
640
+ }
641
+ );
642
+
643
+ // 部门设备分布柱状图
644
+ const deptData = {
645
+ labels: ['环境试验部', '电测组', '材料分析部', '化学实验室', '结构测试组'],
646
+ datasets: [{
647
+ label: '设备数量',
648
+ data: [42, 56, 27, 35, 22],
649
+ backgroundColor: '#1d4ed8',
650
+ borderWidth: 0,
651
+ borderRadius: 4
652
+ }]
653
+ };
654
+
655
+ const deptChart = new Chart(
656
+ document.getElementById('departmentChart'),
657
+ {
658
+ type: 'bar',
659
+ data: deptData,
660
+ options: {
661
+ maintainAspectRatio: false,
662
+ scales: {
663
+ y: {
664
+ beginAtZero: true,
665
+ grid: {
666
+ display: true,
667
+ drawBorder: false
668
+ },
669
+ ticks: {
670
+ precision: 0
671
+ }
672
+ },
673
+ x: {
674
+ grid: {
675
+ display: false
676
+ }
677
+ }
678
+ },
679
+ plugins: {
680
+ legend: {
681
+ display: false
682
+ }
683
+ },
684
+ barThickness: 'flex',
685
+ maxBarThickness: 20
686
+ }
687
+ }
688
+ );
689
+
690
+ // 页面交互功能
691
+ // 用户菜单显示/隐藏
692
+ const userMenu = document.getElementById('user-menu');
693
+ const dropdown = document.getElementById('dropdown');
694
+
695
+ userMenu.addEventListener('click', function() {
696
+ dropdown.classList.toggle('hidden');
697
+ });
698
+
699
+ // 关闭菜单（点击外部）
700
+ document.addEventListener('click', function(event) {
701
+ if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
702
+ dropdown.classList.add('hidden');
703
+ }
704
+ });
705
+
706
+ // 设备弹窗控制
707
+ const viewButtons = document.querySelectorAll('.view-btn');
708
+ const modal = document.getElementById('deviceModal');
709
+ const closeModal = document.getElementById('closeModal');
710
+
711
+ viewButtons.forEach(button => {
712
+ button.addEventListener('click', () => {
713
+ // 设置设备数据（实际应用中应从API获取）
714
+ const deviceId = button.getAttribute('data-id');
715
+ // 这里简单模拟不同设备信息
716
+ switch(deviceId) {
717
+ case '1':
718
+ document.getElementById('device-id').textContent = 'DEV-001';
719
+ document.getElementById('device-name').textContent = '精密温控箱';
720
+ document.getElementById('device-model').textContent = 'WT-X100';
721
+ break;
722
+ case '2':
723
+ document.getElementById('device-id').textContent = 'DEV-009';
724
+ document.getElementById('device-name').textContent = '高频示波器';
725
+ document.getElementById('device-model').textContent = 'OSC-2G';
726
+ break;
727
+ case '3':
728
+ document.getElementById('device-id').textContent = 'DEV-023';
729
+ document.getElementById('device-name').textContent = '电磁兼容测试仪';
730
+ document.getElementById('device-model').textContent = 'EMC-8K';
731
+ break;
732
+ case '4':
733
+ document.getElementById('device-id').textContent = 'DEV-048';
734
+ document.getElementById('device-name').textContent = '激光测距仪';
735
+ document.getElementById('device-model').textContent = 'LDM-100Pro';
736
+ break;
737
+ }
738
+ modal.classList.remove('hidden');
739
+ });
740
+ });
741
+
742
+ closeModal.addEventListener('click', () => {
743
+ modal.classList.add('hidden');
744
+ });
745
+
746
+ // 移动端侧边栏控制
747
+ const toggleMenu = document.getElementById('toggle-menu');
748
+ const closeMenuBtn = document.getElementById('close-menu');
749
+ const sidebar = document.getElementById('sidebar');
750
+
751
+ if (toggleMenu) {
752
+ toggleMenu.addEventListener('click', () => {
753
+ sidebar.classList.toggle('hidden');
754
+ sidebar.classList.add('flex', 'absolute', 'left-0', 'top-0', 'h-full', 'z-40');
755
+ });
756
+
757
+ closeMenuBtn.addEventListener('click', () => {
758
+ sidebar.classList.add('hidden');
759
+ });
760
+ }
761
+ });
762
+ </script>
763
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/lab4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
764
+ </html>