Hugging Face's logo

Spaces:
maomaobj
/
lab3
Running

App Files Community
maomaobj commited on
Commit
9284c20
·
verified ·
1 Parent(s): 8d96255

设计一个科研机构用的管理系统页面，系统名称为“实验室管理系统”，模块为“实验协同规划设计”。页面风格专业简洁，蓝白色调，包含顶部页头、左侧导航栏和右侧主内容区。 ### 1. 顶部页头 - 左侧显示系统标题：“实验室管理系统” - 中间显示模块标题：“实验协同规划设计” - 右侧显示当前用户“admin”，带头像和下拉菜单（包含退出登录） - 背景为深蓝色，白色文字，扁平化风格 --- ### 2. 左侧导航栏（灰色背景） 纵向菜单列表，包括以下子系统入口： - 实验计划管理 - 实验任务管理 - ✅ 实验协同规划设计（当前高亮，蓝色背景） - 实验设备管理 - 实验场地管理 - 系统设置 --- ### 3. 主页面（右侧区域）：实验协同规划设计界面 页面采用卡片式分区，整体由多个模块组成，支持协同配置： #### 3.1 实验基本信息（顶部信息卡） 显示当前实验任务信息（只读）： - 实验任务编号：TASK-20250701-001 - 实验名称：高温应力测试任务 - 所属型号：XJ-78 - 实验类别：环境 - 实验时间：2025-07-01 至 2025-07-20 - 状态：🟢 进行中（彩色标签） --- #### 3.2 模块一：实验任务结构设计（支持任务分解） - 横向流程图样式或树状结构展示任务分解层级 - 每个任务节点可点击，弹出设置窗口（设置任务名、负责人、预期时间） - 功能按钮：新增子任务 / 前置任务 / 后置任务 / 升级 / 降级 / 删除 - 模板操作：按钮“保存为模板” 和 “从模板导入” --- #### 3.3 模块二：实验人员规划 - 表格形式添加实验人员： - 姓名、角色（负责人/实验员/观察员）、所属部门、联系电话 - “添加人员”按钮可调用组织架构选人弹窗 - 可设置每位成员的权限：只读 / 可编辑 / 全权限 --- #### 3.4 模块三：实验件选择 - 从“实验件库”中选择实验件，可多选 - 每条记录显示：实验件编号、名称、类型、状态、存放位置 - 支持搜索、筛选、批量勾选添加 --- #### 3.5 模块四：实验资源配置 - 从“实验资源库”中分配设备与场地 - 使用两张表格： - 可用设备列表（设备名称、编号、状态、校验有效期） - 可用场地列表（场地名称、容量、当前状态、支持类型） - 状态颜色标识：绿色=可用，红色=维护中，灰色=校验中 --- #### 3.6 模块五：执行时间与交付物设计 - 配置每个子任务的起止时间、预计时长 - 设置交付数据项（如测试报告、数据文件、视频记录） - 每个交付项可指定负责人与完成时限 --- ### 4. 页面底部操作栏 - “保存协同规划”按钮（蓝色主按钮） - “返回任务总览”按钮（灰色次按钮） --- ### 页面样式要求： - 模块之间留白清晰，卡片式布局 - 交互操作清晰，图标与按钮统一风格 - 图形任务结构与表格列表穿插使用，突出“结构+分配+追踪”逻辑 - 支持大屏展示与滚动交互 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +616 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab3
3
- emoji: 🏢
4
- colorFrom: yellow
5
  colorTo: red
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: lab3
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: red
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,616 @@
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: '#1E40AF',
15
+ secondary: '#3B82F6',
16
+ accent: '#93C5FD',
17
+ light: '#EFF6FF',
18
+ dark: '#1E293B',
19
+ success: '#22C55E',
20
+ warning: '#F59E0B',
21
+ danger: '#EF4444'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .task-node {
29
+ transition: all 0.3s ease;
30
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
31
+ }
32
+ .task-node:hover {
33
+ transform: translateY(-3px);
34
+ box-shadow: 0 4px 10px rgba(0,0,0,0.15);
35
+ }
36
+ .vertical-divider {
37
+ height: 20px;
38
+ border-left: 2px dotted #cbd5e1;
39
+ margin: 0 15px;
40
+ }
41
+ .scrollable-table {
42
+ max-height: 300px;
43
+ overflow-y: auto;
44
+ }
45
+ .scrollable-table thead {
46
+ position: sticky;
47
+ top: 0;
48
+ background-color: white;
49
+ z-index: 10;
50
+ }
51
+ .grid-dot-bg {
52
+ background-size: 30px 30px;
53
+ background-image: radial-gradient(circle, #cbd5e1 1px, rgba(0, 0, 0, 0) 1px);
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="h-screen flex flex-col bg-gray-100">
58
+ <!-- 顶部页头 -->
59
+ <header class="bg-primary text-white py-4 px-6 flex items-center justify-between shadow-md">
60
+ <div class="flex items-center">
61
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M17.7 16.4a9 9 0 1 0-11.4 0'/%3E%3C/svg%3E"
62
+ class="w-8 h-8 mr-3">
63
+ <h1 class="text-xl font-bold">实验室管理系统</h1>
64
+ </div>
65
+ <h2 class="text-lg font-semibold">实验协同规划设计</h2>
66
+ <div class="relative" id="userDropdown">
67
+ <div class="flex items-center cursor-pointer">
68
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.42 0-8 3.58-8 8h16c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E"
69
+ class="w-8 h-8 rounded-full bg-secondary">
70
+ <span class="ml-2">admin</span>
71
+ <i class="fas fa-chevron-down ml-2 text-sm"></i>
72
+ </div>
73
+ <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 text-dark hidden z-50" id="dropdownMenu">
74
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-user mr-2"></i>个人中心</a>
75
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-cog mr-2"></i>系统设置</a>
76
+ <a href="#" class="block px-4 py-2 text-red-500 hover:bg-red-50"><i class="fas fa-sign-out-alt mr-2"></i>退出登录</a>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- 主内容区域 -->
82
+ <div class="flex flex-1 overflow-hidden">
83
+ <!-- 左侧导航栏 -->
84
+ <aside class="w-64 bg-gray-800 text-white flex-shrink-0 overflow-y-auto">
85
+ <nav class="py-4">
86
+ <ul>
87
+ <li>
88
+ <a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-calendar-alt mr-2"></i>实验计划管理</a>
89
+ </li>
90
+ <li>
91
+ <a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-tasks mr-2"></i>实验任务管理</a>
92
+ </li>
93
+ <li class="bg-primary">
94
+ <a href="#" class="block py-3 px-6"><i class="fas fa-project-diagram mr-2"></i>实验协同规划设计</a>
95
+ </li>
96
+ <li>
97
+ <a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-flask mr-2"></i>实验设备管理</a>
98
+ </li>
99
+ <li>
100
+ <a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-map-marked-alt mr-2"></i>实验场地管理</a>
101
+ </li>
102
+ <li class="mt-6">
103
+ <a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-cog mr-2"></i>系统设置</a>
104
+ </li>
105
+ </ul>
106
+ </nav>
107
+ </aside>
108
+
109
+ <!-- 右侧主内容区 -->
110
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
111
+ <!-- 顶部信息卡 -->
112
+ <div class="bg-white rounded-lg shadow-md p-5 mb-6 border-l-4 border-success">
113
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
114
+ <div>
115
+ <p class="text-gray-600"><i class="fas fa-hashtag mr-2"></i>实验任务编号</p>
116
+ <p class="font-semibold">TASK-20250701-001</p>
117
+ </div>
118
+ <div>
119
+ <p class="text-gray-600"><i class="fas fa-flask mr-2"></i>实验名称</p>
120
+ <p class="font-semibold">高温应力测试任务</p>
121
+ </div>
122
+ <div>
123
+ <p class="text-gray-600"><i class="fas fa-cube mr-2"></i>所属型号</p>
124
+ <p class="font-semibold">XJ-78</p>
125
+ </div>
126
+ <div>
127
+ <p class="text-gray-600"><i class="fas fa-tag mr-2"></i>实验类别</p>
128
+ <p class="font-semibold">环境</p>
129
+ </div>
130
+ <div>
131
+ <p class="text-gray-600"><i class="fas fa-calendar-day mr-2"></i>实验时间</p>
132
+ <p class="font-semibold">2025-07-01 至 2025-07-20</p>
133
+ </div>
134
+ <div>
135
+ <p class="text-gray-600"><i class="fas fa-circle mr-2"></i>状态</p>
136
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
137
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>进行中
138
+ </span>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- 任务结构设计模块 -->
144
+ <div class="bg-white rounded-lg shadow-md p-5 mb-6">
145
+ <div class="flex justify-between items-center mb-4">
146
+ <h3 class="text-lg font-bold text-primary"><i class="fas fa-sitemap mr-2"></i>实验任务结构设计</h3>
147
+ <div class="space-x-2">
148
+ <button class="btn-template px-3 py-1.5 bg-secondary text-white rounded-md hover:bg-blue-600">
149
+ <i class="fas fa-save mr-1"></i>保存为模板
150
+ </button>
151
+ <button class="btn-template px-3 py-1.5 bg-accent text-primary rounded-md hover:bg-blue-200">
152
+ <i class="fas fa-file-import mr-1"></i>从模板导入
153
+ </button>
154
+ </div>
155
+ </div>
156
+ <div class="grid-dot-bg rounded-lg p-4">
157
+ <div class="flex">
158
+ <div class="relative">
159
+ <!-- 任务节点 -->
160
+ <div class="task-node bg-white rounded-lg border border-primary shadow p-4 w-60 text-center cursor-pointer">
161
+ <div class="font-bold">高温应力测试</div>
162
+ <div class="text-sm text-gray-500">负责人: 李明</div>
163
+ <div class="text-xs mt-1 text-cyan-600">2025-07-01 至 2025-07-20</div>
164
+ </div>
165
+ <!-- 连接线 -->
166
+ <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- 子任务行 -->
171
+ <div class="flex justify-center mt-4">
172
+ <div class="flex">
173
+ <div class="relative">
174
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
175
+ <div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
176
+ <div class="font-bold">前期准备</div>
177
+ <div class="text-sm text-gray-500">负责人: 张伟</div>
178
+ <div class="text-xs mt-1 text-cyan-600">2025-07-01 至 2025-07-05</div>
179
+ </div>
180
+ <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
181
+ </div>
182
+ </div>
183
+ <div class="vertical-divider"></div>
184
+ <div class="relative">
185
+ <div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
186
+ <div class="font-bold">设备调试</div>
187
+ <div class="text-sm text-gray-500">负责人: 王磊</div>
188
+ <div class="text-xs mt-1 text-cyan-600">2025-07-03 至 2025-07-07</div>
189
+ </div>
190
+ <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
191
+ </div>
192
+ <div class="vertical-divider"></div>
193
+ <div class="relative">
194
+ <div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
195
+ <div class="font-bold">测试执行</div>
196
+ <div class="text-sm text-gray-500">负责人: 赵敏</div>
197
+ <div class="text-xs mt-1 text-cyan-600">2025-07-08 至 2025-07-15</div>
198
+ </div>
199
+ <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
200
+ </div>
201
+ <div class="vertical-divider"></div>
202
+ <div class="relative">
203
+ <div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
204
+ <div class="font-bold">数据分析</div>
205
+ <div class="text-sm text-gray-500">负责人: 孙芳</div>
206
+ <div class="text-xs mt-1 text-cyan-600">2025-07-16 至 2025-07-20</div>
207
+ </div>
208
+ <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- 第三级子任务 -->
213
+ <div class="flex justify-center mt-4 mb-4">
214
+ <div class="flex space-x-8">
215
+ <div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
216
+ <div>设备采购</div>
217
+ <div class="text-xs text-gray-500">预计: 3天</div>
218
+ </div>
219
+ <div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
220
+ <div>场地布置</div>
221
+ <div class="text-xs text-gray-500">预计: 2天</div>
222
+ </div>
223
+ <div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
224
+ <div>材料准备</div>
225
+ <div class="text-xs text-gray-500">预计: 3天</div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- 任务操作按钮组 -->
232
+ <div class="flex justify-center mt-8 gap-2">
233
+ <button class="px-3 py-1.5 bg-green-100 text-green-700 rounded-md hover:bg-green-200">
234
+ <i class="fas fa-plus mr-1"></i>新增子任务
235
+ </button>
236
+ <button class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">
237
+ <i class="fas fa-link mr-1"></i>前置任务
238
+ </button>
239
+ <button class="px-3 py-1.5 bg-indigo-100 text-indigo-700 rounded-md hover:bg-indigo-200">
240
+ <i class="fas fa-link mr-1"></i>后置任务
241
+ </button>
242
+ <button class="px-3 py-1.5 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200">
243
+ <i class="fas fa-arrow-up mr-1"></i>升级
244
+ </button>
245
+ <button class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded-md hover:bg-orange-200">
246
+ <i class="fas fa-arrow-down mr-1"></i>降级
247
+ </button>
248
+ <button class="px-3 py-1.5 bg-red-100 text-red-700 rounded-md hover:bg-red-200">
249
+ <i class="fas fa-trash mr-1"></i>删除
250
+ </button>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- 可折叠的网格布局 -->
255
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
256
+ <!-- 实验人员规划模块 -->
257
+ <div class="bg-white rounded-lg shadow-md p-5 col-span-1">
258
+ <div class="flex justify-between items-center mb-4">
259
+ <h3 class="text-lg font-bold text-primary"><i class="fas fa-users mr-2"></i>实验人员规划</h3>
260
+ <button class="btn-template px-3 py-1.5 bg-success text-white rounded-md hover:bg-green-600">
261
+ <i class="fas fa-user-plus mr-1"></i>添加人员
262
+ </button>
263
+ </div>
264
+ <div class="scrollable-table">
265
+ <table class="min-w-full divide-y divide-gray-200">
266
+ <thead class="bg-blue-50">
267
+ <tr>
268
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
269
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
270
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属部门</th>
271
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
272
+ </tr>
273
+ </thead>
274
+ <tbody class="bg-white divide-y divide-gray-200">
275
+ <tr>
276
+ <td class="px-4 py-3 whitespace-nowrap">李明</td>
277
+ <td class="px-4 py-3 whitespace-nowrap">
278
+ <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">负责人</span>
279
+ </td>
280
+ <td class="px-4 py-3 whitespace-nowrap">材料实验室</td>
281
+ <td class="px-4 py-3 whitespace-nowrap">
282
+ <select class="px-2 py-1 rounded-md border border-gray-300">
283
+ <option>全权限</option>
284
+ <option selected>可编辑</option>
285
+ <option>只读</option>
286
+ </select>
287
+ </td>
288
+ </tr>
289
+ <tr>
290
+ <td class="px-4 py-3 whitespace-nowrap">张伟</td>
291
+ <td class="px-4 py-3 whitespace-nowrap">
292
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">实验员</span>
293
+ </td>
294
+ <td class="px-4 py-3 whitespace-nowrap">测试部</td>
295
+ <td class="px-4 py-3 whitespace-nowrap">
296
+ <select class="px-2 py-1 rounded-md border border-gray-300">
297
+ <option>全权限</option>
298
+ <option selected>可编辑</option>
299
+ <option>只读</option>
300
+ </select>
301
+ </td>
302
+ </tr>
303
+ <tr>
304
+ <td class="px-4 py-3 whitespace-nowrap">王磊</td>
305
+ <td class="px-4 py-3 whitespace-nowrap">
306
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">观察员</span>
307
+ </td>
308
+ <td class="px-4 py-3 whitespace-nowrap">质量部</td>
309
+ <td class="px-4 py-3 whitespace-nowrap">
310
+ <select class="px-2 py-1 rounded-md border border-gray-300">
311
+ <option>全权限</option>
312
+ <option>可编辑</option>
313
+ <option selected>只读</option>
314
+ </select>
315
+ </td>
316
+ </tr>
317
+ <tr>
318
+ <td class="px-4 py-3 whitespace-nowrap">赵敏</td>
319
+ <td class="px-4 py-3 whitespace-nowrap">
320
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">实验员</span>
321
+ </td>
322
+ <td class="px-4 py-3 whitespace-nowrap">测试部</td>
323
+ <td class="px-4 py-3 whitespace-nowrap">
324
+ <select class="px-2 py-1 rounded-md border border-gray-300">
325
+ <option>全权限</option>
326
+ <option selected>可编辑</option>
327
+ <option>只读</option>
328
+ </select>
329
+ </td>
330
+ </tr>
331
+ </tbody>
332
+ </table>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- 实验件选择模块 -->
337
+ <div class="bg-white rounded-lg shadow-md p-5 col-span-1">
338
+ <div class="flex justify-between items-center mb-4">
339
+ <h3 class="text-lg font-bold text-primary"><i class="fas fa-box-open mr-2"></i>实验件选择</h3>
340
+ <div>
341
+ <input type="text" placeholder="搜索实验件..." class="px-3 py-1.5 border rounded-md mr-2">
342
+ <button class="btn-template px-3 py-1.5 bg-primary text-white rounded-md hover:bg-blue-700">
343
+ <i class="fas fa-check mr-1"></i>确认选择
344
+ </button>
345
+ </div>
346
+ </div>
347
+ <div class="scrollable-table">
348
+ <table class="min-w-full divide-y divide-gray-200">
349
+ <thead class="bg-blue-50">
350
+ <tr>
351
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
352
+ <input type="checkbox" class="rounded">
353
+ </th>
354
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验件编号</th>
355
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
356
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
357
+ </tr>
358
+ </thead>
359
+ <tbody class="bg-white divide-y divide-gray-200">
360
+ <tr>
361
+ <td class="px-4 py-3 whitespace-nowrap">
362
+ <input type="checkbox" class="rounded">
363
+ </td>
364
+ <td class="px-4 py-3 whitespace-nowrap">SP-2025-078</td>
365
+ <td class="px-4 py-3 whitespace-nowrap">高温传感器</td>
366
+ <td class="px-4 py-3 whitespace-nowrap">
367
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
368
+ </td>
369
+ </tr>
370
+ <tr>
371
+ <td class="px-4 py-3 whitespace-nowrap">
372
+ <input type="checkbox" class="rounded" checked>
373
+ </td>
374
+ <td class="px-4 py-3 whitespace-nowrap">SP-2025-101</td>
375
+ <td class="px-4 py-3 whitespace-nowrap">受力测试板</td>
376
+ <td class="px-4 py-3 whitespace-nowrap">
377
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
378
+ </td>
379
+ </tr>
380
+ <tr>
381
+ <td class="px-4 py-3 whitespace-nowrap">
382
+ <input type="checkbox" class="rounded">
383
+ </td>
384
+ <td class="px-4 py-3 whitespace-nowrap">SP-2025-045</td>
385
+ <td class="px-4 py-3 whitespace-nowrap">高温保护罩</td>
386
+ <td class="px-4 py-3 whitespace-nowrap">
387
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">借出</span>
388
+ </td>
389
+ </tr>
390
+ <tr>
391
+ <td class="px-4 py-3 whitespace-nowrap">
392
+ <input type="checkbox" class="rounded" checked>
393
+ </td>
394
+ <td class="px-4 py-3 whitespace-nowrap">SP-2025-112</td>
395
+ <td class="px-4 py-3 whitespace-nowrap">应力检测装置</td>
396
+ <td class="px-4 py-3 whitespace-nowrap">
397
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
398
+ </td>
399
+ </tr>
400
+ </tbody>
401
+ </table>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- 实验资源配置模块 -->
406
+ <div class="bg-white rounded-lg shadow-md p-5 col-span-1">
407
+ <h3 class="text-lg font-bold text-primary mb-4"><i class="fas fa-server mr-2"></i>实验资源配置</h3>
408
+
409
+ <div class="mb-6">
410
+ <h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-microchip mr-2"></i>可用设备</h4>
411
+ <div class="scrollable-table">
412
+ <table class="min-w-full divide-y divide-gray-200">
413
+ <thead class="bg-blue-50">
414
+ <tr>
415
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
416
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
417
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
418
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">校验有效期</th>
419
+ </tr>
420
+ </thead>
421
+ <tbody class="bg-white divide-y divide-gray-200">
422
+ <tr>
423
+ <td class="px-4 py-3 whitespace-nowrap">高温试验箱</td>
424
+ <td class="px-4 py-3 whitespace-nowrap">DEV-202</td>
425
+ <td class="px-4 py-3 whitespace-nowrap">
426
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
427
+ </td>
428
+ <td class="px-4 py-3 whitespace-nowrap">2026-05-31</td>
429
+ </tr>
430
+ <tr>
431
+ <td class="px-4 py-3 whitespace-nowrap">应力测试仪</td>
432
+ <td class="px-4 py-3 whitespace-nowrap">DEV-309</td>
433
+ <td class="px-4 py-3 whitespace-nowrap">
434
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">待校准</span>
435
+ </td>
436
+ <td class="px-4 py-3 whitespace-nowrap text-amber-600">2025-08-15</td>
437
+ </tr>
438
+ <tr>
439
+ <td class="px-4 py-3 whitespace-nowrap">数据采集器</td>
440
+ <td class="px-4 py-3 whitespace-nowrap">DEV-456</td>
441
+ <td class="px-4 py-3 whitespace-nowrap">
442
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
443
+ </td>
444
+ <td class="px-4 py-3 whitespace-nowrap">2026-03-10</td>
445
+ </tr>
446
+ <tr>
447
+ <td class="px-4 py-3 whitespace-nowrap">热成像仪</td>
448
+ <td class="px-4 py-3 whitespace-nowrap">DEV-521</td>
449
+ <td class="px-4 py-3 whitespace-nowrap">
450
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">维护中</span>
451
+ </td>
452
+ <td class="px-4 py-3 whitespace-nowrap text-gray-400">2025-11-20</td>
453
+ </tr>
454
+ </tbody>
455
+ </table>
456
+ </div>
457
+ </div>
458
+
459
+ <div>
460
+ <h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-map-pin mr-2"></i>可用场地</h4>
461
+ <div class="scrollable-table">
462
+ <table class="min-w-full divide-y divide-gray-200">
463
+ <thead class="bg-blue-50">
464
+ <tr>
465
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">场地名称</th>
466
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">容量</th>
467
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
468
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支持类型</th>
469
+ </tr>
470
+ </thead>
471
+ <tbody class="bg-white divide-y divide-gray-200">
472
+ <tr>
473
+ <td class="px-4 py-3 whitespace-nowrap">高温实验室 A</td>
474
+ <td class="px-4 py-3 whitespace-nowrap">4 人</td>
475
+ <td class="px-4 py-3 whitespace-nowrap">
476
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">空闲</span>
477
+ </td>
478
+ <td class="px-4 py-3 whitespace-nowrap">高温、应力</td>
479
+ </tr>
480
+ <tr>
481
+ <td class="px-4 py-3 whitespace-nowrap">环境测试大厅</td>
482
+ <td class="px-4 py-3 whitespace-nowrap">10 人</td>
483
+ <td class="px-4 py-3 whitespace-nowrap">
484
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">空闲</span>
485
+ </td>
486
+ <td class="px-4 py-3 whitespace-nowrap">综合环境</td>
487
+ </tr>
488
+ <tr>
489
+ <td class="px-4 py-3 whitespace-nowrap">安全实验区 B</td>
490
+ <td class="px-4 py-3 whitespace-nowrap">6 人</td>
491
+ <td class="px-4 py-3 whitespace-nowrap">
492
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">使用中</span>
493
+ </td>
494
+ <td class="px-4 py-3 whitespace-nowrap">安全实验</td>
495
+ </tr>
496
+ </tbody>
497
+ </table>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- 执行时间与交付物设计模块 -->
503
+ <div class="bg-white rounded-lg shadow-md p-5 col-span-1">
504
+ <h3 class="text-lg font-bold text-primary mb-4"><i class="fas fa-clipboard-list mr-2"></i>执行时间与交付物设计</h3>
505
+
506
+ <div class="mb-6">
507
+ <h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-clock mr-2"></i>任务时间安排</h4>
508
+ <div class="space-y-3">
509
+ <div class="flex items-center">
510
+ <div class="w-1/5 font-medium">前期准备</div>
511
+ <div class="w-4/5 flex items-center">
512
+ <input type="date" class="p-1.5 border rounded mr-2" value="2025-07-01">
513
+ <span class="mx-1">至</span>
514
+ <input type="date" class="p-1.5 border rounded ml-2" value="2025-07-05">
515
+ <span class="mx-2 text-gray-500">(5天)</span>
516
+ </div>
517
+ </div>
518
+ <div class="flex items-center">
519
+ <div class="w-1/5 font-medium">设备调试</div>
520
+ <div class="w-4/5 flex items-center">
521
+ <input type="date" class="p-1.5 border rounded mr-2" value="2025-07-03">
522
+ <span class="mx-1">至</span>
523
+ <input type="date" class="p-1.5 border rounded ml-2" value="2025-07-07">
524
+ <span class="mx-2 text-gray-500">(5天)</span>
525
+ </div>
526
+ </div>
527
+ <div class="flex items-center">
528
+ <div class="w-1/5 font-medium">测试执行</div>
529
+ <div class="w-4/5 flex items-center">
530
+ <input type="date" class="p-1.5 border rounded mr-2" value="2025-07-08">
531
+ <span class="mx-1">至</span>
532
+ <input type="date" class="p-1.5 border rounded ml-2" value="2025-07-15">
533
+ <span class="mx-2 text-gray-500">(8天)</span>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <div>
540
+ <h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-file-alt mr-2"></i>交付物配置</h4>
541
+ <div class="space-y-3">
542
+ <div class="flex items-start bg-blue-50 p-3 rounded-md">
543
+ <div class="flex-1">
544
+ <div class="font-medium">高温应力测试报告</div>
545
+ <div class="text-sm text-gray-600">详细记录测试结果与分析</div>
546
+ </div>
547
+ <div class="text-right">
548
+ <div class="font-medium">负责人: 孙芳</div>
549
+ <div class="text-sm text-gray-600">截止: 2025-07-22</div>
550
+ </div>
551
+ </div>
552
+ <div class="flex items-start bg-blue-50 p-3 rounded-md">
553
+ <div class="flex-1">
554
+ <div class="font-medium">测试原始数据包</div>
555
+ <div class="text-sm text-gray-600">原始测试数据及处理过程</div>
556
+ </div>
557
+ <div class="text-right">
558
+ <div class="font-medium">负责人: 王磊</div>
559
+ <div class="text-sm text-gray-600">截止: 2025-07-18</div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ <button class="mt-3 px-3 py-1.5 bg-primary text-white rounded-md hover:bg-blue-700">
564
+ <i class="fas fa-plus mr-1"></i>添加交付物
565
+ </button>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </main>
570
+ </div>
571
+
572
+ <!-- 底部操作栏 -->
573
+ <footer class="py-4 px-6 bg-white border-t flex justify-between">
574
+ <button class="px-5 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
575
+ <i class="fas fa-arrow-left mr-2"></i>返回任务总览
576
+ </button>
577
+ <button class="px-6 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">
578
+ <i class="fas fa-save mr-2"></i>保存协同规划
579
+ </button>
580
+ </footer>
581
+
582
+ <script>
583
+ // 用户下拉菜单
584
+ const dropdownToggle = document.getElementById('userDropdown');
585
+ const dropdownMenu = document.getElementById('dropdownMenu');
586
+
587
+ dropdownToggle.addEventListener('click', function() {
588
+ dropdownMenu.classList.toggle('hidden');
589
+ });
590
+
591
+ // 关闭下拉菜单（点击其他地方时）
592
+ window.addEventListener('click', function(event) {
593
+ if (!dropdownToggle.contains(event.target) &&
594
+ !dropdownMenu.contains(event.target) &&
595
+ !dropdownMenu.classList.contains('hidden')) {
596
+ dropdownMenu.classList.add('hidden');
597
+ }
598
+ });
599
+
600
+ // 任务节点点击效果
601
+ document.querySelectorAll('.task-node').forEach(node => {
602
+ node.addEventListener('click', function() {
603
+ // 移除现有选中状态
604
+ document.querySelectorAll('.task-node').forEach(n => {
605
+ n.classList.remove('border-2', 'border-primary');
606
+ });
607
+ // 添加选中状态
608
+ this.classList.add('border-2', 'border-primary');
609
+
610
+ // 在实际应用中，这里会打开设置窗口
611
+ console.log('打开任务节点设置');
612
+ });
613
+ });
614
+ </script>
615
+ <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/lab3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
616
+ </html>