Hugging Face's logo

Spaces:
maomaobj
/
lab5
Running

App Files Community
maomaobj commited on
Commit
2c2d3f7
·
verified ·
1 Parent(s): 4414784

设计一个“实验室管理系统”的后台页面，模块名称为“数据分析决策子系统”。页面用于展示实验运行的多维度数据统计和趋势分析，支持图表展示、维度切换、关键指标查看等功能。页面风格专业蓝白色，支持大屏查看。 --- ### 1. 顶部页头 - 系统名称：“实验室管理系统” - 当前模块标题：“数据分析决策子系统” - 页头右侧显示当前用户：admin，带头像和退出菜单 - 背景为深蓝色，白色字体，科技感强 --- ### 2. 左侧导航菜单（灰色背景） 菜单项包括： - 实验计划管理 - 实验任务管理 - 实验设备管理 - 实验场地管理 - ✅ 数据分析决策（当前高亮） - 系统设置 --- ### 3. 主页面内容（右侧） 页面布局为多个**统计卡片 + 图表面板 + 数据维度切换区**组合，分模块展示。 --- #### 3.1 核心指标统计卡片区（顶部四个横向卡片） 每个卡片以图标 + 主要数字 + 简短描述组成： - 📅 本月新增实验计划：32 项 - ✅ 当前进行中任务：14 个 - 🧪 本季度使用设备次数：216 次 - 🧱 实验场地利用率：78.4% 卡片背景为浅蓝、浅绿、浅紫、浅橙，视觉对比强，图标美观 --- #### 3.2 数据分析图表区（中部主模块） 采用 2 行 × 2 列布局，共 4 个核心图表区域： **图表1：任务完成趋势（折线图）** - X轴为月份，Y轴为已完成任务数量 - 显示近12个月的变化趋势 - 可切换查看不同实验类别趋势（环境、电磁、计量） **图表2：实验计划状态分布（饼图）** - 展示当前计划状态占比（未开始、进行中、已完成、暂停） - 彩色标签高对比显示 **图表3：设备使用强度（柱状图）** - 横轴为设备名称或类别（最多前10项） - 纵轴为使用频次 - 可切换为“按部门分类”或“按类型分类” **图表4：场地利用时段热力图（时间热力图）** - 横轴为小时（0~24），纵轴为实验场地 - 颜色越深表示利用率越高，适用于资源调度优化 --- #### 3.3 数据维度筛选区（可选上方浮动筛选栏） - 日期范围选择器（默认显示最近30天） - 筛选条件：实验类别 / 所属部门 / 负责人 - 筛选按钮（蓝色），重置按钮 --- #### 3.4 页面底部：数据导出与报告功能 - 导出按钮：支持导出当前筛选数据为PDF/Excel - 生成月度统计报告按钮（灰色） - 按钮组右侧备注：“统计结果来源于系统各模块，支持自定义模板” --- ### 页面风格要求： - 全页面响应式设计，适配大屏、笔记本 - 图表样式统一（ECharts风格），色彩有序不跳色 - 使用现代仪表盘风格布局，卡片+图表混排 - 文字简洁，图表说明清晰，交互友好 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +566 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab5
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: gray
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: lab5
3
+ emoji: 🐳
4
+ colorFrom: green
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,566 @@
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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#0d2869',
16
+ secondary: '#1890ff',
17
+ darkblue: '#091a44',
18
+ lightblue: '#e6f7ff',
19
+ },
20
+ boxShadow: {
21
+ 'dashboard': '0 4px 20px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.1)'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ body {
29
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
+ overflow: hidden;
31
+ height: 100vh;
32
+ }
33
+
34
+ .main-grid {
35
+ display: grid;
36
+ grid-template-columns: 220px 1fr;
37
+ grid-template-rows: 70px 1fr auto;
38
+ height: 100vh;
39
+ }
40
+
41
+ .sidebar {
42
+ grid-row: 1 / span 3;
43
+ }
44
+
45
+ .header {
46
+ grid-column: 2;
47
+ }
48
+
49
+ .main-container {
50
+ grid-column: 2;
51
+ overflow-y: scroll;
52
+ }
53
+
54
+ .footer {
55
+ grid-column: 2;
56
+ }
57
+
58
+ .chart-container {
59
+ position: relative;
60
+ height: 340px;
61
+ width: 100%;
62
+ }
63
+
64
+ .heatmap-grid {
65
+ display: grid;
66
+ grid-template-columns: repeat(24, 1fr);
67
+ grid-template-rows: repeat(4, 20px);
68
+ grid-gap: 3px;
69
+ margin-top: 10px;
70
+ }
71
+
72
+ .heatmap-cell {
73
+ border-radius: 2px;
74
+ cursor: pointer;
75
+ }
76
+
77
+ .avatar-ring {
78
+ width: 36px;
79
+ height: 36px;
80
+ border-radius: 50%;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ background: linear-gradient(135deg, #60c7ff, #456ff8);
85
+ }
86
+
87
+ /* Custom scrollbar for the main container */
88
+ .main-container::-webkit-scrollbar {
89
+ width: 8px;
90
+ }
91
+
92
+ .main-container::-webkit-scrollbar-track {
93
+ background: #f7f9fc;
94
+ }
95
+
96
+ .main-container::-webkit-scrollbar-thumb {
97
+ background-color: #c5d0e6;
98
+ border-radius: 4px;
99
+ }
100
+
101
+ .main-container::-webkit-scrollbar-thumb:hover {
102
+ background-color: #a3b1d0;
103
+ }
104
+
105
+ .stat-card {
106
+ transition: transform 0.3s, box-shadow 0.3s;
107
+ }
108
+
109
+ .stat-card:hover {
110
+ transform: translateY(-5px);
111
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
112
+ }
113
+
114
+ .nav-item {
115
+ position: relative;
116
+ transition: all 0.2s;
117
+ }
118
+
119
+ .nav-item.active::before {
120
+ content: "";
121
+ position: absolute;
122
+ left: 0;
123
+ top: 50%;
124
+ transform: translateY(-50%);
125
+ height: 60%;
126
+ width: 4px;
127
+ background: #1890ff;
128
+ border-top-right-radius: 3px;
129
+ border-bottom-right-radius: 3px;
130
+ }
131
+ </style>
132
+ </head>
133
+ <body>
134
+ <div class="main-grid bg-gray-50">
135
+ <!-- 顶部页头 -->
136
+ <header class="header bg-primary text-white flex items-center justify-between px-7 border-b border-primary/70">
137
+ <div class="flex items-center">
138
+ <h1 class="text-xl font-bold mr-6">实验室管理系统</h1>
139
+ <div class="flex items-center">
140
+ <div class="w-px h-6 bg-gray-400/30 mx-4"></div>
141
+ <div class="font-medium text-blue-100">
142
+ <i class="fas fa-chart-pie mr-2"></i>
143
+ 数据分析决策子系统
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="relative group">
149
+ <div class="flex items-center cursor-pointer py-2">
150
+ <div class="avatar-ring">
151
+ <i class="fas fa-user text-white"></i>
152
+ </div>
153
+ <div class="ml-3 text-sm">admin</div>
154
+ <i class="fas fa-chevron-down ml-2 text-sm opacity-80"></i>
155
+ </div>
156
+
157
+ <div class="absolute bg-white rounded-lg shadow-lg py-2 right-0 w-44 top-full mt-1 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-200 z-10">
158
+ <div class="text-gray-700 py-2 px-4 hover:bg-gray-50 cursor-pointer flex items-center">
159
+ <i class="fas fa-user-circle text-gray-500 mr-3 w-5"></i>
160
+ <span>个人中心</span>
161
+ </div>
162
+ <div class="text-red-500 py-2 px-4 hover:bg-red-50 cursor-pointer flex items-center border-t">
163
+ <i class="fas fa-sign-out-alt mr-3 w-5"></i>
164
+ <span>退出登录</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </header>
169
+
170
+ <!-- 左侧导航 -->
171
+ <nav class="sidebar bg-gray-800 py-6 text-gray-300">
172
+ <nav class="mt-6">
173
+ <ul class="space-y-1 px-3">
174
+ <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50">
175
+ <i class="fas fa-calendar-check mr-3 w-5"></i>
176
+ <span>实验计划管理</span>
177
+ </li>
178
+ <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50">
179
+ <i class="fas fa-tasks mr-3 w-5"></i>
180
+ <span>实验任务管理</span>
181
+ </li>
182
+ <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50">
183
+ <i class="fas fa-microscope mr-3 w-5"></i>
184
+ <span>实验设备管理</span>
185
+ </li>
186
+ <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50">
187
+ <i class="fas fa-map-marked-alt mr-3 w-5"></i>
188
+ <span>实验场地管理</span>
189
+ </li>
190
+ <li class="nav-item active px-4 py-3 text-sm font-medium rounded-lg bg-gray-900 text-white">
191
+ <i class="fas fa-chart-line mr-3 w-5"></i>
192
+ <span>数据分析决策</span>
193
+ </li>
194
+ <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50">
195
+ <i class="fas fa-cog mr-3 w-5"></i>
196
+ <span>系统设置</span>
197
+ </li>
198
+ </ul>
199
+ </nav>
200
+ </nav>
201
+
202
+ <!-- 主内容区 -->
203
+ <main class="main-container p-7 overflow-y-auto">
204
+ <!-- 数据筛选区 -->
205
+ <div class="bg-white rounded-xl shadow-dashboard p-6 mb-6">
206
+ <div class="flex flex-wrap items-center gap-4">
207
+ <h3 class="text-lg font-semibold mr-4">数据筛选</h3>
208
+
209
+ <div class="flex items-center">
210
+ <span class="text-gray-500 mr-2"><i class="far fa-calendar-alt"></i> 日期:</span>
211
+ <div class="flex border rounded-lg overflow-hidden">
212
+ <input type="date" class="px-3 py-1 text-sm w-40" value="2023-06-01">
213
+ <span class="px-2 py-1 bg-gray-100 text-gray-500">至</span>
214
+ <input type="date" class="px-3 py-1 text-sm w-40" value="2023-06-30">
215
+ </div>
216
+ </div>
217
+
218
+ <div class="ml-2">
219
+ <span class="text-gray-500 mr-2"><i class="far fa-flask"></i> 类别:</span>
220
+ <select class="border rounded-lg px-3 py-1.5 text-sm w-32">
221
+ <option>全部</option>
222
+ <option>环境实验</option>
223
+ <option>电磁实验</option>
224
+ <option>计量实验</option>
225
+ <option>生物实验</option>
226
+ </select>
227
+ </div>
228
+
229
+ <div class="ml-2">
230
+ <span class="text-gray-500 mr-2"><i class="fas fa-building"></i> 部门:</span>
231
+ <select class="border rounded-lg px-3 py-1.5 text-sm w-32">
232
+ <option>全部</option>
233
+ <option>研发一部</option>
234
+ <option>研发二部</option>
235
+ <option>质检中心</option>
236
+ </select>
237
+ </div>
238
+
239
+ <div class="ml-2">
240
+ <span class="text-gray-500 mr-2"><i class="fas fa-user-tie"></i> 负责人:</span>
241
+ <select class="border rounded-lg px-3 py-1.5 text-sm w-32">
242
+ <option>全部</option>
243
+ <option>张教授</option>
244
+ <option>李博士</option>
245
+ <option>王工</option>
246
+ </select>
247
+ </div>
248
+
249
+ <div class="flex flex-1 justify-end gap-3">
250
+ <button class="px-4 py-1.5 bg-gray-100 rounded-lg text-gray-700 hover:bg-gray-200 transition-colors">
251
+ <i class="fas fa-sync mr-2"></i> 重置
252
+ </button>
253
+ <button class="px-4 py-1.5 bg-blue-500 rounded-lg text-white hover:bg-blue-600 transition-colors">
254
+ <i class="fas fa-filter mr-2"></i> 筛选数据
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- 核心指标区 -->
261
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
262
+ <div class="stat-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-dashboard p-5">
263
+ <div class="flex justify-between">
264
+ <div class="w-12 h-12 rounded-lg bg-blue-500 flex items-center justify-center">
265
+ <i class="fas fa-calendar-plus text-white text-xl"></i>
266
+ </div>
267
+ <div class="text-3xl font-bold text-blue-700">32</div>
268
+ </div>
269
+ <div class="mt-4">
270
+ <div class="text-gray-500 text-sm">本月新增实验计划</div>
271
+ <div class="text-green-600 text-sm mt-1">
272
+ <i class="fas fa-arrow-up mr-1"></i> 20.3%
273
+ <span class="text-gray-500 text-xs ml-2">较上月</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="stat-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl shadow-dashboard p-5">
279
+ <div class="flex justify-between">
280
+ <div class="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center">
281
+ <i class="fas fa-tasks text-white text-xl"></i>
282
+ </div>
283
+ <div class="text-3xl font-bold text-green-700">14</div>
284
+ </div>
285
+ <div class="mt-4">
286
+ <div class="text-gray-500 text-sm">当前进行中任务</div>
287
+ <div class="text-red-600 text-sm mt-1">
288
+ <i class="fas fa-arrow-down mr-1"></i> 2.8%
289
+ <span class="text-gray-500 text-xs ml-2">较上月</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="stat-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl shadow-dashboard p-5">
295
+ <div class="flex justify-between">
296
+ <div class="w-12 h-12 rounded-lg bg-purple-500 flex items-center justify-center">
297
+ <i class="fas fa-microscope text-white text-xl"></i>
298
+ </div>
299
+ <div class="text-3xl font-bold text-purple-700">216</div>
300
+ </div>
301
+ <div class="mt-4">
302
+ <div class="text-gray-500 text-sm">本季度使用设备次数</div>
303
+ <div class="text-green-600 text-sm mt-1">
304
+ <i class="fas fa-arrow-up mr-1"></i> 15.6%
305
+ <span class="text-gray-500 text-xs ml-2">较上季</span>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="stat-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl shadow-dashboard p-5">
311
+ <div class="flex justify-between">
312
+ <div class="w-12 h-12 rounded-lg bg-orange-500 flex items-center justify-center">
313
+ <i class="fas fa-map-marker-alt text-white text-xl"></i>
314
+ </div>
315
+ <div class="text-3xl font-bold text-orange-700">78.4%</div>
316
+ </div>
317
+ <div class="mt-4">
318
+ <div class="text-gray-500 text-sm">实验场地利用率</div>
319
+ <div class="text-green-600 text-sm mt-1">
320
+ <i class="fas fa-arrow-up mr-1"></i> 8.2%
321
+ <span class="text-gray-500 text-xs ml-2">较上季</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- 图表区域 - 第一行 -->
328
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
329
+ <!-- 任务完成趋势图 -->
330
+ <div class="bg-white rounded-xl shadow-dashboard p-5">
331
+ <div class="flex justify-between items-center mb-4">
332
+ <div class="font-semibold">任务完成趋势</div>
333
+ <div class="flex text-sm">
334
+ <button class="px-3 py-1 bg-blue-50 text-blue-500 rounded-lg mr-2">近12个月</button>
335
+ <select class="border rounded-lg px-3 py-1 text-xs">
336
+ <option>环境实验</option>
337
+ <option>电磁实验</option>
338
+ <option>计量实验</option>
339
+ </select>
340
+ </div>
341
+ </div>
342
+ <div class="chart-container">
343
+ <canvas id="taskTrendChart"></canvas>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- 实验计划状态分布 -->
348
+ <div class="bg-white rounded-xl shadow-dashboard p-5">
349
+ <div class="flex justify-between items-center mb-4">
350
+ <div class="font-semibold">实验计划状态分布</div>
351
+ <div class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 截至: 2023-06-30</div>
352
+ </div>
353
+ <div class="chart-container">
354
+ <canvas id="planStatusChart"></canvas>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- 图表区域 - 第二行 -->
360
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
361
+ <!-- 设备使用强度 -->
362
+ <div class="bg-white rounded-xl shadow-dashboard p-5">
363
+ <div class="flex justify-between items-center mb-4">
364
+ <div class="font-semibold">设备使用强度</div>
365
+ <div class="flex text-sm">
366
+ <button class="px-3 py-1 mr-1 bg-blue-50 text-blue-500 rounded-lg">按设备</button>
367
+ <button class="px-3 py-1 rounded-lg border text-gray-600 hover:bg-gray-100">按部门</button>
368
+ </div>
369
+ </div>
370
+ <div class="chart-container">
371
+ <canvas id="deviceUsageChart"></canvas>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- 场地利用时段热力图 -->
376
+ <div class="bg-white rounded-xl shadow-dashboard p-5">
377
+ <div class="flex justify-between items-center mb-4">
378
+ <div class="font-semibold">场地利用时段热力图</div>
379
+ <div class="flex items-center">
380
+ <span class="text-sm text-gray-500 mr-3">利用率:</span>
381
+ <div class="flex h-4 rounded overflow-hidden">
382
+ <div class="w-4 bg-blue-100"></div>
383
+ <div class="w-4 bg-blue-300"></div>
384
+ <div class="w-4 bg-blue-500"></div>
385
+ <div class="w-4 bg-blue-700"></div>
386
+ <div class="w-4 bg-blue-900"></div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <div>
391
+ <div class="flex justify-between mb-2">
392
+ <div class="text-gray-500 text-xs">#101实验室</div>
393
+ <div class="text-gray-500 text-xs">78.4%</div>
394
+ </div>
395
+ <div class="heatmap-grid">
396
+ <!-- Dynamically generated cells would be here -->
397
+ <!-- Simplified static representation -->
398
+ <div class="heatmap-cell bg-blue-100"></div>
399
+ <div class="heatmap-cell bg-blue-300"></div>
400
+ <div class="heatmap-cell bg-blue-500"></div>
401
+ <!-- ... 96 in total -->
402
+ </div>
403
+ <div class="flex justify-between mt-8 mb-2">
404
+ <div class="text-gray-500 text-xs">#208分析室</div>
405
+ <div class="text-gray-500 text-xs">65.2%</div>
406
+ </div>
407
+ <div class="heatmap-grid">
408
+ <!-- Similar grid for another room -->
409
+ </div>
410
+ <div class="flex justify-between mt-8 mb-2">
411
+ <div class="text-gray-500 text-xs">#305测试房</div>
412
+ <div class="text-gray-500 text-xs">82.1%</div>
413
+ </div>
414
+ <div class="heatmap-grid">
415
+ <!-- Similar grid for another room -->
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- 页脚区域 -->
422
+ <div class="footer bg-white rounded-xl shadow-dashboard p-5 mt-6">
423
+ <div class="flex justify-between items-center">
424
+ <div class="text-sm text-gray-500">
425
+ 统计结果来源于系统各模块，支持自定义模板
426
+ </div>
427
+ <div class="flex space-x-3">
428
+ <button class="flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
429
+ <i class="far fa-file-pdf text-red-500 mr-2"></i>
430
+ <span>导出PDF</span>
431
+ </button>
432
+ <button class="flex items-center px-4 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition-colors">
433
+ <i class="far fa-file-excel mr-2"></i>
434
+ <span>导出Excel</span>
435
+ </button>
436
+ <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
437
+ <i class="fas fa-list-alt mr-2"></i>
438
+ <span>生成月度报告</span>
439
+ </button>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </main>
444
+ </div>
445
+
446
+ <script>
447
+ // 初始化完成后渲染图表
448
+ document.addEventListener('DOMContentLoaded', function() {
449
+ // 任务完成趋势图 - 折线图
450
+ const taskTrend = document.getElementById('taskTrendChart');
451
+ new Chart(taskTrend, {
452
+ type: 'line',
453
+ data: {
454
+ labels: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
455
+ datasets: [{
456
+ label: '已完成任务数量',
457
+ data: [56, 62, 68, 75, 84, 90, 87, 78, 92, 96, 102, 110],
458
+ borderColor: '#1890ff',
459
+ backgroundColor: 'rgba(24, 144, 255, 0.1)',
460
+ borderWidth: 2,
461
+ tension: 0.4,
462
+ fill: true
463
+ }]
464
+ },
465
+ options: {
466
+ responsive: true,
467
+ maintainAspectRatio: false,
468
+ plugins: {
469
+ legend: {
470
+ display: false
471
+ }
472
+ },
473
+ scales: {
474
+ y: {
475
+ beginAtZero: true,
476
+ grid: {
477
+ color: 'rgba(0, 0, 0, 0.05)'
478
+ }
479
+ },
480
+ x: {
481
+ grid: {
482
+ display: false
483
+ }
484
+ }
485
+ }
486
+ }
487
+ });
488
+
489
+ // 计划状态分布 - 饼图
490
+ const planStatus = document.getElementById('planStatusChart');
491
+ new Chart(planStatus, {
492
+ type: 'pie',
493
+ data: {
494
+ labels: ['未开始', '进行中', '已完成', '暂停'],
495
+ datasets: [{
496
+ data: [12, 28, 45, 15],
497
+ backgroundColor: [
498
+ '#36A2EB',
499
+ '#4BC0C0',
500
+ '#FFCE56',
501
+ '#FF6384'
502
+ ],
503
+ borderWidth: 0
504
+ }]
505
+ },
506
+ options: {
507
+ responsive: true,
508
+ maintainAspectRatio: false,
509
+ plugins: {
510
+ legend: {
511
+ position: 'right',
512
+ labels: {
513
+ padding: 15
514
+ }
515
+ }
516
+ }
517
+ }
518
+ });
519
+
520
+ // 设备使用强度 - 柱状图
521
+ const deviceUsage = document.getElementById('deviceUsageChart');
522
+ new Chart(deviceUsage, {
523
+ type: 'bar',
524
+ data: {
525
+ labels: ['质谱仪', '离心机', '光谱仪', '电镜', '显微镜', '核磁共振'],
526
+ datasets: [{
527
+ label: '使用次数',
528
+ data: [82, 96, 63, 78, 57, 45],
529
+ backgroundColor: [
530
+ 'rgba(24, 144, 255, 0.7)',
531
+ 'rgba(65, 176, 255, 0.7)',
532
+ 'rgba(106, 198, 255, 0.7)',
533
+ 'rgba(146, 217, 255, 0.7)',
534
+ 'rgba(186, 236, 255, 0.7)',
535
+ 'rgba(226, 246, 255, 0.7)'
536
+ ],
537
+ borderRadius: 4
538
+ }]
539
+ },
540
+ options: {
541
+ responsive: true,
542
+ maintainAspectRatio: false,
543
+ plugins: {
544
+ legend: {
545
+ display: false
546
+ }
547
+ },
548
+ scales: {
549
+ y: {
550
+ beginAtZero: true,
551
+ grid: {
552
+ color: 'rgba(0, 0, 0, 0.05)'
553
+ }
554
+ },
555
+ x: {
556
+ grid: {
557
+ display: false
558
+ }
559
+ }
560
+ }
561
+ }
562
+ });
563
+ });
564
+ </script>
565
+ <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/lab5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
566
+ </html>