Hugging Face's logo

Spaces:
maomaobj
/
lab2
Running

App Files Community
maomaobj commited on
Commit
727682e
·
verified ·
1 Parent(s): 4c6b422

把“实验室副本管理系统”修改为“实验室管理系统” - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +563 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab2
3
- emoji: 📚
4
- colorFrom: pink
5
- colorTo: blue
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: lab2
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,563 @@
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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .gantt-bar {
33
+ position: relative;
34
+ height: 16px;
35
+ border-radius: 4px;
36
+ overflow: hidden;
37
+ }
38
+
39
+ .gantt-phase {
40
+ height: 100%;
41
+ display: inline-block;
42
+ position: relative;
43
+ border-right: 1px solid white;
44
+ }
45
+
46
+ .gantt-phase:last-child {
47
+ border-right: none;
48
+ }
49
+
50
+ ::-webkit-scrollbar {
51
+ width: 8px;
52
+ }
53
+
54
+ ::-webkit-scrollbar-track {
55
+ background: #f1f1f1;
56
+ border-radius: 4px;
57
+ }
58
+
59
+ ::-webkit-scrollbar-thumb {
60
+ background: #cbd5e1;
61
+ border-radius: 4px;
62
+ }
63
+
64
+ ::-webkit-scrollbar-thumb:hover {
65
+ background: #94a3b8;
66
+ }
67
+
68
+ .status-badge {
69
+ font-size: 0.75rem;
70
+ padding: 2px 8px;
71
+ border-radius: 12px;
72
+ }
73
+
74
+ .shadow-custom {
75
+ box-shadow: 0 4px 16px rgba(0,0,0,0.08);
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-50 text-gray-800 font-sans">
80
+ <!-- 顶部导航栏 -->
81
+ <header class="bg-white shadow-sm z-20 fixed top-0 left-0 right-0 h-16 flex items-center px-6">
82
+ <div class="flex items-center justify-between w-full">
83
+ <!-- 左侧系统名称 -->
84
+ <div class="flex items-center">
85
+ <div class="bg-primary-500 w-9 h-9 rounded-lg flex items-center justify-center mr-3">
86
+ <i class="fas fa-flask text-white text-xl"></i>
87
+ </div>
88
+ <h1 class="text-gray-700 text-lg font-semibold">实验室管理系统</h1>
89
+ </div>
90
+
91
+ <!-- 中部当前模块 -->
92
+ <div class="text-primary-600 font-medium text-lg">
93
+ <i class="fas fa-tasks mr-2"></i>
94
+ 实验任务管理子系统
95
+ </div>
96
+
97
+ <!-- 右侧用户信息 -->
98
+ <div class="flex items-center space-x-4">
99
+ <div class="relative group">
100
+ <div class="flex items-center space-x-2 cursor-pointer">
101
+ <div class="w-9 h-9 bg-gray-200 rounded-full overflow-hidden">
102
+ <div class="bg-gradient-to-tr from-primary-400 to-primary-600 w-full h-full flex items-center justify-center">
103
+ <span class="text-white font-medium">A</span>
104
+ </div>
105
+ </div>
106
+ <span class="font-medium">admin</span>
107
+ <i class="fas fa-caret-down text-gray-500"></i>
108
+ </div>
109
+ <!-- 下拉菜单 -->
110
+ <div class="absolute right-0 top-12 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-20 border">
111
+ <div class="px-4 py-2 border-b text-sm text-gray-500">管理员 (admin)</div>
112
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
113
+ <i class="fas fa-user mr-2"></i>个人中心
114
+ </a>
115
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
116
+ <i class="fas fa-cog mr-2"></i>系统设置
117
+ </a>
118
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50">
119
+ <i class="fas fa-sign-out-alt mr-2"></i>退出登录
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </header>
126
+
127
+ <!-- 主体内容区 -->
128
+ <div class="flex pt-16 bg-gray-50 min-h-screen">
129
+ <!-- 左侧菜单 -->
130
+ <nav class="w-64 bg-gray-800 text-gray-300 fixed top-16 left-0 bottom-0 overflow-y-auto">
131
+ <div class="px-4 py-6">
132
+ <ul class="space-y-1">
133
+ <li>
134
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-700 rounded-md">
135
+ <i class="fas fa-calendar-alt mr-3"></i>
136
+ <span class="font-medium">实验计划管理</span>
137
+ </a>
138
+ </li>
139
+ <li>
140
+ <a href="#" class="flex items-center px-4 py-3 bg-primary-800 text-white rounded-md">
141
+ <i class="fas fa-tasks mr-3"></i>
142
+ <span class="font-medium">实验任务管理</span>
143
+ </a>
144
+ </li>
145
+ <li>
146
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-700 rounded-md">
147
+ <i class="fas fa-microscope mr-3"></i>
148
+ <span class="font-medium">实验设备管理</span>
149
+ </a>
150
+ </li>
151
+ <li>
152
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-700 rounded-md">
153
+ <i class="fas fa-map-marked-alt mr-3"></i>
154
+ <span class="font-medium">实验场地管理</span>
155
+ </a>
156
+ </li>
157
+ <li>
158
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-700 rounded-md">
159
+ <i class="fas fa-database mr-3"></i>
160
+ <span class="font-medium">实验数据管理</span>
161
+ </a>
162
+ </li>
163
+ <li>
164
+ <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-700 rounded-md mt-6">
165
+ <i class="fas fa-cog mr-3"></i>
166
+ <span class="font-medium">系统设置</span>
167
+ </a>
168
+ </li>
169
+ </ul>
170
+ </div>
171
+ </nav>
172
+
173
+ <!-- 右侧主内容区 -->
174
+ <main class="ml-64 flex-1 p-6">
175
+ <!-- 顶部操作区 -->
176
+ <div class="bg-white rounded-xl shadow-custom mb-6">
177
+ <div class="px-6 py-4 flex flex-col md:flex-row md:items-center md:justify-between border-b">
178
+ <div>
179
+ <h2 class="text-xl font-semibold text-gray-800">实验任务总览</h2>
180
+ <p class="text-sm text-gray-500 mt-1">管理所有正在进行及已完成的实验任务</p>
181
+ </div>
182
+ <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
183
+ <button class="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 flex items-center">
184
+ <i class="fas fa-plus mr-2"></i> 创建新任务
185
+ </button>
186
+ <button class="border border-gray-300 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-50 flex items-center">
187
+ <i class="fas fa-file-import mr-2"></i> 批量导入
188
+ </button>
189
+ <button class="border border-gray-300 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-50 flex items-center">
190
+ <i class="fas fa-clipboard-list mr-2"></i> 任务模板管理
191
+ </button>
192
+ <button class="border border-gray-300 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-50 flex items-center">
193
+ <i class="fas fa-file-export mr-2"></i> 导出任务表格
194
+ </button>
195
+ <div class="relative rounded-md shadow-sm">
196
+ <input type="text" placeholder="搜索任务..." class="py-2 px-4 pl-10 w-full md:w-64 rounded-md border border-gray-300 focus:ring-primary-500 focus:border-primary-500">
197
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
198
+ <i class="fas fa-search text-gray-400"></i>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- 查询筛选区 -->
205
+ <div class="px-6 py-5 border-b">
206
+ <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
207
+ <div class="md:col-span-2">
208
+ <label class="block text-sm font-medium text-gray-700 mb-1">起止时间范围</label>
209
+ <div class="flex space-x-2">
210
+ <input type="date" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
211
+ <span class="self-center text-gray-400">至</span>
212
+ <input type="date" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
213
+ </div>
214
+ </div>
215
+ <div>
216
+ <label class="block text-sm font-medium text-gray-700 mb-1">所属型号</label>
217
+ <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm" placeholder="输入型号">
218
+ </div>
219
+ <div>
220
+ <label class="block text-sm font-medium text-gray-700 mb-1">实验类别</label>
221
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
222
+ <option>全部类别</option>
223
+ <option>环境</option>
224
+ <option>电磁</option>
225
+ <option>计量</option>
226
+ </select>
227
+ </div>
228
+ <div>
229
+ <label class="block text-sm font-medium text-gray-700 mb-1">实验负责人</label>
230
+ <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
231
+ <option>全部人员</option>
232
+ <option selected>张工</option>
233
+ <option>李主任</option>
234
+ <option>王教授</option>
235
+ <option>赵研究员</option>
236
+ </select>
237
+ </div>
238
+ <div class="self-end">
239
+ <button class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-1.5 px-4 rounded-md flex items-center justify-center">
240
+ <i class="fas fa-search mr-2"></i> 搜索
241
+ </button>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="mt-4">
246
+ <label class="block text-sm font-medium text-gray-700 mb-2">状态筛选</label>
247
+ <div class="flex flex-wrap gap-2">
248
+ <label class="inline-flex items-center">
249
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50" checked>
250
+ <span class="ml-2 text-sm text-gray-700">未开始</span>
251
+ </label>
252
+ <label class="inline-flex items-center">
253
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50" checked>
254
+ <span class="ml-2 text-sm text-gray-700">进行中</span>
255
+ </label>
256
+ <label class="inline-flex items-center">
257
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
258
+ <span class="ml-2 text-sm text-gray-700">已暂停</span>
259
+ </label>
260
+ <label class="inline-flex items-center">
261
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50" checked>
262
+ <span class="ml-2 text-sm text-gray-700">已完成</span>
263
+ </label>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- 任务列表区 -->
269
+ <div class="overflow-x-auto">
270
+ <table class="min-w-full divide-y divide-gray-200">
271
+ <thead class="bg-gray-50">
272
+ <tr>
273
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
274
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验任务名称</th>
275
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属计划</th>
276
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属型号</th>
277
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验类别</th>
278
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起止时间</th>
279
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
280
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务进度</th>
281
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
282
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
283
+ </tr>
284
+ </thead>
285
+ <tbody class="bg-white divide-y divide-gray-200">
286
+ <tr class="hover:bg-gray-50">
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
288
+ <td class="px-6 py-4 whitespace-nowrap">
289
+ <div class="text-sm font-medium text-gray-900">高温应力测试任务A1</div>
290
+ <div class="text-sm text-gray-500">TASK-A1-HST</div>
291
+ </td>
292
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">高温试验计划A1</td>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">XJ-78</td>
294
+ <td class="px-6 py-4 whitespace-nowrap">
295
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">环境</span>
296
+ </td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
298
+ <div>2025-07-01</div>
299
+ <div class="text-gray-400">至 2025-07-20</div>
300
+ </td>
301
+ <td class="px-6 py-4 whitespace-nowrap">
302
+ <span class="status-badge bg-yellow-100 text-yellow-800">进行中</span>
303
+ </td>
304
+ <td class="px-6 py-4 whitespace-nowrap">
305
+ <div class="text-sm text-gray-900 font-medium">8/4</div>
306
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
307
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 50%"></div>
308
+ </div>
309
+ </td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张工</td>
311
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
312
+ <div class="flex space-x-2">
313
+ <button class="text-gray-500 hover:text-primary-600">
314
+ <i class="fas fa-eye"></i>
315
+ </button>
316
+ <button class="text-gray-500 hover:text-blue-600">
317
+ <i class="fas fa-edit"></i>
318
+ </button>
319
+ <button class="text-gray-500 hover:text-green-600">
320
+ <i class="fas fa-sitemap"></i>
321
+ </button>
322
+ <button class="text-gray-500 hover:text-red-600">
323
+ <i class="fas fa-trash"></i>
324
+ </button>
325
+ </div>
326
+ </td>
327
+ </tr>
328
+ <tr class="hover:bg-gray-50">
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
330
+ <td class="px-6 py-4 whitespace-nowrap">
331
+ <div class="text-sm font-medium text-gray-900">电磁干扰测试任务B3</div>
332
+ <div class="text-sm text-gray-500">TASK-B3-EMI</div>
333
+ </td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电磁干扰试验B3</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">WD-22</td>
336
+ <td class="px-6 py-4 whitespace-nowrap">
337
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">电磁</span>
338
+ </td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
340
+ <div>2025-06-10</div>
341
+ <div class="text-gray-400">至 2025-06-25</div>
342
+ </td>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <span class="status-badge bg-green-100 text-green-800">已完成</span>
345
+ </td>
346
+ <td class="px-6 py-4 whitespace-nowrap">
347
+ <div class="text-sm text-gray-900 font-medium">12/12</div>
348
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
349
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
350
+ </div>
351
+ </td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李主任</td>
353
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
354
+ <div class="flex space-x-2">
355
+ <button class="text-gray-500 hover:text-primary-600">
356
+ <i class="fas fa-eye"></i>
357
+ </button>
358
+ <button class="text-gray-500 hover:text-blue-600">
359
+ <i class="fas fa-edit"></i>
360
+ </button>
361
+ <button class="text-gray-500 hover:text-green-600">
362
+ <i class="fas fa-sitemap"></i>
363
+ </button>
364
+ <button class="text-gray-500 hover:text-red-600">
365
+ <i class="fas fa-trash"></i>
366
+ </button>
367
+ </div>
368
+ </td>
369
+ </tr>
370
+ <tr class="hover:bg-gray-50">
371
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
372
+ <td class="px-6 py-4 whitespace-nowrap">
373
+ <div class="text-sm font-medium text-gray-900">计量精度测试C5</div>
374
+ <div class="text-sm text-gray-500">TASK-C5-MET</div>
375
+ </td>
376
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">高精度计量计划C</td>
377
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">PR-44</td>
378
+ <td class="px-6 py-4 whitespace-nowrap">
379
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">计量</span>
380
+ </td>
381
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
382
+ <div>2025-08-15</div>
383
+ <div class="text-gray-400">至 2025-08-30</div>
384
+ </td>
385
+ <td class="px-6 py-4 whitespace-nowrap">
386
+ <span class="status-badge bg-gray-100 text-gray-800">未开始</span>
387
+ </td>
388
+ <td class="px-6 py-4 whitespace-nowrap">
389
+ <div class="text-sm text-gray-900 font-medium">0/5</div>
390
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
391
+ <div class="bg-gray-400 h-1.5 rounded-full" style="width: 0%"></div>
392
+ </div>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王教授</td>
395
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
396
+ <div class="flex space-x-2">
397
+ <button class="text-gray-500 hover:text-primary-600">
398
+ <i class="fas fa-eye"></i>
399
+ </button>
400
+ <button class="text-gray-500 hover:text-blue-600">
401
+ <i class="fas fa-edit"></i>
402
+ </button>
403
+ <button class="text-gray-500 hover:text-green-600">
404
+ <i class="fas fa-sitemap"></i>
405
+ </button>
406
+ <button class="text-gray-500 hover:text-red-600">
407
+ <i class="fas fa-trash"></i>
408
+ </button>
409
+ </div>
410
+ </td>
411
+ </tr>
412
+ </tbody>
413
+ </table>
414
+ </div>
415
+
416
+ <!-- 任务执行状态甘特图区 -->
417
+ <div class="px-6 py-5 border-t">
418
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
419
+ <i class="fas fa-project-diagram mr-2 text-primary-600"></i>任务执行状态甘特图
420
+ </h3>
421
+
422
+ <div class="space-y-4">
423
+ <!-- 甘特图项 -->
424
+ <div>
425
+ <div class="flex mb-2 text-sm">
426
+ <div class="w-48 font-medium text-gray-800">高温应力测试任务A1</div>
427
+ <div class="flex-1 truncate text-gray-500">7月1日 – 7月20日</div>
428
+ </div>
429
+ <div class="gantt-bar bg-gray-100">
430
+ <div class="gantt-phase bg-gray-400" style="width: 10%"><span class="absolute ml-1 text-white text-xs">准备</span></div>
431
+ <div class="gantt-phase bg-yellow-500" style="width: 50%"><span class="absolute ml-1 text-white text-xs">测试执行</span></div>
432
+ <div class="gantt-phase bg-blue-300" style="width: 20%"><span class="absolute ml-1 text-white text-xs">分析</span></div>
433
+ <div class="gantt-phase bg-gray-200" style="width: 20%">完成</div>
434
+ </div>
435
+ </div>
436
+
437
+ <div>
438
+ <div class="flex mb-2 text-sm">
439
+ <div class="w-48 font-medium text-gray-800">电磁干扰测试任务B3</div>
440
+ <div class="flex-1 truncate text-gray-500">6月10日 – 6月25日</div>
441
+ </div>
442
+ <div class="gantt-bar bg-gray-100">
443
+ <div class="gantt-phase bg-blue-400" style="width: 15%"><span class="absolute ml-1 text-white text-xs">准备</span></div>
444
+ <div class="gantt-phase bg-blue-400" style="width: 40%"><span class="absolute ml-1 text-white text-xs">测试执行</span></div>
445
+ <div class="gantt-phase bg-blue-400" style="width: 25%"><span class="absolute ml-1 text-white text-xs">分析</span></div>
446
+ <div class="gantt-phase bg-green-500" style="width: 20%"><span class="absolute ml-1 text-white text-xs">完成</span></div>
447
+ </div>
448
+ </div>
449
+
450
+ <div>
451
+ <div class="flex mb-2 text-sm">
452
+ <div class="w-48 font-medium text-gray-800">计量精度测试C5</div>
453
+ <div class="flex-1 truncate text-gray-500">8月15日 – 8月30日</div>
454
+ </div>
455
+ <div class="gantt-bar bg-gray-100">
456
+ <div class="gantt-phase bg-gray-300" style="width: 100%"><span class="absolute ml-1 text-gray-700 text-xs">计划中</span></div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- 图例 -->
462
+ <div class="mt-6 flex flex-wrap gap-4 text-xs">
463
+ <div class="flex items-center">
464
+ <div class="w-3 h-3 bg-gray-400 rounded-sm mr-2"></div>
465
+ <span>准备阶段</span>
466
+ </div>
467
+ <div class="flex items-center">
468
+ <div class="w-3 h-3 bg-yellow-500 rounded-sm mr-2"></div>
469
+ <span>测试执行中</span>
470
+ </div>
471
+ <div class="flex items-center">
472
+ <div class="w-3 h-3 bg-blue-400 rounded-sm mr-2"></div>
473
+ <span>数据分析中</span>
474
+ </div>
475
+ <div class="flex items-center">
476
+ <div class="w-3 h-3 bg-green-500 rounded-sm mr-2"></div>
477
+ <span>已完成</span>
478
+ </div>
479
+ <div class="flex items-center">
480
+ <div class="w-3 h-3 bg-gray-200 rounded-sm mr-2"></div>
481
+ <span>未开始</span>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- 分页 -->
487
+ <div class="px-6 py-4 border-t flex items-center justify-between">
488
+ <div class="text-sm text-gray-500">
489
+ 显示 1-3 条，共 24 条记录
490
+ </div>
491
+ <div class="inline-flex items-center space-x-2">
492
+ <select class="border-gray-300 text-sm rounded-md shadow-sm">
493
+ <option>10 ��/页</option>
494
+ <option>20 条/页</option>
495
+ <option>50 条/页</option>
496
+ <option>100 条/页</option>
497
+ </select>
498
+ <nav class="flex space-x-1">
499
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-white text-gray-400 hover:bg-gray-50">
500
+ <i class="fas fa-chevron-left"></i>
501
+ </button>
502
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-primary-600 text-white">1</button>
503
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-white hover:bg-gray-50">2</button>
504
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-white hover:bg-gray-50">3</button>
505
+ <span class="relative inline-flex items-center justify-center h-8 w-8">...</span>
506
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-white hover:bg-gray-50">8</button>
507
+ <button class="relative inline-flex items-center justify-center h-8 w-8 rounded-md text-sm font-medium bg-white text-gray-400 hover:bg-gray-50">
508
+ <i class="fas fa-chevron-right"></i>
509
+ </button>
510
+ </nav>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- 底部信息 -->
516
+ <div class="mt-6 text-center text-sm text-gray-500">
517
+ <p>© 2025 实验室管理系统 | 版权所有</p>
518
+ </div>
519
+ </main>
520
+ </div>
521
+
522
+ <script>
523
+ // 简单的交互效果，用于下拉菜单
524
+ document.addEventListener('DOMContentLoaded', function() {
525
+ // 表格行悬停效果
526
+ const tableRows = document.querySelectorAll('tbody tr');
527
+ tableRows.forEach(row => {
528
+ row.addEventListener('mouseenter', () => {
529
+ row.classList.add('bg-gray-50');
530
+ });
531
+ row.addEventListener('mouseleave', () => {
532
+ row.classList.remove('bg-gray-50');
533
+ });
534
+ });
535
+
536
+ // 搜索框焦点效果
537
+ const searchInput = document.querySelector('input[type="text"][placeholder="搜索任务..."]');
538
+ searchInput.addEventListener('focus', function() {
539
+ this.parentElement.classList.add('ring-2', 'ring-primary-300', 'rounded-md');
540
+ });
541
+ searchInput.addEventListener('blur', function() {
542
+ this.parentElement.classList.remove('ring-2', 'ring-primary-300', 'rounded-md');
543
+ });
544
+
545
+ // 状态标签的更新
546
+ const statusBadges = document.querySelectorAll('.status-badge');
547
+ statusBadges.forEach(badge => {
548
+ const statusText = badge.innerText.trim();
549
+ if(statusText === '进行中') {
550
+ badge.classList.remove('bg-yellow-100', 'text-yellow-800');
551
+ badge.classList.add('bg-yellow-200', 'text-yellow-900');
552
+ } else if(statusText === '已完成') {
553
+ badge.classList.remove('bg-green-100', 'text-green-800');
554
+ badge.classList.add('bg-green-200', 'text-green-900');
555
+ } else if(statusText === '未开始') {
556
+ badge.classList.remove('bg-gray-100', 'text-gray-800');
557
+ badge.classList.add('bg-gray-200', 'text-gray-900');
558
+ }
559
+ });
560
+ });
561
+ </script>
562
+ <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/lab2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
563
+ </html>