Hugging Face's logo

Spaces:
maomaobj
/
lab4
Running

App Files Community
lab4 / index.html
maomaobj's picture
maomaobj
设计一个实验室管理系统的后台页面，模块名称为“实验设备管理子系统”。页面结构包含顶部页头、左侧导航栏、右侧为主内容区。页面风格专业、扁平化、蓝白色调。 --- ### 1. 顶部页头 - 左侧显示系统名称：“实验室管理系统” - 中部模块标题：“实验设备管理子系统” - 右上角显示用户信息：“admin”，带头像和下拉菜单（含退出登录） - 页头为深蓝色背景，白色字体 --- ### 2. 左侧导航菜单（竖向排列，灰色背景） 菜单项包括： - 实验计划管理 - 实验任务管理 - 实验协同规划设计 - ✅ 实验设备管理（当前高亮） - 实验场地管理 - 系统设置 --- ### 3. 主工作区（右侧页面）：实验设备管理功能界面 #### 3.1 页面顶部操作栏 - 页面标题：“实验设备总览与台账管理” - 操作按钮： - “+ 添加设备”（蓝色主按钮） - “批量导入设备” - “导出设备列表” - 搜索框 + 放大镜图标 --- #### 3.2 筛选区（横向排列） - 设备分类：下拉框（仪器、工装、传感器、平台、易耗品） - 所属部门：下拉框 - 当前状态：多选（在用、空闲、维修中、校验中、报废） - 计量状态筛选：是否到期 - 查询按钮（蓝色） --- #### 3.3 设备列表区域（表格展示） 字段包括： - 设备编号（唯一） - 设备名称 - 型号/规格 - 所属部门 - 当前状态（彩色标签） - 启用日期 - 最近计量时间 - 校验有效期 - 使用次数 - 操作（查看 / 编辑 / 维修 / 报废） 示例数据： - DEV-001 / 精密温控箱 / WT-X100 / 环境试验部 / 🟢 在用 / 2022-05-01 / 2024-07-01 / 2025-07-01 / 18次 - DEV-023 / 电磁兼容测试仪 / EMC-8K / 电测组 / 🔴 校验中 / 2023-01-01 / 2025-01-15 / 2026-01-15 / 42次 --- #### 3.4 设备状态看板（可视化展示区域，位于列表上方或右侧） - 图形方式展示设备状态分布： - 仪表盘或饼图显示当前设备状态占比（在用、空闲、维修中等） - 条形图展示各部门设备使用数量、故障次数 - 提供计量到期提醒条数、维修中设备数量高亮显示 --- #### 3.5 设备详情弹窗（点击“查看”按钮弹出） 展示完整设备信息： - 基本信息：编号、名称、规格、分类、状态、所属部门、启用时间 - 计量信息：周期、最近校验时间、下次提醒时间 - 保养信息：周期设置、维修记录、保养记录（时间、人员、内容） - 使用日志：被哪个任务使用、时间段、使用人 --- #### 3.6 分页器 - 位于列表底部，支持每页显示10/20/50条记录 --- ### 页面样式要求： - 所有状态使用彩色标签区分（绿色=在用、灰色=空闲、红色=维修中、蓝色=校验中、黑色=报废） - 图标统一风格，支持图形化与表格混合展示 - 支持响应式布局，可适配大屏设备管理后台场景 - Initial Deployment
2e64e9a verified
raw
history blame contribute delete
47.5 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af',
secondary: '#1d4ed8',
dark: '#0f172a',
light: '#f1f5f9',
status: {
using: '#10b981',
idle: '#64748b',
repairing: '#ef4444',
calibrating: '#3b82f6',
scrapped: '#1e293b'
}
}
}
}
}
</script>
<style type="text/css">
.sidebar-scroll {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.sidebar-scroll::-webkit-scrollbar {
width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
background: #f1f5f9;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 20px;
}
.chart-container {
position: relative;
height: 250px;
width: 100%;
}
.status-badge {
@apply px-2 py-1 rounded-full text-xs font-medium;
}
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.shadow-custom {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.rotate {
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50 h-screen flex flex-col overflow-hidden">
<!-- 顶部页头 -->
<header class="bg-primary text-white p-4 flex items-center justify-between shadow-md sticky top-0 z-50">
<div class="flex items-center space-x-4">
<div class="bg-white bg-opacity-20 p-2 rounded-lg">
<i class="fas fa-flask text-xl"></i>
</div>
<h1 class="text-lg font-semibold">实验室管理系统</h1>
</div>
<div class="text-center">
<h2 class="text-xl font-bold">实验设备管理子系统</h2>
</div>
<div class="flex items-center space-x-4 relative">
<div class="flex items-center space-x-2 cursor-pointer group" id="user-menu">
<div class="bg-blue-200 text-primary rounded-full w-8 h-8 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
<span>admin</span>
<i class="fas fa-chevron-down text-sm transition-transform group-hover:rotate-180"></i>
</div>
<div class="absolute top-12 right-0 w-48 bg-white text-gray-700 p-2 rounded-lg shadow-xl hidden z-50 border border-gray-100" id="dropdown">
<div class="p-2 hover:bg-gray-100 rounded cursor-pointer">
<i class="fas fa-user-circle mr-2"></i>
<span>我的账户</span>
</div>
<div class="p-2 hover:bg-gray-100 rounded cursor-pointer">
<i class="fas fa-cog mr-2"></i>
<span>系统设置</span>
</div>
<div class="p-2 hover:bg-gray-100 rounded cursor-pointer flex items-center text-red-500 border-t border-gray-100 mt-1">
<i class="fas fa-sign-out-alt mr-2"></i>
<span>退出登录</span>
</div>
</div>
</div>
</header>
<div class="flex flex-1 overflow-hidden">
<!-- 左侧导航菜单 -->
<nav id="sidebar" class="bg-gray-100 w-64 py-4 flex-shrink-0 hidden md:flex flex-col sidebar-scroll overflow-y-auto">
<ul class="space-y-1 px-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
<i class="fas fa-calendar-alt w-6 text-center mr-2"></i>
<span>实验计划管理</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
<i class="fas fa-tasks w-6 text-center mr-2"></i>
<span>实验任务管理</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
<i class="fas fa-object-group w-6 text-center mr-2"></i>
<span>实验协同规划设计</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-white bg-primary rounded-lg">
<i class="fas fa-microscope w-6 text-center mr-2"></i>
<span>实验设备管理</span>
<i class="fas fa-check-circle text-xs ml-auto"></i>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
<i class="fas fa-map-marker-alt w-6 text-center mr-2"></i>
<span>实验场地管理</span>
</a>
</li>
<hr class="my-1 border-gray-300">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 hover:bg-gray-200 rounded-lg">
<i class="fas fa-cog w-6 text-center mr-2"></i>
<span>系统设置</span>
</a>
</li>
</ul>
<!-- 移动端侧边栏闭合按钮 -->
<div class="md:hidden mt-auto px-4 pb-4">
<button id="close-menu" class="w-full py-2 bg-gray-200 text-gray-700 rounded-lg">
<i class="fas fa-times mr-2"></i>关闭菜单
</button>
</div>
</nav>
<!-- 右侧主工作区 -->
<main class="flex-1 flex flex-col overflow-hidden">
<!-- 小型屏幕菜单按钮 -->
<div class="md:hidden p-2 bg-gray-100 text-gray-600">
<button id="toggle-menu" class="p-2">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- 3.1 页面顶部操作栏 -->
<div class="p-4 border-b border-gray-200 shadow-sm">
<div class="flex flex-wrap justify-between items-center gap-4">
<h1 class="text-xl font-bold text-gray-800">实验设备总览与台账管理</h1>
<div class="flex flex-wrap gap-2">
<button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center font-medium">
<i class="fas fa-plus mr-2"></i>添加设备
</button>
<button class="border border-blue-500 text-blue-500 hover:bg-blue-50 py-2 px-4 rounded-lg flex items-center">
<i class="fas fa-file-import mr-2"></i>批量导入设备
</button>
<button class="border border-green-500 text-green-500 hover:bg-green-50 py-2 px-4 rounded-lg flex items-center">
<i class="fas fa-file-export mr-2"></i>导出设备列表
</button>
</div>
</div>
<div class="mt-4">
<div class="relative max-w-md">
<input type="text" placeholder="搜索设备..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
<!-- 3.2 筛选区 -->
<div class="p-4 border-b border-gray-200 bg-white shadow-sm">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">设备分类</label>
<select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
<option>全部类型</option>
<option>仪器</option>
<option>工装</option>
<option selected>传感器</option>
<option>平台</option>
<option>易耗品</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">所属部门</label>
<select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
<option>全部部门</option>
<option selected>环境试验部</option>
<option>电测组</option>
<option>材料分析部</option>
<option>化学实验室</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">当前状态</label>
<div class="flex flex-wrap gap-2">
<label class="flex items-center">
<input type="checkbox" checked class="rounded text-status-using focus:ring-status-using">
<span class="ml-1 text-sm text-gray-700">在用</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-status-idle focus:ring-status-idle">
<span class="ml-1 text-sm text-gray-700">空闲</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-status-repairing focus:ring-status-repairing">
<span class="ml-1 text-sm text-gray-700">维修中</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">计量状态</label>
<select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-300">
<option>全部状态</option>
<option selected>已到期</option>
<option>未到期</option>
<option>即将到期</option>
</select>
</div>
<div class="flex items-end">
<button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg w-full flex items-center justify-center">
<i class="fas fa-filter mr-2"></i>查询设备
</button>
</div>
</div>
</div>
<!-- 3.4 设备状态看板 -->
<div class="p-4 bg-white shadow-sm">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="col-span-1 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-gray-800">设备状态总览</h3>
<span class="text-xs text-gray-500">最近更新：10分钟前</span>
</div>
<div class="chart-container mt-4">
<canvas id="statusChart"></canvas>
</div>
</div>
<div class="col-span-1 bg-gradient-to-r from-emerald-50 to-green-50 rounded-xl p-4 border border-green-100">
<h3 class="font-semibold text-gray-800 mb-4">部门使用统计</h3>
<div class="chart-container">
<canvas id="departmentChart"></canvas>
</div>
</div>
<div class="col-span-1 flex flex-col space-y-4">
<div class="bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-100 rounded-xl p-4 flex-1">
<h3 class="font-semibold text-gray-800 mb-2">计量到期提醒</h3>
<div class="flex items-center">
<div class="w-16 h-16 mr-4 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-3xl text-white"></i>
</div>
<div class="flex-1">
<div class="text-3xl font-bold text-amber-600">17台</div>
<div class="text-sm text-gray-600 mt-1">设备将于30天内到期校验</div>
</div>
<button class="text-sm text-blue-600 font-medium">查看清单</button>
</div>
</div>
<div class="bg-gradient-to-r from-rose-50 to-pink-50 border border-rose-100 rounded-xl p-4 flex-1">
<h3 class="font-semibold text-gray-800 mb-2">设备维修状况</h3>
<div class="flex items-center">
<div class="w-16 h-16 mr-4 bg-gradient-to-br from-rose-500 to-pink-600 rounded-full flex items-center justify-center">
<i class="fas fa-tools text-3xl text-white"></i>
</div>
<div class="flex-1">
<div class="text-3xl font-bold text-rose-600">9台</div>
<div class="text-sm text-gray-600 mt-1">设备正在维修中</div>
</div>
<button class="text-sm text-blue-600 font-medium">处理</button>
</div>
</div>
</div>
</div>
</div>
<!-- 设备列表区域 -->
<div class="flex-1 overflow-auto">
<div class="min-w-full">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100 sticky top-0 z-10">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备编号</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号/规格</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属部门</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前状态</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">启用日期</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近计量</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">校验有效期</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">使用次数</th>
<th scope="col" class="px-6 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 class="hover:bg-blue-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">精密温控箱</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">WT-X100</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">环境试验部</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge bg-status-using text-white">在用</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022-05-01</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-07-01</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
2025-07-01
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18次</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="1"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
</td>
</tr>
<tr class="bg-yellow-50 hover:bg-yellow-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-009</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">高频示波器</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">OSC-2G</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电测组</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge bg-status-repairing text-white">维修中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2021-09-15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-11-20</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
2024-11-20
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">152次</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="2"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
</td>
</tr>
<tr class="hover:bg-blue-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">电磁兼容测试仪</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EMC-8K</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电测组</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge bg-status-calibrating text-white">校验中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-01</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-01-15</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
2026-01-15
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42次</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="3"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
</td>
</tr>
<tr class="hover:bg-blue-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-048</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">激光测距仪</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">LDM-100Pro</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">材料分析部</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge bg-status-idle text-white">空闲</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-20</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-02-10</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
2025-08-10
</span>
</td>
<td class="px=6 py-4 whitespace-nowrap text-sm text-gray-500">31次</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3 view-btn" data-id="4"><i class="fas fa-eye"></i></button>
<button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-amber-600 hover:text-amber-900"><i class="fas fa-tools"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 分页器 -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">上一页</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">下一页</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">4</span>条，
共 <span class="font-medium">386</span> 条设备记录
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">上一页</span>
<i class="fas fa-chevron-left"></i>
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">下一页</span>
<i class="fas fa-chevron-right"></i>
</a>
</nav>
</div>
</div>
</div>
<!-- 设备详情弹窗 -->
<div id="deviceModal" class="fixed z-50 inset-0 overflow-y-auto modal hidden">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white text-left overflow-hidden shadow-custom rounded-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:max-h-[90vh] w-full overflow-auto" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-gray-50 p-4 flex justify-between items-center border-b">
<h3 class="text-lg font-bold text-gray-800">设备详细信息</h3>
<button id="closeModal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-2 text-gray-700 border-b pb-2">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>基本信息
</h4>
<table class="w-full text-sm text-gray-700">
<tbody>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium w-1/3">设备编号</td>
<td class="py-2" id="device-id">DEV-023</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">设备名称</td>
<td class="py-2" id="device-name">电磁兼容测试仪</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">型号规格</td>
<td class="py-2" id="device-model">EMC-8K</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">设备分类</td>
<td class="py-2">传感器</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">设备状态</td>
<td class="py-2">
<span class="status-badge bg-status-calibrating text-white">校验中</span>
</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">所属部门</td>
<td class="py-2">电测组</td>
</tr>
<tr>
<td class="py-2 font-medium">启用时间</td>
<td class="py-2">2023-01-01</td>
</tr>
</tbody>
</table>
<h4 class="text-lg font-semibold my-4 text-gray-700 border-b pb-2">
<i class="fas fa-ruler text-blue-500 mr-2"></i>计量信息
</h4>
<table class="w-full text-sm text-gray-700">
<tbody>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium w-1/3">计量周期</td>
<td class="py-2">12个月</td>
</tr>
<tr class="border-b border-gray-100">
<td class="py-2 font-medium">最近计量时间</td>
<td class="py-2">2025-01-15</td>
</tr>
<tr>
<td class="py-2 font-medium">下次计量时间</td>
<td class="py-2 font-semibold text-green-600">2026-01-15</td>
</tr>
</tbody>
</table>
</div>
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-2 text-gray-700 border-b pb-2">
<i class="fas fa-tools text-blue-500 mr-2"></i>保养信息
</h4>
<div class="mb-4">
<div class="flex justify-between mb-1">
<span class="text-xs font-medium">保养周期: 6个月</span>
<span class="text-xs text-gray-600">下次保养: 2023-11-01</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-amber-500 h-2 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="bg-gray-50 p-3 rounded-lg max-h-32 overflow-auto">
<div class="border-l-4 border-blue-500 pl-3 mb-3">
<div class="flex justify-between">
<strong>维修记录 #1024</strong>
<span class="text-xs text-gray-500">2023-08-23</span>
</div>
<p class="text-sm mt-1">更换传感器模块，优化接线</p>
<p class="text-xs text-gray-600">工程师: 张工</p>
</div>
<div class="border-l-4 border-green-500 pl-3 mb-3">
<div class="flex justify-between">
<strong>定期保养 #0914</strong>
<span class="text-xs text-gray-500">2023-02-15</span>
</div>
<p class="text-sm mt-1">常规清洁，参数校准</p>
<p class="text-xs text-gray-600">工程师: 李工</p>
</div>
</div>
<h4 class="text-lg font-semibold my-4 text-gray-700 border-b pb-2">
<i class="fas fa-history text-blue-500 mr-2"></i>使用日志
</h4>
<div class="bg-gray-50 p-3 rounded-lg max-h-40 overflow-auto">
<div class="text-sm border-l-2 border-gray-300 pl-3 mb-2">
<div class="flex justify-between">
<span>#23-08-0415</span>
<span class="text-xs text-gray-500">2023-08-21 14:00</span>
</div>
<p class="mt-1">任务: 基站电磁兼容性测试</p>
<p class="text-xs">使用人: 王工程师</p>
</div>
<div class="text-sm border-l-2 border-gray-300 pl-3 mb-2">
<div class="flex justify-between">
<span>#23-07-0322</span>
<span class="text-xs text-gray-500">2023-07-15 09:30</span>
</div>
<p class="mt-1">任务: 信号收发器兼容测试</p>
<p class="text-xs">使用人: 刘工程师</p>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-center">
<button class="bg-primary hover:bg-blue-700 text-white py-2 px-6 rounded-lg mx-2 flex items-center">
<i class="far fa-file-pdf mr-2"></i>导出设备报告
</button>
<button class="border border-primary text-primary hover:bg-blue-50 py-2 px-6 rounded-lg mx-2 flex items-center">
编辑信息
</button>
<button class="border border-red-500 text-red-500 hover:bg-red-50 py-2 px-6 rounded-lg mx-2 flex items-center">
设备报废申请
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 底部信息栏 -->
<footer class="bg-white py-2 border-t border-gray-200 text-center text-sm text-gray-500">
实验室管理系统 © 2023 版权所有 | 当前版本: v2.4.1
</footer>
<script>
// 图表初始化
document.addEventListener('DOMContentLoaded', function() {
// 设备状态分布饼图
const statusChart = new Chart(
document.getElementById('statusChart'),
{
type: 'doughnut',
data: {
labels: ['在用', '空闲', '维修中', '校验中', '报废'],
datasets: [{
data: [155, 79, 9, 11, 8],
backgroundColor: [
'#10b981',
'#64748b',
'#ef4444',
'#3b82f6',
'#1e293b'
],
borderWidth: 0,
}]
},
options: {
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
position: 'right',
labels: {
boxWidth: 12,
padding: 15,
font: {
size: 11
}
}
}
}
}
}
);
// 部门设备分布柱状图
const deptData = {
labels: ['环境试验部', '电测组', '材料分析部', '化学实验室', '结构测试组'],
datasets: [{
label: '设备数量',
data: [42, 56, 27, 35, 22],
backgroundColor: '#1d4ed8',
borderWidth: 0,
borderRadius: 4
}]
};
const deptChart = new Chart(
document.getElementById('departmentChart'),
{
type: 'bar',
data: deptData,
options: {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
display: true,
drawBorder: false
},
ticks: {
precision: 0
}
},
x: {
grid: {
display: false
}
}
},
plugins: {
legend: {
display: false
}
},
barThickness: 'flex',
maxBarThickness: 20
}
}
);
// 页面交互功能
// 用户菜单显示/隐藏
const userMenu = document.getElementById('user-menu');
const dropdown = document.getElementById('dropdown');
userMenu.addEventListener('click', function() {
dropdown.classList.toggle('hidden');
});
// 关闭菜单（点击外部）
document.addEventListener('click', function(event) {
if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
// 设备弹窗控制
const viewButtons = document.querySelectorAll('.view-btn');
const modal = document.getElementById('deviceModal');
const closeModal = document.getElementById('closeModal');
viewButtons.forEach(button => {
button.addEventListener('click', () => {
// 设置设备数据（实际应用中应从API获取）
const deviceId = button.getAttribute('data-id');
// 这里简单模拟不同设备信息
switch(deviceId) {
case '1':
document.getElementById('device-id').textContent = 'DEV-001';
document.getElementById('device-name').textContent = '精密温控箱';
document.getElementById('device-model').textContent = 'WT-X100';
break;
case '2':
document.getElementById('device-id').textContent = 'DEV-009';
document.getElementById('device-name').textContent = '高频示波器';
document.getElementById('device-model').textContent = 'OSC-2G';
break;
case '3':
document.getElementById('device-id').textContent = 'DEV-023';
document.getElementById('device-name').textContent = '电磁兼容测试仪';
document.getElementById('device-model').textContent = 'EMC-8K';
break;
case '4':
document.getElementById('device-id').textContent = 'DEV-048';
document.getElementById('device-name').textContent = '激光测距仪';
document.getElementById('device-model').textContent = 'LDM-100Pro';
break;
}
modal.classList.remove('hidden');
});
});
closeModal.addEventListener('click', () => {
modal.classList.add('hidden');
});
// 移动端侧边栏控制
const toggleMenu = document.getElementById('toggle-menu');
const closeMenuBtn = document.getElementById('close-menu');
const sidebar = document.getElementById('sidebar');
if (toggleMenu) {
toggleMenu.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
sidebar.classList.add('flex', 'absolute', 'left-0', 'top-0', 'h-full', 'z-40');
});
closeMenuBtn.addEventListener('click', () => {
sidebar.classList.add('hidden');
});
}
});
</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/lab4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>