Spaces:

maomaobj
/

lab3

Running

lab3 / index.html

设计一个科研机构用的管理系统页面，系统名称为“实验室管理系统”，模块为“实验协同规划设计”。页面风格专业简洁，蓝白色调，包含顶部页头、左侧导航栏和右侧主内容区。 ### 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

9284c20 verified 6 months ago

raw

history blame contribute delete

39.1 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>实验室管理系统 - 实验协同规划设计</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#1E40AF',
	secondary: '#3B82F6',
	accent: '#93C5FD',
	light: '#EFF6FF',
	dark: '#1E293B',
	success: '#22C55E',
	warning: '#F59E0B',
	danger: '#EF4444'
	}
	}
	}
	}
	</script>
	<style>
	.task-node {
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	.task-node:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	}
	.vertical-divider {
	height: 20px;
	border-left: 2px dotted #cbd5e1;
	margin: 0 15px;
	}
	.scrollable-table {
	max-height: 300px;
	overflow-y: auto;
	}
	.scrollable-table thead {
	position: sticky;
	top: 0;
	background-color: white;
	z-index: 10;
	}
	.grid-dot-bg {
	background-size: 30px 30px;
	background-image: radial-gradient(circle, #cbd5e1 1px, rgba(0, 0, 0, 0) 1px);
	}
	</style>
	</head>
	<body class="h-screen flex flex-col bg-gray-100">
	<!-- 顶部页头 -->
	<header class="bg-primary text-white py-4 px-6 flex items-center justify-between shadow-md">
	<div class="flex items-center">
	<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"
	class="w-8 h-8 mr-3">
	<h1 class="text-xl font-bold">实验室管理系统</h1>
	</div>
	<h2 class="text-lg font-semibold">实验协同规划设计</h2>
	<div class="relative" id="userDropdown">
	<div class="flex items-center cursor-pointer">
	<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"
	class="w-8 h-8 rounded-full bg-secondary">
	<span class="ml-2">admin</span>
	<i class="fas fa-chevron-down ml-2 text-sm"></i>
	</div>
	<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 text-dark hidden z-50" id="dropdownMenu">
	<a href="#" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-user mr-2"></i>个人中心</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-100"><i class="fas fa-cog mr-2"></i>系统设置</a>
	<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>
	</div>
	</div>
	</header>

	<!-- 主内容区域 -->
	<div class="flex flex-1 overflow-hidden">
	<!-- 左侧导航栏 -->
	<aside class="w-64 bg-gray-800 text-white flex-shrink-0 overflow-y-auto">
	<nav class="py-4">
	<ul>
	<li>
	<a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-calendar-alt mr-2"></i>实验计划管理</a>
	</li>
	<li>
	<a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-tasks mr-2"></i>实验任务管理</a>
	</li>
	<li class="bg-primary">
	<a href="#" class="block py-3 px-6"><i class="fas fa-project-diagram mr-2"></i>实验协同规划设计</a>
	</li>
	<li>
	<a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-flask mr-2"></i>实验设备管理</a>
	</li>
	<li>
	<a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-map-marked-alt mr-2"></i>实验场地管理</a>
	</li>
	<li class="mt-6">
	<a href="#" class="block py-3 px-6 hover:bg-gray-700"><i class="fas fa-cog mr-2"></i>系统设置</a>
	</li>
	</ul>
	</nav>
	</aside>

	<!-- 右侧主内容区 -->
	<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
	<!-- 顶部信息卡 -->
	<div class="bg-white rounded-lg shadow-md p-5 mb-6 border-l-4 border-success">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<p class="text-gray-600"><i class="fas fa-hashtag mr-2"></i>实验任务编号</p>
	<p class="font-semibold">TASK-20250701-001</p>
	</div>
	<div>
	<p class="text-gray-600"><i class="fas fa-flask mr-2"></i>实验名称</p>
	<p class="font-semibold">高温应力测试任务</p>
	</div>
	<div>
	<p class="text-gray-600"><i class="fas fa-cube mr-2"></i>所属型号</p>
	<p class="font-semibold">XJ-78</p>
	</div>
	<div>
	<p class="text-gray-600"><i class="fas fa-tag mr-2"></i>实验类别</p>
	<p class="font-semibold">环境</p>
	</div>
	<div>
	<p class="text-gray-600"><i class="fas fa-calendar-day mr-2"></i>实验时间</p>
	<p class="font-semibold">2025-07-01 至 2025-07-20</p>
	</div>
	<div>
	<p class="text-gray-600"><i class="fas fa-circle mr-2"></i>状态</p>
	<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
	<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>进行中
	</span>
	</div>
	</div>
	</div>

	<!-- 任务结构设计模块 -->
	<div class="bg-white rounded-lg shadow-md p-5 mb-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-bold text-primary"><i class="fas fa-sitemap mr-2"></i>实验任务结构设计</h3>
	<div class="space-x-2">
	<button class="btn-template px-3 py-1.5 bg-secondary text-white rounded-md hover:bg-blue-600">
	<i class="fas fa-save mr-1"></i>保存为模板
	</button>
	<button class="btn-template px-3 py-1.5 bg-accent text-primary rounded-md hover:bg-blue-200">
	<i class="fas fa-file-import mr-1"></i>从模板导入
	</button>
	</div>
	</div>
	<div class="grid-dot-bg rounded-lg p-4">
	<div class="flex">
	<div class="relative">
	<!-- 任务节点 -->
	<div class="task-node bg-white rounded-lg border border-primary shadow p-4 w-60 text-center cursor-pointer">
	<div class="font-bold">高温应力测试</div>
	<div class="text-sm text-gray-500">负责人: 李明</div>
	<div class="text-xs mt-1 text-cyan-600">2025-07-01 至 2025-07-20</div>
	</div>
	<!-- 连接线 -->
	<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	</div>
	</div>

	<!-- 子任务行 -->
	<div class="flex justify-center mt-4">
	<div class="flex">
	<div class="relative">
	<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	<div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
	<div class="font-bold">前期准备</div>
	<div class="text-sm text-gray-500">负责人: 张伟</div>
	<div class="text-xs mt-1 text-cyan-600">2025-07-01 至 2025-07-05</div>
	</div>
	<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	</div>
	</div>
	<div class="vertical-divider"></div>
	<div class="relative">
	<div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
	<div class="font-bold">设备调试</div>
	<div class="text-sm text-gray-500">负责人: 王磊</div>
	<div class="text-xs mt-1 text-cyan-600">2025-07-03 至 2025-07-07</div>
	</div>
	<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	</div>
	<div class="vertical-divider"></div>
	<div class="relative">
	<div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
	<div class="font-bold">测试执行</div>
	<div class="text-sm text-gray-500">负责人: 赵敏</div>
	<div class="text-xs mt-1 text-cyan-600">2025-07-08 至 2025-07-15</div>
	</div>
	<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	</div>
	<div class="vertical-divider"></div>
	<div class="relative">
	<div class="task-node bg-white rounded-lg border border-blue-300 shadow p-4 w-56 text-center cursor-pointer">
	<div class="font-bold">数据分析</div>
	<div class="text-sm text-gray-500">负责人: 孙芳</div>
	<div class="text-xs mt-1 text-cyan-600">2025-07-16 至 2025-07-20</div>
	</div>
	<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0.5 h-4 bg-primary"></div>
	</div>
	</div>

	<!-- 第三级子任务 -->
	<div class="flex justify-center mt-4 mb-4">
	<div class="flex space-x-8">
	<div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
	<div>设备采购</div>
	<div class="text-xs text-gray-500">预计: 3天</div>
	</div>
	<div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
	<div>场地布置</div>
	<div class="text-xs text-gray-500">预计: 2天</div>
	</div>
	<div class="task-node bg-white rounded-lg shadow p-3 w-40 text-center cursor-pointer">
	<div>材料准备</div>
	<div class="text-xs text-gray-500">预计: 3天</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 任务操作按钮组 -->
	<div class="flex justify-center mt-8 gap-2">
	<button class="px-3 py-1.5 bg-green-100 text-green-700 rounded-md hover:bg-green-200">
	<i class="fas fa-plus mr-1"></i>新增子任务
	</button>
	<button class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200">
	<i class="fas fa-link mr-1"></i>前置任务
	</button>
	<button class="px-3 py-1.5 bg-indigo-100 text-indigo-700 rounded-md hover:bg-indigo-200">
	<i class="fas fa-link mr-1"></i>后置任务
	</button>
	<button class="px-3 py-1.5 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200">
	<i class="fas fa-arrow-up mr-1"></i>升级
	</button>
	<button class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded-md hover:bg-orange-200">
	<i class="fas fa-arrow-down mr-1"></i>降级
	</button>
	<button class="px-3 py-1.5 bg-red-100 text-red-700 rounded-md hover:bg-red-200">
	<i class="fas fa-trash mr-1"></i>删除
	</button>
	</div>
	</div>

	<!-- 可折叠的网格布局 -->
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- 实验人员规划模块 -->
	<div class="bg-white rounded-lg shadow-md p-5 col-span-1">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-bold text-primary"><i class="fas fa-users mr-2"></i>实验人员规划</h3>
	<button class="btn-template px-3 py-1.5 bg-success text-white rounded-md hover:bg-green-600">
	<i class="fas fa-user-plus mr-1"></i>添加人员
	</button>
	</div>
	<div class="scrollable-table">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-blue-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属部门</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">李明</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">负责人</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">材料实验室</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<select class="px-2 py-1 rounded-md border border-gray-300">
	<option>全权限</option>
	<option selected>可编辑</option>
	<option>只读</option>
	</select>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">张伟</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">实验员</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">测试部</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<select class="px-2 py-1 rounded-md border border-gray-300">
	<option>全权限</option>
	<option selected>可编辑</option>
	<option>只读</option>
	</select>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">王磊</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">观察员</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">质量部</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<select class="px-2 py-1 rounded-md border border-gray-300">
	<option>全权限</option>
	<option>可编辑</option>
	<option selected>只读</option>
	</select>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">赵敏</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">实验员</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">测试部</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<select class="px-2 py-1 rounded-md border border-gray-300">
	<option>全权限</option>
	<option selected>可编辑</option>
	<option>只读</option>
	</select>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- 实验件选择模块 -->
	<div class="bg-white rounded-lg shadow-md p-5 col-span-1">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-bold text-primary"><i class="fas fa-box-open mr-2"></i>实验件选择</h3>
	<div>
	<input type="text" placeholder="搜索实验件..." class="px-3 py-1.5 border rounded-md mr-2">
	<button class="btn-template px-3 py-1.5 bg-primary text-white rounded-md hover:bg-blue-700">
	<i class="fas fa-check mr-1"></i>确认选择
	</button>
	</div>
	</div>
	<div class="scrollable-table">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-blue-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	<input type="checkbox" class="rounded">
	</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验件编号</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">
	<input type="checkbox" class="rounded">
	</td>
	<td class="px-4 py-3 whitespace-nowrap">SP-2025-078</td>
	<td class="px-4 py-3 whitespace-nowrap">高温传感器</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">
	<input type="checkbox" class="rounded" checked>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">SP-2025-101</td>
	<td class="px-4 py-3 whitespace-nowrap">受力测试板</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">
	<input type="checkbox" class="rounded">
	</td>
	<td class="px-4 py-3 whitespace-nowrap">SP-2025-045</td>
	<td class="px-4 py-3 whitespace-nowrap">高温保护罩</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">借出</span>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">
	<input type="checkbox" class="rounded" checked>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">SP-2025-112</td>
	<td class="px-4 py-3 whitespace-nowrap">应力检测装置</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">可用</span>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- 实验资源配置模块 -->
	<div class="bg-white rounded-lg shadow-md p-5 col-span-1">
	<h3 class="text-lg font-bold text-primary mb-4"><i class="fas fa-server mr-2"></i>实验资源配置</h3>

	<div class="mb-6">
	<h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-microchip mr-2"></i>可用设备</h4>
	<div class="scrollable-table">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-blue-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">校验有效期</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">高温试验箱</td>
	<td class="px-4 py-3 whitespace-nowrap">DEV-202</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">2026-05-31</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">应力测试仪</td>
	<td class="px-4 py-3 whitespace-nowrap">DEV-309</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">待校准</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap text-amber-600">2025-08-15</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">数据采集器</td>
	<td class="px-4 py-3 whitespace-nowrap">DEV-456</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">正常</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">2026-03-10</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">热成像仪</td>
	<td class="px-4 py-3 whitespace-nowrap">DEV-521</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">维护中</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap text-gray-400">2025-11-20</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div>
	<h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-map-pin mr-2"></i>可用场地</h4>
	<div class="scrollable-table">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-blue-50">
	<tr>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">场地名称</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">容量</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
	<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支持类型</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">高温实验室 A</td>
	<td class="px-4 py-3 whitespace-nowrap">4 人</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">空闲</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">高温、应力</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">环境测试大厅</td>
	<td class="px-4 py-3 whitespace-nowrap">10 人</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">空闲</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">综合环境</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap">安全实验区 B</td>
	<td class="px-4 py-3 whitespace-nowrap">6 人</td>
	<td class="px-4 py-3 whitespace-nowrap">
	<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">使用中</span>
	</td>
	<td class="px-4 py-3 whitespace-nowrap">安全实验</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- 执行时间与交付物设计模块 -->
	<div class="bg-white rounded-lg shadow-md p-5 col-span-1">
	<h3 class="text-lg font-bold text-primary mb-4"><i class="fas fa-clipboard-list mr-2"></i>执行时间与交付物设计</h3>

	<div class="mb-6">
	<h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-clock mr-2"></i>任务时间安排</h4>
	<div class="space-y-3">
	<div class="flex items-center">
	<div class="w-1/5 font-medium">前期准备</div>
	<div class="w-4/5 flex items-center">
	<input type="date" class="p-1.5 border rounded mr-2" value="2025-07-01">
	<span class="mx-1">至</span>
	<input type="date" class="p-1.5 border rounded ml-2" value="2025-07-05">
	<span class="mx-2 text-gray-500">(5天)</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-1/5 font-medium">设备调试</div>
	<div class="w-4/5 flex items-center">
	<input type="date" class="p-1.5 border rounded mr-2" value="2025-07-03">
	<span class="mx-1">至</span>
	<input type="date" class="p-1.5 border rounded ml-2" value="2025-07-07">
	<span class="mx-2 text-gray-500">(5天)</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-1/5 font-medium">测试执行</div>
	<div class="w-4/5 flex items-center">
	<input type="date" class="p-1.5 border rounded mr-2" value="2025-07-08">
	<span class="mx-1">至</span>
	<input type="date" class="p-1.5 border rounded ml-2" value="2025-07-15">
	<span class="mx-2 text-gray-500">(8天)</span>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h4 class="font-semibold text-gray-700 mb-3"><i class="fas fa-file-alt mr-2"></i>交付物配置</h4>
	<div class="space-y-3">
	<div class="flex items-start bg-blue-50 p-3 rounded-md">
	<div class="flex-1">
	<div class="font-medium">高温应力测试报告</div>
	<div class="text-sm text-gray-600">详细记录测试结果与分析</div>
	</div>
	<div class="text-right">
	<div class="font-medium">负责人: 孙芳</div>
	<div class="text-sm text-gray-600">截止: 2025-07-22</div>
	</div>
	</div>
	<div class="flex items-start bg-blue-50 p-3 rounded-md">
	<div class="flex-1">
	<div class="font-medium">测试原始数据包</div>
	<div class="text-sm text-gray-600">原始测试数据及处理过程</div>
	</div>
	<div class="text-right">
	<div class="font-medium">负责人: 王磊</div>
	<div class="text-sm text-gray-600">截止: 2025-07-18</div>
	</div>
	</div>
	</div>
	<button class="mt-3 px-3 py-1.5 bg-primary text-white rounded-md hover:bg-blue-700">
	<i class="fas fa-plus mr-1"></i>添加交付物
	</button>
	</div>
	</div>
	</div>
	</main>
	</div>

	<!-- 底部操作栏 -->
	<footer class="py-4 px-6 bg-white border-t flex justify-between">
	<button class="px-5 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
	<i class="fas fa-arrow-left mr-2"></i>返回任务总览
	</button>
	<button class="px-6 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">
	<i class="fas fa-save mr-2"></i>保存协同规划
	</button>
	</footer>

	<script>
	// 用户下拉菜单
	const dropdownToggle = document.getElementById('userDropdown');
	const dropdownMenu = document.getElementById('dropdownMenu');

	dropdownToggle.addEventListener('click', function() {
	dropdownMenu.classList.toggle('hidden');
	});

	// 关闭下拉菜单（点击其他地方时）
	window.addEventListener('click', function(event) {
	if (!dropdownToggle.contains(event.target) &&
	!dropdownMenu.contains(event.target) &&
	!dropdownMenu.classList.contains('hidden')) {
	dropdownMenu.classList.add('hidden');
	}
	});

	// 任务节点点击效果
	document.querySelectorAll('.task-node').forEach(node => {
	node.addEventListener('click', function() {
	// 移除现有选中状态
	document.querySelectorAll('.task-node').forEach(n => {
	n.classList.remove('border-2', 'border-primary');
	});
	// 添加选中状态
	this.classList.add('border-2', 'border-primary');

	// 在实际应用中，这里会打开设置窗口
	console.log('打开任务节点设置');
	});
	});
	</script>
	<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>
	</html>