Spaces:
Running
Running
| <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"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .equipment-status-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-color: #f0f4f8; | |
| border-radius: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-badge { | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 1rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .alert-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- 侧边栏 --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 flex items-center border-b border-blue-700"> | |
| <i class="fas fa-hospital-alt text-2xl mr-3"></i> | |
| <h1 class="text-xl font-bold">医疗设备管理系统</h1> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <nav class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">设备管理</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded bg-blue-700 text-white"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span>设备总览</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-procedures mr-3"></i> | |
| <span>设备台账</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-shopping-cart mr-3"></i> | |
| <span>采购计划</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-warehouse mr-3"></i> | |
| <span>入库管理</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-tools mr-3"></i> | |
| <span>维护保养</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-trash-alt mr-3"></i> | |
| <span>报废管理</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">物联网监控</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-map-marker-alt mr-3"></i> | |
| <span>实时定位</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-heartbeat mr-3"></i> | |
| <span>状态监控</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-bell mr-3"></i> | |
| <span>预警中心</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase tracking-wider text-blue-300 mb-3">数据分析</h3> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>使用效益</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| <span>报表中心</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-blue-700"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">张医生</p> | |
| <p class="text-xs text-blue-300">设备管理部</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 主内容区 --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- 顶部导航 --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div class="flex items-center"> | |
| <button class="mr-4 text-gray-500"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="搜索设备、科室..." class="pl-10 pr-4 py-2 border rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 relative"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-cog text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主要内容 --> | |
| <main class="p-6"> | |
| <!-- 仪表盘概览 --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">设备总览</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- 设备总数卡片 --> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">设备总数</p> | |
| <p class="text-3xl font-bold mt-2">1,248</p> | |
| <p class="text-sm text-green-500 mt-1">+12% 上月</p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-procedures text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 运行中设备卡片 --> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">运行中设备</p> | |
| <p class="text-3xl font-bold mt-2">986</p> | |
| <p class="text-sm text-green-500 mt-1">79% 使用率</p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 预警设备卡片 --> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">预警设备</p> | |
| <p class="text-3xl font-bold mt-2">24</p> | |
| <p class="text-sm text-red-500 mt-1">需立即处理</p> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 设备价值卡片 --> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">设备总价值</p> | |
| <p class="text-3xl font-bold mt-2">¥3.2亿</p> | |
| <p class="text-sm text-blue-500 mt-1">年度折旧 ¥2400万</p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-yen-sign text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表和地图 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- 设备状态分布 --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">设备状态分布</h3> | |
| <select class="border rounded px-2 py-1 text-sm"> | |
| <option>本月</option> | |
| <option>本季度</option> | |
| <option>本年度</option> | |
| </select> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="statusChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 设备使用率趋势 --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">设备使用率趋势</h3> | |
| <select class="border rounded px-2 py-1 text-sm"> | |
| <option>最近7天</option> | |
| <option>最近30天</option> | |
| <option>最近90天</option> | |
| </select> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="usageChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 设备实时位置 --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-1"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">设备实时位置</h3> | |
| <button class="text-blue-600 text-sm font-medium">刷新位置</button> | |
| </div> | |
| <div class="map-container"> | |
| <div class="absolute top-4 left-4 z-10 bg-white p-2 rounded shadow"> | |
| <i class="fas fa-map-marker-alt text-red-500"></i> | |
| <span class="ml-1 text-sm">设备位置</span> | |
| </div> | |
| <!-- 这里应该是地图实现，用背景图模拟 --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <img src="https://maps.googleapis.com/maps/api/staticmap?center=31.2304,121.4737&zoom=15&size=600x400&maptype=roadmap&markers=color:red%7C31.2304,121.4737&key=YOUR_API_KEY" alt="Map" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-4 left-4 bg-white p-2 rounded shadow"> | |
| <div class="flex items-center"> | |
| <span class="equipment-status-indicator bg-green-500"></span> | |
| <span class="text-sm mr-2">运行中</span> | |
| <span class="equipment-status-indicator bg-yellow-500"></span> | |
| <span class="text-sm mr-2">待机</span> | |
| <span class="equipment-status-indicator bg-red-500"></span> | |
| <span class="text-sm">故障</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 预警信息和设备列表 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- 预警信息 --> | |
| <div class="bg-white rounded-lg shadow lg:col-span-1"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-semibold text-lg flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i> | |
| 设备预警 | |
| </h3> | |
| </div> | |
| <div class="divide-y"> | |
| <!-- 预警条目1 --> | |
| <div class="p-4 hover:bg-red-50 cursor-pointer alert-pulse"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-heartbeat text-red-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">MRI设备异常</p> | |
| <p class="text-sm text-gray-500 mt-1">设备编号: MRI-0032</p> | |
| <p class="text-sm text-red-500 mt-1">温度过高，建议立即检查</p> | |
| <p class="text-xs text-gray-400 mt-1">10分钟前</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 预警条目2 --> | |
| <div class="p-4 hover:bg-yellow-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-battery-quarter text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">呼吸机电量低</p> | |
| <p class="text-sm text-gray-500 mt-1">设备编号: VENT-0456</p> | |
| <p class="text-sm text-yellow-600 mt-1">剩余电量20%，请及时充电</p> | |
| <p class="text-xs text-gray-400 mt-1">25分钟前</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 预警条目3 --> | |
| <div class="p-4 hover:bg-blue-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-wrench text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">CT设备维护到期</p> | |
| <p class="text-sm text-gray-500 mt-1">设备编号: CT-0078</p> | |
| <p class="text-sm text-blue-500 mt-1">距离上次维护已过90天</p> | |
| <p class="text-xs text-gray-400 mt-1">1小时前</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 查看全部 --> | |
| <div class="p-4 text-center"> | |
| <a href="#" class="text-blue-600 text-sm font-medium">查看全部预警 (24)</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 设备列表 --> | |
| <div class="bg-white rounded-lg shadow lg:col-span-2"> | |
| <div class="p-4 border-b flex items-center justify-between"> | |
| <h3 class="font-semibold text-lg">设备列表</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm">新增设备</button> | |
| <button class="px-3 py-1 border rounded text-sm">导出</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <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> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <!-- 设备行1 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MRI-0032</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">磁共振成像系统</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-red-100 text-red-800"> | |
| <span class="equipment-status-indicator bg-red-500"></span> | |
| 故障 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:32</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">详情</button> | |
| <button class="text-red-600 hover:text-red-900">报修</button> | |
| </td> | |
| </tr> | |
| <!-- 设备行2 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CT-0078</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">计算机断层扫描仪</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-green-100 text-green-800"> | |
| <span class="equipment-status-indicator bg-green-500"></span> | |
| 运行中 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 15:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">详情</button> | |
| <button class="text-yellow-600 hover:text-yellow-900">维护</button> | |
| </td> | |
| </tr> | |
| <!-- 设备行3 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">VENT-0456</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">呼吸机</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-yellow-100 text-yellow-800"> | |
| <span class="equipment-status-indicator bg-yellow-500"></span> | |
| 待机 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 16:20</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">详情</button> | |
| <button class="text-green-600 hover:text-green-900">启用</button> | |
| </td> | |
| </tr> | |
| <!-- 设备行4 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">US-0123</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">超声诊断仪</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-green-100 text-green-800"> | |
| <span class="equipment-status-indicator bg-green-500"></span> | |
| 运行中 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 17:05</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">详情</button> | |
| <button class="text-yellow-600 hover:text-yellow-900">维护</button> | |
| </td> | |
| </tr> | |
| <!-- 设备行5 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ECG-0089</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">心电图机</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-blue-100 text-blue-800"> | |
| <span class="equipment-status-indicator bg-blue-500"></span> | |
| 维护中 | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 09:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">详情</button> | |
| <button class="text-gray-600 hover:text-gray-900">跟踪</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| 显示 <span class="font-medium">1</span> 至 <span class="font-medium">5</span> 条，共 <span class="font-medium">1,248</span> 条记录 | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 border rounded text-sm bg-gray-100">上一页</button> | |
| <button class="px-3 py-1 border rounded text-sm bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-sm">2</button> | |
| <button class="px-3 py-1 border rounded text-sm">3</button> | |
| <button class="px-3 py-1 border rounded text-sm">下一页</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- 模态框 - 设备详情 --> | |
| <div id="equipmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-auto"> | |
| <div class="p-6 border-b flex items-center justify-between"> | |
| <h3 class="text-xl font-semibold">设备详情 - MRI-0032</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">基本信息</h4> | |
| <div class="space-y-2"> | |
| <p><span class="text-gray-500">设备名称:</span> 磁共振成像系统</p> | |
| <p><span class="text-gray-500">设备型号:</span> SIGNA Pioneer 3.0T</p> | |
| <p><span class="text-gray-500">生产厂商:</span> GE医疗</p> | |
| <p><span class="text-gray-500">购入日期:</span> 2020-05-12</p> | |
| <p><span class="text-gray-500">购入价格:</span> ¥12,800,000</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">使用信息</h4> | |
| <div class="space-y-2"> | |
| <p><span class="text-gray-500">所属科室:</span> 放射科</p> | |
| <p><span class="text-gray-500">责任人:</span> 李医生</p> | |
| <p><span class="text-gray-500">使用状态:</span> <span class="status-badge bg-red-100 text-red-800">故障</span></p> | |
| <p><span class="text-gray-500">累计使用:</span> 2,456小时</p> | |
| <p><span class="text-gray-500">上次维护:</span> 2023-05-20</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">物联网数据</h4> | |
| <div class="space-y-2"> | |
| <p><span class="text-gray-500">当前温度:</span> <span class="text-red-600">42°C (过高)</span></p> | |
| <p><span class="text-gray-500">磁场强度:</span> 3.0T</p> | |
| <p><span class="text-gray-500">液氦水平:</span> 85%</p> | |
| <p><span class="text-gray-500">最后通信:</span> 2023-06-15 14:32</p> | |
| <p><span class="text-gray-500">设备位置:</span> 放射科3号机房</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">维护记录</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <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> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-20</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">定期保养</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王工程师</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">系统校准，液氦补充，线圈检查</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-20</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-02-15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">故障维修</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张工程师</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">梯度线圈更换，系统重启</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-15</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022-11-10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">定期保养</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王工程师</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">系统软件升级，硬件检查</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-02-10</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">效益分析</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-4 rounded border"> | |
| <h5 class="text-sm font-medium text-gray-700 mb-3">使用频率</h5> | |
| <div class="chart-container"> | |
| <canvas id="usageFrequencyChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded border"> | |
| <h5 class="text-sm font-medium text-gray-700 mb-3">收益分析</h5> | |
| <div class="chart-container"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t flex justify-end"> | |
| <button class="px-4 py-2 border rounded mr-2">打印报告</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">创建维修工单</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // 初始化图表 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 设备状态分布图 | |
| const statusCtx = document.getElementById('statusChart').getContext('2d'); | |
| const statusChart = new Chart(statusCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['运行中', '待机', '维护中', '故障', '闲置'], | |
| datasets: [{ | |
| data: [786, 200, 150, 24, 88], | |
| backgroundColor: [ | |
| '#10B981', | |
| '#F59E0B', | |
| '#3B82F6', | |
| '#EF4444', | |
| '#9CA3AF' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| // 设备使用率趋势图 | |
| const usageCtx = document.getElementById('usageChart').getContext('2d'); | |
| const usageChart = new Chart(usageCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['6月9日', '6月10日', '6月11日', '6月12日', '6月13日', '6月14日', '6月15日'], | |
| datasets: [{ | |
| label: '使用率(%)', | |
| data: [72, 75, 78, 80, 82, 79, 76], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| fill: true, | |
| tension: 0.3 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 50, | |
| max: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // 模态框中的图表 | |
| const usageFrequencyCtx = document.getElementById('usageFrequencyChart').getContext('2d'); | |
| const usageFrequencyChart = new Chart(usageFrequencyCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['1月', '2月', '3月', '4月', '5月', '6月'], | |
| datasets: [{ | |
| label: '使用次数', | |
| data: [120, 135, 148, 160, 155, 90], | |
| backgroundColor: '#10B981' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); | |
| const revenueChart = new Chart(revenueCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['1月', '2月', '3月', '4月', '5月', '6月'], | |
| datasets: [{ | |
| label: '收入(万元)', | |
| data: [28, 32, 35, 38, 36, 20], | |
| borderColor: '#8B5CF6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| fill: true, | |
| tension: 0.3 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // 模态框交互 | |
| const modal = document.getElementById('equipmentModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const detailButtons = document.querySelectorAll('button:contains("详情")'); | |
| // 模拟点击详情按钮打开模态框 | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.textContent.includes('详情')) { | |
| button.addEventListener('click', () => { | |
| modal.classList.remove('hidden'); | |
| }); | |
| } | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| modal.classList.add('hidden'); | |
| }); | |
| // 点击模态框外部关闭 | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| } | |
| }); | |
| // 模拟设备状态变化 | |
| setInterval(() => { | |
| const statusBadges = document.querySelectorAll('.status-badge'); | |
| statusBadges.forEach(badge => { | |
| if (Math.random() > 0.95) { | |
| if (badge.textContent.includes('运行中')) { | |
| badge.innerHTML = '<span class="equipment-status-indicator bg-red-500"></span>故障'; | |
| badge.className = 'status-badge bg-red-100 text-red-800'; | |
| } else if (badge.textContent.includes('待机')) { | |
| badge.innerHTML = '<span class="equipment-status-indicator bg-green-500"></span>运行中'; | |
| badge.className = 'status-badge bg-green-100 text-green-800'; | |
| } | |
| } | |
| }); | |
| }, 5000); | |
| }); | |
| </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=peterpancn/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |