Inicio Explorar Ayuda
Iniciar sesión
gebadi
/
aizhunongDom
5
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

设备监控管理相关

yawuga hace 1 año
padre
9865221c7a
commit
76e2806ccf
Se han modificado 19 ficheros con 14305 adiciones y 1795 borrados
Dividir vista Mostrar estadísticas de diff
  1. BIN
      .DS_Store
  2. 1 1
      index.html
  3. BIN
      pages/.DS_Store
  4. 73 0
      pages/alarm-handler.js
  5. 1043 0
      pages/device-alarm-new.html
  6. 1037 0
      pages/device-alarm-orig.html
  7. 521 202
      pages/device-alarm.html
  8. 1115 0
      pages/device-alarm.html.backup
  9. 1183 0
      pages/device-alarm.html.bak
  10. 892 0
      pages/device-alarm.html.bak2
  11. 1043 0
      pages/device-alarm.html.bak3
  12. 1043 0
      pages/device-alarm.html.bak4
  13. 1203 0
      pages/device-alarm.html.bak5
  14. 1201 27
      pages/device-management.html
  15. 0 816
      pages/device-monitor-content.html
  16. 112 0
      pages/device-monitor-frame.html
  17. 2328 50
      pages/device-monitor.html
  18. 58 0
      pages/test-alarm.html
  19. 1452 699
      pages/visualization-dashboard.html

BIN
.DS_Store
Ver fichero


+ 1 - 1
index.html
Ver fichero 

@@ -343,7 +343,7 @@
 
                     </div>
 
                     <div class="sidebar-item" data-page="device-monitor">
 
                         <i class="iconfont icon-eye"></i>
 
-                        <span>设备监控实时展示</span>
 
+                        <span>设备监控汇总</span>
 
                     </div>
 
                     <div class="sidebar-item" data-page="device-alarm">
 
                         <i class="iconfont icon-warning"></i>

BIN
pages/.DS_Store
Ver fichero


+ 73 - 0
pages/alarm-handler.js
Ver fichero 

@@ -0,0 +1,73 @@
 
+// 全局函数，处理告警按钮点击
 
+function processAlarm(btn) {
 
+    // alert("处理按钮已点击！"); // 移除测试提示
 
+    console.log("处理按钮被点击:", btn);
 
+    
+    try {
 
+        var alarmId = btn.getAttribute('data-id');
 
+        var row = btn.closest('tr');
 
+        
+        // 获取当前行数据
 
+        var alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+        var deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+        var deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+        var deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+        var field = row.querySelector('td:nth-child(6)').textContent;
 
+        var farm = row.querySelector('td:nth-child(7)').textContent;
 
+        var alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+        var alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+        
+        // 填充模态框数据
 
+        var modal = document.getElementById('alarmHandleModal');
 
+        modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+        modal.querySelector('.alarm-time').textContent = alarmTime;
 
+        modal.querySelector('.alarm-content').textContent = alarmContent;
 
+        modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+        modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+        modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+        modal.querySelector('.alarm-field').textContent = field;
 
+        modal.querySelector('.alarm-farm').textContent = farm;
 
+        
+        // 根据告警等级设置背景样式
 
+        var alarmBox = modal.querySelector('.p-4.mb-4');
 
+        
+        if (alarmLevel.includes('紧急')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+        } else if (alarmLevel.includes('警告')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+        } else {
 
+            alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+        }
 
+        
+        // 记录当前操作的行
 
+        modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+        
+        // 重置表单
 
+        document.getElementById('handleResult').value = '1';
 
+        document.getElementById('handleRemark').value = '';
 
+        document.getElementById('fileCount').textContent = '未选择文件';
 
+        document.getElementById('fileList').innerHTML = '';
 
+        if(document.getElementById('notifyRelated')) {
 
+            document.getElementById('notifyRelated').checked = false;
 
+        }
 
+        if(document.getElementById('attachmentUpload')) {
 
+            document.getElementById('attachmentUpload').value = '';
 
+        }
 
+        
+        // 显示模态框
 
+        modal.style.display = 'flex';
 
+    } catch (e) {
 
+        console.error("处理告警出错:", e);
 
+        alert("处理告警出错:" + e.message);
 
+    }
 
+    
+    return false; // 防止表单提交和页面刷新
 
+}
 
+
 
+// 为兼容现有代码而添加的函数
 
+function showAlarmModal(btn) {
 
+    return processAlarm(btn);
 
+}

+ 1043 - 0
pages/device-alarm-new.html
Ver fichero 

@@ -0,0 +1,1043 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 70px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        /* 搜索表单样式 */
 
+        .search-form {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 16px;
 
+            padding: 10px 0;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form {
 
+                grid-template-columns: 1fr;
 
+            }
 
+        }
 
+        
+        .search-form-item {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .search-form-label {
 
+            width: 85px;
 
+            font-size: 14px;
 
+            color: #333;
 
+            text-align: right;
 
+            padding-right: 10px;
 
+            white-space: nowrap;
 
+        }
 
+        
+        .search-form-actions {
 
+            grid-column: span 2;
 
+            display: flex;
 
+            justify-content: center;
 
+            gap: 16px;
 
+            margin-top: 16px;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form-actions {
 
+                grid-column: 1;
 
+            }
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        .date-range {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .date-input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+            width: 100%;
 
+            cursor: pointer;
 
+            background-color: white;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        /* 多选下拉框样式 */
 
+        .select-container {
 
+            position: relative;
 
+            width: 100%;
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+            width: 100%;
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 8px center;
 
+            background-size: 16px;
 
+            padding-right: 32px;
 
+        }
 
+        
+        .select:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select[multiple] {
 
+            padding: 6px;
 
+            overflow-y: auto;
 
+            max-height: 120px;
 
+        }
 
+        
+        /* 多选选项样式 */
 
+        .select[multiple] option {
 
+            padding: 6px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 3px;
 
+            cursor: pointer;
 
+        }
 
+        
+        .select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.2);
 
+            color: #333;
 
+        }
 
+        
+        .select[multiple] option:hover {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+        
+        /* 多选框样式 */
 
+        select[multiple] {
 
+            height: auto;
 
+            min-height: 38px;
 
+            padding: 4px 8px;
 
+        }
 
+        
+        select[multiple] option {
 
+            padding: 4px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 2px;
 
+        }
 
+        
+        select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+            color: #4CAF50;
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        input[type="date"] {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+        }
 
+        
+        input[type="date"]:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="search-form">
 
+                <!-- 设备编号 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备编号:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备名称:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 下拉框多选 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">告警等级:</label>
 
+                    <select class="select flex-1" multiple size="3">
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备类型 下拉框多选 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备类型:</label>
 
+                    <select class="select flex-1" multiple size="4">
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属农场:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属地块:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备状态 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备状态:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 搜索按钮区域 -->
 
+                <div class="search-form-actions">
 
+                    <button class="btn btn-primary">
 
+                        <i class="iconfont icon-search btn-icon"></i>
 
+                        搜索
 
+                    </button>
 
+                    <button class="btn btn-default">
 
+                        <i class="iconfont icon-reload btn-icon"></i>
 
+                        重置
 
+                    </button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理状态</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="1">已处理</option>
 
+                        <option value="2">处理中</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理方式</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="replace">更换设备</option>
 
+                        <option value="repair">维修设备</option>
 
+                        <option value="battery">更换电池</option>
 
+                        <option value="restart">重启设备</option>
 
+                        <option value="other">其他</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理说明</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const viewBtns = document.querySelectorAll('.view-btn');
 
+        
+        // 查看告警详情
 
+        viewBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.addEventListener('click', closeDetailModal);
 
+        cancelDetailBtn.addEventListener('click', closeDetailModal);
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        const handleBtns = document.querySelectorAll('.handle-btn');
 
+        
+        // 处理告警
 
+        handleBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmHandleModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.addEventListener('click', closeHandleModal);
 
+        cancelHandleBtn.addEventListener('click', closeHandleModal);
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+            // 实际应用中应该提交处理信息到后端
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1037 - 0
pages/device-alarm-orig.html
Ver fichero 

@@ -0,0 +1,1037 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 70px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        /* 搜索表单样式 */
 
+        .search-form {
 
+            display: grid;
 
+            grid-template-columns: repeat(4, 1fr);
 
+            gap: 16px;
 
+        }
 
+        
+        @media (max-width: 1200px) {
 
+            .search-form {
 
+                grid-template-columns: repeat(3, 1fr);
 
+            }
 
+        }
 
+        
+        @media (max-width: 992px) {
 
+            .search-form {
 
+                grid-template-columns: repeat(2, 1fr);
 
+            }
 
+        }
 
+        
+        @media (max-width: 640px) {
 
+            .search-form {
 
+                grid-template-columns: 1fr;
 
+            }
 
+        }
 
+        
+        .search-form-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 4px;
 
+        }
 
+        
+        .search-form-label {
 
+            font-size: 14px;
 
+            color: #6b7280;
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .search-form-actions {
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 12px;
 
+            margin-top: 24px;
 
+            grid-column: 1 / -1;
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        .date-range {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .date-input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+            width: 100%;
 
+            cursor: pointer;
 
+            background-color: white;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        /* 多选下拉框样式 */
 
+        .select-container {
 
+            position: relative;
 
+            width: 100%;
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+            width: 100%;
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 8px center;
 
+            background-size: 16px;
 
+            padding-right: 32px;
 
+        }
 
+        
+        .select:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select[multiple] {
 
+            padding: 6px;
 
+            overflow-y: auto;
 
+            max-height: 120px;
 
+        }
 
+        
+        /* 多选选项样式 */
 
+        .select[multiple] option {
 
+            padding: 6px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 3px;
 
+            cursor: pointer;
 
+        }
 
+        
+        .select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.2);
 
+            color: #333;
 
+        }
 
+        
+        .select[multiple] option:hover {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+        
+        /* 多选框样式 */
 
+        select[multiple] {
 
+            height: auto;
 
+            min-height: 38px;
 
+            padding: 4px 8px;
 
+        }
 
+        
+        select[multiple] option {
 
+            padding: 4px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 2px;
 
+        }
 
+        
+        select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+            color: #4CAF50;
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        input[type="date"] {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+        }
 
+        
+        input[type="date"]:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-4 mb-6">
 
+            <div class="search-form">
 
+                <!-- 设备编号 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备编号:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备名称:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 下拉框多选 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备类型:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属农场:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属地块:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备状态 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备状态:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 搜索按钮区域 -->
 
+                <div class="search-form-actions">
 
+                    <button class="btn btn-primary">
 
+                        <i class="iconfont icon-search btn-icon"></i>
 
+                        搜索
 
+                    </button>
 
+                    <button class="btn btn-default">
 
+                        <i class="iconfont icon-reload btn-icon"></i>
 
+                        重置
 
+                    </button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理状态</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="1">已处理</option>
 
+                        <option value="2">处理中</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理方式</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="replace">更换设备</option>
 
+                        <option value="repair">维修设备</option>
 
+                        <option value="battery">更换电池</option>
 
+                        <option value="restart">重启设备</option>
 
+                        <option value="other">其他</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理说明</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const viewBtns = document.querySelectorAll('.view-btn');
 
+        
+        // 查看告警详情
 
+        viewBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.addEventListener('click', closeDetailModal);
 
+        cancelDetailBtn.addEventListener('click', closeDetailModal);
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        const handleBtns = document.querySelectorAll('.handle-btn');
 
+        
+        // 处理告警
 
+        handleBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmHandleModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.addEventListener('click', closeHandleModal);
 
+        cancelHandleBtn.addEventListener('click', closeHandleModal);
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+            // 实际应用中应该提交处理信息到后端
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 521 - 202
pages/device-alarm.html
Ver fichero 

@@ -7,6 +7,142 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
     <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
     <link rel="stylesheet" href="../assets/css/global.css">
 
+    <!-- 引入告警处理JS -->
 
+    <script src="alarm-handler.js"></script>
 
+    <script type="text/javascript">
 
+        // 全局函数，在任何事件加载前定义
 
+        function processAlarm(btn) {
 
+            // alert("处理按钮已点击！"); // 移除测试提示
 
+            console.log("处理按钮被点击:", btn);
 
+            
+            var alarmId = btn.getAttribute('data-id');
 
+            var row = btn.closest('tr');
 
+            
+            // 获取当前行数据
 
+            var alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+            var deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+            var deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+            var deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+            var field = row.querySelector('td:nth-child(6)').textContent;
 
+            var farm = row.querySelector('td:nth-child(7)').textContent;
 
+            var alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+            var alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+            
+            // 填充模态框数据
 
+            var modal = document.getElementById('alarmHandleModal');
 
+            modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+            modal.querySelector('.alarm-time').textContent = alarmTime;
 
+            modal.querySelector('.alarm-content').textContent = alarmContent;
 
+            modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+            modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+            modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+            modal.querySelector('.alarm-field').textContent = field;
 
+            modal.querySelector('.alarm-farm').textContent = farm;
 
+            
+            // 根据告警等级设置背景样式
 
+            var alarmBox = modal.querySelector('.p-4.mb-4');
 
+            
+            if (alarmLevel.includes('紧急')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+            } else if (alarmLevel.includes('警告')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+            } else {
 
+                alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+            }
 
+            
+            // 记录当前操作的行
 
+            modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+            
+            // 重置表单
 
+            document.getElementById('handleResult').value = '0';
 
+            document.getElementById('handleRemark').value = '';
 
+            document.getElementById('fileCount').textContent = '未选择文件';
 
+            document.getElementById('fileList').innerHTML = '';
 
+            if(document.getElementById('notifyRelated')) {
 
+                document.getElementById('notifyRelated').checked = false;
 
+            }
 
+            if(document.getElementById('attachmentUpload')) {
 
+                document.getElementById('attachmentUpload').value = '';
 
+            }
 
+            
+            // 显示模态框
 
+            modal.style.display = 'flex';
 
+            
+            return false;
 
+        }
 
+        
+        // 为兼容现有代码而添加的函数
 
+        function showAlarmModal(btn) {
 
+            return processAlarm(btn);
 
+        }
 
+        
+        // 处理表单提交
 
+        function submitAlarmHandler() {
 
+            console.log("提交按钮点击");
 
+            var modal = document.getElementById("alarmHandleModal");
 
+            var rowIndex = parseInt(modal.getAttribute("data-row"));
 
+            var tbody = document.querySelector("table tbody");
 
+            var row = tbody.children[rowIndex];
 
+            
+            if (row) {
 
+                var statusCell = row.querySelector("td:nth-child(10)");
 
+                var handlePersonCell = row.querySelector("td:nth-child(11)");
 
+                var handleTimeCell = row.querySelector("td:nth-child(12)");
 
+                var operationCell = row.querySelector("td:nth-child(13)");
 
+                
+                // 更新状态
 
+                var result = document.getElementById("handleResult").value;
 
+                var statusText = "已处理";
 
+                var statusClass = "badge-success";
 
+                
+                if (result === "0") {
 
+                    statusText = "未处理";
 
+                    statusClass = "badge-danger";
 
+                } else if (result === "3") {
 
+                    statusText = "已忽略";
 
+                    statusClass = "badge-warning";
 
+                }
 
+                
+                statusCell.innerHTML = "<span class=\"badge " + statusClass + "\">" + statusText + "</span>";
 
+                
+                // 更新处理人和时间
 
+                var currentDate = new Date();
 
+                var dateStr = currentDate.toLocaleDateString("zh-CN", { 
+                    year: "numeric", 
+                    month: "2-digit", 
+                    day: "2-digit",
 
+                    hour: "2-digit",
 
+                    minute: "2-digit",
 
+                    second: "2-digit",
 
+                    hour12: false
 
+                }).replace(/\//g, "-");
 
+                
+                handlePersonCell.textContent = "当前用户";  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                var btnContainer = operationCell.querySelector("div");
 
+                var viewBtn = operationCell.querySelector(".view-btn").cloneNode(true);
 
+                btnContainer.innerHTML = "";
 
+                btnContainer.appendChild(viewBtn);
 
+            }
 
+            
+            // 关闭模态框
 
+            modal.style.display = "none";
 
+        }
 
+
 
+        // 全局定义关闭弹窗函数
 
+        function closeDetailModalGlobal() {
 
+            document.getElementById('alarmDetailModal').style.display = 'none';
 
+        }
 
+
 
+        function closeHandleModalGlobal() {
 
+            document.getElementById('alarmHandleModal').style.display = 'none';
 
+        }
 
+    </script>
 
     <style>
 
         body {
 
             font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
@@ -14,14 +150,20 @@
 
             color: #333;
 
             margin: 0;
 
             padding: 0;
 
-            height: auto; overflow-y: auto; overflow-x: hidden;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
             min-height: 100%;
 
         }
 
         
         .page-container {
 
             padding: 20px;
 
+            padding-top: 60px; /* 添加顶部边距，为按钮留出空间 */
 
             position: relative;
 
-            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
         }
 
         
         .card {
 
@@ -31,25 +173,22 @@
 
         }
 
         
         .table-container {
 
-    position: relative;
 
-    position: relative;
 
+            position: relative;
 
             overflow-x: auto;
 
         }
 
         
         table {
 
             width: 100%;
 
             border-collapse: separate;
 
-    border-spacing: 0;
 
+            border-spacing: 0;
 
         }
 
         
         th {
 
-    white-space: nowrap;
 
-    position: relative;
 
-    overflow: visible;
 
-    max-width: none;
 
-    text-overflow: clip;
 
-    white-space: nowrap;
 
-    position: relative;
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
             background-color: #f9fafb;
 
             padding: 12px 16px;
 
             text-align: left;
 
@@ -59,81 +198,78 @@
 
         }
 
         
         td {
 
-    white-space: nowrap;
 
-    max-width: 200px;
 
-    overflow: hidden;
 
-    text-overflow: ellipsis;
 
-    white-space: nowrap;
 
-    max-width: 200px;
 
-    overflow: hidden;
 
-    text-overflow: ellipsis;
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
             padding: 12px 16px;
 
             border-bottom: 1px solid #e5e7eb;
 
         }
 
         
         tr:hover {
 
-    
-    tr:hover td:last-child {
 
-        background-color: #f9fafb;
 
-    }
 
-    
-    /* 固定最后一列（操作列）样式 */
 
-    .table-fixed-right {
 
-        position: relative;
 
-    }
 
-    
-    .table-fixed-right th:last-child,
 
-    .table-fixed-right td:last-child {
 
-        position: sticky;
 
-        right: 0;
 
-        z-index: 2;
 
-        background-color: white;
 
-        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
-    }
 
-    
-    .table-fixed-right th:last-child {
 
-        background-color: #f9fafb;
 
-    }
 
-    
-    /* 表格滚动控件 */
 
-    .table-scroll-controls {
 
-        display: none;
 
-        position: absolute;
 
-        top: 50%;
 
-        transform: translateY(-50%);
 
-        width: 100%;
 
-        pointer-events: none;
 
-        z-index: 3;
 
-    }
 
-    
-    .table-scroll-btn {
 
-        position: absolute;
 
-        width: 32px;
 
-        height: 32px;
 
-        border-radius: 50%;
 
-        background-color: rgba(255, 255, 255, 0.9);
 
-        color: #4CAF50;
 
-        border: 1px solid #e0e0e0;
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: center;
 
-        cursor: pointer;
 
-        pointer-events: auto;
 
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
-        z-index: 4;
 
-    }
 
-    
-    .table-scroll-left {
 
-        left: 10px;
 
-    }
 
-    
-    .table-scroll-right {
 
-        right: 10px;
 
-    }
 
-    
-    .has-overflow .table-scroll-controls {
 
-        display: block;
 
-    }            background-color: #f9fafb;
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
         }
 
         
         .btn {
 
@@ -382,55 +518,112 @@
 
         .alarm-type-notice {
 
             border-left: 4px solid #3b82f6;
 
         }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
     <div class="page-container responsive-container">
 
         <div class="flex justify-between items-center mb-6">
 
             <h1 class="text-2xl font-bold">设备告警信息</h1>
 
-            
-            <div class="flex gap-2">
 
-                <button class="btn btn-default">
 
-                    <i class="iconfont icon-reload btn-icon"></i>
 
-                    刷新数据
 
-                </button>
 
-                <button class="btn btn-primary">
 
-                    <i class="iconfont icon-setting btn-icon"></i>
 
-                    告警设置
 
-                </button>
 
-            </div>
 
         </div>
 
         
         <div class="card p-6 mb-6">
 
-            <div class="flex flex-wrap gap-4">
 
-                <div class="search-box flex-grow">
 
-                    <input type="text" class="input" placeholder="请输入设备名称/编号/告警内容">
 
-                    <button class="btn btn-primary">
 
-                        <i class="iconfont icon-search btn-icon"></i>
 
-                        搜索
 
-                    </button>
 
-                    <button class="btn btn-default">
 
-                        <i class="iconfont icon-reload btn-icon"></i>
 
-                        重置
 
-                    </button>
 
+            <div class="grid grid-cols-1 md:grid-cols-9 gap-4 mb-4">
 
+                <!-- 设备编号 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">设备编号</label>
 
+                    <input type="text" class="input w-3/4" placeholder="请输入设备编号关键词">
 
                 </div>
 
                 
-                <div class="flex gap-2">
 
-                    <select class="select">
 
+                <!-- 设备名称 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">设备名称</label>
 
+                    <input type="text" class="input w-3/4" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">告警等级</label>
 
+                    <select class="select w-3/4">
 
                         <option value="">所有告警等级</option>
 
                         <option value="urgent">紧急</option>
 
                         <option value="warning">警告</option>
 
                         <option value="notice">提示</option>
 
                     </select>
 
-                    
-                    <select class="select">
 
-                        <option value="">所有处理状态</option>
 
-                        <option value="1">已处理</option>
 
+                </div>
 
+                
+                <!-- 设备类型 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">设备类型</label>
 
+                    <select class="select w-3/4">
 
+                        <option value="">所有设备类型</option>
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">所属地块</label>
 
+                    <select class="select w-3/4">
 
+                        <option value="">所有地块</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">所属农场</label>
 
+                    <select class="select w-3/4">
 
+                        <option value="">所有农场</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 告警时间 -->
 
+                <div class="form-group md:col-span-6 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">告警时间</label>
 
+                    <div class="flex gap-2 items-center w-4/5">
 
+                        <input type="date" class="input w-[45%]" placeholder="开始日期">
 
+                        <span class="text-gray-400">至</span>
 
+                        <input type="date" class="input w-[45%]" placeholder="结束日期">
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 处理状态 -->
 
+                <div class="form-group md:col-span-3 flex items-center gap-2 ml-8">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap w-20">处理状态</label>
 
+                    <select class="select w-3/4">
 
+                        <option value="">所有状态</option>
 
                         <option value="0">未处理</option>
 
-                        <option value="2">处理中</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="3">忽略</option>
 
                     </select>
 
                 </div>
 
             </div>
 
+            
+            <div class="flex justify-end gap-4">
 
+                <button class="btn btn-primary">
 
+                    <i class="iconfont icon-search btn-icon"></i>
 
+                    搜索
 
+                </button>
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    重置
 
+                </button>
 
+            </div>
 
         </div>
 
         
         <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 
@@ -461,17 +654,29 @@
 
         
         <div class="card">
 
             <div class="table-container">
 
-                <table>
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
                     <thead>
 
                         <tr>
 
                             <th>告警ID</th>
 
                             <th>告警等级</th>
 
-                            <th class="min-w-[120px]">设备名称</th>
 
-                            <th class="min-w-[100px]">设备类型</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
                             <th>告警内容</th>
 
                             <th>告警时间</th>
 
                             <th>处理状态</th>
 
                             <th>处理人</th>
 
+                            <th>处理时间</th>
 
                             <th class="min-w-[150px]">操作</th>
 
                         </tr>
 
                     </thead>
 
@@ -480,18 +685,22 @@
 
                             <td>ALM-20230001</td>
 
                             <td><span class="badge badge-danger">紧急</span></td>
 
                             <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
                             <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
                             <td>电池电量过低，即将无法工作</td>
 
                             <td>2023-05-15 10:25:36</td>
 
                             <td><span class="badge badge-danger">未处理</span></td>
 
                             <td>-</td>
 
+                            <td>-</td>
 
                             <td>
 
                                 <div class="flex gap-2">
 
                                     <button class="btn btn-default btn-sm view-btn" data-id="1">
 
                                         <i class="iconfont icon-eye btn-icon"></i>
 
                                         查看
 
                                     </button>
 
-                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1" onclick="showAlarmModal(this)">
 
                                         <i class="iconfont icon-check btn-icon"></i>
 
                                         处理
 
                                     </button>
 
@@ -502,18 +711,22 @@
 
                             <td>ALM-20230002</td>
 
                             <td><span class="badge badge-warning">警告</span></td>
 
                             <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
                             <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
                             <td>信号弱，视频画面不稳定</td>
 
                             <td>2023-05-15 09:18:42</td>
 
                             <td><span class="badge badge-warning">处理中</span></td>
 
                             <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
                             <td>
 
                                 <div class="flex gap-2">
 
                                     <button class="btn btn-default btn-sm view-btn" data-id="2">
 
                                         <i class="iconfont icon-eye btn-icon"></i>
 
                                         查看
 
                                     </button>
 
-                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2" onclick="showAlarmModal(this)">
 
                                         <i class="iconfont icon-check btn-icon"></i>
 
                                         处理
 
                                     </button>
 
@@ -524,11 +737,15 @@
 
                             <td>ALM-20230003</td>
 
                             <td><span class="badge badge-danger">紧急</span></td>
 
                             <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
                             <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
                             <td>水位超过预警线，可能发生溢出</td>
 
                             <td>2023-05-15 08:45:20</td>
 
                             <td><span class="badge badge-success">已处理</span></td>
 
                             <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
                             <td>
 
                                 <div class="flex gap-2">
 
                                     <button class="btn btn-default btn-sm view-btn" data-id="3">
 
@@ -542,18 +759,22 @@
 
                             <td>ALM-20230004</td>
 
                             <td><span class="badge badge-warning">警告</span></td>
 
                             <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
                             <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
                             <td>湿度传感器异常，读数不稳定</td>
 
                             <td>2023-05-14 17:32:15</td>
 
                             <td><span class="badge badge-danger">未处理</span></td>
 
                             <td>-</td>
 
+                            <td>-</td>
 
                             <td>
 
                                 <div class="flex gap-2">
 
                                     <button class="btn btn-default btn-sm view-btn" data-id="4">
 
                                         <i class="iconfont icon-eye btn-icon"></i>
 
                                         查看
 
                                     </button>
 
-                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4" onclick="showAlarmModal(this)">
 
                                         <i class="iconfont icon-check btn-icon"></i>
 
                                         处理
 
                                     </button>
 
@@ -564,11 +785,15 @@
 
                             <td>ALM-20230005</td>
 
                             <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
                             <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
                             <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
                             <td>设备需要例行维护检查</td>
 
                             <td>2023-05-14 14:10:08</td>
 
                             <td><span class="badge badge-success">已处理</span></td>
 
                             <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
                             <td>
 
                                 <div class="flex gap-2">
 
                                     <button class="btn btn-default btn-sm view-btn" data-id="5">
 
@@ -607,7 +832,7 @@
 
         <div class="modal">
 
             <div class="modal-header">
 
                 <h3 class="modal-title">告警详情</h3>
 
-                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+                <div class="modal-close" id="closeDetailModal" onclick="closeDetailModalGlobal();">&times;</div>
 
             </div>
 
             <div class="modal-body">
 
                 <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
@@ -669,7 +894,7 @@
 
                 </div>
 
             </div>
 
             <div class="modal-footer">
 
-                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+                <button class="btn btn-default" id="cancelDetailBtn" onclick="closeDetailModalGlobal();">关闭</button>
 
             </div>
 
         </div>
 
     </div>
 
@@ -679,49 +904,70 @@
 
         <div class="modal">
 
             <div class="modal-header">
 
                 <h3 class="modal-title">处理告警</h3>
 
-                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+                <div class="modal-close" id="closeHandleModal" onclick="closeHandleModalGlobal();">&times;</div>
 
             </div>
 
             <div class="modal-body">
 
                 <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
-                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
-                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger alarm-level">紧急</span>
 
+                        <span class="text-sm text-gray-500 alarm-time">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2 alarm-content">电池电量过低，即将无法工作</h3>
 
+                    <div class="flex flex-col gap-1">
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备名称：</span>
 
+                            <span class="text-sm font-medium alarm-device-name">土壤传感器 #2</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备编号：</span>
 
+                            <span class="text-sm font-medium alarm-device-id">SNS-20230002</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备类型：</span>
 
+                            <span class="text-sm font-medium alarm-device-type">传感器</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属地块：</span>
 
+                            <span class="text-sm font-medium alarm-field">东区2号地块</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属农场：</span>
 
+                            <span class="text-sm font-medium alarm-farm">示范农场</span>
 
+                        </div>
 
+                    </div>
 
                 </div>
 
                 
                 <div class="form-group mb-4">
 
-                    <label class="block font-medium mb-1">处理状态</label>
 
-                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                    <label class="block font-medium mb-1">处理结果</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" id="handleResult">
 
+                        <option value="0">未处理</option>
 
                         <option value="1">已处理</option>
 
-                        <option value="2">处理中</option>
 
                         <option value="3">忽略</option>
 
                     </select>
 
                 </div>
 
                 
                 <div class="form-group mb-4">
 
-                    <label class="block font-medium mb-1">处理方式</label>
 
-                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
-                        <option value="replace">更换设备</option>
 
-                        <option value="repair">维修设备</option>
 
-                        <option value="battery">更换电池</option>
 
-                        <option value="restart">重启设备</option>
 
-                        <option value="other">其他</option>
 
-                    </select>
 
+                    <label class="block font-medium mb-1">处理备注</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理备注..." id="handleRemark"></textarea>
 
                 </div>
 
                 
                 <div class="form-group mb-4">
 
-                    <label class="block font-medium mb-1">处理说明</label>
 
-                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                    <label class="block font-medium mb-1">附件上传</label>
 
+                    <div class="flex items-center">
 
+                        <label class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded cursor-pointer hover:bg-gray-100">
 
+                            <i class="iconfont icon-upload mr-2"></i>
 
+                            <span>选择文件</span>
 
+                            <input type="file" class="hidden" id="attachmentUpload" multiple>
 
+                        </label>
 
+                        <span class="ml-3 text-sm text-gray-500" id="fileCount">未选择文件</span>
 
+                    </div>
 
+                    <div class="mt-2" id="fileList"></div>
 
                 </div>
 
                 
-                <div class="form-group">
 
-                    <label class="flex items-center">
 
-                        <input type="checkbox" class="mr-2">
 
-                        <span>通知相关人员</span>
 
-                    </label>
 
-                </div>
 
             </div>
 
             <div class="modal-footer">
 
                 <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
-                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn" onclick="submitAlarmHandler()">提交</button>
 
             </div>
 
         </div>
 
     </div>
 
@@ -781,73 +1027,146 @@
 
         }
 
         
         // 初始化表格滚动
 
-        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
 
-            // 告警详情弹窗
 
-            const alarmDetailModal = document.getElementById('alarmDetailModal');
 
-            const closeDetailModal = document.getElementById('closeDetailModal');
 
-            const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
-            const viewBtns = document.querySelectorAll('.view-btn');
 
+        initTableScroll();
 
+        
+        // 获取模态框和按钮
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        
+        // 查看告警详情
 
+        document.querySelectorAll('.view-btn').forEach(function(btn) {
 
+            btn.onclick = function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+            };
 
+        });
 
+        
+        // 绑定事件 - 告警详情模态框
 
+        closeDetailModal.addEventListener('click', function() {
 
+            console.log('关闭详情按钮点击');
 
+            closeDetailModalGlobal();
 
+        });
 
+        
+        cancelDetailBtn.addEventListener('click', function() {
 
+            console.log('取消详情按钮点击');
 
+            closeDetailModalGlobal();
 
+        });
 
+        
+        // 绑定事件 - 处理告警模态框
 
+        closeHandleModal.addEventListener('click', function() {
 
+            console.log('关闭处理按钮点击');
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        cancelHandleBtn.addEventListener('click', function() {
 
+            console.log('取消处理按钮点击');
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        // 文件上传处理
 
+        const attachmentUpload = document.getElementById('attachmentUpload');
 
+        attachmentUpload.addEventListener('change', function() {
 
+            const fileCount = this.files.length;
 
+            const fileCountElem = document.getElementById('fileCount');
 
+            const fileListElem = document.getElementById('fileList');
 
             
-            // 查看告警详情
 
-            viewBtns.forEach(btn => {
 
-                btn.addEventListener('click', function() {
 
-                    const alarmId = this.getAttribute('data-id');
 
-                    alarmDetailModal.style.display = 'flex';
 
-                    
-                    // 实际应用中应该根据ID获取告警详情
 
+            if (fileCount > 0) {
 
+                fileCountElem.textContent = `已选择 ${fileCount} 个文件`;
 
+                fileListElem.innerHTML = '';
 
+                
+                Array.from(this.files).forEach(file => {
 
+                    const fileItem = document.createElement('div');
 
+                    fileItem.className = 'flex items-center gap-2 mt-1';
 
+                    fileItem.innerHTML = `
 
+                        <i class="iconfont icon-file text-gray-500"></i>
 
+                        <span class="text-sm">${file.name}</span>
 
+                        <span class="text-xs text-gray-500">(${formatFileSize(file.size)})</span>
 
+                    `;
 
+                    fileListElem.appendChild(fileItem);
 
                 });
 
-            });
 
-            
-            // 关闭详情弹窗
 
-            function closeDetailModal() {
 
-                alarmDetailModal.style.display = 'none';
 
+            } else {
 
+                fileCountElem.textContent = '未选择文件';
 
+                fileListElem.innerHTML = '';
 
             }
 
+        });
 
+        
+        // 格式化文件大小
 
+        function formatFileSize(bytes) {
 
+            if (bytes < 1024) return bytes + ' B';
 
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+        }
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            console.log('提交按钮点击');
 
+            const modal = document.getElementById('alarmHandleModal');
 
+            const rowIndex = parseInt(modal.getAttribute('data-row'));
 
+            const tbody = document.querySelector('table tbody');
 
+            const row = tbody.children[rowIndex];
 
             
-            closeDetailModal.addEventListener('click', closeDetailModal);
 
-            cancelDetailBtn.addEventListener('click', closeDetailModal);
 
-            
-            // 告警处理弹窗
 
-            const alarmHandleModal = document.getElementById('alarmHandleModal');
 
-            const closeHandleModal = document.getElementById('closeHandleModal');
 
-            const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
-            const submitHandleBtn = document.getElementById('submitHandleBtn');
 
-            const handleBtns = document.querySelectorAll('.handle-btn');
 
-            
-            // 处理告警
 
-            handleBtns.forEach(btn => {
 
-                btn.addEventListener('click', function() {
 
-                    const alarmId = this.getAttribute('data-id');
 
-                    alarmHandleModal.style.display = 'flex';
 
-                    
-                    // 实际应用中应该根据ID获取告警详情
 
-                });
 
-            });
 
-            
-            // 关闭处理弹窗
 
-            function closeHandleModal() {
 
-                alarmHandleModal.style.display = 'none';
 
+            if (row) {
 
+                const statusCell = row.querySelector('td:nth-child(10)');
 
+                const handlePersonCell = row.querySelector('td:nth-child(11)');
 
+                const handleTimeCell = row.querySelector('td:nth-child(12)');
 
+                const operationCell = row.querySelector('td:nth-child(13)');
 
+                
+                // 更新状态
 
+                const result = document.getElementById('handleResult').value;
 
+                let statusText = '已处理';
 
+                let statusClass = 'badge-success';
 
+                
+                if (result === '0') {
 
+                    statusText = '未处理';
 
+                    statusClass = 'badge-danger';
 
+                } else if (result === '3') {
 
+                    statusText = '已忽略';
 
+                    statusClass = 'badge-warning';
 
+                }
 
+                
+                statusCell.innerHTML = `<span class="badge ${statusClass}">${statusText}</span>`;
 
+                
+                // 更新处理人和时间
 
+                const currentDate = new Date();
 
+                const dateStr = currentDate.toLocaleDateString('zh-CN', { 
+                    year: 'numeric', 
+                    month: '2-digit', 
+                    day: '2-digit',
 
+                    hour: '2-digit',
 
+                    minute: '2-digit',
 
+                    second: '2-digit',
 
+                    hour12: false
 
+                }).replace(/\//g, '-');
 
+                
+                handlePersonCell.textContent = '当前用户';  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                const btnContainer = operationCell.querySelector('div');
 
+                const viewBtn = operationCell.querySelector('.view-btn').cloneNode(true);
 
+                btnContainer.innerHTML = '';
 
+                btnContainer.appendChild(viewBtn);
 
             }
 
             
-            closeHandleModal.addEventListener('click', closeHandleModal);
 
-            cancelHandleBtn.addEventListener('click', closeHandleModal);
 
-            
-            // 提交处理
 
-            submitHandleBtn.addEventListener('click', function() {
 
-                alert('告警处理已提交');
 
-                closeHandleModal();
 
-                // 实际应用中应该提交处理信息到后端
 
-            });
 
-            
-            // 点击弹窗外部关闭弹窗
 
-            window.addEventListener('click', function(e) {
 
-                if (e.target === alarmDetailModal) {
 
-                    closeDetailModal();
 
-                }
 
-                if (e.target === alarmHandleModal) {
 
-                    closeHandleModal();
 
-                }
 
-            });
 
+            // 关闭模态框
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModalGlobal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModalGlobal();
 
+            }
 
         });
 
+    });
 
     </script>
 
 </body>
 
 </html>

+ 1115 - 0
pages/device-alarm.html.backup
Ver fichero 

@@ -0,0 +1,1115 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 60px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
 
+                <!-- 设备编号 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备编号</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备名称</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">告警等级</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有告警等级</option>
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备类型 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备类型</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有设备类型</option>
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属地块</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有地块</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属农场</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有农场</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 告警时间 -->
 
+                <div class="form-group md:col-span-2">
 
+                    <label class="block text-sm text-gray-600 mb-1">告警时间</label>
 
+                    <div class="flex gap-2 items-center">
 
+                        <input type="date" class="input w-full" placeholder="开始日期">
 
+                        <span class="text-gray-400">至</span>
 
+                        <input type="date" class="input w-full" placeholder="结束日期">
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 处理状态 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">处理状态</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有状态</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+            </div>
 
+            
+            <div class="flex justify-end gap-4">
 
+                <button class="btn btn-primary">
 
+                    <i class="iconfont icon-search btn-icon"></i>
 
+                    搜索
 
+                </button>
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    重置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">今日告警总数</div>
 
+                <div class="text-3xl font-bold text-gray-800">24</div>
 
+                <div class="text-sm text-gray-400 mt-1">较昨日 +8</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">紧急告警</div>
 
+                <div class="text-3xl font-bold text-red-600">5</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：2</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">警告</div>
 
+                <div class="text-3xl font-bold text-yellow-600">12</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：4</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">提示信息</div>
 
+                <div class="text-3xl font-bold text-blue-600">7</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：1</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1" onclick="processAlarm(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2" onclick="processAlarm(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4" onclick="processAlarm(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger alarm-level">紧急</span>
 
+                        <span class="text-sm text-gray-500 alarm-time">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2 alarm-content">电池电量过低，即将无法工作</h3>
 
+                    <div class="flex flex-col gap-1">
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备名称：</span>
 
+                            <span class="text-sm font-medium alarm-device-name">土壤传感器 #2</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备编号：</span>
 
+                            <span class="text-sm font-medium alarm-device-id">SNS-20230002</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备类型：</span>
 
+                            <span class="text-sm font-medium alarm-device-type">传感器</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属地块：</span>
 
+                            <span class="text-sm font-medium alarm-field">东区2号地块</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属农场：</span>
 
+                            <span class="text-sm font-medium alarm-farm">示范农场</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理结果</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" id="handleResult">
 
+                        <option value="1">已处理</option>
 
+                        <option value="3">忽略</option>
 
+                        <option value="4">非故障</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理备注</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理备注..." id="handleRemark"></textarea>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">附件上传</label>
 
+                    <div class="flex items-center">
 
+                        <label class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded cursor-pointer hover:bg-gray-100">
 
+                            <i class="iconfont icon-upload mr-2"></i>
 
+                            <span>选择文件</span>
 
+                            <input type="file" class="hidden" id="attachmentUpload" multiple>
 
+                        </label>
 
+                        <span class="ml-3 text-sm text-gray-500" id="fileCount">未选择文件</span>
 
+                    </div>
 
+                    <div class="mt-2" id="fileList"></div>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2" id="notifyRelated">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    // 定义全局函数，方便直接在HTML中调用
 
+    function showAlarmModal(btn) {
 
+        console.log("处理按钮被点击 (直接调用)", btn);
 
+        const alarmId = btn.getAttribute('data-id');
 
+        const row = btn.closest('tr');
 
+        
+        // 获取当前行数据
 
+        const alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+        const deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+        const deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+        const deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+        const field = row.querySelector('td:nth-child(6)').textContent;
 
+        const farm = row.querySelector('td:nth-child(7)').textContent;
 
+        const alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+        const alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+        
+        // 填充模态框数据
 
+        const modal = document.getElementById('alarmHandleModal');
 
+        modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+        modal.querySelector('.alarm-time').textContent = alarmTime;
 
+        modal.querySelector('.alarm-content').textContent = alarmContent;
 
+        modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+        modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+        modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+        modal.querySelector('.alarm-field').textContent = field;
 
+        modal.querySelector('.alarm-farm').textContent = farm;
 
+        
+        // 根据告警等级设置背景样式
 
+        const alarmBox = modal.querySelector('.p-4.mb-4');
 
+        
+        if (alarmLevel.includes('紧急')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+        } else if (alarmLevel.includes('警告')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+        } else {
 
+            alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+        }
 
+        
+        // 记录当前操作的行
 
+        modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+        
+        // 重置表单
 
+        document.getElementById('handleResult').value = '1';
 
+        document.getElementById('handleRemark').value = '';
 
+        document.getElementById('fileCount').textContent = '未选择文件';
 
+        document.getElementById('fileList').innerHTML = '';
 
+        document.getElementById('notifyRelated').checked = false;
 
+        document.getElementById('attachmentUpload').value = '';
 
+        
+        // 显示模态框
 
+        modal.style.display = 'flex';
 
+    }
 
+
 
+    // 全局处理告警按钮点击函数 - 保留兼容性
 
+    function handleAlarmBtn(btn) {
 
+        console.log('处理按钮点击 - handleAlarmBtn调用', btn);
 
+        showAlarmModal(btn);
 
+    }
 
+    
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        
+        // 查看告警详情
 
+        document.querySelectorAll('.view-btn').forEach(function(btn) {
 
+            btn.onclick = function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            };
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.onclick = closeDetailModal;
 
+        cancelDetailBtn.onclick = closeDetailModal;
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        
+        // 不需要再为处理按钮绑定事件，因为已经通过inline onclick属性绑定了showAlarmModal函数
 
+        console.log('处理按钮数量:', document.querySelectorAll('.handle-btn').length);
 
+        
+        // 文件上传处理
 
+        const attachmentUpload = document.getElementById('attachmentUpload');
 
+        attachmentUpload.addEventListener('change', function() {
 
+            const fileCount = this.files.length;
 
+            const fileCountElem = document.getElementById('fileCount');
 
+            const fileListElem = document.getElementById('fileList');
 
+            
+            if (fileCount > 0) {
 
+                fileCountElem.textContent = `已选择 ${fileCount} 个文件`;
 
+                fileListElem.innerHTML = '';
 
+                
+                Array.from(this.files).forEach(file => {
 
+                    const fileItem = document.createElement('div');
 
+                    fileItem.className = 'flex items-center gap-2 mt-1';
 
+                    fileItem.innerHTML = `
 
+                        <i class="iconfont icon-file text-gray-500"></i>
 
+                        <span class="text-sm">${file.name}</span>
 
+                        <span class="text-xs text-gray-500">(${formatFileSize(file.size)})</span>
 
+                    `;
 
+                    fileListElem.appendChild(fileItem);
 
+                });
 
+            } else {
 
+                fileCountElem.textContent = '未选择文件';
 
+                fileListElem.innerHTML = '';
 
+            }
 
+        });
 
+        
+        // 格式化文件大小
 
+        function formatFileSize(bytes) {
 
+            if (bytes < 1024) return bytes + ' B';
 
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+        }
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.onclick = closeHandleModal;
 
+        cancelHandleBtn.onclick = closeHandleModal;
 
+        
+        // 提交处理
 
+        submitHandleBtn.onclick = function() {
 
+            const modal = document.getElementById('alarmHandleModal');
 
+            const rowIndex = parseInt(modal.getAttribute('data-row'));
 
+            const tbody = document.querySelector('table tbody');
 
+            const row = tbody.children[rowIndex];
 
+            
+            if (row) {
 
+                const statusCell = row.querySelector('td:nth-child(10)');
 
+                const handlePersonCell = row.querySelector('td:nth-child(11)');
 
+                const handleTimeCell = row.querySelector('td:nth-child(12)');
 
+                const operationCell = row.querySelector('td:nth-child(13)');
 
+                
+                // 更新状态
 
+                const result = document.getElementById('handleResult').value;
 
+                let statusText = '已处理';
 
+                let statusClass = 'badge-success';
 
+                
+                if (result === '3') {
 
+                    statusText = '已忽略';
 
+                    statusClass = 'badge-warning';
 
+                } else if (result === '4') {
 
+                    statusText = '非故障';
 
+                    statusClass = 'badge-primary';
 
+                }
 
+                
+                statusCell.innerHTML = `<span class="badge ${statusClass}">${statusText}</span>`;
 
+                
+                // 更新处理人和时间
 
+                const currentDate = new Date();
 
+                const dateStr = currentDate.toLocaleDateString('zh-CN', { 
+                    year: 'numeric', 
+                    month: '2-digit', 
+                    day: '2-digit',
 
+                    hour: '2-digit',
 
+                    minute: '2-digit',
 
+                    second: '2-digit',
 
+                    hour12: false
 
+                }).replace(/\//g, '-');
 
+                
+                handlePersonCell.textContent = '当前用户';  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                const btnContainer = operationCell.querySelector('div');
 
+                const viewBtn = operationCell.querySelector('.view-btn').cloneNode(true);
 
+                btnContainer.innerHTML = '';
 
+                btnContainer.appendChild(viewBtn);
 
+            }
 
+            
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+        };
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1183 - 0
pages/device-alarm.html.bak
Ver fichero 

@@ -0,0 +1,1183 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <!-- 引入告警处理JS -->
 
+    <script src="alarm-handler.js"></script>
 
+    <script type="text/javascript">
 
+        // 全局函数，在任何事件加载前定义
 
+        function processAlarm(btn) {
 
+            // alert("处理按钮已点击！"); // 移除测试提示
 
+            console.log("处理按钮被点击:", btn);
 
+            
+            var alarmId = btn.getAttribute('data-id');
 
+            var row = btn.closest('tr');
 
+            
+            // 获取当前行数据
 
+            var alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+            var deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+            var deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+            var deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+            var field = row.querySelector('td:nth-child(6)').textContent;
 
+            var farm = row.querySelector('td:nth-child(7)').textContent;
 
+            var alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+            var alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+            
+            // 填充模态框数据
 
+            var modal = document.getElementById('alarmHandleModal');
 
+            modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+            modal.querySelector('.alarm-time').textContent = alarmTime;
 
+            modal.querySelector('.alarm-content').textContent = alarmContent;
 
+            modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+            modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+            modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+            modal.querySelector('.alarm-field').textContent = field;
 
+            modal.querySelector('.alarm-farm').textContent = farm;
 
+            
+            // 根据告警等级设置背景样式
 
+            var alarmBox = modal.querySelector('.p-4.mb-4');
 
+            
+            if (alarmLevel.includes('紧急')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+            } else if (alarmLevel.includes('警告')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+            } else {
 
+                alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+            }
 
+            
+            // 记录当前操作的行
 
+            modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+            
+            // 重置表单
 
+            document.getElementById('handleResult').value = '0';
 
+            document.getElementById('handleRemark').value = '';
 
+            document.getElementById('fileCount').textContent = '未选择文件';
 
+            document.getElementById('fileList').innerHTML = '';
 
+            if(document.getElementById('notifyRelated')) {
 
+                document.getElementById('notifyRelated').checked = false;
 
+            }
 
+            if(document.getElementById('attachmentUpload')) {
 
+                document.getElementById('attachmentUpload').value = '';
 
+            }
 
+            
+            // 显示模态框
 
+            modal.style.display = 'flex';
 
+            
+            return false;
 
+        }
 
+        
+        // 为兼容现有代码而添加的函数
 
+        function showAlarmModal(btn) {
 
+            return processAlarm(btn);
 
+        }
 
+        
+        // 处理表单提交
 
+        function submitAlarmHandler() {
 
+            console.log("提交按钮点击");
 
+            var modal = document.getElementById("alarmHandleModal");
 
+            var rowIndex = parseInt(modal.getAttribute("data-row"));
 
+            var tbody = document.querySelector("table tbody");
 
+            var row = tbody.children[rowIndex];
 
+            
+            if (row) {
 
+                var statusCell = row.querySelector("td:nth-child(10)");
 
+                var handlePersonCell = row.querySelector("td:nth-child(11)");
 
+                var handleTimeCell = row.querySelector("td:nth-child(12)");
 
+                var operationCell = row.querySelector("td:nth-child(13)");
 
+                
+                // 更新状态
 
+                var result = document.getElementById("handleResult").value;
 
+                var statusText = "已处理";
 
+                var statusClass = "badge-success";
 
+                
+                if (result === "0") {
 
+                    statusText = "未处理";
 
+                    statusClass = "badge-danger";
 
+                } else if (result === "3") {
 
+                    statusText = "已忽略";
 
+                    statusClass = "badge-warning";
 
+                }
 
+                
+                statusCell.innerHTML = "<span class=\"badge " + statusClass + "\">" + statusText + "</span>";
 
+                
+                // 更新处理人和时间
 
+                var currentDate = new Date();
 
+                var dateStr = currentDate.toLocaleDateString("zh-CN", { 
+                    year: "numeric", 
+                    month: "2-digit", 
+                    day: "2-digit",
 
+                    hour: "2-digit",
 
+                    minute: "2-digit",
 
+                    second: "2-digit",
 
+                    hour12: false
 
+                }).replace(/\//g, "-");
 
+                
+                handlePersonCell.textContent = "当前用户";  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                var btnContainer = operationCell.querySelector("div");
 
+                var viewBtn = operationCell.querySelector(".view-btn").cloneNode(true);
 
+                btnContainer.innerHTML = "";
 
+                btnContainer.appendChild(viewBtn);
 
+            }
 
+            
+            // 关闭模态框
 
+            modal.style.display = "none";
 
+        }
 
+
 
+        // 全局定义关闭弹窗函数
 
+        function closeDetailModalGlobal() {
 
+            document.getElementById('alarmDetailModal').style.display = 'none';
 
+        }
 
+
 
+        function closeHandleModalGlobal() {
 
+            document.getElementById('alarmHandleModal').style.display = 'none';
 
+        }
 
+    </script>
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 60px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
 
+                <!-- 设备编号 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备编号</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备名称</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">告警等级</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有告警等级</option>
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备类型 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备类型</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有设备类型</option>
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属地块</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有地块</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属农场</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有农场</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 告警时间 -->
 
+                <div class="form-group md:col-span-2">
 
+                    <label class="block text-sm text-gray-600 mb-1">告警时间</label>
 
+                    <div class="flex gap-2 items-center">
 
+                        <input type="date" class="input w-full" placeholder="开始日期">
 
+                        <span class="text-gray-400">至</span>
 
+                        <input type="date" class="input w-full" placeholder="结束日期">
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 处理状态 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">处理状态</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有状态</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+            </div>
 
+            
+            <div class="flex justify-end gap-4">
 
+                <button class="btn btn-primary">
 
+                    <i class="iconfont icon-search btn-icon"></i>
 
+                    搜索
 
+                </button>
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    重置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">今日告警总数</div>
 
+                <div class="text-3xl font-bold text-gray-800">24</div>
 
+                <div class="text-sm text-gray-400 mt-1">较昨日 +8</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">紧急告警</div>
 
+                <div class="text-3xl font-bold text-red-600">5</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：2</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">警告</div>
 
+                <div class="text-3xl font-bold text-yellow-600">12</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：4</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">提示信息</div>
 
+                <div class="text-3xl font-bold text-blue-600">7</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：1</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal" onclick="closeDetailModalGlobal();">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn" onclick="closeDetailModalGlobal();">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal" onclick="closeHandleModalGlobal();">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger alarm-level">紧急</span>
 
+                        <span class="text-sm text-gray-500 alarm-time">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2 alarm-content">电池电量过低，即将无法工作</h3>
 
+                    <div class="flex flex-col gap-1">
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备名称：</span>
 
+                            <span class="text-sm font-medium alarm-device-name">土壤传感器 #2</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备编号：</span>
 
+                            <span class="text-sm font-medium alarm-device-id">SNS-20230002</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备类型：</span>
 
+                            <span class="text-sm font-medium alarm-device-type">传感器</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属地块：</span>
 
+                            <span class="text-sm font-medium alarm-field">东区2号地块</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属农场：</span>
 
+                            <span class="text-sm font-medium alarm-farm">示范农场</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理结果</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" id="handleResult">
 
+                        <option value="0">未处理</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理备注</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理备注..." id="handleRemark"></textarea>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">附件上传</label>
 
+                    <div class="flex items-center">
 
+                        <label class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded cursor-pointer hover:bg-gray-100">
 
+                            <i class="iconfont icon-upload mr-2"></i>
 
+                            <span>选择文件</span>
 
+                            <input type="file" class="hidden" id="attachmentUpload" multiple>
 
+                        </label>
 
+                        <span class="ml-3 text-sm text-gray-500" id="fileCount">未选择文件</span>
 
+                    </div>
 
+                    <div class="mt-2" id="fileList"></div>
 
+                </div>
 
+                
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn" onclick="submitAlarmHandler()">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 获取模态框和按钮
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        
+        // 查看告警详情
 
+        document.querySelectorAll('.view-btn').forEach(function(btn) {
 
+            btn.onclick = function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+            };
 
+        });
 
+        
+        // 绑定事件 - 告警详情模态框
 
+        closeDetailModal.addEventListener('click', function() {
 
+            console.log('关闭详情按钮点击');
 
+            closeDetailModalGlobal();
 
+        });
 
+        
+        cancelDetailBtn.addEventListener('click', function() {
 
+            console.log('取消详情按钮点击');
 
+            closeDetailModalGlobal();
 
+        });
 
+        
+        // 绑定事件 - 处理告警模态框
 
+        closeHandleModal.addEventListener('click', function() {
 
+            console.log('关闭处理按钮点击');
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        cancelHandleBtn.addEventListener('click', function() {
 
+            console.log('取消处理按钮点击');
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        // 文件上传处理
 
+        const attachmentUpload = document.getElementById('attachmentUpload');
 
+        attachmentUpload.addEventListener('change', function() {
 
+            const fileCount = this.files.length;
 
+            const fileCountElem = document.getElementById('fileCount');
 
+            const fileListElem = document.getElementById('fileList');
 
+            
+            if (fileCount > 0) {
 
+                fileCountElem.textContent = `已选择 ${fileCount} 个文件`;
 
+                fileListElem.innerHTML = '';
 
+                
+                Array.from(this.files).forEach(file => {
 
+                    const fileItem = document.createElement('div');
 
+                    fileItem.className = 'flex items-center gap-2 mt-1';
 
+                    fileItem.innerHTML = `
 
+                        <i class="iconfont icon-file text-gray-500"></i>
 
+                        <span class="text-sm">${file.name}</span>
 
+                        <span class="text-xs text-gray-500">(${formatFileSize(file.size)})</span>
 
+                    `;
 
+                    fileListElem.appendChild(fileItem);
 
+                });
 
+            } else {
 
+                fileCountElem.textContent = '未选择文件';
 
+                fileListElem.innerHTML = '';
 
+            }
 
+        });
 
+        
+        // 格式化文件大小
 
+        function formatFileSize(bytes) {
 
+            if (bytes < 1024) return bytes + ' B';
 
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+        }
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            console.log('提交按钮点击');
 
+            const modal = document.getElementById('alarmHandleModal');
 
+            const rowIndex = parseInt(modal.getAttribute('data-row'));
 
+            const tbody = document.querySelector('table tbody');
 
+            const row = tbody.children[rowIndex];
 
+            
+            if (row) {
 
+                const statusCell = row.querySelector('td:nth-child(10)');
 
+                const handlePersonCell = row.querySelector('td:nth-child(11)');
 
+                const handleTimeCell = row.querySelector('td:nth-child(12)');
 
+                const operationCell = row.querySelector('td:nth-child(13)');
 
+                
+                // 更新状态
 
+                const result = document.getElementById('handleResult').value;
 
+                let statusText = '已处理';
 
+                let statusClass = 'badge-success';
 
+                
+                if (result === '0') {
 
+                    statusText = '未处理';
 
+                    statusClass = 'badge-danger';
 
+                } else if (result === '3') {
 
+                    statusText = '已忽略';
 
+                    statusClass = 'badge-warning';
 
+                }
 
+                
+                statusCell.innerHTML = `<span class="badge ${statusClass}">${statusText}</span>`;
 
+                
+                // 更新处理人和时间
 
+                const currentDate = new Date();
 
+                const dateStr = currentDate.toLocaleDateString('zh-CN', { 
+                    year: 'numeric', 
+                    month: '2-digit', 
+                    day: '2-digit',
 
+                    hour: '2-digit',
 
+                    minute: '2-digit',
 
+                    second: '2-digit',
 
+                    hour12: false
 
+                }).replace(/\//g, '-');
 
+                
+                handlePersonCell.textContent = '当前用户';  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                const btnContainer = operationCell.querySelector('div');
 
+                const viewBtn = operationCell.querySelector('.view-btn').cloneNode(true);
 
+                btnContainer.innerHTML = '';
 
+                btnContainer.appendChild(viewBtn);
 
+            }
 
+            
+            // 关闭模态框
 
+            closeHandleModalGlobal();
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModalGlobal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModalGlobal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 892 - 0
pages/device-alarm.html.bak2
Ver fichero 

@@ -0,0 +1,892 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 60px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="flex flex-wrap gap-4">
 
+                <div class="search-box flex-grow">
 
+                    <input type="text" class="input" placeholder="请输入设备名称/编号/告警内容">
 
+                    <button class="btn btn-primary">
 
+                        <i class="iconfont icon-search btn-icon"></i>
 
+                        搜索
 
+                    </button>
 
+                    <button class="btn btn-default">
 
+                        <i class="iconfont icon-reload btn-icon"></i>
 
+                        重置
 
+                    </button>
 
+                </div>
 
+                
+                <div class="flex gap-2">
 
+                    <select class="select">
 
+                        <option value="">所有告警等级</option>
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                    
+                    <select class="select">
 
+                        <option value="">所有处理状态</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">今日告警总数</div>
 
+                <div class="text-3xl font-bold text-gray-800">24</div>
 
+                <div class="text-sm text-gray-400 mt-1">较昨日 +8</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">紧急告警</div>
 
+                <div class="text-3xl font-bold text-red-600">5</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：2</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">警告</div>
 
+                <div class="text-3xl font-bold text-yellow-600">12</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：4</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">提示信息</div>
 
+                <div class="text-3xl font-bold text-blue-600">7</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：1</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理状态</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="1">已处理</option>
 
+                        <option value="2">处理中</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理方式</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="replace">更换设备</option>
 
+                        <option value="repair">维修设备</option>
 
+                        <option value="battery">更换电池</option>
 
+                        <option value="restart">重启设备</option>
 
+                        <option value="other">其他</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理说明</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const viewBtns = document.querySelectorAll('.view-btn');
 
+        
+        // 查看告警详情
 
+        viewBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.addEventListener('click', closeDetailModal);
 
+        cancelDetailBtn.addEventListener('click', closeDetailModal);
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        const handleBtns = document.querySelectorAll('.handle-btn');
 
+        
+        // 处理告警
 
+        handleBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmHandleModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.addEventListener('click', closeHandleModal);
 
+        cancelHandleBtn.addEventListener('click', closeHandleModal);
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+            // 实际应用中应该提交处理信息到后端
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1043 - 0
pages/device-alarm.html.bak3
Ver fichero 

@@ -0,0 +1,1043 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 70px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        /* 搜索表单样式 */
 
+        .search-form {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 16px;
 
+            padding: 10px 0;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form {
 
+                grid-template-columns: 1fr;
 
+            }
 
+        }
 
+        
+        .search-form-item {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .search-form-label {
 
+            width: 85px;
 
+            font-size: 14px;
 
+            color: #333;
 
+            text-align: right;
 
+            padding-right: 10px;
 
+            white-space: nowrap;
 
+        }
 
+        
+        .search-form-actions {
 
+            grid-column: span 2;
 
+            display: flex;
 
+            justify-content: center;
 
+            gap: 16px;
 
+            margin-top: 16px;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form-actions {
 
+                grid-column: 1;
 
+            }
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        .date-range {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .date-input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+            width: 100%;
 
+            cursor: pointer;
 
+            background-color: white;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        /* 多选下拉框样式 */
 
+        .select-container {
 
+            position: relative;
 
+            width: 100%;
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+            width: 100%;
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 8px center;
 
+            background-size: 16px;
 
+            padding-right: 32px;
 
+        }
 
+        
+        .select:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select[multiple] {
 
+            padding: 6px;
 
+            overflow-y: auto;
 
+            max-height: 120px;
 
+        }
 
+        
+        /* 多选选项样式 */
 
+        .select[multiple] option {
 
+            padding: 6px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 3px;
 
+            cursor: pointer;
 
+        }
 
+        
+        .select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.2);
 
+            color: #333;
 
+        }
 
+        
+        .select[multiple] option:hover {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+        
+        /* 多选框样式 */
 
+        select[multiple] {
 
+            height: auto;
 
+            min-height: 38px;
 
+            padding: 4px 8px;
 
+        }
 
+        
+        select[multiple] option {
 
+            padding: 4px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 2px;
 
+        }
 
+        
+        select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+            color: #4CAF50;
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        input[type="date"] {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+        }
 
+        
+        input[type="date"]:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="search-form">
 
+                <!-- 设备编号 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备编号:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 关键词搜索 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备名称:</label>
 
+                    <input type="text" class="input flex-1" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 下拉框多选 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">告警等级:</label>
 
+                    <select class="select flex-1" multiple size="3">
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备类型 下拉框多选 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备类型:</label>
 
+                    <select class="select flex-1" multiple size="4">
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属农场:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">所属地块:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备状态 -->
 
+                <div class="search-form-item">
 
+                    <label class="search-form-label">设备状态:</label>
 
+                    <select class="select flex-1">
 
+                        <option value="">全部</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 搜索按钮区域 -->
 
+                <div class="search-form-actions">
 
+                    <button class="btn btn-primary">
 
+                        <i class="iconfont icon-search btn-icon"></i>
 
+                        搜索
 
+                    </button>
 
+                    <button class="btn btn-default">
 
+                        <i class="iconfont icon-reload btn-icon"></i>
 
+                        重置
 
+                    </button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理状态</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="1">已处理</option>
 
+                        <option value="2">处理中</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理方式</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="replace">更换设备</option>
 
+                        <option value="repair">维修设备</option>
 
+                        <option value="battery">更换电池</option>
 
+                        <option value="restart">重启设备</option>
 
+                        <option value="other">其他</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理说明</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const viewBtns = document.querySelectorAll('.view-btn');
 
+        
+        // 查看告警详情
 
+        viewBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.addEventListener('click', closeDetailModal);
 
+        cancelDetailBtn.addEventListener('click', closeDetailModal);
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        const handleBtns = document.querySelectorAll('.handle-btn');
 
+        
+        // 处理告警
 
+        handleBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmHandleModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.addEventListener('click', closeHandleModal);
 
+        cancelHandleBtn.addEventListener('click', closeHandleModal);
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+            // 实际应用中应该提交处理信息到后端
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1043 - 0
pages/device-alarm.html.bak4
Ver fichero 

@@ -0,0 +1,1043 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 70px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        /* 搜索表单样式 */
 
+        .search-form {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 16px;
 
+            padding: 10px 0;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form {
 
+                grid-template-columns: 1fr;
 
+            }
 
+        }
 
+        
+        .search-form-item {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .search-form-label {
 
+            width: 85px;
 
+            font-size: 14px;
 
+            color: #333;
 
+            text-align: right;
 
+            padding-right: 10px;
 
+            white-space: nowrap;
 
+        }
 
+        
+        .search-form-actions {
 
+            grid-column: span 2;
 
+            display: flex;
 
+            justify-content: center;
 
+            gap: 16px;
 
+            margin-top: 16px;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .search-form-actions {
 
+                grid-column: 1;
 
+            }
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        .date-range {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .date-input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+            width: 100%;
 
+            cursor: pointer;
 
+            background-color: white;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        /* 多选下拉框样式 */
 
+        .select-container {
 
+            position: relative;
 
+            width: 100%;
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+            width: 100%;
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 8px center;
 
+            background-size: 16px;
 
+            padding-right: 32px;
 
+        }
 
+        
+        .select:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select[multiple] {
 
+            padding: 6px;
 
+            overflow-y: auto;
 
+            max-height: 120px;
 
+        }
 
+        
+        /* 多选选项样式 */
 
+        .select[multiple] option {
 
+            padding: 6px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 3px;
 
+            cursor: pointer;
 
+        }
 
+        
+        .select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.2);
 
+            color: #333;
 
+        }
 
+        
+        .select[multiple] option:hover {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+        
+        /* 多选框样式 */
 
+        select[multiple] {
 
+            height: auto;
 
+            min-height: 38px;
 
+            padding: 4px 8px;
 
+        }
 
+        
+        select[multiple] option {
 
+            padding: 4px 8px;
 
+            margin: 2px 0;
 
+            border-radius: 2px;
 
+        }
 
+        
+        select[multiple] option:checked {
 
+            background-color: rgba(76, 175, 80, 0.1);
 
+            color: #4CAF50;
 
+        }
 
+        
+        /* 日期选择器样式 */
 
+        input[type="date"] {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+        }
 
+        
+        input[type="date"]:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+<PLACEHOLDER>
 
+                <div class="search-form-actions">
 
+                    <button class="btn btn-primary">
 
+                        <i class="iconfont icon-search btn-icon"></i>
 
+                        搜索
 
+                    </button>
 
+                    <button class="btn btn-default">
 
+                        <i class="iconfont icon-reload btn-icon"></i>
 
+                        重置
 
+                    </button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600">土壤传感器 #2 (SNS-20230002)</p>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理状态</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="1">已处理</option>
 
+                        <option value="2">处理中</option>
 
+                        <option value="3">忽略</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理方式</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
+                        <option value="replace">更换设备</option>
 
+                        <option value="repair">维修设备</option>
 
+                        <option value="battery">更换电池</option>
 
+                        <option value="restart">重启设备</option>
 
+                        <option value="other">其他</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理说明</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理说明..."></textarea>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        const viewBtns = document.querySelectorAll('.view-btn');
 
+        
+        // 查看告警详情
 
+        viewBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.addEventListener('click', closeDetailModal);
 
+        cancelDetailBtn.addEventListener('click', closeDetailModal);
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        const handleBtns = document.querySelectorAll('.handle-btn');
 
+        
+        // 处理告警
 
+        handleBtns.forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmHandleModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            });
 
+        });
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.addEventListener('click', closeHandleModal);
 
+        cancelHandleBtn.addEventListener('click', closeHandleModal);
 
+        
+        // 提交处理
 
+        submitHandleBtn.addEventListener('click', function() {
 
+            alert('告警处理已提交');
 
+            closeHandleModal();
 
+            // 实际应用中应该提交处理信息到后端
 
+        });
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1203 - 0
pages/device-alarm.html.bak5
Ver fichero 

@@ -0,0 +1,1203 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" class="iframe-content">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>设备告警信息 - 爱智农</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <!-- 引入告警处理JS -->
 
+    <script src="alarm-handler.js"></script>
 
+    <script type="text/javascript">
 
+        // 全局函数，在任何事件加载前定义
 
+        function processAlarm(btn) {
 
+            // alert("处理按钮已点击！"); // 移除测试提示
 
+            console.log("处理按钮被点击:", btn);
 
+            
+            var alarmId = btn.getAttribute('data-id');
 
+            var row = btn.closest('tr');
 
+            
+            // 获取当前行数据
 
+            var alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+            var deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+            var deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+            var deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+            var field = row.querySelector('td:nth-child(6)').textContent;
 
+            var farm = row.querySelector('td:nth-child(7)').textContent;
 
+            var alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+            var alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+            
+            // 填充模态框数据
 
+            var modal = document.getElementById('alarmHandleModal');
 
+            modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+            modal.querySelector('.alarm-time').textContent = alarmTime;
 
+            modal.querySelector('.alarm-content').textContent = alarmContent;
 
+            modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+            modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+            modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+            modal.querySelector('.alarm-field').textContent = field;
 
+            modal.querySelector('.alarm-farm').textContent = farm;
 
+            
+            // 根据告警等级设置背景样式
 
+            var alarmBox = modal.querySelector('.p-4.mb-4');
 
+            
+            if (alarmLevel.includes('紧急')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+            } else if (alarmLevel.includes('警告')) {
 
+                alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+            } else {
 
+                alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+                modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+            }
 
+            
+            // 记录当前操作的行
 
+            modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+            
+            // 重置表单
 
+            document.getElementById('handleResult').value = '1';
 
+            document.getElementById('handleRemark').value = '';
 
+            document.getElementById('fileCount').textContent = '未选择文件';
 
+            document.getElementById('fileList').innerHTML = '';
 
+            if(document.getElementById('notifyRelated')) {
 
+                document.getElementById('notifyRelated').checked = false;
 
+            }
 
+            if(document.getElementById('attachmentUpload')) {
 
+                document.getElementById('attachmentUpload').value = '';
 
+            }
 
+            
+            // 显示模态框
 
+            modal.style.display = 'flex';
 
+            
+            return false;
 
+        }
 
+        
+        // 为兼容现有代码而添加的函数
 
+        function showAlarmModal(btn) {
 
+            return processAlarm(btn);
 
+        }
 
+    </script>
 
+    <style>
 
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
+            margin: 0;
 
+            padding: 0;
 
+            height: auto; 
+            overflow-y: auto; 
+            overflow-x: hidden;
 
+            min-height: 100%;
 
+        }
 
+        
+        .page-container {
 
+            padding: 20px;
 
+            padding-top: 60px; /* 添加顶部边距，为按钮留出空间 */
 
+            position: relative;
 
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
+            box-sizing: border-box;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .table-container {
 
+            position: relative;
 
+            overflow-x: auto;
 
+        }
 
+        
+        table {
 
+            width: 100%;
 
+            border-collapse: separate;
 
+            border-spacing: 0;
 
+        }
 
+        
+        th {
 
+            white-space: nowrap;
 
+            position: relative;
 
+            overflow: visible;
 
+            max-width: none;
 
+            text-overflow: clip;
 
+            background-color: #f9fafb;
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            font-weight: 500;
 
+            color: #6b7280;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        td {
 
+            white-space: nowrap;
 
+            max-width: 200px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            padding: 12px 16px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+        }
 
+        
+        tr:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        tr:hover td:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 固定最后一列（操作列）样式 */
 
+        .table-fixed-right {
 
+            position: relative;
 
+        }
 
+        
+        .table-fixed-right th:last-child,
 
+        .table-fixed-right td:last-child {
 
+            position: sticky;
 
+            right: 0;
 
+            z-index: 2;
 
+            background-color: white;
 
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .table-fixed-right th:last-child {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        /* 表格滚动控件 */
 
+        .table-scroll-controls {
 
+            display: none;
 
+            position: absolute;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 100%;
 
+            pointer-events: none;
 
+            z-index: 3;
 
+        }
 
+        
+        .table-scroll-btn {
 
+            position: absolute;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.9);
 
+            color: #4CAF50;
 
+            border: 1px solid #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            pointer-events: auto;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            z-index: 4;
 
+        }
 
+        
+        .table-scroll-left {
 
+            left: 10px;
 
+        }
 
+        
+        .table-scroll-right {
 
+            right: 10px;
 
+        }
 
+        
+        .has-overflow .table-scroll-controls {
 
+            display: block;
 
+        }
 
+        
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 4px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
+        }
 
+        
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
+        }
 
+        
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
+        }
 
+        
+        .btn-danger {
 
+            background-color: #ef4444;
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background-color: #dc2626;
 
+        }
 
+        
+        .btn-warning {
 
+            background-color: #f59e0b;
 
+            color: white;
 
+        }
 
+        
+        .btn-warning:hover {
 
+            background-color: #d97706;
 
+        }
 
+        
+        .btn-sm {
 
+            padding: 4px 8px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .btn-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            gap: 8px;
 
+        }
 
+        
+        .input {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .input:focus {
 
+            outline: none;
 
+            border-color: #4CAF50;
 
+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 
+        }
 
+        
+        .select {
 
+            padding: 8px 12px;
 
+            border: 1px solid #d1d5db;
 
+            border-radius: 4px;
 
+            background-color: white;
 
+        }
 
+        
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 50;
 
+            display: none;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 8px;
 
+            width: 100%;
 
+            max-width: 600px;
 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
+        }
 
+        
+        .modal-header {
 
+            padding: 16px 24px;
 
+            border-bottom: 1px solid #e5e7eb;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .modal-close {
 
+            cursor: pointer;
 
+            font-size: 20px;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 24px;
 
+        }
 
+        
+        .modal-footer {
 
+            padding: 16px 24px;
 
+            border-top: 1px solid #e5e7eb;
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 8px;
 
+        }
 
+        
+        .badge {
 
+            display: inline-block;
 
+            padding: 2px 8px;
 
+            border-radius: 9999px;
 
+            font-size: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .badge-success {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .badge-warning {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .badge-danger {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .pagination {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: flex-end;
 
+            gap: 4px;
 
+        }
 
+        
+        .pagination-item {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .pagination-item:hover {
 
+            background-color: #f3f4f6;
 
+        }
 
+        
+        .pagination-item.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+        }
 
+        
+        .pagination-item.disabled {
 
+            color: #9ca3af;
 
+            cursor: not-allowed;
 
+        }
 
+        
+        .timeline {
 
+            position: relative;
 
+            padding-left: 32px;
 
+        }
 
+        
+        .timeline-item {
 
+            position: relative;
 
+            padding-bottom: 16px;
 
+        }
 
+        
+        .timeline-item:last-child {
 
+            padding-bottom: 0;
 
+        }
 
+        
+        .timeline-item::before {
 
+            content: "";
 
+            position: absolute;
 
+            left: -24px;
 
+            top: 6px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background-color: #4CAF50;
 
+            z-index: 1;
 
+        }
 
+        
+        .timeline-item::after {
 
+            content: "";
 
+            position: absolute;
 
+            left: -19px;
 
+            top: 18px;
 
+            width: 2px;
 
+            height: calc(100% - 18px);
 
+            background-color: #e5e7eb;
 
+        }
 
+        
+        .timeline-item:last-child::after {
 
+            display: none;
 
+        }
 
+        
+        .timeline-time {
 
+            font-size: 12px;
 
+            color: #6b7280;
 
+            margin-bottom: 2px;
 
+        }
 
+        
+        .alarm-type-urgent {
 
+            border-left: 4px solid #ef4444;
 
+        }
 
+        
+        .alarm-type-warning {
 
+            border-left: 4px solid #f59e0b;
 
+        }
 
+        
+        .alarm-type-notice {
 
+            border-left: 4px solid #3b82f6;
 
+        }
 
+        
+        /* 修复按钮被遮挡的问题 */
 
+        .action-buttons {
 
+            position: relative;
 
+            z-index: 1000 !important;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container responsive-container">
 
+        <div class="flex justify-between items-center mb-6">
 
+            <h1 class="text-2xl font-bold">设备告警信息</h1>
 
+            
+            <div class="flex gap-2 action-buttons">
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    刷新数据
 
+                </button>
 
+                <button class="btn btn-primary" style="position: relative; z-index: 1000;">
 
+                    <i class="iconfont icon-setting btn-icon"></i>
 
+                    告警设置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card p-6 mb-6">
 
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
 
+                <!-- 设备编号 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备编号</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备编号关键词">
 
+                </div>
 
+                
+                <!-- 设备名称 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备名称</label>
 
+                    <input type="text" class="input w-full" placeholder="请输入设备名称关键词">
 
+                </div>
 
+                
+                <!-- 告警等级 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">告警等级</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有告警等级</option>
 
+                        <option value="urgent">紧急</option>
 
+                        <option value="warning">警告</option>
 
+                        <option value="notice">提示</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 设备类型 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">设备类型</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有设备类型</option>
 
+                        <option value="sensor">传感器</option>
 
+                        <option value="camera">摄像设备</option>
 
+                        <option value="controller">控制器</option>
 
+                        <option value="weather">气象设备</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属地块 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属地块</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有地块</option>
 
+                        <option value="east1">东区1号地块</option>
 
+                        <option value="east2">东区2号地块</option>
 
+                        <option value="west1">西区1号地块</option>
 
+                        <option value="south3">南区3号地块</option>
 
+                        <option value="north1">北区1号地块</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 所属农场 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">所属农场</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有农场</option>
 
+                        <option value="demo">示范农场</option>
 
+                        <option value="smart">智慧农场</option>
 
+                    </select>
 
+                </div>
 
+                
+                <!-- 告警时间 -->
 
+                <div class="form-group md:col-span-2">
 
+                    <label class="block text-sm text-gray-600 mb-1">告警时间</label>
 
+                    <div class="flex gap-2 items-center">
 
+                        <input type="date" class="input w-full" placeholder="开始日期">
 
+                        <span class="text-gray-400">至</span>
 
+                        <input type="date" class="input w-full" placeholder="结束日期">
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 处理状态 -->
 
+                <div class="form-group md:col-span-2 flex items-center gap-2">
 
+                    <label class="text-sm text-gray-600 whitespace-nowrap">处理状态</label>
 
+                    <select class="select w-full">
 
+                        <option value="">所有状态</option>
 
+                        <option value="1">已处理</option>
 
+                        <option value="0">未处理</option>
 
+                        <option value="2">处理中</option>
 
+                    </select>
 
+                </div>
 
+            </div>
 
+            
+            <div class="flex justify-end gap-4">
 
+                <button class="btn btn-primary">
 
+                    <i class="iconfont icon-search btn-icon"></i>
 
+                    搜索
 
+                </button>
 
+                <button class="btn btn-default">
 
+                    <i class="iconfont icon-reload btn-icon"></i>
 
+                    重置
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">今日告警总数</div>
 
+                <div class="text-3xl font-bold text-gray-800">24</div>
 
+                <div class="text-sm text-gray-400 mt-1">较昨日 +8</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">紧急告警</div>
 
+                <div class="text-3xl font-bold text-red-600">5</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：2</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">警告</div>
 
+                <div class="text-3xl font-bold text-yellow-600">12</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：4</div>
 
+            </div>
 
+            
+            <div class="card p-4 text-center">
 
+                <div class="text-gray-500 mb-1">提示信息</div>
 
+                <div class="text-3xl font-bold text-blue-600">7</div>
 
+                <div class="text-sm text-gray-400 mt-1">未处理：1</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="table-container">
 
+                <div class="table-scroll-controls">
 
+                    <button class="table-scroll-btn table-scroll-left">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </button>
 
+                    <button class="table-scroll-btn table-scroll-right">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </button>
 
+                </div>
 
+                <table class="table-fixed-right">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>告警ID</th>
 
+                            <th>告警等级</th>
 
+                            <th>设备名称</th>
 
+                            <th>设备编号</th>
 
+                            <th>设备类型</th>
 
+                            <th>所属地块</th>
 
+                            <th>所属农场</th>
 
+                            <th>告警内容</th>
 
+                            <th>告警时间</th>
 
+                            <th>处理状态</th>
 
+                            <th>处理人</th>
 
+                            <th>处理时间</th>
 
+                            <th class="min-w-[150px]">操作</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                        <tr>
 
+                            <td>ALM-20230001</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>土壤传感器 #2</td>
 
+                            <td>SNS-20230002</td>
 
+                            <td>传感器</td>
 
+                            <td>东区2号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>电池电量过低，即将无法工作</td>
 
+                            <td>2023-05-15 10:25:36</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="1">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="1" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230002</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>摄像头 #3</td>
 
+                            <td>CAM-20230003</td>
 
+                            <td>摄像设备</td>
 
+                            <td>西区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>信号弱，视频画面不稳定</td>
 
+                            <td>2023-05-15 09:18:42</td>
 
+                            <td><span class="badge badge-warning">处理中</span></td>
 
+                            <td>张三</td>
 
+                            <td>2023-05-15 10:20:15</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="2">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="2" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230003</td>
 
+                            <td><span class="badge badge-danger">紧急</span></td>
 
+                            <td>水位传感器 #1</td>
 
+                            <td>WLV-20230001</td>
 
+                            <td>传感器</td>
 
+                            <td>南区3号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>水位超过预警线，可能发生溢出</td>
 
+                            <td>2023-05-15 08:45:20</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>李四</td>
 
+                            <td>2023-05-15 09:30:42</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="3">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230004</td>
 
+                            <td><span class="badge badge-warning">警告</span></td>
 
+                            <td>气象站 #1</td>
 
+                            <td>WEA-20230001</td>
 
+                            <td>气象设备</td>
 
+                            <td>北区1号地块</td>
 
+                            <td>智慧农场</td>
 
+                            <td>湿度传感器异常，读数不稳定</td>
 
+                            <td>2023-05-14 17:32:15</td>
 
+                            <td><span class="badge badge-danger">未处理</span></td>
 
+                            <td>-</td>
 
+                            <td>-</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="4">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                    <button class="btn btn-primary btn-sm handle-btn" data-id="4" onclick="showAlarmModal(this)">
 
+                                        <i class="iconfont icon-check btn-icon"></i>
 
+                                        处理
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>ALM-20230005</td>
 
+                            <td><span class="badge badge-primary" style="background-color: #dbeafe; color: #1e40af;">提示</span></td>
 
+                            <td>自动灌溉控制器 #1</td>
 
+                            <td>IRR-20230001</td>
 
+                            <td>控制器</td>
 
+                            <td>东区1号地块</td>
 
+                            <td>示范农场</td>
 
+                            <td>设备需要例行维护检查</td>
 
+                            <td>2023-05-14 14:10:08</td>
 
+                            <td><span class="badge badge-success">已处理</span></td>
 
+                            <td>王五</td>
 
+                            <td>2023-05-14 16:45:20</td>
 
+                            <td>
 
+                                <div class="flex gap-2">
 
+                                    <button class="btn btn-default btn-sm view-btn" data-id="5">
 
+                                        <i class="iconfont icon-eye btn-icon"></i>
 
+                                        查看
 
+                                    </button>
 
+                                </div>
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+            </div>
 
+            
+            <div class="p-4 flex justify-between items-center">
 
+                <div class="text-sm text-gray-500">
 
+                    共 <span class="font-medium">24</span> 条记录，每页 <span class="font-medium">10</span> 条
 
+                </div>
 
+                
+                <div class="pagination">
 
+                    <div class="pagination-item disabled">
 
+                        <i class="iconfont icon-left"></i>
 
+                    </div>
 
+                    <div class="pagination-item active">1</div>
 
+                    <div class="pagination-item">2</div>
 
+                    <div class="pagination-item">3</div>
 
+                    <div class="pagination-item">
 
+                        <i class="iconfont icon-right"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 告警详情弹窗 -->
 
+    <div class="modal-overlay" id="alarmDetailModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">告警详情</h3>
 
+                <div class="modal-close" id="closeDetailModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger">紧急</span>
 
+                        <span class="text-sm text-gray-500">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2">电池电量过低，即将无法工作</h3>
 
+                    <p class="text-gray-600 mb-2">土壤传感器 #2 (SNS-20230002) 电池电量低于10%，请尽快更换电池，否则设备将在24小时内无法正常工作。</p>
 
+                    <div class="flex justify-between text-sm text-gray-500">
 
+                        <span>告警ID: ALM-20230001</span>
 
+                        <span>设备位置: 东区2号地块</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">设备信息</h4>
 
+                    <div class="grid grid-cols-2 gap-4">
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
+                            <div class="font-medium">SNS-20230002</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">设备类型</div>
 
+                            <div class="font-medium">土壤传感器</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装位置</div>
 
+                            <div class="font-medium">东区2号地块</div>
 
+                        </div>
 
+                        <div>
 
+                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
+                            <div class="font-medium">2023-01-20</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="mb-4">
 
+                    <h4 class="font-medium mb-2">告警状态</h4>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>当前状态</span>
 
+                        <span class="font-medium text-red-600">未处理</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理人</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                    <div class="mb-1 flex justify-between">
 
+                        <span>处理时间</span>
 
+                        <span class="font-medium">-</span>
 
+                    </div>
 
+                </div>
 
+                
+                <div>
 
+                    <h4 class="font-medium mb-2">处理记录</h4>
 
+                    <div class="text-center text-gray-500 py-4">
 
+                        暂无处理记录
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelDetailBtn">关闭</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 处理告警弹窗 -->
 
+    <div class="modal-overlay" id="alarmHandleModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">处理告警</h3>
 
+                <div class="modal-close" id="closeHandleModal">&times;</div>
 
+            </div>
 
+            <div class="modal-body">
 
+                <div class="p-4 mb-4 bg-red-50 alarm-type-urgent">
 
+                    <div class="flex justify-between items-center mb-2">
 
+                        <span class="badge badge-danger alarm-level">紧急</span>
 
+                        <span class="text-sm text-gray-500 alarm-time">2023-05-15 10:25:36</span>
 
+                    </div>
 
+                    <h3 class="text-lg font-bold mb-2 alarm-content">电池电量过低，即将无法工作</h3>
 
+                    <div class="flex flex-col gap-1">
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备名称：</span>
 
+                            <span class="text-sm font-medium alarm-device-name">土壤传感器 #2</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备编号：</span>
 
+                            <span class="text-sm font-medium alarm-device-id">SNS-20230002</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">设备类型：</span>
 
+                            <span class="text-sm font-medium alarm-device-type">传感器</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属地块：</span>
 
+                            <span class="text-sm font-medium alarm-field">东区2号地块</span>
 
+                        </div>
 
+                        <div class="flex">
 
+                            <span class="text-sm text-gray-600 w-20">所属农场：</span>
 
+                            <span class="text-sm font-medium alarm-farm">示范农场</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理结果</label>
 
+                    <select class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" id="handleResult">
 
+                        <option value="1">已处理</option>
 
+                        <option value="3">忽略</option>
 
+                        <option value="4">非故障</option>
 
+                    </select>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">处理备注</label>
 
+                    <textarea class="w-full border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="请输入处理备注..." id="handleRemark"></textarea>
 
+                </div>
 
+                
+                <div class="form-group mb-4">
 
+                    <label class="block font-medium mb-1">附件上传</label>
 
+                    <div class="flex items-center">
 
+                        <label class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded cursor-pointer hover:bg-gray-100">
 
+                            <i class="iconfont icon-upload mr-2"></i>
 
+                            <span>选择文件</span>
 
+                            <input type="file" class="hidden" id="attachmentUpload" multiple>
 
+                        </label>
 
+                        <span class="ml-3 text-sm text-gray-500" id="fileCount">未选择文件</span>
 
+                    </div>
 
+                    <div class="mt-2" id="fileList"></div>
 
+                </div>
 
+                
+                <div class="form-group">
 
+                    <label class="flex items-center">
 
+                        <input type="checkbox" class="mr-2" id="notifyRelated">
 
+                        <span>通知相关人员</span>
 
+                    </label>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button class="btn btn-default" id="cancelHandleBtn">取消</button>
 
+                <button class="btn btn-primary" id="submitHandleBtn">提交</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+    // 添加全局处理函数，确保在任何DOM加载前定义
 
+    function processAlarm(btn) {
 
+        // alert("处理按钮已点击！");
 
+        console.log("处理按钮被点击:", btn);
 
+        
+        var alarmId = btn.getAttribute('data-id');
 
+        var row = btn.closest('tr');
 
+        
+        // 获取当前行数据
 
+        var alarmLevel = row.querySelector('td:nth-child(2) .badge').textContent;
 
+        var deviceName = row.querySelector('td:nth-child(3)').textContent;
 
+        var deviceId = row.querySelector('td:nth-child(4)').textContent;
 
+        var deviceType = row.querySelector('td:nth-child(5)').textContent;
 
+        var field = row.querySelector('td:nth-child(6)').textContent;
 
+        var farm = row.querySelector('td:nth-child(7)').textContent;
 
+        var alarmContent = row.querySelector('td:nth-child(8)').textContent;
 
+        var alarmTime = row.querySelector('td:nth-child(9)').textContent;
 
+        
+        // 填充模态框数据
 
+        var modal = document.getElementById('alarmHandleModal');
 
+        modal.querySelector('.alarm-level').textContent = alarmLevel;
 
+        modal.querySelector('.alarm-time').textContent = alarmTime;
 
+        modal.querySelector('.alarm-content').textContent = alarmContent;
 
+        modal.querySelector('.alarm-device-name').textContent = deviceName;
 
+        modal.querySelector('.alarm-device-id').textContent = deviceId;
 
+        modal.querySelector('.alarm-device-type').textContent = deviceType;
 
+        modal.querySelector('.alarm-field').textContent = field;
 
+        modal.querySelector('.alarm-farm').textContent = farm;
 
+        
+        // 根据告警等级设置背景样式
 
+        var alarmBox = modal.querySelector('.p-4.mb-4');
 
+        
+        if (alarmLevel.includes('紧急')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-red-50 alarm-type-urgent';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-danger alarm-level';
 
+        } else if (alarmLevel.includes('警告')) {
 
+            alarmBox.className = 'p-4 mb-4 bg-yellow-50 alarm-type-warning';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-warning alarm-level';
 
+        } else {
 
+            alarmBox.className = 'p-4 mb-4 bg-blue-50 alarm-type-notice';
 
+            modal.querySelector('.alarm-level').className = 'badge badge-primary alarm-level';
 
+        }
 
+        
+        // 记录当前操作的行
 
+        modal.setAttribute('data-row', Array.from(row.parentNode.children).indexOf(row));
 
+        
+        // 重置表单
 
+        document.getElementById('handleResult').value = '1';
 
+        document.getElementById('handleRemark').value = '';
 
+        document.getElementById('fileCount').textContent = '未选择文件';
 
+        document.getElementById('fileList').innerHTML = '';
 
+        if(document.getElementById('notifyRelated')) {
 
+            document.getElementById('notifyRelated').checked = false;
 
+        }
 
+        if(document.getElementById('attachmentUpload')) {
 
+            document.getElementById('attachmentUpload').value = '';
 
+        }
 
+        
+        // 显示模态框
 
+        modal.style.display = 'flex';
 
+        
+        return false; // 防止表单提交和页面刷新
 
+    }
 
+    
+    // 全局处理告警按钮点击函数 - 保留兼容性
 
+    function handleAlarmBtn(btn) {
 
+        console.log('处理按钮点击 - handleAlarmBtn调用', btn);
 
+        showAlarmModal(btn);
 
+    }
 
+    
+    document.addEventListener("DOMContentLoaded", function() {
 
+        // 初始化表格滚动功能
 
+        function initTableScroll() {
 
+            const tableContainer = document.querySelector(".table-container");
 
+            if (!tableContainer) return;
 
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
 
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
 
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
 
+            
+            // 检查表格是否需要水平滚动
 
+            function checkTableOverflow() {
 
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
 
+                    tableContainer.classList.add("has-overflow");
 
+                } else {
 
+                    tableContainer.classList.remove("has-overflow");
 
+                }
 
+            }
 
+            
+            // 左右滚动按钮点击事件
 
+            scrollLeftBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft -= 150;
 
+            });
 
+            
+            scrollRightBtn.addEventListener("click", function() {
 
+                tableContainer.scrollLeft += 150;
 
+            });
 
+            
+            // 初始检查和窗口大小变化时检查
 
+            checkTableOverflow();
 
+            window.addEventListener("resize", checkTableOverflow);
 
+            
+            // 滚动事件处理
 
+            tableContainer.addEventListener("scroll", function() {
 
+                // 根据滚动位置显示/隐藏滚动按钮
 
+                if (tableContainer.scrollLeft <= 10) {
 
+                    scrollLeftBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollLeftBtn.style.opacity = "1";
 
+                }
 
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
 
+                    scrollRightBtn.style.opacity = "0.5";
 
+                } else {
 
+                    scrollRightBtn.style.opacity = "1";
 
+                }
 
+            });
 
+            
+            // 初始触发滚动事件，设置初始按钮状态
 
+            tableContainer.dispatchEvent(new Event("scroll"));
 
+        }
 
+        
+        // 初始化表格滚动
 
+        initTableScroll();
 
+        
+        // 告警详情弹窗
 
+        const alarmDetailModal = document.getElementById('alarmDetailModal');
 
+        const closeDetailModal = document.getElementById('closeDetailModal');
 
+        const cancelDetailBtn = document.getElementById('cancelDetailBtn');
 
+        
+        // 查看告警详情
 
+        document.querySelectorAll('.view-btn').forEach(function(btn) {
 
+            btn.onclick = function() {
 
+                const alarmId = this.getAttribute('data-id');
 
+                alarmDetailModal.style.display = 'flex';
 
+                
+                // 实际应用中应该根据ID获取告警详情
 
+            };
 
+        });
 
+        
+        // 关闭详情弹窗
 
+        function closeDetailModal() {
 
+            alarmDetailModal.style.display = 'none';
 
+        }
 
+        
+        closeDetailModal.onclick = closeDetailModal;
 
+        cancelDetailBtn.onclick = closeDetailModal;
 
+        
+        // 告警处理弹窗
 
+        const alarmHandleModal = document.getElementById('alarmHandleModal');
 
+        const closeHandleModal = document.getElementById('closeHandleModal');
 
+        const cancelHandleBtn = document.getElementById('cancelHandleBtn');
 
+        const submitHandleBtn = document.getElementById('submitHandleBtn');
 
+        
+        // 不需要再为处理按钮绑定事件，因为已经通过inline onclick属性绑定了showAlarmModal函数
 
+        console.log('处理按钮数量:', document.querySelectorAll('.handle-btn').length);
 
+        
+        // 文件上传处理
 
+        const attachmentUpload = document.getElementById('attachmentUpload');
 
+        attachmentUpload.addEventListener('change', function() {
 
+            const fileCount = this.files.length;
 
+            const fileCountElem = document.getElementById('fileCount');
 
+            const fileListElem = document.getElementById('fileList');
 
+            
+            if (fileCount > 0) {
 
+                fileCountElem.textContent = `已选择 ${fileCount} 个文件`;
 
+                fileListElem.innerHTML = '';
 
+                
+                Array.from(this.files).forEach(file => {
 
+                    const fileItem = document.createElement('div');
 
+                    fileItem.className = 'flex items-center gap-2 mt-1';
 
+                    fileItem.innerHTML = `
 
+                        <i class="iconfont icon-file text-gray-500"></i>
 
+                        <span class="text-sm">${file.name}</span>
 
+                        <span class="text-xs text-gray-500">(${formatFileSize(file.size)})</span>
 
+                    `;
 
+                    fileListElem.appendChild(fileItem);
 
+                });
 
+            } else {
 
+                fileCountElem.textContent = '未选择文件';
 
+                fileListElem.innerHTML = '';
 
+            }
 
+        });
 
+        
+        // 格式化文件大小
 
+        function formatFileSize(bytes) {
 
+            if (bytes < 1024) return bytes + ' B';
 
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
 
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
 
+        }
 
+        
+        // 关闭处理弹窗
 
+        function closeHandleModal() {
 
+            console.log('关闭处理弹窗');
 
+            alarmHandleModal.style.display = 'none';
 
+        }
 
+        
+        closeHandleModal.onclick = function() {
 
+            console.log('关闭按钮点击');
 
+            closeHandleModal();
 
+        };
 
+        
+        cancelHandleBtn.onclick = function() {
 
+            console.log('取消按钮点击');
 
+            closeHandleModal();
 
+        };
 
+        
+        // 提交处理
 
+        submitHandleBtn.onclick = function() {
 
+            const modal = document.getElementById('alarmHandleModal');
 
+            const rowIndex = parseInt(modal.getAttribute('data-row'));
 
+            const tbody = document.querySelector('table tbody');
 
+            const row = tbody.children[rowIndex];
 
+            
+            if (row) {
 
+                const statusCell = row.querySelector('td:nth-child(10)');
 
+                const handlePersonCell = row.querySelector('td:nth-child(11)');
 
+                const handleTimeCell = row.querySelector('td:nth-child(12)');
 
+                const operationCell = row.querySelector('td:nth-child(13)');
 
+                
+                // 更新状态
 
+                const result = document.getElementById('handleResult').value;
 
+                let statusText = '已处理';
 
+                let statusClass = 'badge-success';
 
+                
+                if (result === '3') {
 
+                    statusText = '已忽略';
 
+                    statusClass = 'badge-warning';
 
+                } else if (result === '4') {
 
+                    statusText = '非故障';
 
+                    statusClass = 'badge-primary';
 
+                }
 
+                
+                statusCell.innerHTML = `<span class="badge ${statusClass}">${statusText}</span>`;
 
+                
+                // 更新处理人和时间
 
+                const currentDate = new Date();
 
+                const dateStr = currentDate.toLocaleDateString('zh-CN', { 
+                    year: 'numeric', 
+                    month: '2-digit', 
+                    day: '2-digit',
 
+                    hour: '2-digit',
 
+                    minute: '2-digit',
 
+                    second: '2-digit',
 
+                    hour12: false
 
+                }).replace(/\//g, '-');
 
+                
+                handlePersonCell.textContent = '当前用户';  // 实际应用中应为登录用户名
 
+                handleTimeCell.textContent = dateStr;
 
+                
+                // 更新操作按钮 - 已处理的只保留查看按钮
 
+                const btnContainer = operationCell.querySelector('div');
 
+                const viewBtn = operationCell.querySelector('.view-btn').cloneNode(true);
 
+                btnContainer.innerHTML = '';
 
+                btnContainer.appendChild(viewBtn);
 
+            }
 
+            
+            // alert('告警处理已提交'); // 移除测试提示
 
+            closeHandleModal();
 
+        };
 
+        
+        // 点击弹窗外部关闭弹窗
 
+        window.addEventListener('click', function(e) {
 
+            if (e.target === alarmDetailModal) {
 
+                closeDetailModal();
 
+            }
 
+            if (e.target === alarmHandleModal) {
 
+                closeHandleModal();
 
+            }
 
+        });
 
+    });
 
+    </script>
 
+</body>
 
+</html>

+ 1201 - 27
pages/device-management.html
Ver fichero 

@@ -712,19 +712,6 @@
 
                                     <option value="weather">气象设备</option>
 
                                 </select>
 
                             </div>
 
-                            <div class="form-group">
 
-                                <label class="form-label">所属地块</label>
 
-                                <select class="form-input" id="devicePlot">
 
-                                    <option value="">请选择所属地块</option>
 
-                                    <option value="a-3">A区大棚3号</option>
 
-                                    <option value="a-1">A区大棚1号</option>
 
-                                    <option value="b-2">B区稻田2号</option>
 
-                                    <option value="c-1">C区果园1号</option>
 
-                                    <option value="m-1">监测区1号</option>
 
-                                </select>
 
-                            </div>
 
-                        </div>
 
-                        <div class="grid-2">
 
                             <div class="form-group">
 
                                 <label class="form-label">所属农场</label>
 
                                 <select class="form-input" id="deviceFarm">
 
@@ -735,19 +722,29 @@
 
                                     <option value="center">中心监测农场</option>
 
                                 </select>
 
                             </div>
 
+                        </div>
 
+                        <div class="grid-2">
 
                             <div class="form-group">
 
                                 <label class="form-label">设备型号</label>
 
                                 <input type="text" class="form-input" id="deviceModel" placeholder="输入设备型号">
 
                             </div>
 
-                        </div>
 
-                        <div class="grid-2">
 
                             <div class="form-group">
 
                                 <label class="form-label">厂家</label>
 
                                 <input type="text" class="form-input" id="deviceManufacturer" placeholder="输入厂家名称">
 
                             </div>
 
+                        </div>
 
+                        <div class="form-group">
 
+                            <label class="form-label">安装日期</label>
 
+                            <input type="date" class="form-input" id="installDate">
 
+                        </div>
 
+                        <div class="grid-2">
 
+                            <div class="form-group">
 
+                                <label class="form-label">GPS经度</label>
 
+                                <input type="number" step="0.000001" class="form-input" id="deviceLongitude" placeholder="输入经度（如：120.1619）">
 
+                            </div>
 
                             <div class="form-group">
 
-                                <label class="form-label">安装日期</label>
 
-                                <input type="date" class="form-input" id="installDate">
 
+                                <label class="form-label">GPS纬度</label>
 
+                                <input type="number" step="0.000001" class="form-input" id="deviceLatitude" placeholder="输入纬度（如：30.2922）">
 
                             </div>
 
                         </div>
 
                         <div class="form-group">
 
@@ -781,6 +778,659 @@
 
                 </div>
 
             </div>
 
         </div>
 
+
 
+        <!-- 设备详情弹窗 -->
 
+        <div class="modal-overlay" id="deviceDetailModal" style="z-index: 60;">
 
+            <div class="modal" style="max-width: 800px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column;">
 
+                <div class="modal-header">
 
+                    <div class="modal-title">设备详情</div>
 
+                    <div class="modal-close" id="closeDetailModal">&times;</div>
 
+                </div>
 
+                <div class="flex border-b border-gray-200">
 
+                    <div class="cursor-pointer px-6 py-3 font-medium text-sm border-b-2 border-green-500 text-green-600 tab-btn active" data-tab="basic-info">基本信息</div>
 
+                    <div class="cursor-pointer px-6 py-3 font-medium text-sm text-gray-500 tab-btn" data-tab="real-time-data">实时数据</div>
 
+                </div>
 
+                <div class="modal-body flex-grow overflow-y-auto" style="max-height: calc(85vh - 120px);">
 
+                    <!-- 基本信息 Tab -->
 
+                    <div class="tab-content active" id="basic-info">
 
+                        <div class="grid grid-cols-2 gap-6">
 
+                            <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                <h3 class="text-lg font-medium text-gray-800 mb-4">设备基础信息</h3>
 
+                                <div class="space-y-4">
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">设备编号：</span>
 
+                                        <span id="detail-device-id" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">设备名称：</span>
 
+                                        <span id="detail-device-name" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">设备类型：</span>
 
+                                        <span id="detail-device-type" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">设备型号：</span>
 
+                                        <span id="detail-device-model" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">制造厂商：</span>
 
+                                        <span id="detail-manufacturer" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                <h3 class="text-lg font-medium text-gray-800 mb-4">位置信息</h3>
 
+                                <div class="space-y-4">
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">所属农场：</span>
 
+                                        <span id="detail-farm" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">所属地块：</span>
 
+                                        <span id="detail-plot" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">安装日期：</span>
 
+                                        <span id="detail-install-date" class="font-medium text-gray-800"></span>
 
+                                    </div>
 
+                                    <div class="flex items-center">
 
+                                        <span class="text-gray-500 w-24">GPS坐标：</span>
 
+                                        <span id="detail-gps" class="font-medium text-gray-800">30.2922° N, 120.1619° E</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="card p-6 bg-white rounded-lg shadow-sm col-span-2">
 
+                                <h3 class="text-lg font-medium text-gray-800 mb-4">运行状态</h3>
 
+                                <div class="grid grid-cols-2 gap-8">
 
+                                    <div class="space-y-4">
 
+                                        <div class="flex items-center">
 
+                                            <span class="text-gray-500 w-24">当前状态：</span>
 
+                                            <span id="detail-status" class="font-medium"></span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="text-gray-500 w-24">最近活动：</span>
 
+                                            <span id="detail-last-active" class="font-medium text-gray-800"></span>
 
+                                        </div>
 
+                                    </div>
 
+                                    <div class="space-y-4">
 
+                                        <div class="flex items-center">
 
+                                            <span class="text-gray-500 w-24">电量状态：</span>
 
+                                            <div class="flex-1">
 
+                                                <div class="w-full bg-gray-200 rounded-full h-2.5">
 
+                                                    <div id="detail-battery" class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
 
+                                                </div>
 
+                                            </div>
 
+                                            <span class="ml-2 text-sm text-gray-500" id="detail-battery-text">85%</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="text-gray-500 w-24">信号强度：</span>
 
+                                            <div class="flex items-end space-x-1">
 
+                                                <div class="h-3 w-1.5 bg-green-500 rounded-t"></div>
 
+                                                <div class="h-4 w-1.5 bg-green-500 rounded-t"></div>
 
+                                                <div class="h-5 w-1.5 bg-green-500 rounded-t"></div>
 
+                                                <div class="h-6 w-1.5 bg-green-500 rounded-t"></div>
 
+                                                <div class="h-7 w-1.5 bg-gray-300 rounded-t"></div>
 
+                                            </div>
 
+                                            <span class="ml-2 text-sm text-gray-500">良好</span>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 实时数据 Tab -->
 
+                    <div class="tab-content hidden" id="real-time-data">
 
+                        <!-- 摄像头设备视图 -->
 
+                        <div id="camera-view" class="device-type-view hidden">
 
+                            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
 
+                                <!-- 左侧视频区域 -->
 
+                                <div class="md:col-span-3">
 
+                                    <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                        <div class="flex justify-between items-center mb-4">
 
+                                            <h3 class="text-lg font-medium text-gray-800">实时视频</h3>
 
+                                            <div class="flex space-x-2">
 
+                                                <button class="bg-gray-500 text-white p-2 rounded-md">
 
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
 
+                                                    </svg>
 
+                                                </button>
 
+                                                <button class="bg-gray-500 text-white p-2 rounded-md">
 
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
 
+                                                    </svg>
 
+                                                </button>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="aspect-video bg-gray-100 rounded-md flex items-center justify-center border border-gray-200">
 
+                                            <!-- SVG占位符 -->
 
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
 
+                                                <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
 
+                                                <line x1="7" y1="2" x2="7" y2="22"></line>
 
+                                                <line x1="17" y1="2" x2="17" y2="22"></line>
 
+                                                <line x1="2" y1="12" x2="22" y2="12"></line>
 
+                                                <line x1="2" y1="7" x2="7" y2="7"></line>
 
+                                                <line x1="2" y1="17" x2="7" y2="17"></line>
 
+                                                <line x1="17" y1="17" x2="22" y2="17"></line>
 
+                                                <line x1="17" y1="7" x2="22" y2="7"></line>
 
+                                            </svg>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <!-- 右侧云台控制 -->
 
+                                <div class="md:col-span-1">
 
+                                    <div class="card p-6 bg-white rounded-lg shadow-sm h-full">
 
+                                        <h3 class="text-lg font-medium text-gray-800 mb-6">云台控制</h3>
 
+                                        
+                                        <!-- 方向控制 -->
 
+                                        <div class="flex flex-col items-center mb-6">
 
+                                            <!-- 上 -->
 
+                                            <button class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 mb-4 transition-colors">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
 
+                                                </svg>
 
+                                            </button>
 
+                                            
+                                            <!-- 左右 -->
 
+                                            <div class="flex justify-between w-full mb-4">
 
+                                                <button class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors">
 
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
 
+                                                    </svg>
 
+                                                </button>
 
+                                                <button class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors">
 
+                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
 
+                                                    </svg>
 
+                                                </button>
 
+                                            </div>
 
+                                            
+                                            <!-- 下 -->
 
+                                            <button class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 
+                                                </svg>
 
+                                            </button>
 
+                                        </div>
 
+                                        
+                                        <!-- 缩放控制 -->
 
+                                        <div class="space-y-6">
 
+                                            <div>
 
+                                                <label class="block text-sm text-gray-600 mb-2">缩放</label>
 
+                                                <div class="flex items-center">
 
+                                                    <span class="text-gray-500 mr-2">-</span>
 
+                                                    <input type="range" min="1" max="10" value="1" class="w-full accent-blue-500">
 
+                                                    <span class="text-gray-500 ml-2">+</span>
 
+                                                </div>
 
+                                            </div>
 
+                                            
+                                            <!-- 焦距控制 -->
 
+                                            <div>
 
+                                                <label class="block text-sm text-gray-600 mb-2">焦距</label>
 
+                                                <div class="flex items-center">
 
+                                                    <span class="text-gray-500 mr-2">-</span>
 
+                                                    <input type="range" min="1" max="10" value="5" class="w-full accent-blue-500">
 
+                                                    <span class="text-gray-500 ml-2">+</span>
 
+                                                </div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 传感器设备视图 -->
 
+                        <div id="sensor-view" class="device-type-view hidden">
 
+                            <div class="grid grid-cols-1 gap-6">
 
+                                <!-- 实时读数卡片 -->
 
+                                <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                    <div class="flex justify-between items-center mb-4">
 
+                                        <h3 class="text-lg font-medium text-gray-800">实时读数</h3>
 
+                                        <div class="text-xs text-gray-500">最后更新: <span id="sensor-last-update">2023-10-16 15:45</span></div>
 
+                                    </div>
 
+                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 
+                                        <div class="bg-gray-50 p-4 rounded-lg text-center">
 
+                                            <div class="text-4xl font-bold text-green-600 mb-1" id="sensor-value-1">26.5</div>
 
+                                            <div class="text-sm text-gray-500">温度 (°C)</div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg text-center">
 
+                                            <div class="text-4xl font-bold text-blue-600 mb-1" id="sensor-value-2">65%</div>
 
+                                            <div class="text-sm text-gray-500">湿度</div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg text-center">
 
+                                            <div class="text-4xl font-bold text-amber-600 mb-1" id="sensor-value-3">782</div>
 
+                                            <div class="text-sm text-gray-500">光照 (lux)</div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg text-center">
 
+                                            <div class="text-4xl font-bold text-purple-600 mb-1" id="sensor-value-4">25%</div>
 
+                                            <div class="text-sm text-gray-500">土壤湿度</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <!-- 数据统计图 -->
 
+                                <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                    <div class="flex flex-wrap justify-between items-center mb-4">
 
+                                        <h3 class="text-lg font-medium text-gray-800 mb-2 sm:mb-0">数据统计图</h3>
 
+                                        
+                                        <div class="flex flex-wrap items-center gap-3">
 
+                                            <!-- 指标选择 -->
 
+                                            <div class="flex items-center">
 
+                                                <span class="text-sm text-gray-500 mr-2">指标:</span>
 
+                                                <select id="chart-indicator" class="text-sm border border-gray-300 rounded px-2 py-1">
 
+                                                    <option value="all">全部指标</option>
 
+                                                    <option value="temperature">温度</option>
 
+                                                    <option value="humidity">湿度</option>
 
+                                                    <option value="light">光照</option>
 
+                                                    <option value="soil">土壤湿度</option>
 
+                                                </select>
 
+                                            </div>
 
+                                            
+                                            <!-- 时间范围 -->
 
+                                            <div class="flex space-x-1">
 
+                                                <button class="time-range-btn bg-gray-200 hover:bg-gray-300 text-xs px-3 py-1.5 rounded-full" data-range="24h">24小时</button>
 
+                                                <button class="time-range-btn bg-green-500 text-white text-xs px-3 py-1.5 rounded-full" data-range="7d">7天</button>
 
+                                                <button class="time-range-btn bg-gray-200 hover:bg-gray-300 text-xs px-3 py-1.5 rounded-full" data-range="30d">30天</button>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                    
+                                    <!-- 图表容器 -->
 
+                                    <div class="chart-container h-80 bg-gray-50 rounded-lg">
 
+                                        <canvas id="sensor-chart"></canvas>
 
+                                    </div>
 
+                                    
+                                    <!-- 图表图例 -->
 
+                                    <div class="flex flex-wrap gap-4 mt-4 justify-center">
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">温度</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">湿度</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-amber-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">光照</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-purple-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">土壤湿度</span>
 
+                                        </div>
 
+                                    </div>
 
+
 
+                                    <!-- 数据统计信息 -->
 
+                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均温度</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">24.8 °C</div>
 
+                                            <div class="text-xs text-green-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                2.5%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均湿度</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">63.2%</div>
 
+                                            <div class="text-xs text-red-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                1.8%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均光照</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">756 lux</div>
 
+                                            <div class="text-xs text-green-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                5.2%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均土壤湿度</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">28.5%</div>
 
+                                            <div class="text-xs text-green-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                3.1%
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 气象站设备视图 -->
 
+                        <div id="weather-view" class="device-type-view hidden">
 
+                            <div class="grid grid-cols-1 gap-6">
 
+                                <!-- 实时气象数据卡片 -->
 
+                                <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                    <div class="flex justify-between items-center mb-4">
 
+                                        <h3 class="text-lg font-medium text-gray-800">实时气象数据</h3>
 
+                                        <div class="text-xs text-gray-500">最后更新: <span id="weather-last-update">2023-10-16 15:50</span></div>
 
+                                    </div>
 
+                                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-red-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">气温</div>
 
+                                                <div class="text-xl font-medium text-gray-800">24.8 °C</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-blue-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">湿度</div>
 
+                                                <div class="text-xl font-medium text-gray-800">76%</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-blue-600 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">降雨量</div>
 
+                                                <div class="text-xl font-medium text-gray-800">2.5 mm</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-amber-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">风向</div>
 
+                                                <div class="text-xl font-medium text-gray-800">东北</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-purple-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">风速</div>
 
+                                                <div class="text-xl font-medium text-gray-800">3.2 m/s</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-indigo-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">气压</div>
 
+                                                <div class="text-xl font-medium text-gray-800">1013 hPa</div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-gray-50 p-4 rounded-lg flex items-center">
 
+                                            <div class="text-green-500 mr-3">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
 
+                                                </svg>
 
+                                            </div>
 
+                                            <div>
 
+                                                <div class="text-sm text-gray-500">光照</div>
 
+                                                <div class="text-xl font-medium text-gray-800">12500 lux</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <!-- 数据统计图 -->
 
+                                <div class="card p-6 bg-white rounded-lg shadow-sm">
 
+                                    <div class="flex flex-wrap justify-between items-center mb-4">
 
+                                        <h3 class="text-lg font-medium text-gray-800 mb-2 sm:mb-0">气象数据统计图</h3>
 
+                                        
+                                        <div class="flex flex-wrap items-center gap-3">
 
+                                            <!-- 指标选择 -->
 
+                                            <div class="flex items-center">
 
+                                                <span class="text-sm text-gray-500 mr-2">指标:</span>
 
+                                                <select id="weather-chart-indicator" class="text-sm border border-gray-300 rounded px-2 py-1">
 
+                                                    <option value="all">全部指标</option>
 
+                                                    <option value="temperature">气温</option>
 
+                                                    <option value="humidity">湿度</option>
 
+                                                    <option value="rainfall">降雨量</option>
 
+                                                    <option value="windspeed">风速</option>
 
+                                                    <option value="pressure">气压</option>
 
+                                                    <option value="light">光照</option>
 
+                                                </select>
 
+                                            </div>
 
+                                            
+                                            <!-- 时间范围 -->
 
+                                            <div class="flex space-x-1">
 
+                                                <button class="weather-time-range-btn bg-gray-200 hover:bg-gray-300 text-xs px-3 py-1.5 rounded-full" data-range="24h">24小时</button>
 
+                                                <button class="weather-time-range-btn bg-green-500 text-white text-xs px-3 py-1.5 rounded-full" data-range="7d">7天</button>
 
+                                                <button class="weather-time-range-btn bg-gray-200 hover:bg-gray-300 text-xs px-3 py-1.5 rounded-full" data-range="30d">30天</button>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                    
+                                    <!-- 图表容器 -->
 
+                                    <div class="chart-container h-80 bg-gray-50 rounded-lg">
 
+                                        <canvas id="weather-chart"></canvas>
 
+                                    </div>
 
+                                    
+                                    <!-- 图表图例 -->
 
+                                    <div class="flex flex-wrap gap-4 mt-4 justify-center">
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">气温</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">湿度</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-blue-600 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">降雨量</span>
 
+                                        </div>
 
+                                        <div class="flex items-center">
 
+                                            <span class="w-3 h-3 rounded-full bg-purple-500 mr-1"></span>
 
+                                            <span class="text-xs text-gray-600">风速</span>
 
+                                        </div>
 
+                                    </div>
 
+                                    
+                                    <!-- 数据统计信息 -->
 
+                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均气温</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">22.4 °C</div>
 
+                                            <div class="text-xs text-green-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                1.8%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均湿度</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">68.5%</div>
 
+                                            <div class="text-xs text-red-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                2.3%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">累计降雨量</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">18.5 mm</div>
 
+                                            <div class="text-xs text-green-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                12.4%
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="bg-white p-4 rounded-lg shadow-sm">
 
+                                            <div class="text-sm text-gray-500 mb-1">平均风速</div>
 
+                                            <div class="text-2xl font-medium text-gray-800 mb-1">2.8 m/s</div>
 
+                                            <div class="text-xs text-red-600 flex items-center">
 
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" viewBox="0 0 20 20" fill="currentColor">
 
+                                                    <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd" />
 
+                                                </svg>
 
+                                                0.7%
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 控制器设备视图 -->
 
+                        <div id="controller-view" class="device-type-view hidden">
 
+                            <div class="grid grid-cols-2 gap-4">
 
+                                <div class="card p-4">
 
+                                    <h3 class="font-medium text-gray-700 mb-4">控制状态</h3>
 
+                                    <div class="space-y-4">
 
+                                        <div class="flex justify-between items-center pb-3 border-b">
 
+                                            <span class="flex items-center">
 
+                                                <span class="mr-2 h-3 w-3 rounded-full bg-green-500"></span>
 
+                                                水泵1#
 
+                                            </span>
 
+                                            <span class="badge badge-success">运行中</span>
 
+                                        </div>
 
+                                        <div class="flex justify-between items-center pb-3 border-b">
 
+                                            <span class="flex items-center">
 
+                                                <span class="mr-2 h-3 w-3 rounded-full bg-red-500"></span>
 
+                                                水泵2#
 
+                                            </span>
 
+                                            <span class="badge badge-danger">已停止</span>
 
+                                        </div>
 
+                                        <div class="flex justify-between items-center pb-3 border-b">
 
+                                            <span class="flex items-center">
 
+                                                <span class="mr-2 h-3 w-3 rounded-full bg-green-500"></span>
 
+                                                风机
 
+                                            </span>
 
+                                            <span class="badge badge-success">运行中</span>
 
+                                        </div>
 
+                                        <div class="flex justify-between items-center pb-3 border-b">
 
+                                            <span class="flex items-center">
 
+                                                <span class="mr-2 h-3 w-3 rounded-full bg-amber-500"></span>
 
+                                                灌溉阀门
 
+                                            </span>
 
+                                            <span class="badge badge-warning">部分开启</span>
 
+                                        </div>
 
+                                        <div class="flex justify-between items-center">
 
+                                            <span class="flex items-center">
 
+                                                <span class="mr-2 h-3 w-3 rounded-full bg-red-500"></span>
 
+                                                照明系统
 
+                                            </span>
 
+                                            <span class="badge badge-danger">已关闭</span>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="card p-4">
 
+                                    <h3 class="font-medium text-gray-700 mb-4">运行参数</h3>
 
+                                    <div class="space-y-4">
 
+                                        <div>
 
+                                            <label class="block text-sm text-gray-600 mb-1">系统工作模式</label>
 
+                                            <select class="form-input bg-gray-100" disabled>
 
+                                                <option selected>自动模式</option>
 
+                                                <option>手动模式</option>
 
+                                                <option>定时模式</option>
 
+                                                <option>智能模式</option>
 
+                                            </select>
 
+                                        </div>
 
+                                        <div>
 
+                                            <label class="block text-sm text-gray-600 mb-1">水泵1#流量</label>
 
+                                            <div class="flex items-center">
 
+                                                <div class="w-full bg-gray-200 rounded-full h-2.5">
 
+                                                    <div class="bg-green-500 h-2.5 rounded-full" style="width: 65%"></div>
 
+                                                </div>
 
+                                                <span class="ml-2 text-sm">65%</span>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div>
 
+                                            <label class="block text-sm text-gray-600 mb-1">风机转速</label>
 
+                                            <div class="flex items-center">
 
+                                                <div class="w-full bg-gray-200 rounded-full h-2.5">
 
+                                                    <div class="bg-green-500 h-2.5 rounded-full" style="width: 80%"></div>
 
+                                                </div>
 
+                                                <span class="ml-2 text-sm">80%</span>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div>
 
+                                            <label class="block text-sm text-gray-600 mb-1">阀门开度</label>
 
+                                            <div class="flex items-center">
 
+                                                <div class="w-full bg-gray-200 rounded-full h-2.5">
 
+                                                    <div class="bg-amber-500 h-2.5 rounded-full" style="width: 45%"></div>
 
+                                                </div>
 
+                                                <span class="ml-2 text-sm">45%</span>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="col-span-2 card p-4">
 
+                                    <h3 class="font-medium text-gray-700 mb-4">运行记录</h3>
 
+                                    <table class="min-w-full">
 
+                                        <thead>
 
+                                            <tr>
 
+                                                <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
 
+                                                <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件类型</th>
 
+                                                <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作人员</th>
 
+                                                <th class="py-2 px-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 text-sm">
 
+                                            <tr>
 
+                                                <td class="py-2 px-3">2023-10-16 14:30</td>
 
+                                                <td class="py-2 px-3">自动启动</td>
 
+                                                <td class="py-2 px-3">系统</td>
 
+                                                <td class="py-2 px-3">根据传感器数据，水泵1#自动启动</td>
 
+                                            </tr>
 
+                                            <tr>
 
+                                                <td class="py-2 px-3">2023-10-16 12:15</td>
 
+                                                <td class="py-2 px-3">手动调整</td>
 
+                                                <td class="py-2 px-3">张农艺师</td>
 
+                                                <td class="py-2 px-3">调整风机转速至80%</td>
 
+                                            </tr>
 
+                                            <tr>
 
+                                                <td class="py-2 px-3">2023-10-16 09:30</td>
 
+                                                <td class="py-2 px-3">自动关闭</td>
 
+                                                <td class="py-2 px-3">系统</td>
 
+                                                <td class="py-2 px-3">灌溉完成，阀门自动关闭</td>
 
+                                            </tr>
 
+                                            <tr>
 
+                                                <td class="py-2 px-3">2023-10-16 08:00</td>
 
+                                                <td class="py-2 px-3">系统检查</td>
 
+                                                <td class="py-2 px-3">系统</td>
 
+                                                <td class="py-2 px-3">日常自检完成，所有系统正常</td>
 
+                                            </tr>
 
+                                        </tbody>
 
+                                    </table>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
     </div>
 
     
     <script>
 
@@ -880,14 +1530,6 @@
 
                     }
 
                 });
 
                 
-                // 所属地块
 
-                const devicePlotSelect = document.getElementById('devicePlot');
 
-                Array.from(devicePlotSelect.options).forEach(option => {
 
-                    if (option.text === cells[3].textContent) {
 
-                        option.selected = true;
 
-                    }
 
-                });
 
-                
                 // 所属农场
 
                 const deviceFarmSelect = document.getElementById('deviceFarm');
 
                 Array.from(deviceFarmSelect.options).forEach(option => {
 
@@ -900,6 +1542,19 @@
 
                 document.getElementById('deviceModel').value = cells[5].textContent;
 
                 document.getElementById('deviceManufacturer').value = cells[6].textContent;
 
                 document.getElementById('installDate').value = formatDateForInput(cells[7].textContent);
 
+                
+                // 填充GPS坐标（从详情中获取）
 
+                const gpsText = document.getElementById('detail-gps').textContent;
 
+                if (gpsText) {
 
+                    const [latitude, longitude] = gpsText.split(',').map(coord => {
 
+                        return parseFloat(coord.replace(/[°NS\s]/g, ''));
 
+                    });
 
+                    document.getElementById('deviceLatitude').value = latitude || '';
 
+                    document.getElementById('deviceLongitude').value = longitude || '';
 
+                } else {
 
+                    document.getElementById('deviceLatitude').value = '';
 
+                    document.getElementById('deviceLongitude').value = '';
 
+                }
 
             });
 
         });
 
         
@@ -915,8 +1570,68 @@
 
         viewBtns.forEach(function(btn) {
 
             btn.addEventListener('click', function() {
 
                 const deviceId = this.getAttribute('data-id');
 
-                alert('查看设备详情：' + deviceId);
 
-                // 这里可以跳转到设备详情页面
 
+                
+                // 获取设备所在行的数据
 
+                const row = this.closest('tr');
 
+                const cells = row.querySelectorAll('td');
 
+                
+                // 填充基本信息
 
+                document.getElementById('detail-device-id').textContent = cells[0].textContent;
 
+                document.getElementById('detail-device-name').textContent = cells[1].textContent;
 
+                document.getElementById('detail-device-type').textContent = cells[2].textContent;
 
+                document.getElementById('detail-device-model').textContent = cells[5].textContent;
 
+                document.getElementById('detail-manufacturer').textContent = cells[6].textContent;
 
+                document.getElementById('detail-farm').textContent = cells[4].textContent;
 
+                document.getElementById('detail-plot').textContent = cells[3].textContent;
 
+                document.getElementById('detail-install-date').textContent = cells[7].textContent;
 
+                
+                // 设置设备状态
 
+                const statusText = cells[8].querySelector('span').textContent;
 
+                document.getElementById('detail-status').textContent = statusText;
 
+                if (statusText === '在线') {
 
+                    document.getElementById('detail-status').innerHTML = '<span class="badge badge-success">在线</span>';
 
+                } else if (statusText === '离线') {
 
+                    document.getElementById('detail-status').innerHTML = '<span class="badge badge-warning">离线</span>';
 
+                } else if (statusText === '故障') {
 
+                    document.getElementById('detail-status').innerHTML = '<span class="badge badge-danger">故障</span>';
 
+                } else {
 
+                    document.getElementById('detail-status').innerHTML = '<span class="badge badge-secondary">维护中</span>';
 
+                }
 
+                
+                // 设置最后活动时间
 
+                document.getElementById('detail-last-active').textContent = cells[9].textContent;
 
+                
+                // 根据设备类型显示对应的实时数据视图
 
+                const deviceType = cells[2].textContent;
 
+                const deviceTypeViews = document.querySelectorAll('.device-type-view');
 
+                deviceTypeViews.forEach(function(view) {
 
+                    view.classList.add('hidden');
 
+                });
 
+                
+                // 根据设备类型显示对应的视图
 
+                if (deviceType === '摄像头') {
 
+                    document.getElementById('camera-view').classList.remove('hidden');
 
+                } else if (deviceType === '传感器') {
 
+                    document.getElementById('sensor-view').classList.remove('hidden');
 
+                    
+                    // 可以根据不同传感器类型设置不同的示例数据
 
+                    if (cells[1].textContent.includes('温湿度')) {
 
+                        document.getElementById('sensor-value-1').textContent = '26.5';
 
+                        document.getElementById('sensor-value-2').textContent = '65%';
 
+                    } else if (cells[1].textContent.includes('土壤')) {
 
+                        document.getElementById('sensor-value-4').textContent = '35%';
 
+                    }
 
+                } else if (deviceType === '气象设备') {
 
+                    document.getElementById('weather-view').classList.remove('hidden');
 
+                } else if (deviceType === '控制器') {
 
+                    document.getElementById('controller-view').classList.remove('hidden');
 
+                }
 
+                
+                // 显示设备详情弹窗
 
+                document.getElementById('deviceDetailModal').style.display = 'flex';
 
+                
+                // 默认显示基本信息标签页
 
+                document.querySelector('.tab-btn[data-tab="basic-info"]').click();
 
             });
 
         });
 
 
@@ -963,6 +1678,465 @@
 
             // 显示删除成功提示
 
             alert('设备已成功删除');
 
         });
 
+
 
+        // 设备详情相关功能
 
+        
+        // 关闭设备详情弹窗
 
+        document.getElementById('closeDetailModal').addEventListener('click', function() {
 
+            document.getElementById('deviceDetailModal').style.display = 'none';
 
+        });
 
+        
+        // 切换设备详情标签页
 
+        const tabBtns = document.querySelectorAll('.tab-btn');
 
+        tabBtns.forEach(function(btn) {
 
+            btn.addEventListener('click', function() {
 
+                // 移除所有标签按钮的活动状态
 
+                tabBtns.forEach(b => {
 
+                    b.classList.remove('active', 'border-b-2', 'border-green-500', 'text-green-600');
 
+                    b.classList.add('text-gray-500');
 
+                });
 
+                
+                // 为当前按钮添加活动状态
 
+                this.classList.add('active', 'border-b-2', 'border-green-500', 'text-green-600');
 
+                this.classList.remove('text-gray-500');
 
+                
+                // 隐藏所有内容面板
 
+                const tabContents = document.querySelectorAll('.tab-content');
 
+                tabContents.forEach(function(content) {
 
+                    content.classList.add('hidden');
 
+                });
 
+                
+                // 显示当前选中的内容面板
 
+                const targetTab = this.getAttribute('data-tab');
 
+                document.getElementById(targetTab).classList.remove('hidden');
 
+            });
 
+        });
 
+    </script>
 
+    
+    <!-- Chart.js Library -->
 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
 
+    
+    <!-- Chart Initialization -->
 
+    <script>
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 初始化图表
 
+            const initSensorChart = function() {
 
+                const ctx = document.getElementById('sensor-chart');
 
+                
+                // 如果图表容器不存在，直接返回
 
+                if (!ctx) return;
 
+                
+                // 模拟数据
 
+                const timeLabels = [];
 
+                const temperatureData = [];
 
+                const humidityData = [];
 
+                const lightData = [];
 
+                const soilData = [];
 
+                
+                // 生成过去7天的日期标签和数据
 
+                const now = new Date();
 
+                for (let i = 6; i >= 0; i--) {
 
+                    const date = new Date(now);
 
+                    date.setDate(date.getDate() - i);
 
+                    timeLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                    
+                    // 生成模拟数据
 
+                    temperatureData.push(Math.round((20 + Math.random() * 10) * 10) / 10);
 
+                    humidityData.push(Math.round((50 + Math.random() * 30) * 10) / 10);
 
+                    lightData.push(Math.round(500 + Math.random() * 500));
 
+                    soilData.push(Math.round((20 + Math.random() * 15) * 10) / 10);
 
+                }
 
+                
+                // 创建图表
 
+                const sensorChart = new Chart(ctx, {
 
+                    type: 'line',
 
+                    data: {
 
+                        labels: timeLabels,
 
+                        datasets: [
 
+                            {
 
+                                label: '温度 (°C)',
 
+                                data: temperatureData,
 
+                                borderColor: '#4CAF50',
 
+                                backgroundColor: 'rgba(76, 175, 80, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true
 
+                            },
 
+                            {
 
+                                label: '湿度 (%)',
 
+                                data: humidityData,
 
+                                borderColor: '#2196F3',
 
+                                backgroundColor: 'rgba(33, 150, 243, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true
 
+                            },
 
+                            {
 
+                                label: '光照 (lux)',
 
+                                data: lightData,
 
+                                borderColor: '#FFC107',
 
+                                backgroundColor: 'rgba(255, 193, 7, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true,
 
+                                hidden: true
 
+                            },
 
+                            {
 
+                                label: '土壤湿度 (%)',
 
+                                data: soilData,
 
+                                borderColor: '#9C27B0',
 
+                                backgroundColor: 'rgba(156, 39, 176, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true,
 
+                                hidden: true
 
+                            }
 
+                        ]
 
+                    },
 
+                    options: {
 
+                        responsive: true,
 
+                        maintainAspectRatio: false,
 
+                        plugins: {
 
+                            legend: {
 
+                                display: false
 
+                            },
 
+                            tooltip: {
 
+                                mode: 'index',
 
+                                intersect: false
 
+                            }
 
+                        },
 
+                        scales: {
 
+                            x: {
 
+                                grid: {
 
+                                    display: false
 
+                                }
 
+                            },
 
+                            y: {
 
+                                grid: {
 
+                                    color: 'rgba(0, 0, 0, 0.05)'
 
+                                },
 
+                                beginAtZero: false
 
+                            }
 
+                        }
 
+                    }
 
+                });
 
+                
+                // 指标选择事件处理
 
+                document.getElementById('chart-indicator').addEventListener('change', function() {
 
+                    const selectedValue = this.value;
 
+                    
+                    // 重置所有数据集的可见性
 
+                    if (selectedValue === 'all') {
 
+                        sensorChart.data.datasets[0].hidden = false;
 
+                        sensorChart.data.datasets[1].hidden = false;
 
+                        sensorChart.data.datasets[2].hidden = true;
 
+                        sensorChart.data.datasets[3].hidden = true;
 
+                    } else {
 
+                        sensorChart.data.datasets[0].hidden = selectedValue !== 'temperature';
 
+                        sensorChart.data.datasets[1].hidden = selectedValue !== 'humidity';
 
+                        sensorChart.data.datasets[2].hidden = selectedValue !== 'light';
 
+                        sensorChart.data.datasets[3].hidden = selectedValue !== 'soil';
 
+                    }
 
+                    
+                    sensorChart.update();
 
+                });
 
+                
+                // 时间范围按钮事件处理
 
+                const timeRangeBtns = document.querySelectorAll('.time-range-btn');
 
+                timeRangeBtns.forEach(function(btn) {
 
+                    btn.addEventListener('click', function() {
 
+                        // 更新按钮样式
 
+                        timeRangeBtns.forEach(b => {
 
+                            b.classList.remove('bg-green-500', 'text-white');
 
+                            b.classList.add('bg-gray-200');
 
+                        });
 
+                        this.classList.remove('bg-gray-200');
 
+                        this.classList.add('bg-green-500', 'text-white');
 
+                        
+                        // 根据选择的时间范围更新图表数据
 
+                        const range = this.getAttribute('data-range');
 
+                        let newLabels = [];
 
+                        let newTempData = [];
 
+                        let newHumidityData = [];
 
+                        let newLightData = [];
 
+                        let newSoilData = [];
 
+                        
+                        // 根据选择的时间范围生成新数据
 
+                        const now = new Date();
 
+                        let days = 7;
 
+                        
+                        if (range === '24h') {
 
+                            days = 1;
 
+                            // 生成24小时的数据
 
+                            for (let i = 0; i < 24; i += 2) {
 
+                                const hour = i.toString().padStart(2, '0') + ':00';
 
+                                newLabels.push(hour);
 
+                                
+                                newTempData.push(Math.round((20 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((50 + Math.random() * 30) * 10) / 10);
 
+                                newLightData.push(Math.round(500 + Math.random() * 500));
 
+                                newSoilData.push(Math.round((20 + Math.random() * 15) * 10) / 10);
 
+                            }
 
+                        } else if (range === '30d') {
 
+                            days = 30;
 
+                            // 生成30天的数据
 
+                            for (let i = 29; i >= 0; i -= 2) {
 
+                                const date = new Date(now);
 
+                                date.setDate(date.getDate() - i);
 
+                                newLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                                
+                                newTempData.push(Math.round((20 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((50 + Math.random() * 30) * 10) / 10);
 
+                                newLightData.push(Math.round(500 + Math.random() * 500));
 
+                                newSoilData.push(Math.round((20 + Math.random() * 15) * 10) / 10);
 
+                            }
 
+                        } else {
 
+                            // 7天的数据
 
+                            for (let i = 6; i >= 0; i--) {
 
+                                const date = new Date(now);
 
+                                date.setDate(date.getDate() - i);
 
+                                newLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                                
+                                newTempData.push(Math.round((20 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((50 + Math.random() * 30) * 10) / 10);
 
+                                newLightData.push(Math.round(500 + Math.random() * 500));
 
+                                newSoilData.push(Math.round((20 + Math.random() * 15) * 10) / 10);
 
+                            }
 
+                        }
 
+                        
+                        // 更新图表数据
 
+                        sensorChart.data.labels = newLabels;
 
+                        sensorChart.data.datasets[0].data = newTempData;
 
+                        sensorChart.data.datasets[1].data = newHumidityData;
 
+                        sensorChart.data.datasets[2].data = newLightData;
 
+                        sensorChart.data.datasets[3].data = newSoilData;
 
+                        sensorChart.update();
 
+                    });
 
+                });
 
+                
+                return sensorChart;
 
+            };
 
+            
+            // 当点击实时数据标签页时初始化图表
 
+            document.querySelectorAll('.tab-btn').forEach(function(btn) {
 
+                btn.addEventListener('click', function() {
 
+                    if (this.getAttribute('data-tab') === 'real-time-data') {
 
+                        setTimeout(function() {
 
+                            initSensorChart();
 
+                        }, 100);
 
+                    }
 
+                });
 
+            });
 
+            
+            // 当查看按钮点击时，为传感器类型设备初始化图表
 
+            document.querySelectorAll('.view-btn').forEach(function(btn) {
 
+                btn.addEventListener('click', function() {
 
+                    setTimeout(function() {
 
+                        if (!document.getElementById('sensor-view').classList.contains('hidden')) {
 
+                            initSensorChart();
 
+                        }
 
+                        if (!document.getElementById('weather-view').classList.contains('hidden')) {
 
+                            initWeatherChart();
 
+                        }
 
+                    }, 300);
 
+                });
 
+            });
 
+            
+            // 初始化气象图表
 
+            const initWeatherChart = function() {
 
+                const ctx = document.getElementById('weather-chart');
 
+                
+                // 如果图表容器不存在，直接返回
 
+                if (!ctx) return;
 
+                
+                // 模拟数据
 
+                const timeLabels = [];
 
+                const temperatureData = [];
 
+                const humidityData = [];
 
+                const rainfallData = [];
 
+                const windSpeedData = [];
 
+                
+                // 生成过去7天的日期标签和数据
 
+                const now = new Date();
 
+                for (let i = 6; i >= 0; i--) {
 
+                    const date = new Date(now);
 
+                    date.setDate(date.getDate() - i);
 
+                    timeLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                    
+                    // 生成模拟数据
 
+                    temperatureData.push(Math.round((18 + Math.random() * 10) * 10) / 10);
 
+                    humidityData.push(Math.round((60 + Math.random() * 30) * 10) / 10);
 
+                    rainfallData.push(Math.round(Math.random() * 10 * 10) / 10);
 
+                    windSpeedData.push(Math.round((1 + Math.random() * 4) * 10) / 10);
 
+                }
 
+                
+                // 创建图表
 
+                const weatherChart = new Chart(ctx, {
 
+                    type: 'line',
 
+                    data: {
 
+                        labels: timeLabels,
 
+                        datasets: [
 
+                            {
 
+                                label: '气温 (°C)',
 
+                                data: temperatureData,
 
+                                borderColor: '#EF4444',
 
+                                backgroundColor: 'rgba(239, 68, 68, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true
 
+                            },
 
+                            {
 
+                                label: '湿度 (%)',
 
+                                data: humidityData,
 
+                                borderColor: '#3B82F6',
 
+                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true
 
+                            },
 
+                            {
 
+                                label: '降雨量 (mm)',
 
+                                data: rainfallData,
 
+                                borderColor: '#2563EB',
 
+                                backgroundColor: 'rgba(37, 99, 235, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true,
 
+                                hidden: true
 
+                            },
 
+                            {
 
+                                label: '风速 (m/s)',
 
+                                data: windSpeedData,
 
+                                borderColor: '#8B5CF6',
 
+                                backgroundColor: 'rgba(139, 92, 246, 0.1)',
 
+                                borderWidth: 2,
 
+                                tension: 0.3,
 
+                                fill: true,
 
+                                hidden: true
 
+                            }
 
+                        ]
 
+                    },
 
+                    options: {
 
+                        responsive: true,
 
+                        maintainAspectRatio: false,
 
+                        plugins: {
 
+                            legend: {
 
+                                display: false
 
+                            },
 
+                            tooltip: {
 
+                                mode: 'index',
 
+                                intersect: false
 
+                            }
 
+                        },
 
+                        scales: {
 
+                            x: {
 
+                                grid: {
 
+                                    display: false
 
+                                }
 
+                            },
 
+                            y: {
 
+                                grid: {
 
+                                    color: 'rgba(0, 0, 0, 0.05)'
 
+                                },
 
+                                beginAtZero: false
 
+                            }
 
+                        }
 
+                    }
 
+                });
 
+                
+                // 指标选择事件处理
 
+                document.getElementById('weather-chart-indicator').addEventListener('change', function() {
 
+                    const selectedValue = this.value;
 
+                    
+                    // 重置所有数据集的可见性
 
+                    if (selectedValue === 'all') {
 
+                        weatherChart.data.datasets[0].hidden = false;
 
+                        weatherChart.data.datasets[1].hidden = false;
 
+                        weatherChart.data.datasets[2].hidden = true;
 
+                        weatherChart.data.datasets[3].hidden = true;
 
+                    } else {
 
+                        weatherChart.data.datasets[0].hidden = selectedValue !== 'temperature';
 
+                        weatherChart.data.datasets[1].hidden = selectedValue !== 'humidity';
 
+                        weatherChart.data.datasets[2].hidden = selectedValue !== 'rainfall';
 
+                        weatherChart.data.datasets[3].hidden = selectedValue !== 'windspeed';
 
+                    }
 
+                    
+                    weatherChart.update();
 
+                });
 
+                
+                // 时间范围按钮事件处理
 
+                const weatherTimeRangeBtns = document.querySelectorAll('.weather-time-range-btn');
 
+                weatherTimeRangeBtns.forEach(function(btn) {
 
+                    btn.addEventListener('click', function() {
 
+                        // 更新按钮样式
 
+                        weatherTimeRangeBtns.forEach(b => {
 
+                            b.classList.remove('bg-green-500', 'text-white');
 
+                            b.classList.add('bg-gray-200');
 
+                        });
 
+                        this.classList.remove('bg-gray-200');
 
+                        this.classList.add('bg-green-500', 'text-white');
 
+                        
+                        // 根据选择的时间范围更新图表数据
 
+                        const range = this.getAttribute('data-range');
 
+                        let newLabels = [];
 
+                        let newTempData = [];
 
+                        let newHumidityData = [];
 
+                        let newRainfallData = [];
 
+                        let newWindSpeedData = [];
 
+                        
+                        // 根据选择的时间范围生成新数据
 
+                        const now = new Date();
 
+                        
+                        if (range === '24h') {
 
+                            // 生成24小时的数据
 
+                            for (let i = 0; i < 24; i += 2) {
 
+                                const hour = i.toString().padStart(2, '0') + ':00';
 
+                                newLabels.push(hour);
 
+                                
+                                newTempData.push(Math.round((18 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((60 + Math.random() * 30) * 10) / 10);
 
+                                newRainfallData.push(Math.round(Math.random() * 5 * 10) / 10);
 
+                                newWindSpeedData.push(Math.round((1 + Math.random() * 4) * 10) / 10);
 
+                            }
 
+                        } else if (range === '30d') {
 
+                            // 生成30天的数据
 
+                            for (let i = 29; i >= 0; i -= 2) {
 
+                                const date = new Date(now);
 
+                                date.setDate(date.getDate() - i);
 
+                                newLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                                
+                                newTempData.push(Math.round((18 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((60 + Math.random() * 30) * 10) / 10);
 
+                                newRainfallData.push(Math.round(Math.random() * 15 * 10) / 10);
 
+                                newWindSpeedData.push(Math.round((1 + Math.random() * 4) * 10) / 10);
 
+                            }
 
+                        } else {
 
+                            // 7天的数据
 
+                            for (let i = 6; i >= 0; i--) {
 
+                                const date = new Date(now);
 
+                                date.setDate(date.getDate() - i);
 
+                                newLabels.push(`${date.getMonth() + 1}/${date.getDate()}`);
 
+                                
+                                newTempData.push(Math.round((18 + Math.random() * 10) * 10) / 10);
 
+                                newHumidityData.push(Math.round((60 + Math.random() * 30) * 10) / 10);
 
+                                newRainfallData.push(Math.round(Math.random() * 10 * 10) / 10);
 
+                                newWindSpeedData.push(Math.round((1 + Math.random() * 4) * 10) / 10);
 
+                            }
 
+                        }
 
+                        
+                        // 更新图表数据
 
+                        weatherChart.data.labels = newLabels;
 
+                        weatherChart.data.datasets[0].data = newTempData;
 
+                        weatherChart.data.datasets[1].data = newHumidityData;
 
+                        weatherChart.data.datasets[2].data = newRainfallData;
 
+                        weatherChart.data.datasets[3].data = newWindSpeedData;
 
+                        weatherChart.update();
 
+                    });
 
+                });
 
+                
+                return weatherChart;
 
+            };
 
+        });
 
     </script>
 
 </body>
 
 </html>

+ 0 - 816
pages/device-monitor-content.html
Ver fichero 

@@ -1,816 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="zh-CN" class="iframe-content">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>设备监控实时展示 - 爱智农</title>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
-    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
-    <link rel="stylesheet" href="../assets/css/global.css">
 
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
 
-    <style>
 
-        body {
 
-            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
-            background-color: #f5f7f9;
 
-            color: #333;
 
-            margin: 0;
 
-            padding: 0;
 
-            height: auto; overflow-y: auto; overflow-x: hidden;
 
-            min-height: 100%;
 
-            overflow-y: auto;
 
-            overflow-x: hidden;
 
-            padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */
 
-        }
 
-        
-        .page-container {
 
-            padding: 20px;
 
-            position: relative;
 
-            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
 
-            padding-top: 40px; /* 增加顶部内边距，给按钮腾出空间 */
 
-        }
 
-        
-        /* 防止重复菜单 */
 
-        body > div:not(.page-container):not(.modal-container),
 
-        iframe#sidebar, 
-        div.system-menu,
 
-        [id^="system-menu"],
 
-        [class^="system-menu"],
 
-        #admin-sidebar,
 
-        .menu-popup,
 
-        .user-avatar-circle {
 
-            display: none !important;
 
-            width: 0 !important;
 
-            height: 0 !important;
 
-            opacity: 0 !important;
 
-            position: absolute !important;
 
-            top: -9999px !important;
 
-            left: -9999px !important;
 
-            z-index: -9999 !important;
 
-            pointer-events: none !important;
 
-        }
 
-        
-        /* 防止右侧白圈和浮动元素 */
 
-        .circle-btn,
 
-        .floating-circle,
 
-        .round-button,
 
-        .scroll-top-btn,
 
-        [class*="round"],
 
-        [class*="circle"],
 
-        .help-btn,
 
-        .chat-btn,
 
-        body > .btn,
 
-        body > button,
 
-        body > div:not(.page-container):not(.modal-container) {
 
-            display: none !important;
 
-            visibility: hidden !important;
 
-            opacity: 0 !important;
 
-            pointer-events: none !important;
 
-        }
 
-        
-        /* 页面标题和操作按钮容器 */
 
-        .page-header {
 
-            display: flex;
 
-            justify-content: space-between;
 
-            align-items: center;
 
-            margin-bottom: 20px;
 
-            padding-bottom: 16px;
 
-            border-bottom: 1px solid #e0e0e0;
 
-            padding-top: 10px;
 
-            position: relative;
 
-            z-index: 10;
 
-        }
 
-        
-        /* 添加按钮的特定样式 */
 
-        .button-container {
 
-            position: relative;
 
-            z-index: 20;
 
-        }
 
-        
-        #refreshBtn, 
-        #settingsBtn,
 
-        .btn {
 
-            position: relative;
 
-            z-index: 5;
 
-            height: 38px;
 
-            visibility: visible !important;
 
-            opacity: 1 !important;
 
-            display: inline-flex !important;
 
-        }
 
-        
-        .card {
 
-            background-color: white;
 
-            border-radius: 8px;
 
-            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 
-            transition: all 0.3s;
 
-        }
 
-        
-        .card:hover {
 
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 
-        }
 
-        
-        .chart-container {
 
-            height: 240px;
 
-            width: 100%;
 
-        }
 
-        
-        .status-indicator {
 
-            width: 10px;
 
-            height: 10px;
 
-            border-radius: 50%;
 
-            display: inline-block;
 
-            margin-right: 6px;
 
-        }
 
-        
-        .status-online {
 
-            background-color: #10b981;
 
-        }
 
-        
-        .status-offline {
 
-            background-color: #ef4444;
 
-        }
 
-        
-        .status-warning {
 
-            background-color: #f59e0b;
 
-        }
 
-        
-        .video-feed {
 
-            height: 200px;
 
-            background-color: #111;
 
-            border-radius: 8px;
 
-            overflow: hidden;
 
-            position: relative;
 
-        }
 
-        
-        .video-overlay {
 
-            position: absolute;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            bottom: 0;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-direction: column;
 
-            color: #fff;
 
-            text-align: center;
 
-        }
 
-        
-        .btn {
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            padding: 8px 16px;
 
-            border-radius: 4px;
 
-            font-weight: 500;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-        
-        .btn-primary {
 
-            background-color: #4CAF50;
 
-            color: white;
 
-        }
 
-        
-        .btn-primary:hover {
 
-            background-color: #388E3C;
 
-        }
 
-        
-        .btn-default {
 
-            background-color: white;
 
-            border: 1px solid #d1d5db;
 
-            color: #374151;
 
-        }
 
-        
-        .btn-default:hover {
 
-            background-color: #f9fafb;
 
-        }
 
-        
-        .btn-sm {
 
-            padding: 4px 8px;
 
-            font-size: 12px;
 
-        }
 
-        
-        .btn-icon {
 
-            margin-right: 4px;
 
-        }
 
-        
-        .parameter-card {
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            justify-content: center;
 
-            padding: 16px;
 
-        }
 
-        
-        .parameter-value {
 
-            font-size: 24px;
 
-            font-weight: bold;
 
-            margin: 10px 0;
 
-        }
 
-        
-        .parameter-label {
 
-            font-size: 14px;
 
-            color: #6b7280;
 
-        }
 
-        
-        .parameter-unit {
 
-            font-size: 14px;
 
-            color: #6b7280;
 
-            margin-left: 2px;
 
-        }
 
-        
-        .device-list {
 
-            max-height: 380px;
 
-            overflow-y: auto;
 
-        }
 
-        
-        .device-item {
 
-            padding: 12px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-            transition: all 0.2s;
 
-            cursor: pointer;
 
-        }
 
-        
-        .device-item:hover {
 
-            background-color: #f9fafb;
 
-        }
 
-        
-        .device-item.active {
 
-            border-left: 3px solid #4CAF50;
 
-            background-color: #f0fdf4;
 
-        }
 
-        
-        .device-item:last-child {
 
-            border-bottom: none;
 
-        }
 
-        
-        .badge {
 
-            display: inline-block;
 
-            padding: 2px 8px;
 
-            border-radius: 9999px;
 
-            font-size: 12px;
 
-            font-weight: 500;
 
-        }
 
-        
-        .badge-success {
 
-            background-color: #d1fae5;
 
-            color: #065f46;
 
-        }
 
-        
-        .badge-warning {
 
-            background-color: #fef3c7;
 
-            color: #92400e;
 
-        }
 
-        
-        .badge-danger {
 
-            background-color: #fee2e2;
 
-            color: #b91c1c;
 
-        }
 
-        
-        .data-refreshing {
 
-            animation: pulse 2s infinite;
 
-        }
 
-        
-        @keyframes pulse {
 
-            0% { opacity: 1; }
 
-            50% { opacity: 0.6; }
 
-            100% { opacity: 1; }
 
-        }
 
-        
-        .gauge-container {
 
-            position: relative;
 
-            height: 120px;
 
-        }
 
-        
-        .gauge-value {
 
-            position: absolute;
 
-            bottom: 0;
 
-            left: 0;
 
-            right: 0;
 
-            text-align: center;
 
-            font-size: 18px;
 
-            font-weight: bold;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <div class="page-container responsive-container">
 
-        <div class="flex justify-between items-center mb-6 page-header">
 
-            <h1 class="text-2xl font-bold">设备监控实时展示</h1>
 
-            
-            <div class="flex gap-2 button-container">
 
-                <button class="btn btn-default" id="refreshBtn">
 
-                    <i class="iconfont icon-reload btn-icon"></i>
 
-                    刷新数据
 
-                </button>
 
-                <button class="btn btn-primary" id="settingsBtn">
 
-                    <i class="iconfont icon-setting btn-icon"></i>
 
-                    监控设置
 
-                </button>
 
-            </div>
 
-        </div>
 
-        
-        <!-- 设备监控概览 -->
 
-        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
 
-            <div class="card p-4 text-center">
 
-                <div class="text-gray-500 mb-1">在线设备</div>
 
-                <div class="text-3xl font-bold text-green-600">16</div>
 
-                <div class="text-sm text-gray-400 mt-1">总数：20</div>
 
-            </div>
 
-            
-            <div class="card p-4 text-center">
 
-                <div class="text-gray-500 mb-1">监控摄像头</div>
 
-                <div class="text-3xl font-bold text-blue-600">8</div>
 
-                <div class="text-sm text-gray-400 mt-1">在线：7</div>
 
-            </div>
 
-            
-            <div class="card p-4 text-center">
 
-                <div class="text-gray-500 mb-1">告警设备</div>
 
-                <div class="text-3xl font-bold text-yellow-600">3</div>
 
-                <div class="text-sm text-gray-400 mt-1">未处理：2</div>
 
-            </div>
 
-            
-            <div class="card p-4 text-center">
 
-                <div class="text-gray-500 mb-1">环境参数采集点</div>
 
-                <div class="text-3xl font-bold text-purple-600">6</div>
 
-                <div class="text-sm text-gray-400 mt-1">在线：5</div>
 
-            </div>
 
-        </div>
 
-        
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 
-            <!-- 左侧设备列表 -->
 
-            <div class="card">
 
-                <div class="p-4 border-b">
 
-                    <h3 class="font-bold">设备列表</h3>
 
-                </div>
 
-                
-                <div class="p-4 border-b">
 
-                    <div class="flex items-center gap-2">
 
-                        <input type="text" placeholder="搜索设备" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
-                        <button class="btn btn-primary btn-sm">
 
-                            <i class="iconfont icon-search"></i>
 
-                        </button>
 
-                    </div>
 
-                </div>
 
-                
-                <div class="device-list">
 
-                    <div class="device-item active">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-online"></span>
 
-                                <span class="font-medium">土壤传感器 #1</span>
 
-                            </div>
 
-                            <span class="badge badge-success">正常</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">东区1号地块 | 更新：2分钟前</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-online"></span>
 
-                                <span class="font-medium">摄像头 #2</span>
 
-                            </div>
 
-                            <span class="badge badge-success">正常</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">西区2号地块 | 更新：实时</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-warning"></span>
 
-                                <span class="font-medium">气象站 #1</span>
 
-                            </div>
 
-                            <span class="badge badge-warning">警告</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">南区3号地块 | 更新：1分钟前</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-offline"></span>
 
-                                <span class="font-medium">水质监测仪 #1</span>
 
-                            </div>
 
-                            <span class="badge badge-danger">离线</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">北区4号地块 | 更新：2小时前</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-online"></span>
 
-                                <span class="font-medium">水位传感器 #1</span>
 
-                            </div>
 
-                            <span class="badge badge-success">正常</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">灌溉系统 | 更新：5分钟前</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-online"></span>
 
-                                <span class="font-medium">摄像头 #3</span>
 
-                            </div>
 
-                            <span class="badge badge-success">正常</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">仓库区域 | 更新：实时</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-warning"></span>
 
-                                <span class="font-medium">土壤传感器 #2</span>
 
-                            </div>
 
-                            <span class="badge badge-warning">警告</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">东区2号地块 | 更新：10分钟前</div>
 
-                    </div>
 
-                    
-                    <div class="device-item">
 
-                        <div class="flex justify-between items-center mb-1">
 
-                            <div class="flex items-center">
 
-                                <span class="status-indicator status-online"></span>
 
-                                <span class="font-medium">自动灌溉控制器 #1</span>
 
-                            </div>
 
-                            <span class="badge badge-success">正常</span>
 
-                        </div>
 
-                        <div class="text-xs text-gray-500">中央区域 | 更新：3分钟前</div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-            
-            <!-- 中间监控详情 -->
 
-            <div class="grid grid-rows-3 gap-6">
 
-                <!-- 设备信息 -->
 
-                <div class="card p-4">
 
-                    <h3 class="font-bold mb-4">土壤传感器 #1</h3>
 
-                    
-                    <div class="grid grid-cols-3 gap-4">
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">设备ID</div>
 
-                            <div class="font-medium">SNS-20230001</div>
 
-                        </div>
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">位置</div>
 
-                            <div class="font-medium">东区1号地块</div>
 
-                        </div>
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">状态</div>
 
-                            <div class="flex items-center font-medium">
 
-                                <span class="status-indicator status-online"></span>
 
-                                在线
 
-                            </div>
 
-                        </div>
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">安装时间</div>
 
-                            <div class="font-medium">2023-01-15</div>
 
-                        </div>
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">电池</div>
 
-                            <div class="font-medium">85%</div>
 
-                        </div>
 
-                        <div>
 
-                            <div class="text-xs text-gray-500 mb-1">信号强度</div>
 
-                            <div class="font-medium">良好</div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-                
-                <!-- 传感器数据 -->
 
-                <div class="card p-4 row-span-2">
 
-                    <div class="flex justify-between items-center mb-4">
 
-                        <h3 class="font-bold">传感器数据</h3>
 
-                        <div class="text-xs text-gray-500 data-refreshing">
 
-                            <i class="iconfont icon-sync mr-1"></i>
 
-                            数据更新: 2分钟前
 
-                        </div>
 
-                    </div>
 
-                    
-                    <div class="grid grid-cols-3 gap-6 mb-6">
 
-                        <div class="parameter-card">
 
-                            <div class="text-green-500">
 
-                                <i class="iconfont icon-water text-2xl"></i>
 
-                            </div>
 
-                            <div class="parameter-value">32<span class="parameter-unit">%</span></div>
 
-                            <div class="parameter-label">土壤湿度</div>
 
-                        </div>
 
-                        
-                        <div class="parameter-card">
 
-                            <div class="text-yellow-500">
 
-                                <i class="iconfont icon-temperature text-2xl"></i>
 
-                            </div>
 
-                            <div class="parameter-value">18.5<span class="parameter-unit">°C</span></div>
 
-                            <div class="parameter-label">土壤温度</div>
 
-                        </div>
 
-                        
-                        <div class="parameter-card">
 
-                            <div class="text-purple-500">
 
-                                <i class="iconfont icon-experiment text-2xl"></i>
 
-                            </div>
 
-                            <div class="parameter-value">6.8<span class="parameter-unit">pH</span></div>
 
-                            <div class="parameter-label">土壤酸碱度</div>
 
-                        </div>
 
-                    </div>
 
-                    
-                    <div class="chart-container" id="soilDataChart"></div>
 
-                </div>
 
-            </div>
 
-            
-            <!-- 右侧监控和控制 -->
 
-            <div class="grid grid-rows-2 gap-6">
 
-                <!-- 视频监控 -->
 
-                <div class="card">
 
-                    <div class="p-4 border-b">
 
-                        <h3 class="font-bold">视频监控</h3>
 
-                    </div>
 
-                    
-                    <div class="p-4">
 
-                        <div class="grid grid-cols-2 gap-4 mb-4">
 
-                            <div class="video-feed">
 
-                                <div class="video-overlay">
 
-                                    <i class="iconfont icon-video-camera text-4xl opacity-30 mb-2"></i>
 
-                                    <div class="text-sm opacity-70">摄像头 #2 - 西区2号地块</div>
 
-                                </div>
 
-                            </div>
 
-                            
-                            <div class="video-feed">
 
-                                <div class="video-overlay">
 
-                                    <i class="iconfont icon-video-camera text-4xl opacity-30 mb-2"></i>
 
-                                    <div class="text-sm opacity-70">摄像头 #3 - 仓库区域</div>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                        
-                        <div>
 
-                            <button class="btn btn-default btn-sm w-full">
 
-                                <i class="iconfont icon-appstore-add btn-icon"></i>
 
-                                查看更多摄像头
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-                
-                <!-- 环境数据 -->
 
-                <div class="card">
 
-                    <div class="p-4 border-b">
 
-                        <h3 class="font-bold">环境数据 (气象站 #1)</h3>
 
-                    </div>
 
-                    
-                    <div class="p-4">
 
-                        <div class="grid grid-cols-3 gap-4 mb-6">
 
-                            <div class="gauge-container">
 
-                                <div id="tempGauge" style="height: 100%"></div>
 
-                                <div class="gauge-value">26°C</div>
 
-                            </div>
 
-                            
-                            <div class="gauge-container">
 
-                                <div id="humidityGauge" style="height: 100%"></div>
 
-                                <div class="gauge-value">68%</div>
 
-                            </div>
 
-                            
-                            <div class="gauge-container">
 
-                                <div id="pressureGauge" style="height: 100%"></div>
 
-                                <div class="gauge-value">1013hPa</div>
 
-                            </div>
 
-                        </div>
 
-                        
-                        <div class="grid grid-cols-3 gap-4">
 
-                            <div>
 
-                                <div class="text-xs text-gray-500 mb-1">风速</div>
 
-                                <div class="font-medium">3.2 m/s</div>
 
-                                <div class="text-xs text-gray-500 mt-1">东南风</div>
 
-                            </div>
 
-                            
-                            <div>
 
-                                <div class="text-xs text-gray-500 mb-1">降水量</div>
 
-                                <div class="font-medium">0 mm</div>
 
-                                <div class="text-xs text-gray-500 mt-1">过去24小时</div>
 
-                            </div>
 
-                            
-                            <div>
 
-                                <div class="text-xs text-gray-500 mb-1">光照强度</div>
 
-                                <div class="font-medium">52000 lux</div>
 
-                                <div class="text-xs text-gray-500 mt-1">正常范围</div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-    
-    <script>
 
-        document.addEventListener('DOMContentLoaded', function() {
 
-            // 选择设备列表项
 
-            const deviceItems = document.querySelectorAll('.device-item');
 
-            
-            deviceItems.forEach(item => {
 
-                item.addEventListener('click', function() {
 
-                    deviceItems.forEach(i => i.classList.remove('active'));
 
-                    this.classList.add('active');
 
-                });
 
-            });
 
-            
-            // 刷新按钮
 
-            const refreshBtn = document.getElementById('refreshBtn');
 
-            
-            refreshBtn.addEventListener('click', function() {
 
-                const dataRefreshing = document.querySelector('.data-refreshing');
 
-                dataRefreshing.innerHTML = '<i class="iconfont icon-sync mr-1"></i> 数据更新: 刚刚';
 
-                
-                // 模拟数据刷新
 
-                setTimeout(function() {
 
-                    alert('数据已刷新');
 
-                }, 1000);
 
-            });
 
-            
-            // 土壤数据趋势图
 
-            const soilDataChart = echarts.init(document.getElementById('soilDataChart'));
 
-            soilDataChart.setOption({
 
-                tooltip: {
 
-                    trigger: 'axis'
 
-                },
 
-                legend: {
 
-                    data: ['土壤湿度', '土壤温度', '土壤酸碱度']
 
-                },
 
-                grid: {
 
-                    left: '3%',
 
-                    right: '4%',
 
-                    bottom: '3%',
 
-                    containLabel: true
 
-                },
 
-                xAxis: {
 
-                    type: 'category',
 
-                    boundaryGap: false,
 
-                    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '现在']
 
-                },
 
-                yAxis: {
 
-                    type: 'value'
 
-                },
 
-                series: [
 
-                    {
 
-                        name: '土壤湿度',
 
-                        type: 'line',
 
-                        data: [28, 28, 29, 30, 32, 32, 32],
 
-                        color: '#4CAF50'
 
-                    },
 
-                    {
 
-                        name: '土壤温度',
 
-                        type: 'line',
 
-                        data: [16.2, 15.8, 16.5, 17.8, 18.2, 18.5, 18.5],
 
-                        color: '#FF9800'
 
-                    },
 
-                    {
 
-                        name: '土壤酸碱度',
 
-                        type: 'line',
 
-                        data: [6.9, 6.9, 6.8, 6.8, 6.7, 6.8, 6.8],
 
-                        color: '#9C27B0'
 
-                    }
 
-                ]
 
-            });
 
-            
-            // 温度表盘
 
-            const tempGauge = echarts.init(document.getElementById('tempGauge'));
 
-            tempGauge.setOption({
 
-                series: [{
 
-                    type: 'gauge',
 
-                    min: 0,
 
-                    max: 40,
 
-                    progress: {
 
-                        show: true,
 
-                        width: 16
 
-                    },
 
-                    axisLine: {
 
-                        lineStyle: {
 
-                            width: 16
 
-                        }
 
-                    },
 
-                    axisTick: {
 
-                        show: false
 
-                    },
 
-                    splitLine: {
 
-                        show: false
 
-                    },
 
-                    axisLabel: {
 
-                        show: false
 
-                    },
 
-                    anchor: {
 
-                        show: false
 
-                    },
 
-                    pointer: {
 
-                        show: false
 
-                    },
 
-                    detail: {
 
-                        show: false
 
-                    },
 
-                    data: [{
 
-                        value: 26,
 
-                        itemStyle: {
 
-                            color: '#FF9800'
 
-                        }
 
-                    }]
 
-                }]
 
-            });
 
-            
-            // 湿度表盘
 
-            const humidityGauge = echarts.init(document.getElementById('humidityGauge'));
 
-            humidityGauge.setOption({
 
-                series: [{
 
-                    type: 'gauge',
 
-                    min: 0,
 
-                    max: 100,
 
-                    progress: {
 
-                        show: true,
 
-                        width: 16
 
-                    },
 
-                    axisLine: {
 
-                        lineStyle: {
 
-                            width: 16
 
-                        }
 
-                    },
 
-                    axisTick: {
 
-                        show: false
 
-                    },
 
-                    splitLine: {
 
-                        show: false
 
-                    },
 
-                    axisLabel: {
 
-                        show: false
 
-                    },
 
-                    anchor: {
 
-                        show: false
 
-                    },
 
-                    pointer: {
 
-                        show: false
 
-                    },
 
-                    detail: {
 
-                        show: false
 
-                    },
 
-                    data: [{
 
-                        value: 68,
 
-                        itemStyle: {
 
-                            color: '#2196F3'
 
-                        }
 
-                    }]
 
-                }]
 
-            });
 
-            
-            // 气压表盘
 
-            const pressureGauge = echarts.init(document.getElementById('pressureGauge'));
 
-            pressureGauge.setOption({
 
-                series: [{
 
-                    type: 'gauge',
 
-                    min: 980,
 
-                    max: 1040,
 
-                    progress: {
 
-                        show: true,
 
-                        width: 16
 
-                    },
 
-                    axisLine: {
 
-                        lineStyle: {
 
-                            width: 16
 
-                        }
 
-                    },
 
-                    axisTick: {
 
-                        show: false
 
-                    },
 
-                    splitLine: {
 
-                        show: false
 
-                    },
 
-                    axisLabel: {
 
-                        show: false
 
-                    },
 
-                    anchor: {
 
-                        show: false
 
-                    },
 
-                    pointer: {
 
-                        show: false
 
-                    },
 
-                    detail: {
 
-                        show: false
 
-                    },
 
-                    data: [{
 
-                        value: 1013,
 
-                        itemStyle: {
 
-                            color: '#9C27B0'
 
-                        }
 
-                    }]
 
-                }]
 
-            });
 
-            
-            // 响应式调整图表大小
 
-            window.addEventListener('resize', function() {
 
-                soilDataChart.resize();
 
-                tempGauge.resize();
 
-                humidityGauge.resize();
 
-                pressureGauge.resize();
 
-            });
 
-        });
 
-    </script>
 
-</body>
 
-</html>

+ 112 - 0
pages/device-monitor-frame.html
Ver fichero 

@@ -0,0 +1,112 @@
 
+<!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://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
+    <link rel="stylesheet" href="../assets/css/global.css">
 
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/locale/zh-cn.js"></script>
 
+    <style>
 
+        :root {
 
+            --primary: #0ea5e9;
 
+            --primary-dark: #0369a1;
 
+            --primary-light: #7dd3fc;
 
+            --bg-dark: #0f172a;
 
+            --bg-card: #1e293b;
 
+            --text-primary: #f1f5f9;
 
+            --text-secondary: #94a3b8;
 
+            --success: #10b981;
 
+            --warning: #f59e0b;
 
+            --danger: #ef4444;
 
+            --info: #3b82f6;
 
+            --border: #334155;
 
+            --radius: 8px;
 
+        }
 
+        
+        body {
 
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
+            background-color: var(--bg-dark);
 
+            color: var(--text-primary);
 
+            margin: 0;
 
+            padding: 20px;
 
+            min-height: 100vh;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        /* 移除白色圆形按钮 */
 
+        .circle-btn, 
+        .floating-button,
 
+        .round-button,
 
+        button[class*='circle'],
 
+        div[class*='circle'],
 
+        [class*='float-btn'],
 
+        body > div:not(#app),
 
+        body > button {
 
+            display: none !important;
 
+            visibility: hidden !important;
 
+            opacity: 0 !important;
 
+            position: absolute !important;
 
+            top: -9999px !important;
 
+            left: -9999px !important;
 
+            z-index: -9999 !important;
 
+            pointer-events: none !important;
 
+        }
 
+        
+        /* 视频比例容器 */
 
+        .aspect-w-16 {
 
+            position: relative;
 
+            padding-bottom: 56.25%;
 
+        }
 
+        
+        .aspect-w-16 > * {
 
+            position: absolute;
 
+            height: 100%;
 
+            width: 100%;
 
+            top: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            left: 0;
 
+        }
 
+        
+        /* 加载动画 */
 
+        @keyframes spin {
 
+            to {
 
+                transform: rotate(360deg);
 
+            }
 
+        }
 
+        
+        .animate-spin {
 
+            animation: spin 1s linear infinite;
 
+        }
 
+        
+        /* 数据闪烁动效 */
 
+        @keyframes pulse-data {
 
+            0% {
 
+                opacity: 1;
 
+            }
 
+            50% {
 
+                opacity: 0.6;
 
+            }
 
+            100% {
 
+                opacity: 1;
 
+            }
 
+        }
 
+        
+        .data-pulse {
 
+            animation: pulse-data 2s infinite;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="page-container">
 
+        <!-- 从device-monitor-content.html中复制主要内容 -->
 
+    </div>
 
+    <script>
 
+        // 从device-monitor-content.html中复制JavaScript代码
 
+    </script>
 
+</body>
 
+</html>

+ 2328 - 50
pages/device-monitor.html
Ver fichero 

@@ -1,85 +1,2363 @@
 
 <!DOCTYPE html>
 
-<html lang="zh-CN">
 
+<html lang="zh-CN" class="iframe-content">
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>设备监控实时展示 - 爱智农</title>
 
+    <title>设备监控汇总 - 爱智农</title>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
     <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
 
     <link rel="stylesheet" href="../assets/css/global.css">
 
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/locale/zh-cn.js"></script>
 
     <style>
 
         :root {
 
-            --primary: #4CAF50;
 
-            --primary-dark: #388E3C;
 
-            --primary-light: #A5D6A7;
 
-            --primary-bg: #F1F8E9;
 
-            --success: #4CAF50;
 
-            --warning: #FFC107;
 
-            --danger: #F44336;
 
-            --info: #2196F3;
 
-            --disabled: #9E9E9E;
 
-            --border: #E0E0E0;
 
-            --text-primary: #212121;
 
-            --text-secondary: #757575;
 
+            --primary: #0ea5e9;
 
+            --primary-dark: #0369a1;
 
+            --primary-light: #7dd3fc;
 
+            --bg-dark: #0f172a;
 
+            --bg-card: #1e293b;
 
+            --text-primary: #f1f5f9;
 
+            --text-secondary: #94a3b8;
 
+            --success: #10b981;
 
+            --warning: #f59e0b;
 
+            --danger: #ef4444;
 
+            --info: #3b82f6;
 
+            --border: #334155;
 
             --radius: 8px;
 
         }
 
         
         body {
 
             font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
-            background-color: #f5f7f9;
 
+            background-color: var(--bg-dark);
 
             color: var(--text-primary);
 
             margin: 0;
 
             padding: 0;
 
-            height: 100vh;
 
-            width: 100vw;
 
+            min-height: 100vh;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        .page-container {
 
+            padding: 60px 20px 20px;
 
+        }
 
+        
+        /* 卡片组件 */
 
+        .dashboard-card {
 
+            background-color: var(--bg-card);
 
+            border-radius: var(--radius);
 
+            border: 1px solid var(--border);
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .dashboard-card:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
+            border-color: var(--primary);
 
+        }
 
+        
+        /* 告警状态卡片 */
 
+        .dashboard-card.alert {
 
+            border: 1px solid var(--danger);
 
+            background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
 
+        }
 
+        
+        /* 数据更新闪烁效果 */
 
+        .data-update {
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .data-update.flash {
 
+            animation: flash 0.5s ease;
 
+        }
 
+        
+        /* 视频监控卡片 */
 
+        .video-card {
 
+            position: relative;
 
+            background: var(--bg-dark);
 
+            border-radius: var(--radius);
 
             overflow: hidden;
 
+            border: 1px solid var(--border);
 
+            transition: all 0.3s ease;
 
         }
 
         
-        /* 内容页面框架 */
 
-        #content-frame {
 
+        .video-preview {
 
+            position: relative;
 
+            padding-top: 75%; /* 4:3 aspect ratio */
 
+            background: var(--bg-dark);
 
+        }
 
+        
+        .video-preview > div {
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
             width: 100%;
 
             height: 100%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+        
+        .video-preview .camera-icon {
 
+            width: 48px;
 
+            height: 48px;
 
+            color: var(--text-secondary);
 
+        }
 
+        
+        /* 摄像头全屏按钮样式 */
 
+        .camera-fullscreen-btn {
 
+            position: absolute;
 
+            top: 12px;
 
+            right: 12px;
 
+            width: 32px;
 
+            height: 32px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background: rgba(0, 0, 0, 0.5);
 
+            border: 1px solid rgba(255, 255, 255, 0.1);
 
+            border-radius: 4px;
 
+            color: var(--text-secondary);
 
+            transition: all 0.2s ease;
 
+            z-index: 10;
 
+        }
 
+        
+        .camera-fullscreen-btn:hover {
 
+            background: rgba(0, 0, 0, 0.7);
 
+            color: var(--text-primary);
 
+            border-color: var(--primary);
 
+        }
 
+        
+        /* 状态标签 */
 
+        .status-badge {
 
+            font-size: 12px;
 
+            padding: 2px 8px;
 
+            border-radius: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .status-badge.online {
 
+            background-color: rgba(16, 185, 129, 0.1);
 
+            color: #10b981;
 
+        }
 
+        
+        .status-badge.offline {
 
+            background-color: rgba(239, 68, 68, 0.2);
 
+            color: var(--danger);
 
+        }
 
+        
+        .status-badge.warning {
 
+            background-color: rgba(245, 158, 11, 0.1);
 
+            color: #f59e0b;
 
+        }
 
+        
+        /* 动画效果 */
 
+        @keyframes pulse {
 
+            0% {
 
+                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
 
+            }
 
+            70% {
 
+                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
 
+            }
 
+            100% {
 
+                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
 
+            }
 
+        }
 
+        
+        @keyframes flash {
 
+            0% {
 
+                opacity: 1;
 
+            }
 
+            50% {
 
+                opacity: 0.5;
 
+            }
 
+            100% {
 
+                opacity: 1;
 
+            }
 
+        }
 
+        
+        /* 下拉选择器样式 */
 
+        select {
 
+            background-color: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-primary);
 
+            padding: 8px 12px;
 
+            border-radius: var(--radius);
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 8px center;
 
+            background-size: 16px;
 
+            padding-right: 32px;
 
+        }
 
+        
+        select:focus {
 
+            outline: none;
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
 
+        }
 
+        
+        /* 按钮样式 */
 
+        .btn {
 
+            padding: 8px 16px;
 
+            border-radius: var(--radius);
 
+            font-weight: 500;
 
+            transition: all 0.3s ease;
 
+            display: inline-flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: var(--primary);
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: var(--primary-dark);
 
+        }
 
+        
+        .btn-outline {
 
+            border: 1px solid var(--border);
 
+            color: var(--text-primary);
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .btn-outline:hover {
 
+            border-color: var(--primary);
 
+            background-color: rgba(15, 23, 42, 0.5);
 
+        }
 
+        
+        /* 全屏按钮 */
 
+        .fullscreen-btn {
 
+            position: absolute;
 
+            top: 8px;
 
+            right: 8px;
 
+            background: rgba(0, 0, 0, 0.5);
 
+            color: white;
 
             border: none;
 
+            border-radius: 4px;
 
+            padding: 4px;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .fullscreen-btn:hover {
 
+            background: rgba(0, 0, 0, 0.8);
 
+        }
 
+        
+        /* 设备总览卡片样式优化 */
 
+        .overview-card {
 
+            display: grid;
 
+            grid-template-columns: repeat(3, 1fr);
 
+            gap: 1.5rem;
 
+            padding: 1.5rem;
 
+        }
 
+        
+        .overview-stat {
 
+            text-align: center;
 
+        }
 
+        
+        /* 数据单位样式 */
 
+        .data-unit {
 
+            font-size: 0.875rem;
 
+            color: var(--text-secondary);
 
+            margin-left: 2px;
 
+        }
 
+        
+        /* 刷新按钮动画 */
 
+        .refresh-spin {
 
+            animation: spin 1s linear infinite;
 
+        }
 
+        
+        @keyframes spin {
 
+            from {
 
+                transform: rotate(0deg);
 
+            }
 
+            to {
 
+                transform: rotate(360deg);
 
+            }
 
+        }
 
+        
+        /* 视频网格优化 */
 
+        .video-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(3, minmax(0, 1fr));
 
+            gap: 1rem;
 
+            margin-bottom: 1rem;
 
+            width: 100%;
 
+        }
 
+        
+        /* 视频监控相关样式 */
 
+        .video-container {
 
+            padding: 1.5rem;
 
+            background: var(--bg-card);
 
+            border-radius: var(--radius);
 
+            margin-bottom: 2rem;
 
+        }
 
+
 
+        .video-card {
 
+            display: block;
 
+            position: relative;
 
+            background: var(--bg-dark);
 
+            border-radius: var(--radius);
 
             overflow: hidden;
 
-            margin-top: 0; /* 移除顶部外边距 */
 
-            padding-top: 0; /* 移除顶部内边距 */
 
-        }
 
-        
-        /* 移除白色圆形按钮 */
 
-        .circle-btn, 
-        .floating-button,
 
-        .round-button,
 
-        button[class*='circle'],
 
-        div[class*='circle'],
 
-        [class*='float-btn'],
 
-        body > div:not(#app),
 
-        body > button {
 
-            display: none !important;
 
-            visibility: hidden !important;
 
-            opacity: 0 !important;
 
-            position: absolute !important;
 
-            top: -9999px !important;
 
-            left: -9999px !important;
 
-            z-index: -9999 !important;
 
-            pointer-events: none !important;
 
+            border: 1px solid var(--border);
 
+            transition: all 0.3s ease;
 
+        }
 
+
 
+        .video-card:hover {
 
+            border-color: var(--primary);
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 
+        }
 
+
 
+        .video-preview {
 
+            position: relative;
 
+            padding-top: 75%; /* 4:3 aspect ratio */
 
+            background: var(--bg-dark);
 
+            width: 100%;
 
+        }
 
+
 
+        .video-preview > div {
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+
 
+        .video-info {
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            padding: 0.75rem;
 
+            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
 
+        }
 
+
 
+        .video-title {
 
+            color: white;
 
+            font-size: 0.875rem;
 
+            margin-bottom: 0.25rem;
 
+        }
 
+
 
+        .video-location {
 
+            color: var(--text-secondary);
 
+            font-size: 0.75rem;
 
+        }
 
+
 
+        /* 主视频样式 */
 
+        .video-card.main-video {
 
+            grid-column: span 1;
 
+            border-width: 2px;
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        /* 16:9 宽高比容器 */
 
+        .aspect-w-16.aspect-h-9 {
 
+            position: relative;
 
+        }
 
+
 
+        /* 视频导航按钮样式 */
 
+        .video-nav-btn {
 
+            width: 32px;
 
+            height: 32px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background: rgba(15, 23, 42, 0.8);
 
+            border: 1px solid var(--border);
 
+            border-radius: 4px;
 
+            color: var(--text-secondary);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .video-nav-btn:hover {
 
+            background: var(--bg-card);
 
+            color: var(--text-primary);
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        .video-nav-btn:disabled {
 
+            opacity: 0.5;
 
+            cursor: not-allowed;
 
+        }
 
+
 
+        .video-nav-btn i {
 
+            font-size: 16px;
 
+        }
 
+
 
+        /* 页码显示样式 */
 
+        .page-indicator {
 
+            padding: 0 12px;
 
+            height: 32px;
 
+            display: flex;
 
+            align-items: center;
 
+            background: rgba(15, 23, 42, 0.8);
 
+            border: 1px solid var(--border);
 
+            border-radius: 4px;
 
+            color: var(--text-secondary);
 
+            font-size: 14px;
 
+        }
 
+
 
+        /* 摄像头控制按钮 */
 
+        .camera-control-btn {
 
+            background: rgba(0, 0, 0, 0.5);
 
+            color: var(--text-secondary);
 
+            padding: 0.5rem;
 
+            border-radius: var(--radius);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .camera-control-btn:hover {
 
+            background: rgba(0, 0, 0, 0.7);
 
+            color: var(--text-primary);
 
+        }
 
+
 
+        /* 云台控制按钮 */
 
+        .ptz-btn {
 
+            background: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-primary);
 
+            padding: 0.75rem;
 
+            border-radius: var(--radius);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .ptz-btn:hover {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        /* 预置位按钮 */
 
+        .preset-btn {
 
+            background: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-primary);
 
+            padding: 0.5rem;
 
+            border-radius: var(--radius);
 
+            font-size: 0.875rem;
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .preset-btn:hover {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        /* 全屏模式样式 */
 
+        .fullscreen-mode {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100vw;
 
+            height: 100vh;
 
+            background: var(--bg-dark);
 
+            padding: 1rem;
 
+            z-index: 40;
 
+        }
 
+
 
+        .fullscreen-mode .video-grid {
 
+            grid-template-columns: repeat(3, 1fr);
 
+            grid-template-rows: repeat(2, 1fr);
 
+            height: calc(100vh - 2rem);
 
+            gap: 1rem;
 
+            margin: 0;
 
+        }
 
+
 
+        /* 单个摄像头全屏模式 */
 
+        #singleCameraFullscreen {
 
+            display: none;
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100vw;
 
+            height: 100vh;
 
+            background-color: var(--bg-dark);
 
+            z-index: 50;
 
+        }
 
+
 
+        #singleCameraFullscreen.active {
 
+            display: flex;
 
+        }
 
+
 
+        #singleCameraFullscreen .video-area {
 
+            flex: 1;
 
+            min-width: 0;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+
 
+        #singleCameraFullscreen .control-panel {
 
+            width: 280px;
 
+            background: var(--bg-card);
 
+            border-left: 1px solid var(--border);
 
+            padding: 1.5rem;
 
+            overflow-y: auto;
 
+        }
 
+
 
+        /* 云台控制按钮网格 */
 
+        .ptz-controls {
 
+            display: grid;
 
+            grid-template-columns: repeat(3, 1fr);
 
+            gap: 0.5rem;
 
+            margin-bottom: 1.5rem;
 
+        }
 
+
 
+        .ptz-btn {
 
+            aspect-ratio: 1;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background: var(--bg-dark);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-secondary);
 
+            border-radius: var(--radius);
 
+            font-size: 1.25rem;
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .ptz-btn:hover {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        .ptz-btn:active {
 
+            transform: scale(0.95);
 
+        }
 
+
 
+        /* 预置位按钮网格 */
 
+        .preset-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 0.5rem;
 
+        }
 
+
 
+        .preset-btn {
 
+            padding: 0.75rem;
 
+            background: var(--bg-dark);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-secondary);
 
+            border-radius: var(--radius);
 
+            transition: all 0.2s ease;
 
+            text-align: center;
 
+        }
 
+
 
+        .preset-btn:hover {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        /* 更新数据显示样式 */
 
+        .data-update {
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+
 
+        .data-update .text-3xl {
 
+            display: flex;
 
+            align-items: baseline;
 
+        }
 
+
 
+        /* 设备监控区域样式 */
 
+        .device-monitor-section {
 
+            margin-bottom: 0; /* 移除底部边距，因为现在在卡片内部 */
 
+        }
 
+
 
+        /* 设备卡片网格布局 */
 
+        .device-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(1, 1fr);
 
+            gap: 1rem; /* 稍微减小间距，因为现在在卡片内部 */
 
+            padding: 0.5rem; /* 添加内边距，避免卡片贴边 */
 
+            min-height: 400px;
 
+        }
 
+
 
+        @media (min-width: 768px) {
 
+            .device-grid {
 
+                grid-template-columns: repeat(2, 1fr);
 
+            }
 
+        }
 
+
 
+        @media (min-width: 1280px) {
 
+            .device-grid {
 
+                grid-template-columns: repeat(3, 1fr);
 
+            }
 
+        }
 
+
 
+        @media (min-width: 1536px) {
 
+            .device-grid {
 
+                grid-template-columns: repeat(4, 1fr);
 
+            }
 
+        }
 
+
 
+        /* 设备卡片基础样式 */
 
+        .device-card {
 
+            background-color: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+            border-radius: var(--radius);
 
+            padding: 1.5rem;
 
+            transition: all 0.3s ease;
 
+            height: 100%;
 
+            min-height: 250px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+
 
+        .device-card:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
+        }
 
+
 
+        /* 告警状态卡片 */
 
+        .device-card.alert {
 
+            border-color: var(--danger);
 
+            background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
 
+        }
 
+
 
+        /* 离线状态卡片 */
 
+        .device-card.offline {
 
+            opacity: 0.8;
 
+        }
 
+
 
+        /* 骨架屏动画 */
 
+        @keyframes pulse {
 
+            0%, 100% {
 
+                opacity: 1;
 
+            }
 
+            50% {
 
+                opacity: .5;
 
+            }
 
+        }
 
+
 
+        .animate-pulse {
 
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
+        }
 
+
 
+        /* 筛选按钮样式 */
 
+        .filter-btn {
 
+            padding: 0.5rem 1rem;
 
+            border-radius: var(--radius);
 
+            font-size: 0.875rem;
 
+            color: var(--text-secondary);
 
+            background: transparent;
 
+            border: 1px solid var(--border);
 
+            transition: all 0.2s ease;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 0.5rem;
 
+        }
 
+
 
+        .filter-btn:hover {
 
+            background: rgba(255, 255, 255, 0.05);
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        .filter-btn.active {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        /* 状态点样式 */
 
+        .status-dot {
 
+            width: 8px;
 
+            height: 8px;
 
+            border-radius: 50%;
 
+            display: inline-block;
 
+        }
 
+
 
+        .status-dot.warning {
 
+            background-color: var(--warning);
 
+        }
 
+
 
+        .status-dot.offline {
 
+            background-color: var(--danger);
 
+        }
 
+
 
+        /* 排序选择器样式 */
 
+        .sort-select {
 
+            background-color: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+            color: var(--text-primary);
 
+            padding: 0.5rem 2rem 0.5rem 1rem;
 
+            border-radius: var(--radius);
 
+            font-size: 0.875rem;
 
+            appearance: none;
 
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
 
+            background-repeat: no-repeat;
 
+            background-position: right 0.75rem center;
 
+            background-size: 1rem;
 
+        }
 
+
 
+        .sort-select:focus {
 
+            outline: none;
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        /* 分页按钮样式 */
 
+        .page-btn {
 
+            width: 32px;
 
+            height: 32px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            border-radius: var(--radius);
 
+            color: var(--text-secondary);
 
+            transition: all 0.2s ease;
 
+            background: var(--bg-card);
 
+            border: 1px solid var(--border);
 
+        }
 
+
 
+        .page-btn:hover:not(:disabled) {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        .page-btn:disabled {
 
+            opacity: 0.5;
 
+            cursor: not-allowed;
 
+        }
 
+
 
+        /* 空状态样式 */
 
+        .device-card.empty {
 
+            justify-content: center;
 
+            background: transparent;
 
+            border: 2px dashed var(--border);
 
+        }
 
+
 
+        .device-card.empty:hover {
 
+            transform: none;
 
+            box-shadow: none;
 
+        }
 
+
 
+        /* 添加到现有的 style 标签中 */
 
+        .time-range-btn,
 
+        .indicator-btn {
 
+            padding: 0.5rem 1rem;
 
+            border-radius: var(--radius);
 
+            font-size: 0.875rem;
 
+            color: var(--text-secondary);
 
+            background: transparent;
 
+            border: 1px solid var(--border);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .time-range-btn:hover,
 
+        .indicator-btn:hover {
 
+            background: rgba(255, 255, 255, 0.05);
 
+            border-color: var(--primary);
 
+        }
 
+
 
+        .time-range-btn.active,
 
+        .indicator-btn.active {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        /* 添加到现有的 style 标签中 */
 
+        .history-data {
 
+            display: none;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: var(--bg-card);
 
+            z-index: 1;
 
+            padding: 1rem;
 
+        }
 
+
 
+        .history-data.active {
 
+            display: block;
 
+        }
 
+
 
+        .history-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 1rem;
 
+        }
 
+
 
+        .history-tabs {
 
+            display: flex;
 
+            gap: 0.5rem;
 
+            margin-bottom: 1rem;
 
+        }
 
+
 
+        .history-tab {
 
+            padding: 0.5rem 1rem;
 
+            border-radius: var(--radius);
 
+            font-size: 0.875rem;
 
+            color: var(--text-secondary);
 
+            background: transparent;
 
+            border: 1px solid var(--border);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .history-tab.active {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+        }
 
+
 
+        .close-history {
 
+            padding: 0.5rem;
 
+            color: var(--text-secondary);
 
+            transition: all 0.2s ease;
 
+        }
 
+
 
+        .close-history:hover {
 
+            color: var(--text-primary);
 
+        }
 
+
 
+        /* 修改设备卡片样式 */
 
+        .device-card {
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+
 
+        /* 添加或修改以下样式 */
 
+        .modal-backdrop {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100vw;
 
+            height: 100vh;
 
+            background-color: rgba(15, 23, 42, 0.75);
 
+            backdrop-filter: blur(4px);
 
+            z-index: 50;
 
+            display: none; /* 默认隐藏 */
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 1rem;
 
+            opacity: 0;
 
+            transition: opacity 0.3s ease;
 
+        }
 
+
 
+        .modal-backdrop.active {
 
+            display: flex;
 
+            opacity: 1;
 
+        }
 
+
 
+        .modal-content {
 
+            background-color: var(--bg-dark);
 
+            border-radius: var(--radius);
 
+            width: 100%;
 
+            max-width: 1000px;
 
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
+            border: 1px solid var(--border);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .modal-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 1rem 1.5rem;
 
+            border-bottom: 1px solid var(--border);
 
+        }
 
+
 
+        .modal-body {
 
+            padding: 1.5rem;
 
+        }
 
+
 
+        .modal-close {
 
+            background: transparent;
 
+            border: none;
 
+            color: var(--text-secondary);
 
+            cursor: pointer;
 
+            padding: 0.5rem;
 
+            transition: color 0.2s ease;
 
+        }
 
+
 
+        .modal-close:hover {
 
+            color: var(--text-primary);
 
+        }
 
+
 
+        /* 修改历史数据图表模态框的HTML结构 */
 
+        .device-card {
 
+            position: relative;
 
+        }
 
+
 
+        .history-btn {
 
+            position: absolute;
 
+            top: 1rem;
 
+            right: 1rem;
 
+            width: 32px;
 
+            height: 32px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background: var(--bg-dark);
 
+            border: 1px solid var(--border);
 
+            border-radius: var(--radius);
 
+            color: var(--text-secondary);
 
+            transition: all 0.2s ease;
 
+            z-index: 1;
 
+        }
 
+
 
+        .history-btn:hover {
 
+            background: var(--primary);
 
+            border-color: var(--primary);
 
+            color: white;
 
+            transform: translateY(-1px);
 
+        }
 
+
 
+        .history-btn svg {
 
+            width: 16px;
 
+            height: 16px;
 
+        }
 
+
 
+        /* 调整设备卡片头部布局 */
 
+        .device-card .card-header {
 
+            padding-right: 3rem; /* 为历史按钮留出空间 */
 
         }
 
     </style>
 
 </head>
 
 <body>
 
-    <!-- 使用iframe来完全隔离和控制页面内容 -->
 
-    <iframe id="content-frame" src="device-monitor-content.html" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="eager" scrolling="auto" frameborder="0" allowfullscreen></iframe>
 
+    <div class="page-container">
 
+        <!-- 顶部控制区域 -->
 
+        <div class="mb-6 grid grid-cols-12 gap-4">
 
+            <!-- 农场和地块选择器 -->
 
+            <div class="col-span-12 lg:col-span-8">
 
+                <div class="dashboard-card p-4">
 
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+                        <div>
 
+                            <label class="block text-sm text-gray-400 mb-2">农场选择</label>
 
+                            <select id="farmSelector" class="w-full">
 
+                                <option value="all">全部农场</option>
 
+                                <option value="farm1">东湖智慧农场</option>
 
+                                <option value="farm2">西湖有机农场</option>
 
+                                <option value="farm3">南山生态农场</option>
 
+                            </select>
 
+                        </div>
 
+                        <div>
 
+                            <label class="block text-sm text-gray-400 mb-2">地块选择</label>
 
+                            <select id="areaSelector" class="w-full">
 
+                                <option value="all">全部地块</option>
 
+                                <option value="area1">东区1号地块</option>
 
+                                <option value="area2">东区2号地块</option>
 
+                                <option value="area3">西区1号地块</option>
 
+                            </select>
 
+                        </div>
 
+                        <div>
 
+                            <label class="block text-sm text-gray-400 mb-2">时间范围</label>
 
+                            <select id="timeRange" class="w-full">
 
+                                <option value="realtime">实时数据</option>
 
+                                <option value="1h">近1小时</option>
 
+                                <option value="24h">近24小时</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 刷新控制区 -->
 
+            <div class="col-span-12 lg:col-span-4">
 
+                <div class="dashboard-card p-4">
 
+                    <div class="flex items-center justify-between">
 
+                        <div class="flex items-center gap-4">
 
+                            <button id="refreshBtn" class="btn btn-primary">
 
+                                <i class="iconfont icon-refresh"></i>
 
+                                刷新数据
 
+                            </button>
 
+                            <div class="text-sm text-gray-400">
 
+                                自动刷新：
 
+                                <select id="autoRefresh" class="text-sm">
 
+                                    <option value="15">15秒</option>
 
+                                    <option value="30" selected>30秒</option>
 
+                                    <option value="60">60秒</option>
 
+                                </select>
 
+                            </div>
 
+                        </div>
 
+                        <div class="text-sm text-gray-400">
 
+                            最后更新：<span id="lastUpdate">刚刚</span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 设备总览统计区 -->
 
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4 mb-6">
 
+            <!-- 总体统计 -->
 
+            <div class="dashboard-card xl:col-span-2">
 
+                <div class="overview-card">
 
+                    <div class="overview-stat">
 
+                        <div class="text-2xl font-bold text-green-500">42</div>
 
+                        <div class="text-sm text-gray-400">在线设备</div>
 
+                    </div>
 
+                    <div class="overview-stat">
 
+                        <div class="text-2xl font-bold text-red-500">3</div>
 
+                        <div class="text-sm text-gray-400">离线设备</div>
 
+                    </div>
 
+                    <div class="overview-stat">
 
+                        <div class="text-2xl font-bold text-yellow-500">5</div>
 
+                        <div class="text-sm text-gray-400">告警设备</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 分类统计 -->
 
+            <div class="dashboard-card p-4">
 
+                <div class="text-center">
 
+                    <div class="text-3xl font-bold text-blue-500 mb-2">12</div>
 
+                    <div class="text-sm text-gray-400">摄像头</div>
 
+                    <div class="text-xs text-gray-500 mt-1">11在线 / 1离线</div>
 
+                </div>
 
+            </div>
 
+            <div class="dashboard-card p-4">
 
+                <div class="text-center">
 
+                    <div class="text-3xl font-bold text-green-500 mb-2">15</div>
 
+                    <div class="text-sm text-gray-400">传感器</div>
 
+                    <div class="text-xs text-gray-500 mt-1">14在线 / 1告警</div>
 
+                </div>
 
+            </div>
 
+            <div class="dashboard-card p-4">
 
+                <div class="text-center">
 
+                    <div class="text-3xl font-bold text-purple-500 mb-2">8</div>
 
+                    <div class="text-sm text-gray-400">气象设备</div>
 
+                    <div class="text-xs text-gray-500 mt-1">7在线 / 1离线</div>
 
+                </div>
 
+            </div>
 
+            <div class="dashboard-card p-4">
 
+                <div class="text-center">
 
+                    <div class="text-3xl font-bold text-yellow-500 mb-2">10</div>
 
+                    <div class="text-sm text-gray-400">控制设备</div>
 
+                    <div class="text-xs text-gray-500 mt-1">10在线</div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 今日统计 -->
 
+            <div class="dashboard-card p-4">
 
+                <div class="text-center">
 
+                    <div class="text-3xl font-bold text-red-500 mb-2">7</div>
 
+                    <div class="text-sm text-gray-400">今日告警</div>
 
+                    <div class="text-xs text-green-500 mt-1">5已处理</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 主要内容区域 -->
 
+        <div class="flex flex-col gap-6">
 
+            <!-- 视频监控区域 -->
 
+            <div class="w-full">
 
+                <div class="dashboard-card p-4">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <div class="flex items-center gap-4">
 
+                            <h3 class="text-lg font-medium">视频监控</h3>
 
+                            <div class="text-sm text-gray-400">
 
+                                共 12 个摄像头
 
+                            </div>
 
+                        </div>
 
+                        <div class="flex items-center gap-3">
 
+                            <div class="flex items-center gap-2">
 
+                                <button class="video-nav-btn" id="prevPage" title="上一页">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="page-indicator">
 
+                                    <span>1-6 / 12</span>
 
+                                </div>
 
+                                <button class="video-nav-btn" id="nextPage" title="下一页">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                            </div>
 
+                            <button class="video-nav-btn" id="gridFullscreen" title="全屏显示">
 
+                                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                </svg>
 
+                            </button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 视频卡片网格 -->
 
+                    <div id="videoGrid" class="video-container">
 
+                        <div class="video-grid">
 
+                            <!-- 摄像头 1-3 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">东区1号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">东区1号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <!-- 摄像头 4 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">东区2号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">东区2号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <!-- 摄像头 5 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">东区3号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">东区3号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge offline">离线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <!-- 摄像头 6 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">西区1号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">西区1号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <!-- 摄像头 7 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">西区2号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">西区2号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <!-- 摄像头 8 -->
 
+                            <div class="video-card">
 
+                                <button class="camera-fullscreen-btn" title="全屏查看">
 
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd" />
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="video-preview">
 
+                                    <div class="bg-slate-800">
 
+                                        <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                            <path d="M23 7l-7 5 7 5V7z"/>
 
+                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                                        </svg>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="video-info">
 
+                                    <div class="flex justify-between items-center">
 
+                                        <div>
 
+                                            <div class="text-white">西区3号摄像头</div>
 
+                                            <div class="text-sm text-gray-400">西区3号地块</div>
 
+                                        </div>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 设备数据展示区域 -->
 
+            <div class="w-full">
 
+                <div class="dashboard-card p-4">
 
+                    <div class="device-monitor-section">
 
+                        <!-- 顶部控制栏 -->
 
+                        <div class="flex justify-between items-center mb-6">
 
+                            <div class="flex items-center gap-4">
 
+                                <h3 class="text-lg font-medium">设备监控</h3>
 
+                                <div class="flex gap-2">
 
+                                    <button class="filter-btn active">
 
+                                        全部设备
 
+                                        <span class="ml-1 text-xs text-gray-400">(45)</span>
 
+                                    </button>
 
+                                    <button class="filter-btn">
 
+                                        <span class="status-dot warning"></span>
 
+                                        告警设备
 
+                                        <span class="ml-1 text-xs text-gray-400">(5)</span>
 
+                                    </button>
 
+                                    <button class="filter-btn">
 
+                                        <span class="status-dot offline"></span>
 
+                                        离线设备
 
+                                        <span class="ml-1 text-xs text-gray-400">(3)</span>
 
+                                    </button>
 
+                                </div>
 
+                                <div class="border-l border-slate-600 h-6"></div>
 
+                                <div class="flex gap-2">
 
+                                    <button class="filter-btn">土壤监测</button>
 
+                                    <button class="filter-btn">水质监测</button>
 
+                                    <button class="filter-btn">气象监测</button>
 
+                                </div>
 
+                            </div>
 
+                            <div class="flex items-center gap-4">
 
+                                <select class="sort-select">
 
+                                    <option value="alert">告警优先</option>
 
+                                    <option value="time">更新时间</option>
 
+                                    <option value="name">设备名称</option>
 
+                                </select>
 
+                                <div class="flex items-center gap-2">
 
+                                    <button class="page-btn" disabled>
 
+                                        <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
 
+                                        </svg>
 
+                                    </button>
 
+                                    <span class="text-sm text-gray-400">1-6 / 45</span>
 
+                                    <button class="page-btn">
 
+                                        <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
 
+                                        </svg>
 
+                                    </button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+
 
+                        <!-- 设备卡片网格 -->
 
+                        <div class="device-grid">
 
+                            <!-- 第一行设备 -->
 
+                            <!-- 土壤监测器卡片 -->
 
+                            <div class="device-card">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">土壤监测器 #1</h4>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">东区1号地块</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤湿度</div>
 
+                                        <div class="text-3xl font-medium">32.5<span class="text-xl ml-1">%</span></div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤温度</div>
 
+                                        <div class="text-3xl font-medium">24.2<span class="text-xl ml-1">℃</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-400">2分钟前更新</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 水质监测器卡片（告警状态） -->
 
+                            <div class="device-card alert">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">水质监测器 #2</h4>
 
+                                        <span class="status-badge warning">告警</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">西区1号地块</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">pH值</div>
 
+                                        <div class="text-3xl font-medium text-red-500">8.5</div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">溶解氧</div>
 
+                                        <div class="text-3xl font-medium">6.2<span class="text-xl ml-1">mg/L</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-red-500">pH值超标</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">处理告警</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 气象监测器卡片 -->
 
+                            <div class="device-card">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">气象监测器 #1</h4>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">东区气象站</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">温度</div>
 
+                                        <div class="text-3xl font-medium">26.5<span class="text-xl ml-1">℃</span></div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">湿度</div>
 
+                                        <div class="text-3xl font-medium">68<span class="text-xl ml-1">%</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-400">1分钟前更新</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 离线设备卡片 -->
 
+                            <div class="device-card offline">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">土壤监测器 #4</h4>
 
+                                        <span class="status-badge offline">离线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">西区2号地块</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤湿度</div>
 
+                                        <div class="text-3xl font-medium text-gray-500">--<span class="text-xl ml-1">%</span></div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤温度</div>
 
+                                        <div class="text-3xl font-medium text-gray-500">--<span class="text-xl ml-1">℃</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-500">设备离线 > 24h</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 第二行设备 -->
 
+                            <!-- 水质监测器卡片 -->
 
+                            <div class="device-card">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">水质监测器 #3</h4>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">东区2号地块</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">pH值</div>
 
+                                        <div class="text-3xl font-medium">7.2</div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">溶解氧</div>
 
+                                        <div class="text-3xl font-medium">5.8<span class="text-xl ml-1">mg/L</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-400">5分钟前更新</div>
 
+                                    <div class="flex gap-2">
 
+                                        <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                        <button class="btn btn-outline text-sm px-4 py-2" onclick="showDeviceHistory(this.closest('.device-card'))">
 
+                                            <i class="iconfont icon-chart mr-1"></i>历史数据
 
+                                        </button>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 气象监测器卡片（告警状态） -->
 
+                            <div class="device-card alert">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">气象监测器 #2</h4>
 
+                                        <span class="status-badge warning">告警</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">西区气象站</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">温度</div>
 
+                                        <div class="text-3xl font-medium text-red-500">35.8<span class="text-xl ml-1">℃</span></div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">湿度</div>
 
+                                        <div class="text-3xl font-medium">45<span class="text-xl ml-1">%</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-red-500">温度过高</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">处理告警</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 土壤监测器卡片 #5 -->
 
+                            <div class="device-card">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">土壤监测器 #5</h4>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">南区1号地块</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤湿度</div>
 
+                                        <div class="text-3xl font-medium">28.5<span class="text-xl ml-1">%</span></div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">土壤温度</div>
 
+                                        <div class="text-3xl font-medium">22.8<span class="text-xl ml-1">℃</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-400">3分钟前更新</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- 水质监测器卡片 #4 -->
 
+                            <div class="device-card">
 
+                                <button class="history-btn" onclick="showDeviceHistory(this.closest('.device-card'))" title="查看历史数据">
 
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                                        <path d="M12 20v-6M6 20V10M18 20V4"/>
 
+                                    </svg>
 
+                                </button>
 
+                                <div class="card-header">
 
+                                    <div class="flex items-center gap-2">
 
+                                        <h4 class="text-lg font-medium">水质监测器 #4</h4>
 
+                                        <span class="status-badge online">在线</span>
 
+                                    </div>
 
+                                    <div class="text-sm text-gray-400 mt-1">南区水质站</div>
 
+                                </div>
 
+                                <div class="grid grid-cols-2 gap-8 mb-6">
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">pH值</div>
 
+                                        <div class="text-3xl font-medium">7.1</div>
 
+                                    </div>
 
+                                    <div class="data-update">
 
+                                        <div class="text-sm text-gray-400 mb-1">溶解氧</div>
 
+                                        <div class="text-3xl font-medium">6.5<span class="text-xl ml-1">mg/L</span></div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="flex justify-between items-center">
 
+                                    <div class="text-sm text-gray-400">1分钟前更新</div>
 
+                                    <button class="btn btn-outline text-sm px-4 py-2">查看详情</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 单个摄像头全屏模式 -->
 
+    <div id="singleCameraFullscreen">
 
+        <div class="video-area">
 
+            <div class="flex justify-between items-center p-4">
 
+                <h3 class="text-lg font-medium">东区1号摄像头</h3>
 
+                <button class="video-nav-btn" id="exitSingleFullscreen">
 
+                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
 
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
 
+                    </svg>
 
+                </button>
 
+            </div>
 
+            <div class="flex-grow bg-slate-800 relative">
 
+                <!-- 视频画面区域 -->
 
+                <div class="absolute inset-0 flex items-center justify-center">
 
+                    <svg class="w-24 h-24 text-slate-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
+                        <path d="M23 7l-7 5 7 5V7z"/>
 
+                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
 
+                    </svg>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="control-panel">
 
+            <div class="space-y-6">
 
+                <!-- 云台控制 -->
 
+                <div>
 
+                    <h4 class="text-sm font-medium mb-3">云台控制</h4>
 
+                    <div class="ptz-controls">
 
+                        <button class="ptz-btn" title="左上">↖</button>
 
+                        <button class="ptz-btn" title="向上">↑</button>
 
+                        <button class="ptz-btn" title="右上">↗</button>
 
+                        <button class="ptz-btn" title="向左">←</button>
 
+                        <button class="ptz-btn" title="停止">●</button>
 
+                        <button class="ptz-btn" title="向右">→</button>
 
+                        <button class="ptz-btn" title="左下">↙</button>
 
+                        <button class="ptz-btn" title="向下">↓</button>
 
+                        <button class="ptz-btn" title="右下">↘</button>
 
+                    </div>
 
+                </div>
 
+
 
+                <!-- 变倍控制 -->
 
+                <div>
 
+                    <h4 class="text-sm font-medium mb-3">变倍控制</h4>
 
+                    <div class="grid grid-cols-2 gap-3">
 
+                        <button class="ptz-btn" title="放大">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"/>
 
+                            </svg>
 
+                        </button>
 
+                        <button class="ptz-btn" title="缩小">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM7 10h6"/>
 
+                            </svg>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+
 
+                <!-- 预置位 -->
 
+                <div>
 
+                    <h4 class="text-sm font-medium mb-3">预置位</h4>
 
+                    <div class="preset-grid">
 
+                        <button class="preset-btn">位置1</button>
 
+                        <button class="preset-btn">位置2</button>
 
+                        <button class="preset-btn">位置3</button>
 
+                        <button class="preset-btn">位置4</button>
 
+                        <button class="preset-btn">位置5</button>
 
+                        <button class="preset-btn">位置6</button>
 
+                    </div>
 
+                </div>
 
+
 
+                <!-- 回放控制 -->
 
+                <div>
 
+                    <h4 class="text-sm font-medium mb-3">回放控制</h4>
 
+                    <div class="grid grid-cols-2 gap-3">
 
+                        <button class="ptz-btn" title="开始回放">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
 
+                            </svg>
 
+                        </button>
 
+                        <button class="ptz-btn" title="暂停回放">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
 
+                            </svg>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+
 
+                <!-- 其他控制 -->
 
+                <div>
 
+                    <h4 class="text-sm font-medium mb-3">其他控制</h4>
 
+                    <div class="grid grid-cols-2 gap-3">
 
+                        <button class="ptz-btn" title="截图">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
 
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
 
+                            </svg>
 
+                        </button>
 
+                        <button class="ptz-btn" title="录制">
 
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                                <circle cx="12" cy="12" r="10" stroke-width="2"/>
 
+                                <circle cx="12" cy="12" r="3" fill="currentColor"/>
 
+                            </svg>
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 历史数据图表模态框 -->
 
+    <div id="historyChartModal" class="modal-backdrop">
 
+        <div class="modal-content">
 
+            <!-- 模态框头部 -->
 
+            <div class="modal-header">
 
+                <div class="flex items-center gap-3">
 
+                    <h3 id="modalTitle" class="text-lg font-medium"></h3>
 
+                    <span id="modalStatus" class="status-badge"></span>
 
+                </div>
 
+                <button id="closeModal" class="modal-close">
 
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
 
+                    </svg>
 
+                </button>
 
+            </div>
 
+            
+            <!-- 图表控制区域 -->
 
+            <div class="border-b border-slate-700 px-6 py-4">
 
+                <div class="flex items-center justify-between">
 
+                    <div class="flex gap-2">
 
+                        <button class="time-range-btn active" data-range="24h">近24小时</button>
 
+                        <button class="time-range-btn" data-range="7d">近7天</button>
 
+                        <button class="time-range-btn" data-range="30d">近30天</button>
 
+                    </div>
 
+                    <div class="flex gap-2" id="indicatorBtns">
 
+                        <button class="indicator-btn active" data-indicator="all">所有指标</button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 图表区域 -->
 
+            <div class="modal-body">
 
+                <div id="historyChart" class="w-full" style="height: 400px;"></div>
 
+            </div>
 
+        </div>
 
+    </div>
 
     
     <script>
 
-        // 监听iframe加载完成
 
-        document.getElementById('content-frame').onload = function() {
 
-            // 确保iframe高度铺满
 
-            this.style.height = window.innerHeight + 'px';
 
+        // 页面状态管理
 
+        const state = {
 
+            currentPage: 1,
 
+            pageSize: 10,
 
+            totalDevices: 45,
 
+            selectedFarm: 'all',
 
+            selectedArea: 'all',
 
+            timeRange: 'realtime',
 
+            deviceType: 'all',
 
+            sortOrder: 'default',
 
+            autoRefreshInterval: 30,
 
+            currentVideoIndex: 0
 
         };
 
-        
-        // 页面大小变化时调整iframe大小
 
-        window.addEventListener('resize', function() {
 
-            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
 
+
 
+        // 初始化页面
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            initializeSelectors();
 
+            initializeVideoControls();
 
+            initializeDeviceFilters();
 
+            setupAutoRefresh();
 
+            initializeDataUpdates();
 
+        });
 
+
 
+        // 初始化选择器
 
+        function initializeSelectors() {
 
+            const farmSelector = document.getElementById('farmSelector');
 
+            const areaSelector = document.getElementById('areaSelector');
 
+            const timeRange = document.getElementById('timeRange');
 
+            
+            // 农场选择联动
 
+            farmSelector.addEventListener('change', function() {
 
+                state.selectedFarm = this.value;
 
+                updateAreaOptions(this.value);
 
+                refreshData();
 
+            });
 
+            
+            // 地块选择
 
+            areaSelector.addEventListener('change', function() {
 
+                state.selectedArea = this.value;
 
+                refreshData();
 
+            });
 
+            
+            // 时间范围
 
+            timeRange.addEventListener('change', function() {
 
+                state.timeRange = this.value;
 
+                refreshData();
 
+            });
 
+        }
 
+
 
+        // 初始化视频控制
 
+        function initializeVideoControls() {
 
+            const prevBtn = document.getElementById('prevPage');
 
+            const nextBtn = document.getElementById('nextPage');
 
+            const fullscreenBtn = document.getElementById('gridFullscreen');
 
+            
+            prevBtn.addEventListener('click', () => switchVideo('prev'));
 
+            nextBtn.addEventListener('click', () => switchVideo('next'));
 
+            
+            // 视频全屏
 
+            fullscreenBtn.addEventListener('click', function() {
 
+                const mainVideo = document.querySelector('.main-video');
 
+                if (mainVideo.requestFullscreen) {
 
+                    mainVideo.requestFullscreen();
 
+                }
 
+            });
 
+            
+            // 缩略图点击切换主视频
 
+            document.querySelectorAll('.video-grid .video-card:not(.main-video)').forEach((card, index) => {
 
+                card.addEventListener('click', () => {
 
+                    state.currentVideoIndex = index;
 
+                    updateMainVideo(index);
 
+                });
 
+            });
 
+        }
 
+
 
+        // 切换视频
 
+        function switchVideo(direction) {
 
+            const videos = document.querySelectorAll('.video-grid .video-card:not(.main-video)');
 
+            if (direction === 'next') {
 
+                state.currentVideoIndex = (state.currentVideoIndex + 1) % videos.length;
 
+            } else {
 
+                state.currentVideoIndex = state.currentVideoIndex === 0 ? videos.length - 1 : state.currentVideoIndex - 1;
 
+            }
 
+            updateMainVideo(state.currentVideoIndex);
 
+        }
 
+
 
+        // 更新主视频显示
 
+        function updateMainVideo(index) {
 
+            const mainVideo = document.querySelector('.main-video');
 
+            const selectedVideo = document.querySelectorAll('.video-grid .video-card:not(.main-video)')[index];
 
+            
+            // 更新视频源和信息
 
+            mainVideo.querySelector('img').src = selectedVideo.querySelector('img').src;
 
+            mainVideo.querySelector('.text-white').textContent = `摄像头 #${index + 1}`;
 
+            
+            // 高亮当前选中的缩略图
 
+            document.querySelectorAll('.video-grid .video-card:not(.main-video)').forEach((card, i) => {
 
+                card.classList.toggle('ring-2', i === index);
 
+                card.classList.toggle('ring-primary', i === index);
 
+            });
 
+        }
 
+
 
+        // 初始化设备筛选
 
+        function initializeDeviceFilters() {
 
+            const typeFilter = document.getElementById('deviceTypeFilter');
 
+            const sortOrder = document.getElementById('sortOrder');
 
+            
+            typeFilter.addEventListener('change', function() {
 
+                state.deviceType = this.value;
 
+                refreshDeviceList();
 
+            });
 
+            
+            sortOrder.addEventListener('change', function() {
 
+                state.sortOrder = this.value;
 
+                refreshDeviceList();
 
+            });
 
+        }
 
+
 
+        // 设置自动刷新
 
+        function setupAutoRefresh() {
 
+            const autoRefreshSelect = document.getElementById('autoRefresh');
 
+            let refreshInterval;
 
+            
+            function updateRefreshInterval() {
 
+                if (refreshInterval) {
 
+                    clearInterval(refreshInterval);
 
+                }
 
+                
+                const seconds = parseInt(autoRefreshSelect.value);
 
+                state.autoRefreshInterval = seconds;
 
+                refreshInterval = setInterval(refreshData, seconds * 1000);
 
+            }
 
+            
+            autoRefreshSelect.addEventListener('change', updateRefreshInterval);
 
+            updateRefreshInterval(); // 初始化定时器
 
+            
+            // 手动刷新按钮
 
+            const refreshBtn = document.getElementById('refreshBtn');
 
+            const refreshIcon = refreshBtn.querySelector('.iconfont');
 
+            
+            refreshBtn.addEventListener('click', function() {
 
+                refreshIcon.classList.add('refresh-spin');
 
+                refreshData();
 
+                setTimeout(() => {
 
+                    refreshIcon.classList.remove('refresh-spin');
 
+                }, 1000);
 
+            });
 
+        }
 
+
 
+        // 初始化数据更新
 
+        function initializeDataUpdates() {
 
+            // 更新时间显示
 
+            function updateLastRefreshTime() {
 
+                const lastUpdate = document.getElementById('lastUpdate');
 
+                const now = new Date();
 
+                const diff = Math.floor((now - window.lastRefreshTime) / 1000);
 
+                
+                if (diff < 60) {
 
+                    lastUpdate.textContent = diff + '秒前';
 
+                } else if (diff < 3600) {
 
+                    lastUpdate.textContent = Math.floor(diff / 60) + '分钟前';
 
+                } else {
 
+                    lastUpdate.textContent = Math.floor(diff / 3600) + '小时前';
 
+                }
 
+            }
 
+            
+            // 定时更新时间显示
 
+            window.lastRefreshTime = new Date();
 
+            setInterval(updateLastRefreshTime, 1000);
 
+        }
 
+
 
+        // 刷新数据
 
+        async function refreshData() {
 
+            // 更新最后刷新时间
 
+            window.lastRefreshTime = new Date();
 
+            
+            // 模拟数据更新效果
 
+            const dataElements = document.querySelectorAll('.data-update');
 
+            dataElements.forEach(el => {
 
+                el.classList.add('flash');
 
+                setTimeout(() => el.classList.remove('flash'), 500);
 
+            });
 
+            
+            // 这里应该调用实际的API获取最新数据
 
+            await Promise.all([
 
+                refreshDeviceList(),
 
+                refreshDeviceStats(),
 
+                refreshVideoFeeds()
 
+            ]);
 
+        }
 
+
 
+        // 刷新设备列表
 
+        async function refreshDeviceList() {
 
+            // 模拟API调用
 
+            console.log('Refreshing device list with filters:', {
 
+                farm: state.selectedFarm,
 
+                area: state.selectedArea,
 
+                type: state.deviceType,
 
+                sort: state.sortOrder,
 
+                page: state.currentPage
 
+            });
 
+        }
 
+
 
+        // 刷新设备统计
 
+        async function refreshDeviceStats() {
 
+            // 模拟API调用
 
+            console.log('Refreshing device statistics');
 
+        }
 
+
 
+        // 刷新视频源
 
+        async function refreshVideoFeeds() {
 
+            // 模拟API调用
 
+            console.log('Refreshing video feeds');
 
+        }
 
+
 
+        // 更新地块选项
 
+        function updateAreaOptions(farmId) {
 
+            const areaSelector = document.getElementById('areaSelector');
 
+            // 模拟API数据
 
+            const areaData = {
 
+                'farm1': [
 
+                    {id: 'area1', name: '东区1号地块'},
 
+                    {id: 'area2', name: '东区2号地块'}
 
+                ],
 
+                'farm2': [
 
+                    {id: 'area3', name: '西区1号地块'},
 
+                    {id: 'area4', name: '西区2号地块'}
 
+                ]
 
+            };
 
+            
+            // 清空现有选项
 
+            areaSelector.innerHTML = '<option value="all">全部地块</option>';
 
+            
+            // 添加新选项
 
+            if (farmId !== 'all' && areaData[farmId]) {
 
+                areaData[farmId].forEach(area => {
 
+                    const option = document.createElement('option');
 
+                    option.value = area.id;
 
+                    option.textContent = area.name;
 
+                    areaSelector.appendChild(option);
 
+                });
 
+            }
 
+        }
 
+
 
+        // 视频布局切换功能
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            const container = document.querySelector('.video-container');
 
+            const videoCards = document.querySelectorAll('.video-card');
 
+            const prevBtn = document.querySelector('.video-nav-btn[title="上一页"]');
 
+            const nextBtn = document.querySelector('.video-nav-btn[title="下一页"]');
 
+            const fullscreenBtn = document.querySelector('.video-nav-btn[title="全屏显示"]');
 
+            
+            let currentPage = 1;
 
+            const cardsPerPage = 6;
 
+            const totalPages = Math.ceil(videoCards.length / cardsPerPage);
 
+            
+            // 更新页码显示
 
+            function updatePagination() {
 
+                const start = (currentPage - 1) * cardsPerPage + 1;
 
+                const end = Math.min(currentPage * cardsPerPage, videoCards.length);
 
+                document.querySelector('.text-sm.text-gray-400').textContent = 
+                    `${start}-${end} / ${videoCards.length}`;
 
+                
+                // 更新按钮状态
 
+                prevBtn.disabled = currentPage === 1;
 
+                nextBtn.disabled = currentPage === totalPages;
 
+            }
 
+            
+            // 显示指定页的视频
 
+            function showPage(page) {
 
+                videoCards.forEach((card, index) => {
 
+                    const shouldShow = index >= (page - 1) * cardsPerPage && 
+                                     index < page * cardsPerPage;
 
+                    card.style.display = shouldShow ? '' : 'none';
 
+                });
 
+                updatePagination();
 
+            }
 
+            
+            // 翻页事件
 
+            prevBtn.addEventListener('click', () => {
 
+                if (currentPage > 1) {
 
+                    currentPage--;
 
+                    showPage(currentPage);
 
+                }
 
+            });
 
+            
+            nextBtn.addEventListener('click', () => {
 
+                if (currentPage < totalPages) {
 
+                    currentPage++;
 
+                    showPage(currentPage);
 
+                }
 
+            });
 
+            
+            // 全屏显示
 
+            fullscreenBtn.addEventListener('click', () => {
 
+                if (container.requestFullscreen) {
 
+                    container.requestFullscreen();
 
+                } else if (container.webkitRequestFullscreen) {
 
+                    container.webkitRequestFullscreen();
 
+                } else if (container.msRequestFullscreen) {
 
+                    container.msRequestFullscreen();
 
+                }
 
+            });
 
+            
+            // 初始化显示
 
+            showPage(1);
 
         });
 
+
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            const videoGrid = document.getElementById('videoGrid');
 
+            const gridFullscreenBtn = document.getElementById('gridFullscreen');
 
+            const singleFullscreenModal = document.getElementById('singleCameraFullscreen');
 
+            const exitSingleFullscreenBtn = document.getElementById('exitSingleFullscreen');
 
+            const cameraFullscreenBtns = document.querySelectorAll('.camera-fullscreen-btn');
 
+            
+            // 显示指定页的视频
 
+            function showPage(page) {
 
+                const videoCards = document.querySelectorAll('.video-card');
 
+                const cardsPerPage = 3; // 每页显示3个
 
+                videoCards.forEach((card, index) => {
 
+                    const shouldShow = index >= (page - 1) * cardsPerPage && 
+                                     index < page * cardsPerPage;
 
+                    card.style.display = shouldShow ? 'block' : 'none';
 
+                });
 
+                updatePagination(page, Math.ceil(videoCards.length / cardsPerPage));
 
+            }
 
+            
+            // 更新分页显示
 
+            function updatePagination(currentPage, totalPages) {
 
+                const cardsPerPage = 3;
 
+                const start = (currentPage - 1) * cardsPerPage + 1;
 
+                const end = Math.min(currentPage * cardsPerPage, 12);
 
+                document.querySelector('.text-sm.text-gray-400').textContent = 
+                    `${start}-${end} / 12`;
 
+            }
 
+            
+            // 网格全屏模式
 
+            gridFullscreenBtn.addEventListener('click', () => {
 
+                if (document.fullscreenElement) {
 
+                    document.exitFullscreen();
 
+                } else {
 
+                    videoGrid.requestFullscreen();
 
+                }
 
+            });
 
+            
+            // 进入全屏时添加样式
 
+            document.addEventListener('fullscreenchange', () => {
 
+                if (document.fullscreenElement === videoGrid) {
 
+                    videoGrid.classList.add('fullscreen-mode');
 
+                    // 全屏模式下显示6个摄像头
 
+                    const videoCards = document.querySelectorAll('.video-card');
 
+                    videoCards.forEach((card, index) => {
 
+                        card.style.display = index < 6 ? 'block' : 'none';
 
+                    });
 
+                } else {
 
+                    videoGrid.classList.remove('fullscreen-mode');
 
+                    // 退出全屏时恢复原始显示
 
+                    showPage(1);
 
+                }
 
+            });
 
+            
+            // 单个摄像头全屏
 
+            cameraFullscreenBtns.forEach(btn => {
 
+                btn.addEventListener('click', (e) => {
 
+                    e.stopPropagation();
 
+                    const card = btn.closest('.video-card');
 
+                    const title = card.querySelector('.text-white').textContent;
 
+                    singleFullscreenModal.querySelector('h3').textContent = title;
 
+                    singleFullscreenModal.classList.add('active');
 
+                });
 
+            });
 
+            
+            // 退出单个摄像头全屏
 
+            exitSingleFullscreenBtn.addEventListener('click', () => {
 
+                singleFullscreenModal.classList.remove('active');
 
+            });
 
+            
+            // ESC 键退出单个摄像头全屏
 
+            document.addEventListener('keydown', (e) => {
 
+                if (e.key === 'Escape' && singleFullscreenModal.classList.contains('active')) {
 
+                    singleFullscreenModal.classList.remove('active');
 
+                }
 
+            });
 
+            
+            // 初始化显示第一页
 
+            showPage(1);
 
+        });
 
+
 
+        // 初始化图表相关功能
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            initializeChartModal();
 
+        });
 
+
 
+        // 初始化图表模态框
 
+        function initializeChartModal() {
 
+            const modal = document.getElementById('historyChartModal');
 
+            const closeBtn = document.getElementById('closeModal');
 
+            const timeRangeBtns = document.querySelectorAll('.time-range-btn');
 
+            let currentChart = null;
 
+            let currentDeviceType = '';
 
+            let currentDeviceId = '';
 
+
 
+            // 关闭模态框
 
+            function closeModal() {
 
+                modal.classList.remove('active');
 
+                setTimeout(() => {
 
+                    if (currentChart) {
 
+                        currentChart.dispose();
 
+                        currentChart = null;
 
+                    }
 
+                }, 300); // 等待过渡动画完成
 
+            }
 
+
 
+            // 初始化图表
 
+            function initializeChart() {
 
+                const chartDom = document.getElementById('historyChart');
 
+                if (currentChart) {
 
+                    currentChart.dispose();
 
+                }
 
+                currentChart = echarts.init(chartDom);
 
+            }
 
+
 
+            // 更新指标按钮
 
+            function updateIndicatorButtons(deviceType) {
 
+                const container = document.getElementById('indicatorBtns');
 
+                const indicators = {
 
+                    '土壤监测器': ['所有指标', '土壤湿度', '土壤温度', 'EC值'],
 
+                    '水质监测器': ['所有指标', 'pH值', '溶解氧', '电导率', '浊度'],
 
+                    '气象监测器': ['所有指标', '温度', '湿度', '光照', '风速', '降雨量']
 
+                }[deviceType] || ['所有指标'];
 
+
 
+                // 清空现有按钮
 
+                container.innerHTML = '';
 
+
 
+                // 添加新按钮
 
+                indicators.forEach((indicator, index) => {
 
+                    const btn = document.createElement('button');
 
+                    btn.className = `indicator-btn${index === 0 ? ' active' : ''}`;
 
+                    btn.textContent = indicator;
 
+                    btn.dataset.indicator = indicator;
 
+                    btn.onclick = () => {
 
+                        document.querySelectorAll('.indicator-btn').forEach(b => b.classList.remove('active'));
 
+                        btn.classList.add('active');
 
+                        updateChartData();
 
+                    };
 
+                    container.appendChild(btn);
 
+                });
 
+            }
 
+
 
+            // 更新图表数据
 
+            function updateChartData() {
 
+                const activeTimeRange = document.querySelector('.time-range-btn.active').dataset.range;
 
+                const activeIndicator = document.querySelector('.indicator-btn.active').dataset.indicator;
 
+                const data = generateMockData(activeTimeRange, currentDeviceType);
 
+
 
+                const option = {
 
+                    backgroundColor: 'transparent',
 
+                    tooltip: {
 
+                        trigger: 'axis',
 
+                        backgroundColor: 'rgba(15, 23, 42, 0.9)',
 
+                        borderColor: '#334155',
 
+                        textStyle: { color: '#f1f5f9' }
 
+                    },
 
+                    legend: {
 
+                        data: getIndicatorNames(currentDeviceType, activeIndicator),
 
+                        textStyle: { color: '#94a3b8' },
 
+                        top: 0
 
+                    },
 
+                    grid: {
 
+                        left: '3%',
 
+                        right: '4%',
 
+                        bottom: '3%',
 
+                        containLabel: true,
 
+                        top: 40
 
+                    },
 
+                    xAxis: {
 
+                        type: 'category',
 
+                        boundaryGap: false,
 
+                        data: data.times,
 
+                        axisLine: { lineStyle: { color: '#334155' } },
 
+                        axisLabel: { color: '#94a3b8' }
 
+                    },
 
+                    yAxis: {
 
+                        type: 'value',
 
+                        axisLine: { lineStyle: { color: '#334155' } },
 
+                        axisLabel: { color: '#94a3b8' },
 
+                        splitLine: { lineStyle: { color: '#1e293b' } }
 
+                    },
 
+                    series: generateSeries(currentDeviceType, activeIndicator, data)
 
+                };
 
+
 
+                currentChart.setOption(option);
 
+            }
 
+
 
+            // 获取指标名称
 
+            function getIndicatorNames(deviceType, activeIndicator) {
 
+                const indicators = {
 
+                    '土壤监测器': ['土壤湿度', '土壤温度', 'EC值'],
 
+                    '水质监测器': ['pH值', '溶解氧', '电导率', '浊度'],
 
+                    '气象监测器': ['温度', '湿度', '光照', '风速', '降雨量']
 
+                }[deviceType] || ['指标1', '指标2'];
 
+
 
+                return activeIndicator === '所有指标' ? indicators : [activeIndicator];
 
+            }
 
+
 
+            // 生成图表系列
 
+            function generateSeries(deviceType, activeIndicator, data) {
 
+                const indicators = {
 
+                    '土壤监测器': {
 
+                        names: ['土壤湿度', '土壤温度', 'EC值'],
 
+                        units: ['%', '℃', 'ms/cm'],
 
+                        colors: ['#0ea5e9', '#10b981', '#f59e0b']
 
+                    },
 
+                    '水质监测器': {
 
+                        names: ['pH值', '溶解氧', '电导率', '浊度'],
 
+                        units: ['', 'mg/L', 'ms/cm', 'NTU'],
 
+                        colors: ['#0ea5e9', '#10b981', '#f59e0b', '#8b5cf6']
 
+                    },
 
+                    '气象监测器': {
 
+                        names: ['温度', '湿度', '光照', '风速', '降雨量'],
 
+                        units: ['℃', '%', 'lux', 'm/s', 'mm'],
 
+                        colors: ['#0ea5e9', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
 
+                    }
 
+                }[deviceType] || { names: [], units: [], colors: [] };
 
+
 
+                if (activeIndicator === '所有指标') {
 
+                    return indicators.names.map((name, index) => ({
 
+                        name: name,
 
+                        type: 'line',
 
+                        data: data[`values${index + 1}`],
 
+                        smooth: true,
 
+                        showSymbol: false,
 
+                        lineStyle: { width: 2 },
 
+                        areaStyle: { opacity: 0.1 },
 
+                        itemStyle: { color: indicators.colors[index] }
 
+                    }));
 
+                } else {
 
+                    const index = indicators.names.indexOf(activeIndicator);
 
+                    return [{
 
+                        name: activeIndicator,
 
+                        type: 'line',
 
+                        data: data[`values${index + 1}`],
 
+                        smooth: true,
 
+                        showSymbol: false,
 
+                        lineStyle: { width: 2 },
 
+                        areaStyle: { opacity: 0.1 },
 
+                        itemStyle: { color: indicators.colors[index] }
 
+                    }];
 
+                }
 
+            }
 
+
 
+            // 生成模拟数据
 
+            function generateMockData(timeRange, deviceType) {
 
+                const times = [];
 
+                const values = {};
 
+                const points = timeRange === '24h' ? 24 : timeRange === '7d' ? 7 : 30;
 
+                const now = new Date();
 
+
 
+                const ranges = {
 
+                    '土壤监测器': [
 
+                        [20, 40],  // 土壤湿度
 
+                        [15, 30],  // 土壤温度
 
+                        [0.5, 2]   // EC值
 
+                    ],
 
+                    '水质监测器': [
 
+                        [6.5, 8.5],  // pH值
 
+                        [4, 8],      // 溶解氧
 
+                        [0.5, 2],    // 电导率
 
+                        [0, 10]      // 浊度
 
+                    ],
 
+                    '气象监测器': [
 
+                        [15, 35],    // 温度
 
+                        [40, 80],    // 湿度
 
+                        [0, 100000], // 光照
 
+                        [0, 10],     // 风速
 
+                        [0, 50]      // 降雨量
 
+                    ]
 
+                }[deviceType] || [[0, 100]];
 
+
 
+                for (let i = points - 1; i >= 0; i--) {
 
+                    const time = new Date(now - i * (timeRange === '24h' ? 3600000 : 86400000));
 
+                    times.push(timeRange === '24h' ? 
+                        time.getHours() + ':00' : 
+                        (time.getMonth() + 1) + '/' + time.getDate());
 
+
 
+                    ranges.forEach((range, index) => {
 
+                        if (!values[`values${index + 1}`]) {
 
+                            values[`values${index + 1}`] = [];
 
+                        }
 
+                        values[`values${index + 1}`].push(
 
+                            (Math.random() * (range[1] - range[0]) + range[0]).toFixed(1)
 
+                        );
 
+                    });
 
+                }
 
+
 
+                return { times, ...values };
 
+            }
 
+
 
+            // 显示设备历史数据
 
+            window.showDeviceHistory = function(card) {
 
+                const deviceName = card.querySelector('h4').textContent;
 
+                const deviceType = deviceName.split(' ')[0];
 
+                const status = card.querySelector('.status-badge').cloneNode(true);
 
+                currentDeviceType = deviceType;
 
+                currentDeviceId = card.dataset.deviceId;
 
+
 
+                // 更新模态框标题和状态
 
+                document.getElementById('modalTitle').textContent = `${deviceName} - 历史数据`;
 
+                const modalStatus = document.getElementById('modalStatus');
 
+                modalStatus.className = status.className;
 
+                modalStatus.textContent = status.textContent;
 
+
 
+                // 更新指标按钮
 
+                updateIndicatorButtons(deviceType);
 
+
 
+                // 显示模态框
 
+                modal.classList.add('active');
 
+                
+                // 等待模态框显示后再初始化图表
 
+                setTimeout(() => {
 
+                    initializeChart();
 
+                    updateChartData();
 
+                }, 100);
 
+            };
 
+
 
+            // 事件监听
 
+            closeBtn.addEventListener('click', closeModal);
 
+            modal.addEventListener('click', (e) => {
 
+                if (e.target === modal) {
 
+                    closeModal();
 
+                }
 
+            });
 
+
 
+            timeRangeBtns.forEach(btn => {
 
+                btn.addEventListener('click', () => {
 
+                    timeRangeBtns.forEach(b => b.classList.remove('active'));
 
+                    btn.classList.add('active');
 
+                    if (currentChart) {
 
+                        updateChartData();
 
+                    }
 
+                });
 
+            });
 
+
 
+            // 监听窗口大小变化
 
+            window.addEventListener('resize', () => {
 
+                if (currentChart) {
 
+                    currentChart.resize();
 
+                }
 
+            });
 
+
 
+            // ESC键关闭模态框
 
+            document.addEventListener('keydown', (e) => {
 
+                if (e.key === 'Escape' && modal.classList.contains('active')) {
 
+                    closeModal();
 
+                }
 
+            });
 
+        }
 
     </script>
 
 </body>
 
 </html>

+ 58 - 0
pages/test-alarm.html
Ver fichero 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>测试告警处理</title>
 
+    <script>
 
+    function handleAlarm() {
 
+        alert("处理按钮被点击了！");
 
+        document.getElementById('result').innerText = '点击成功 - ' + new Date().toLocaleTimeString();
 
+        return false;
 
+    }
 
+    </script>
 
+</head>
 
+<body>
 
+    <h1>测试按钮点击</h1>
 
+    <button onclick="handleAlarm()">测试处理告警</button>
 
+    <div id="result" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
 
+    
+    <script>
 
+    // 尝试在页面加载后直接给原告警页面的按钮添加处理函数
 
+    document.addEventListener('DOMContentLoaded', function() {
 
+        console.log("页面加载完成，准备注入函数");
 
+        
+        // 定义一个全局函数，可以在任何页面中调用
 
+        window.fixAlarmButtons = function() {
 
+            alert("开始修复告警按钮");
 
+            var buttons = document.querySelectorAll('.handle-btn');
 
+            console.log("找到处理按钮：", buttons.length, "个");
 
+            
+            buttons.forEach(function(btn) {
 
+                btn.onclick = function() {
 
+                    alert("处理按钮被点击！");
 
+                    console.log("处理按钮点击", this.getAttribute('data-id'));
 
+                    
+                    // 获取当前行数据和填充模态框的代码...
 
+                    // (此处为简化代码)
 
+                    
+                    // 显示模态框
 
+                    document.getElementById('alarmHandleModal').style.display = 'flex';
 
+                    return false;
 
+                };
 
+                
+                console.log("已为按钮设置新的点击处理函数:", btn);
 
+            });
 
+            
+            return "修复完成，共处理了" + buttons.length + "个按钮";
 
+        };
 
+    });
 
+    </script>
 
+    
+    <div style="margin-top: 20px;">
 
+        <p>请在设备告警页面的控制台中运行以下代码：</p>
 
+        <pre style="background-color: #f0f0f0; padding: 10px;">
 
+            fixAlarmButtons();
 
+        </pre>
 
+    </div>
 
+</body>
 
+</html>

+ 1452 - 699
pages/visualization-dashboard.html
Ver fichero 

@@ -3,14 +3,15 @@
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>可视化统计大屏 - 爱智农</title>
 
+    <title>数据统计图表 - 爱智农</title>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
 
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
 
     <style>
 
         body {
 
             font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 
-            background-color: #001529;
 
-            color: #fff;
 
+            background-color: #f5f7f9;
 
+            color: #333;
 
             margin: 0;
 
             padding: 0;
 
             overflow-x: hidden;
 
@@ -22,65 +23,38 @@
 
         }
 
         
         .dashboard-header {
 
-            text-align: center;
 
-            margin-bottom: 30px;
 
+            margin-bottom: 24px;
 
             position: relative;
 
         }
 
         
         .dashboard-title {
 
-            font-size: 36px;
 
+            font-size: 24px;
 
             font-weight: bold;
 
-            background: linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39);
 
-            -webkit-background-clip: text;
 
-            -webkit-text-fill-color: transparent;
 
+            color: #1e293b;
 
             position: relative;
 
             display: inline-block;
 
-            padding: 0 50px;
 
-        }
 
-        
-        .dashboard-title::before,
 
-        .dashboard-title::after {
 
-            content: "";
 
-            position: absolute;
 
-            top: 50%;
 
-            width: 40px;
 
-            height: 2px;
 
-            background: linear-gradient(90deg, #4CAF50, #8BC34A);
 
-        }
 
-        
-        .dashboard-title::before {
 
-            left: 0;
 
-        }
 
-        
-        .dashboard-title::after {
 
-            right: 0;
 
         }
 
         
         .card {
 
-            background: rgba(16, 36, 64, 0.8);
 
+            background: #ffffff;
 
             border-radius: 8px;
 
-            box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
 
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
             padding: 20px;
 
             position: relative;
 
             overflow: hidden;
 
             height: 100%;
 
+            transition: all 0.3s ease;
 
         }
 
         
-        .card::before {
 
-            content: "";
 
-            position: absolute;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            height: 2px;
 
-            background: linear-gradient(90deg, #4CAF50, #8BC34A);
 
+        .card:hover {
 
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
         }
 
         
         .card-title {
 
-            font-size: 18px;
 
+            font-size: 16px;
 
             font-weight: bold;
 
-            margin-bottom: 20px;
 
-            color: #4CAF50;
 
+            margin-bottom: 16px;
 
+            color: #1e293b;
 
             display: flex;
 
             align-items: center;
 
         }
 
@@ -88,7 +62,7 @@
 
         .card-title::before {
 
             content: "";
 
             display: block;
 
-            width: 4px;
 
+            width: 3px;
 
             height: 16px;
 
             background: #4CAF50;
 
             margin-right: 8px;
 
@@ -102,782 +76,1561 @@
 
         
         .number-card {
 
             text-align: center;
 
-            padding: 20px;
 
+            padding: 16px;
 
+            transition: transform 0.2s;
 
+        }
 
+        
+        .number-card:hover {
 
+            transform: translateY(-5px);
 
         }
 
         
         .number-value {
 
-            font-size: 36px;
 
+            font-size: 28px;
 
             font-weight: bold;
 
             margin-bottom: 5px;
 
-            background: linear-gradient(90deg, #4CAF50, #8BC34A);
 
-            -webkit-background-clip: text;
 
-            -webkit-text-fill-color: transparent;
 
+            color: #4CAF50;
 
         }
 
         
         .number-label {
 
             font-size: 14px;
 
-            color: #aaa;
 
+            color: #64748b;
 
         }
 
         
-        .grid-bg {
 
-            position: fixed;
 
-            top: 0;
 
-            left: 0;
 
-            width: 100%;
 
-            height: 100%;
 
-            background-image: 
-                linear-gradient(rgba(76, 175, 80, 0.05) 1px, transparent 1px),
 
-                linear-gradient(90deg, rgba(76, 175, 80, 0.05) 1px, transparent 1px);
 
-            background-size: 20px 20px;
 
-            z-index: -1;
 
+        .btn {
 
+            display: inline-flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            padding: 8px 16px;
 
+            border-radius: 6px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
         }
 
         
-        .map-container {
 
-            height: 400px;
 
-            position: relative;
 
+        .btn-primary {
 
+            background-color: #4CAF50;
 
+            color: white;
 
         }
 
         
-        .map-overlay {
 
-            position: absolute;
 
-            top: 20px;
 
-            right: 20px;
 
-            background: rgba(16, 36, 64, 0.9);
 
-            padding: 10px;
 
-            border-radius: 4px;
 
-            z-index: 10;
 
+        .btn-primary:hover {
 
+            background-color: #388E3C;
 
         }
 
         
-        .map-legend {
 
-            display: flex;
 
-            align-items: center;
 
-            margin-bottom: 5px;
 
+        .btn-default {
 
+            background-color: white;
 
+            border: 1px solid #d1d5db;
 
+            color: #374151;
 
         }
 
         
-        .map-legend-color {
 
-            width: 12px;
 
-            height: 12px;
 
-            margin-right: 5px;
 
-            border-radius: 2px;
 
+        .btn-default:hover {
 
+            background-color: #f9fafb;
 
         }
 
         
-        .progress-container {
 
-            margin-bottom: 15px;
 
+        .tab-button {
 
+            padding: 8px 16px;
 
+            border-radius: 6px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+            background-color: transparent;
 
+        }
 
+        
+        .tab-button.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
         }
 
         
-        .progress-label {
 
+        .tab-button:not(.active):hover {
 
+            background-color: #f0fdf4;
 
+        }
 
+        
+        .time-range-selector {
 
             display: flex;
 
-            justify-content: space-between;
 
-            margin-bottom: 5px;
 
+            gap: 8px;
 
+            margin-bottom: 16px;
 
         }
 
         
-        .progress-bar {
 
-            height: 8px;
 
+        .time-range-button {
 
+            padding: 6px 12px;
 
             border-radius: 4px;
 
-            background: rgba(255, 255, 255, 0.1);
 
-            overflow: hidden;
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            background-color: #f1f5f9;
 
+            color: #64748b;
 
+            transition: all 0.2s;
 
         }
 
         
-        .progress-fill {
 
-            height: 100%;
 
-            border-radius: 4px;
 
-            background: linear-gradient(90deg, #4CAF50, #8BC34A);
 
+        .time-range-button.active {
 
+            background-color: #4CAF50;
 
+            color: white;
 
         }
 
         
-        .device-status {
 
+        .data-selector {
 
             display: flex;
 
-            align-items: center;
 
-            margin-bottom: 10px;
 
+            flex-wrap: wrap;
 
+            gap: 8px;
 
+            margin-bottom: 16px;
 
         }
 
         
-        .status-dot {
 
-            width: 10px;
 
-            height: 10px;
 
-            border-radius: 50%;
 
-            margin-right: 8px;
 
+        .data-selector-item {
 
+            display: flex;
 
+            align-items: center;
 
+            padding: 6px 12px;
 
+            border-radius: 4px;
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            background-color: #f1f5f9;
 
+            color: #64748b;
 
+            transition: all 0.2s;
 
         }
 
         
-        .status-online {
 
+        .data-selector-item.active {
 
             background-color: #4CAF50;
 
+            color: white;
 
         }
 
         
-        .status-offline {
 
-            background-color: #F44336;
 
+        .data-selector-item input[type="checkbox"] {
 
+            margin-right: 6px;
 
         }
 
         
-        .status-warning {
 
-            background-color: #FF9800;
 
+        .data-table {
 
+            width: 100%;
 
+            border-collapse: collapse;
 
         }
 
         
-        .clock {
 
-            font-size: 18px;
 
-            color: #8BC34A;
 
-            margin-bottom: 10px;
 
-            text-align: center;
 
+        .data-table th,
 
+        .data-table td {
 
+            padding: 12px 16px;
 
+            text-align: left;
 
+            border-bottom: 1px solid #e5e7eb;
 
         }
 
         
-        @keyframes pulse {
 
-            0% { transform: scale(1); }
 
-            50% { transform: scale(1.05); }
 
-            100% { transform: scale(1); }
 
+        .data-table th {
 
+            background-color: #f8fafc;
 
+            font-weight: 600;
 
+            color: #475569;
 
         }
 
         
-        .pulse-animation {
 
-            animation: pulse 2s infinite;
 
+        .data-table tbody tr:hover {
 
+            background-color: #f1f5f9;
 
         }
 
     </style>
 
 </head>
 
 <body>
 
-    <div class="grid-bg"></div>
 
-    
     <div class="dashboard-container">
 
-        <header class="dashboard-header">
 
-            <h1 class="dashboard-title">智慧农业数据可视化平台</h1>
 
-            <div class="clock" id="dashboard-clock"></div>
 
+        <header class="dashboard-header flex justify-between items-center">
 
+            <h1 class="dashboard-title">数据统计图表</h1>
 
+            <div class="flex gap-3">
 
+                <button class="btn btn-default">
 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
 
+                    </svg>
 
+                    导出数据
 
+                </button>
 
+                <button class="btn btn-primary">
 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
 
+                    </svg>
 
+                    刷新数据
 
+                </button>
 
+            </div>
 
         </header>
 
         
-        <div class="grid grid-cols-4 gap-6 mb-6">
 
-            <div class="number-card card">
 
-                <div class="number-value pulse-animation">2,560</div>
 
-                <div class="number-label">农业总面积（亩）</div>
 
+        <div class="mb-6">
 
+            <div class="flex gap-4 mb-6">
 
+                <button class="tab-button active" data-tab="environment">环境数据</button>
 
+                <button class="tab-button" data-tab="crop">作物数据</button>
 
+                <button class="tab-button" data-tab="device">设备数据</button>
 
+                <button class="tab-button" data-tab="yield">产量数据</button>
 
             </div>
 
-            
-            <div class="number-card card">
 
-                <div class="number-value pulse-animation">1,850</div>
 
-                <div class="number-label">年产量（吨）</div>
 
+        </div>
 
+        
+        <div class="tab-content" id="environment-tab">
 
+            <div class="grid grid-cols-4 gap-4 mb-6">
 
+                <div class="number-card card">
 
+                    <div class="number-value">26.5°C</div>
 
+                    <div class="number-label">平均气温</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">68%</div>
 
+                    <div class="number-label">平均湿度</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">35mm</div>
 
+                    <div class="number-label">月降水量</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">7.2</div>
 
+                    <div class="number-label">土壤pH值</div>
 
+                </div>
 
             </div>
 
             
-            <div class="number-card card">
 
-                <div class="number-value pulse-animation">86%</div>
 
-                <div class="number-label">设备在线率</div>
 
+            <div class="card mb-6">
 
+                <div class="flex justify-between items-center mb-4">
 
+                    <h3 class="card-title">环境数据趋势</h3>
 
+                    <div class="flex gap-2">
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部区域</option>
 
+                            <option>东区</option>
 
+                            <option>西区</option>
 
+                            <option>南区</option>
 
+                            <option>北区</option>
 
+                        </select>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="data-selector">
 
+                    <label class="data-selector-item active">
 
+                        <input type="checkbox" checked> 气温
 
+                    </label>
 
+                    <label class="data-selector-item active">
 
+                        <input type="checkbox" checked> 湿度
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 降水量
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 光照强度
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 土壤湿度
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 土壤温度
 
+                    </label>
 
+                </div>
 
+                
+                <div class="time-range-selector">
 
+                    <button class="time-range-button">今日</button>
 
+                    <button class="time-range-button active">本周</button>
 
+                    <button class="time-range-button">本月</button>
 
+                    <button class="time-range-button">季度</button>
 
+                    <button class="time-range-button">年度</button>
 
+                    <div class="ml-auto flex gap-2">
 
+                        <input type="date" class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm">
 
+                        <span class="self-center">至</span>
 
+                        <input type="date" class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm">
 
+                    </div>
 
+                </div>
 
+                
+                <div class="chart-container">
 
+                    <canvas id="environmentChart"></canvas>
 
+                </div>
 
             </div>
 
             
-            <div class="number-card card">
 
-                <div class="number-value pulse-animation">12</div>
 
-                <div class="number-label">智能农机设备（台）</div>
 
+            <div class="grid grid-cols-2 gap-6">
 
+                <div class="card">
 
+                    <h3 class="card-title">区域环境对比</h3>
 
+                    <div id="environmentComparisonChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <h3 class="card-title">环境异常记录</h3>
 
+                    <div class="overflow-x-auto">
 
+                        <table class="data-table">
 
+                            <thead>
 
+                                <tr>
 
+                                    <th>时间</th>
 
+                                    <th>区域</th>
 
+                                    <th>异常类型</th>
 
+                                    <th>数值</th>
 
+                                    <th>状态</th>
 
+                                </tr>
 
+                            </thead>
 
+                            <tbody>
 
+                                <tr>
 
+                                    <td>2023-08-15 14:30</td>
 
+                                    <td>东区</td>
 
+                                    <td>高温预警</td>
 
+                                    <td>38.5°C</td>
 
+                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">已处理</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-14 09:15</td>
 
+                                    <td>南区</td>
 
+                                    <td>湿度过低</td>
 
+                                    <td>25%</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-12 16:45</td>
 
+                                    <td>西区</td>
 
+                                    <td>土壤pH异常</td>
 
+                                    <td>8.9</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-10 11:20</td>
 
+                                    <td>北区</td>
 
+                                    <td>降水量过大</td>
 
+                                    <td>85mm/h</td>
 
+                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
 
+                                </tr>
 
+                            </tbody>
 
+                        </table>
 
+                    </div>
 
+                </div>
 
             </div>
 
         </div>
 
         
-        <div class="grid grid-cols-2 gap-6 mb-6">
 
-            <div class="card">
 
-                <h3 class="card-title">农作物分布</h3>
 
-                <div id="cropDistribution" class="chart-container"></div>
 
+        <div class="tab-content hidden" id="crop-tab">
 
+            <div class="grid grid-cols-4 gap-4 mb-6">
 
+                <div class="number-card card">
 
+                    <div class="number-value">4</div>
 
+                    <div class="number-label">主要作物种类</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">2,560</div>
 
+                    <div class="number-label">总种植面积(亩)</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">85%</div>
 
+                    <div class="number-label">作物健康率</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">1,850</div>
 
+                    <div class="number-label">预计总产量(吨)</div>
 
+                </div>
 
             </div>
 
             
-            <div class="card">
 
-                <h3 class="card-title">年度产量趋势</h3>
 
-                <div id="yieldTrend" class="chart-container"></div>
 
+            <div class="grid grid-cols-2 gap-6 mb-6">
 
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">作物分布</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>按面积</option>
 
+                            <option>按产量</option>
 
+                            <option>按价值</option>
 
+                        </select>
 
+                    </div>
 
+                    <div id="cropDistributionChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">生长阶段分布</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部作物</option>
 
+                            <option>水稻</option>
 
+                            <option>小麦</option>
 
+                            <option>玉米</option>
 
+                        </select>
 
+                    </div>
 
+                    <div id="growthStageChart" class="chart-container"></div>
 
+                </div>
 
             </div>
 
-        </div>
 
-        
-        <div class="grid grid-cols-1 gap-6 mb-6">
 
-            <div class="card">
 
-                <h3 class="card-title">区域分布地图</h3>
 
-                <div class="map-container">
 
-                    <div id="regionMap" class="chart-container" style="height: 100%;"></div>
 
-                    <div class="map-overlay">
 
-                        <div class="map-legend">
 
-                            <div class="map-legend-color" style="background-color: rgba(76, 175, 80, 0.8);"></div>
 
-                            <div>农田区域</div>
 
-                        </div>
 
-                        <div class="map-legend">
 
-                            <div class="map-legend-color" style="background-color: rgba(33, 150, 243, 0.8);"></div>
 
-                            <div>水源区域</div>
 
-                        </div>
 
-                        <div class="map-legend">
 
-                            <div class="map-legend-color" style="background-color: rgba(255, 152, 0, 0.8);"></div>
 
-                            <div>设施区域</div>
 
-                        </div>
 
+            
+            <div class="card mb-6">
 
+                <div class="flex justify-between items-center mb-4">
 
+                    <h3 class="card-title">作物生长趋势</h3>
 
+                    <div class="flex gap-2">
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>水稻</option>
 
+                            <option>小麦</option>
 
+                            <option>玉米</option>
 
+                            <option>大豆</option>
 
+                        </select>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="data-selector">
 
+                    <label class="data-selector-item active">
 
+                        <input type="checkbox" checked> 株高
 
+                    </label>
 
+                    <label class="data-selector-item active">
 
+                        <input type="checkbox" checked> 叶面积指数
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 茎粗
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 叶绿素含量
 
+                    </label>
 
+                    <label class="data-selector-item">
 
+                        <input type="checkbox"> 穗长
 
+                    </label>
 
+                </div>
 
+                
+                <div class="time-range-selector">
 
+                    <button class="time-range-button">本周</button>
 
+                    <button class="time-range-button active">本月</button>
 
+                    <button class="time-range-button">季度</button>
 
+                    <button class="time-range-button">全生长期</button>
 
+                </div>
 
+                
+                <div class="chart-container">
 
+                    <canvas id="cropGrowthChart"></canvas>
 
+                </div>
 
+            </div>
 
+            
+            <div class="grid grid-cols-2 gap-6">
 
+                <div class="card">
 
+                    <h3 class="card-title">作物健康状况</h3>
 
+                    <div id="cropHealthChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <h3 class="card-title">病虫害监测</h3>
 
+                    <div class="overflow-x-auto">
 
+                        <table class="data-table">
 
+                            <thead>
 
+                                <tr>
 
+                                    <th>发现时间</th>
 
+                                    <th>区域</th>
 
+                                    <th>作物</th>
 
+                                    <th>病虫害类型</th>
 
+                                    <th>影响面积</th>
 
+                                    <th>状态</th>
 
+                                </tr>
 
+                            </thead>
 
+                            <tbody>
 
+                                <tr>
 
+                                    <td>2023-08-12</td>
 
+                                    <td>东区</td>
 
+                                    <td>水稻</td>
 
+                                    <td>稻飞虱</td>
 
+                                    <td>15亩</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已处理</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-10</td>
 
+                                    <td>南区</td>
 
+                                    <td>玉米</td>
 
+                                    <td>玉米螟</td>
 
+                                    <td>8亩</td>
 
+                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">处理中</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-08</td>
 
+                                    <td>西区</td>
 
+                                    <td>小麦</td>
 
+                                    <td>白粉病</td>
 
+                                    <td>5亩</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已处理</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-08-05</td>
 
+                                    <td>北区</td>
 
+                                    <td>大豆</td>
 
+                                    <td>蚜虫</td>
 
+                                    <td>3亩</td>
 
+                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
 
+                                </tr>
 
+                            </tbody>
 
+                        </table>
 
                     </div>
 
                 </div>
 
             </div>
 
         </div>
 
         
-        <div class="grid grid-cols-3 gap-6 mb-6">
 
-            <div class="card">
 
-                <h3 class="card-title">农事进展</h3>
 
-                <div class="progress-container">
 
-                    <div class="progress-label">
 
-                        <span>水稻种植</span>
 
-                        <span>75%</span>
 
-                    </div>
 
-                    <div class="progress-bar">
 
-                        <div class="progress-fill" style="width: 75%;"></div>
 
-                    </div>
 
+        <div class="tab-content hidden" id="device-tab">
 
+            <div class="grid grid-cols-4 gap-4 mb-6">
 
+                <div class="number-card card">
 
+                    <div class="number-value">42</div>
 
+                    <div class="number-label">设备总数</div>
 
                 </div>
 
                 
-                <div class="progress-container">
 
-                    <div class="progress-label">
 
-                        <span>小麦收割</span>
 
-                        <span>90%</span>
 
-                    </div>
 
-                    <div class="progress-bar">
 
-                        <div class="progress-fill" style="width: 90%;"></div>
 
-                    </div>
 
+                <div class="number-card card">
 
+                    <div class="number-value">36</div>
 
+                    <div class="number-label">在线设备</div>
 
                 </div>
 
                 
-                <div class="progress-container">
 
-                    <div class="progress-label">
 
-                        <span>玉米播种</span>
 
-                        <span>45%</span>
 
-                    </div>
 
-                    <div class="progress-bar">
 
-                        <div class="progress-fill" style="width: 45%;"></div>
 
-                    </div>
 
+                <div class="number-card card">
 
+                    <div class="number-value">6</div>
 
+                    <div class="number-label">离线/故障设备</div>
 
                 </div>
 
                 
-                <div class="progress-container">
 
-                    <div class="progress-label">
 
-                        <span>果树修剪</span>
 
-                        <span>60%</span>
 
-                    </div>
 
-                    <div class="progress-bar">
 
-                        <div class="progress-fill" style="width: 60%;"></div>
 
+                <div class="number-card card">
 
+                    <div class="number-value">95%</div>
 
+                    <div class="number-label">设备健康率</div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="grid grid-cols-2 gap-6 mb-6">
 
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">设备类型分布</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部农场</option>
 
+                            <option>东区智慧农场</option>
 
+                            <option>西区智慧农场</option>
 
+                            <option>南区智慧农场</option>
 
+                            <option>中心监测农场</option>
 
+                        </select>
 
                     </div>
 
+                    <div id="deviceTypeChart" class="chart-container"></div>
 
                 </div>
 
                 
-                <div class="progress-container">
 
-                    <div class="progress-label">
 
-                        <span>蔬菜采收</span>
 
-                        <span>80%</span>
 
-                    </div>
 
-                    <div class="progress-bar">
 
-                        <div class="progress-fill" style="width: 80%;"></div>
 
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">设备状态分布</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部类型</option>
 
+                            <option>传感器</option>
 
+                            <option>摄像头</option>
 
+                            <option>控制器</option>
 
+                            <option>气象设备</option>
 
+                        </select>
 
                     </div>
 
+                    <div id="deviceStatusChart" class="chart-container"></div>
 
                 </div>
 
             </div>
 
             
-            <div class="card">
 
-                <h3 class="card-title">设备在线状态</h3>
 
-                <div id="deviceStatus" class="chart-container"></div>
 
+            <div class="card mb-6">
 
+                <div class="flex justify-between items-center mb-4">
 
+                    <h3 class="card-title">设备活动趋势</h3>
 
+                    <div class="flex gap-2">
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部设备</option>
 
+                            <option>传感器</option>
 
+                            <option>摄像头</option>
 
+                            <option>控制器</option>
 
+                            <option>气象设备</option>
 
+                        </select>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="time-range-selector">
 
+                    <button class="time-range-button">今日</button>
 
+                    <button class="time-range-button active">本周</button>
 
+                    <button class="time-range-button">本月</button>
 
+                    <button class="time-range-button">季度</button>
 
+                </div>
 
+                
+                <div class="chart-container">
 
+                    <canvas id="deviceActivityChart"></canvas>
 
+                </div>
 
             </div>
 
             
-            <div class="card">
 
-                <h3 class="card-title">农业资源消耗</h3>
 
-                <div id="resourceUsage" class="chart-container"></div>
 
+            <div class="grid grid-cols-2 gap-6">
 
+                <div class="card">
 
+                    <h3 class="card-title">设备告警统计</h3>
 
+                    <div id="deviceAlertChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <h3 class="card-title">最近告警记录</h3>
 
+                    <div class="overflow-x-auto">
 
+                        <table class="data-table">
 
+                            <thead>
 
+                                <tr>
 
+                                    <th>时间</th>
 
+                                    <th>设备编号</th>
 
+                                    <th>设备名称</th>
 
+                                    <th>告警类型</th>
 
+                                    <th>状态</th>
 
+                                </tr>
 
+                            </thead>
 
+                            <tbody>
 
+                                <tr>
 
+                                    <td>2023-10-15 18:30</td>
 
+                                    <td>DEV20230004</td>
 
+                                    <td>智能灌溉控制器-D1</td>
 
+                                    <td>设备故障</td>
 
+                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-10-14 09:45</td>
 
+                                    <td>DEV20230002</td>
 
+                                    <td>土壤湿度检测仪-B1</td>
 
+                                    <td>电量不足</td>
 
+                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">处理中</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-10-12 14:20</td>
 
+                                    <td>DEV20230007</td>
 
+                                    <td>水质监测仪-E1</td>
 
+                                    <td>数据异常</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>2023-10-10 11:05</td>
 
+                                    <td>DEV20230009</td>
 
+                                    <td>光照传感器-F2</td>
 
+                                    <td>信号弱</td>
 
+                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
 
+                                </tr>
 
+                            </tbody>
 
+                        </table>
 
+                    </div>
 
+                </div>
 
             </div>
 
         </div>
 
         
-        <div class="grid grid-cols-2 gap-6">
 
-            <div class="card">
 
-                <h3 class="card-title">气象数据监测</h3>
 
-                <div id="weatherMonitor" class="chart-container"></div>
 
+        <div class="tab-content hidden" id="yield-tab">
 
+            <div class="grid grid-cols-4 gap-4 mb-6">
 
+                <div class="number-card card">
 
+                    <div class="number-value">2,450</div>
 
+                    <div class="number-label">总产量(吨)</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">1.2</div>
 
+                    <div class="number-label">亩均产量(吨)</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">+8.5%</div>
 
+                    <div class="number-label">同比增长</div>
 
+                </div>
 
+                
+                <div class="number-card card">
 
+                    <div class="number-value">¥368</div>
 
+                    <div class="number-label">平均亩产值(万元)</div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="grid grid-cols-2 gap-6 mb-6">
 
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">各作物产量占比</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>2023年</option>
 
+                            <option>2022年</option>
 
+                            <option>2021年</option>
 
+                        </select>
 
+                    </div>
 
+                    <div id="yieldDistributionChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <div class="flex justify-between items-center mb-4">
 
+                        <h3 class="card-title">各区域产量对比</h3>
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部作物</option>
 
+                            <option>水稻</option>
 
+                            <option>小麦</option>
 
+                            <option>玉米</option>
 
+                            <option>大豆</option>
 
+                        </select>
 
+                    </div>
 
+                    <div id="yieldByRegionChart" class="chart-container"></div>
 
+                </div>
 
             </div>
 
             
-            <div class="card">
 
-                <h3 class="card-title">智能设备分布</h3>
 
-                <div id="deviceDistribution" class="chart-container"></div>
 
+            <div class="card mb-6">
 
+                <div class="flex justify-between items-center mb-4">
 
+                    <h3 class="card-title">年度产量趋势</h3>
 
+                    <div class="flex gap-2">
 
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
 
+                            <option>全部作物</option>
 
+                            <option>水稻</option>
 
+                            <option>小麦</option>
 
+                            <option>玉米</option>
 
+                            <option>大豆</option>
 
+                        </select>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="chart-container">
 
+                    <canvas id="yieldTrendChart"></canvas>
 
+                </div>
 
+            </div>
 
+            
+            <div class="grid grid-cols-2 gap-6">
 
+                <div class="card">
 
+                    <h3 class="card-title">产量与环境因素关系</h3>
 
+                    <div id="yieldFactorsChart" class="chart-container"></div>
 
+                </div>
 
+                
+                <div class="card">
 
+                    <h3 class="card-title">产量质量分析</h3>
 
+                    <div class="overflow-x-auto">
 
+                        <table class="data-table">
 
+                            <thead>
 
+                                <tr>
 
+                                    <th>作物类型</th>
 
+                                    <th>优质率</th>
 
+                                    <th>中等率</th>
 
+                                    <th>一般率</th>
 
+                                    <th>平均质量指数</th>
 
+                                </tr>
 
+                            </thead>
 
+                            <tbody>
 
+                                <tr>
 
+                                    <td>水稻</td>
 
+                                    <td>85%</td>
 
+                                    <td>12%</td>
 
+                                    <td>3%</td>
 
+                                    <td>92.5</td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>小麦</td>
 
+                                    <td>78%</td>
 
+                                    <td>18%</td>
 
+                                    <td>4%</td>
 
+                                    <td>88.6</td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>玉米</td>
 
+                                    <td>82%</td>
 
+                                    <td>15%</td>
 
+                                    <td>3%</td>
 
+                                    <td>90.2</td>
 
+                                </tr>
 
+                                <tr>
 
+                                    <td>大豆</td>
 
+                                    <td>75%</td>
 
+                                    <td>20%</td>
 
+                                    <td>5%</td>
 
+                                    <td>86.8</td>
 
+                                </tr>
 
+                            </tbody>
 
+                        </table>
 
+                    </div>
 
+                </div>
 
             </div>
 
         </div>
 
     </div>
 
     
     <script>
 
-        // 设置当前时间
 
-        function updateClock() {
 
-            const now = new Date();
 
-            const options = { 
-                year: 'numeric', 
-                month: 'long', 
-                day: 'numeric', 
-                weekday: 'long',
 
-                hour: '2-digit',
 
-                minute: '2-digit',
 
-                second: '2-digit'
 
-            };
 
-            document.getElementById('dashboard-clock').textContent = now.toLocaleDateString('zh-CN', options);
 
-        }
 
-        
-        updateClock();
 
-        setInterval(updateClock, 1000);
 
-        
-        // 作物分布饼图
 
-        const cropDistributionChart = echarts.init(document.getElementById('cropDistribution'));
 
-        cropDistributionChart.setOption({
 
-            tooltip: {
 
-                trigger: 'item',
 
-                formatter: '{a} <br/>{b}: {c} ({d}%)'
 
-            },
 
-            legend: {
 
-                orient: 'vertical',
 
-                right: 10,
 
-                top: 'center',
 
-                textStyle: {
 
-                    color: '#fff'
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 切换标签页
 
+            const tabButtons = document.querySelectorAll('.tab-button');
 
+            const tabContents = document.querySelectorAll('.tab-content');
 
+            
+            tabButtons.forEach(button => {
 
+                button.addEventListener('click', function() {
 
+                    const tabName = this.dataset.tab;
 
+                    
+                    // 更新按钮状态
 
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
 
+                    this.classList.add('active');
 
+                    
+                    // 更新内容显示
 
+                    tabContents.forEach(content => {
 
+                        if (content.id === tabName + '-tab') {
 
+                            content.classList.remove('hidden');
 
+                        } else {
 
+                            content.classList.add('hidden');
 
+                        }
 
+                    });
 
+                    
+                    // 重新渲染图表以适应大小
 
+                    resizeAllCharts();
 
+                });
 
+            });
 
+            
+            // 时间范围选择器
 
+            const timeRangeButtons = document.querySelectorAll('.time-range-button');
 
+            timeRangeButtons.forEach(button => {
 
+                button.addEventListener('click', function() {
 
+                    timeRangeButtons.forEach(btn => btn.classList.remove('active'));
 
+                    this.classList.add('active');
 
+                    updateCharts();
 
+                });
 
+            });
 
+            
+            // 数据选择器
 
+            const dataSelectors = document.querySelectorAll('.data-selector-item');
 
+            dataSelectors.forEach(item => {
 
+                item.addEventListener('click', function() {
 
+                    const checkbox = this.querySelector('input[type="checkbox"]');
 
+                    checkbox.checked = !checkbox.checked;
 
+                    this.classList.toggle('active', checkbox.checked);
 
+                    updateCharts();
 
+                });
 
+            });
 
+            
+            // 初始化环境数据图表
 
+            const ctx = document.getElementById('environmentChart').getContext('2d');
 
+            const environmentChart = new Chart(ctx, {
 
+                type: 'line',
 
+                data: {
 
+                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
 
+                    datasets: [
 
+                        {
 
+                            label: '气温 (°C)',
 
+                            data: [22, 24, 26, 25, 23, 22, 21],
 
+                            borderColor: '#FF9800',
 
+                            backgroundColor: 'rgba(255, 152, 0, 0.1)',
 
+                            tension: 0.4,
 
+                            fill: true
 
+                        },
 
+                        {
 
+                            label: '湿度 (%)',
 
+                            data: [65, 60, 55, 58, 62, 68, 70],
 
+                            borderColor: '#2196F3',
 
+                            backgroundColor: 'rgba(33, 150, 243, 0.1)',
 
+                            tension: 0.4,
 
+                            fill: true
 
+                        }
 
+                    ]
 
                 },
 
-                data: ['水稻', '小麦', '玉米', '蔬菜', '果树', '其他']
 
-            },
 
-            series: [
 
-                {
 
-                    name: '作物分布',
 
-                    type: 'pie',
 
-                    radius: ['40%', '70%'],
 
-                    avoidLabelOverlap: false,
 
-                    itemStyle: {
 
-                        borderRadius: 10,
 
-                        borderColor: '#001529',
 
-                        borderWidth: 2
 
-                    },
 
-                    label: {
 
-                        show: false,
 
-                        position: 'center'
 
+                options: {
 
+                    responsive: true,
 
+                    maintainAspectRatio: false,
 
+                    interaction: {
 
+                        mode: 'index',
 
+                        intersect: false,
 
                     },
 
-                    emphasis: {
 
-                        label: {
 
-                            show: true,
 
-                            fontSize: '18',
 
-                            fontWeight: 'bold'
 
+                    plugins: {
 
+                        tooltip: {
 
+                            enabled: true
 
+                        },
 
+                        legend: {
 
+                            position: 'top',
 
                         }
 
                     },
 
-                    labelLine: {
 
-                        show: false
 
-                    },
 
-                    data: [
 
-                        { value: 1048, name: '水稻' },
 
-                        { value: 735, name: '小麦' },
 
-                        { value: 580, name: '玉米' },
 
-                        { value: 484, name: '蔬菜' },
 
-                        { value: 300, name: '果树' },
 
-                        { value: 200, name: '其他' }
 
-                    ],
 
-                    color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722']
 
-                }
 
-            ]
 
-        });
 
-        
-        // 年度产量趋势
 
-        const yieldTrendChart = echarts.init(document.getElementById('yieldTrend'));
 
-        yieldTrendChart.setOption({
 
-            tooltip: {
 
-                trigger: 'axis'
 
-            },
 
-            legend: {
 
-                data: ['去年产量', '今年产量'],
 
-                textStyle: {
 
-                    color: '#fff'
 
-                }
 
-            },
 
-            grid: {
 
-                left: '3%',
 
-                right: '4%',
 
-                bottom: '3%',
 
-                containLabel: true
 
-            },
 
-            xAxis: {
 
-                type: 'category',
 
-                boundaryGap: false,
 
-                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
+                    scales: {
 
+                        y: {
 
+                            beginAtZero: false
 
+                        }
 
                     }
 
-                },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
                 }
 
-            },
 
-            yAxis: {
 
-                type: 'value',
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
+            });
 
+            
+            // 区域环境对比图表
 
+            const environmentComparisonChart = echarts.init(document.getElementById('environmentComparisonChart'));
 
+            environmentComparisonChart.setOption({
 
+                tooltip: {
 
+                    trigger: 'axis',
 
+                    axisPointer: {
 
+                        type: 'shadow'
 
                     }
 
                 },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
+                legend: {
 
+                    data: ['气温', '湿度', '土壤湿度', '光照']
 
                 },
 
-                splitLine: {
 
-                    lineStyle: {
 
-                        color: 'rgba(255,255,255,0.1)'
 
+                grid: {
 
+                    left: '3%',
 
+                    right: '4%',
 
+                    bottom: '3%',
 
+                    containLabel: true
 
+                },
 
+                xAxis: {
 
+                    type: 'category',
 
+                    data: ['东区', '西区', '南区', '北区']
 
+                },
 
+                yAxis: {
 
+                    type: 'value'
 
+                },
 
+                series: [
 
+                    {
 
+                        name: '气温',
 
+                        type: 'bar',
 
+                        data: [26.5, 25.8, 27.2, 24.9],
 
+                        color: '#FF9800'
 
+                    },
 
+                    {
 
+                        name: '湿度',
 
+                        type: 'bar',
 
+                        data: [68, 72, 65, 70],
 
+                        color: '#2196F3'
 
+                    },
 
+                    {
 
+                        name: '土壤湿度',
 
+                        type: 'bar',
 
+                        data: [35, 40, 32, 38],
 
+                        color: '#4CAF50'
 
+                    },
 
+                    {
 
+                        name: '光照',
 
+                        type: 'bar',
 
+                        data: [85, 80, 90, 75],
 
+                        color: '#FFC107'
 
+                    }
 
+                ]
 
+            });
 
+            
+            // 响应式调整图表大小
 
+            function resizeAllCharts() {
 
+                environmentComparisonChart.resize();
 
+                environmentChart.resize();
 
+                
+                // 如果作物选项卡的图表已初始化，则调整其大小
 
+                if (typeof cropDistributionChart !== 'undefined') {
 
+                    cropDistributionChart.resize();
 
+                    growthStageChart.resize();
 
+                    cropHealthChart.resize();
 
+                    if (cropGrowthChart) {
 
+                        cropGrowthChart.resize();
 
                     }
 
                 }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '去年产量',
 
-                    type: 'line',
 
-                    stack: 'Total',
 
-                    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
 
-                    smooth: true,
 
-                    lineStyle: {
 
-                        width: 0
 
-                    },
 
-                    showSymbol: false,
 
-                    areaStyle: {
 
-                        opacity: 0.8,
 
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+            }
 
+            
+            // 更新图表数据
 
+            function updateCharts() {
 
+                // 这里可以根据选择的时间范围和数据项更新图表
 
+                console.log("更新图表数据");
 
+            }
 
+            
+            window.addEventListener('resize', resizeAllCharts);
 
+            
+            // 初始化作物图表的变量
 
+            let cropDistributionChart, growthStageChart, cropHealthChart, cropGrowthChart;
 
+            
+            // 当切换到作物选项卡时初始化图表
 
+            document.querySelector('[data-tab="crop"]').addEventListener('click', function() {
 
+                if (!cropDistributionChart) {
 
+                    // 作物分布饼图
 
+                    cropDistributionChart = echarts.init(document.getElementById('cropDistributionChart'));
 
+                    cropDistributionChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'item',
 
+                            formatter: '{a} <br/>{b}: {c}亩 ({d}%)'
 
+                        },
 
+                        legend: {
 
+                            orient: 'vertical',
 
+                            right: 10,
 
+                            top: 'center',
 
+                            data: ['水稻', '小麦', '玉米', '大豆']
 
+                        },
 
+                        series: [
 
                             {
 
-                                offset: 0,
 
-                                color: 'rgba(128, 255, 165, 0.7)'
 
-                            },
 
+                                name: '作物分布',
 
+                                type: 'pie',
 
+                                radius: ['40%', '70%'],
 
+                                avoidLabelOverlap: false,
 
+                                itemStyle: {
 
+                                    borderRadius: 10,
 
+                                    borderWidth: 2
 
+                                },
 
+                                label: {
 
+                                    show: false,
 
+                                    position: 'center'
 
+                                },
 
+                                emphasis: {
 
+                                    label: {
 
+                                        show: true,
 
+                                        fontSize: '18',
 
+                                        fontWeight: 'bold'
 
+                                    }
 
+                                },
 
+                                labelLine: {
 
+                                    show: false
 
+                                },
 
+                                data: [
 
+                                    { value: 1200, name: '水稻' },
 
+                                    { value: 600, name: '小麦' },
 
+                                    { value: 580, name: '玉米' },
 
+                                    { value: 180, name: '大豆' }
 
+                                ],
 
+                                color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107']
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 生长阶段图表
 
+                    growthStageChart = echarts.init(document.getElementById('growthStageChart'));
 
+                    growthStageChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'item',
 
+                            formatter: '{b}: {c}亩 ({d}%)'
 
+                        },
 
+                        legend: {
 
+                            bottom: '0%',
 
+                            left: 'center',
 
+                            data: ['播种期', '幼苗期', '生长期', '成熟期', '收获期']
 
+                        },
 
+                        series: [
 
                             {
 
-                                offset: 1,
 
-                                color: 'rgba(1, 191, 236, 0.1)'
 
+                                name: '生长阶段',
 
+                                type: 'pie',
 
+                                radius: '70%',
 
+                                center: ['50%', '45%'],
 
+                                data: [
 
+                                    { value: 350, name: '播种期' },
 
+                                    { value: 450, name: '幼苗期' },
 
+                                    { value: 850, name: '生长期' },
 
+                                    { value: 650, name: '成熟期' },
 
+                                    { value: 260, name: '收获期' }
 
+                                ],
 
+                                color: ['#E3F2FD', '#90CAF9', '#42A5F5', '#1976D2', '#0D47A1'],
 
+                                emphasis: {
 
+                                    itemStyle: {
 
+                                        shadowBlur: 10,
 
+                                        shadowOffsetX: 0,
 
+                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
 
+                                    }
 
+                                }
 
                             }
 
-                        ])
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    }
 
-                },
 
-                {
 
-                    name: '今年产量',
 
-                    type: 'line',
 
-                    stack: 'Total',
 
-                    data: [150, 232, 201, 154, 190, 330, 410, 332, 301, 334, 390, 330],
 
-                    smooth: true,
 
-                    lineStyle: {
 
-                        width: 0
 
-                    },
 
-                    showSymbol: false,
 
-                    areaStyle: {
 
-                        opacity: 0.8,
 
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                        ]
 
+                    });
 
+                    
+                    // 作物健康状况图表
 
+                    cropHealthChart = echarts.init(document.getElementById('cropHealthChart'));
 
+                    cropHealthChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'axis',
 
+                            axisPointer: {
 
+                                type: 'shadow'
 
+                            }
 
+                        },
 
+                        legend: {
 
+                            data: ['健康', '轻度受损', '中度受损', '重度受损']
 
+                        },
 
+                        grid: {
 
+                            left: '3%',
 
+                            right: '4%',
 
+                            bottom: '3%',
 
+                            containLabel: true
 
+                        },
 
+                        xAxis: {
 
+                            type: 'value',
 
+                            boundaryGap: [0, 0.01]
 
+                        },
 
+                        yAxis: {
 
+                            type: 'category',
 
+                            data: ['水稻', '小麦', '玉米', '大豆']
 
+                        },
 
+                        series: [
 
                             {
 
-                                offset: 0,
 
-                                color: 'rgba(0, 221, 255, 0.7)'
 
+                                name: '健康',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [1020, 510, 480, 160],
 
+                                color: '#4CAF50'
 
                             },
 
                             {
 
-                                offset: 1,
 
-                                color: 'rgba(77, 119, 255, 0.1)'
 
+                                name: '轻度受损',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [120, 60, 70, 15],
 
+                                color: '#FFC107'
 
+                            },
 
+                            {
 
+                                name: '中度受损',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [50, 25, 25, 5],
 
+                                color: '#FF9800'
 
+                            },
 
+                            {
 
+                                name: '重度受损',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [10, 5, 5, 0],
 
+                                color: '#F44336'
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 作物生长趋势图表
 
+                    const cropGrowthCtx = document.getElementById('cropGrowthChart').getContext('2d');
 
+                    cropGrowthChart = new Chart(cropGrowthCtx, {
 
+                        type: 'line',
 
+                        data: {
 
+                            labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周'],
 
+                            datasets: [
 
+                                {
 
+                                    label: '株高 (cm)',
 
+                                    data: [15, 25, 38, 52, 68, 85, 95, 100],
 
+                                    borderColor: '#4CAF50',
 
+                                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
 
+                                    tension: 0.4,
 
+                                    fill: true
 
+                                },
 
+                                {
 
+                                    label: '叶面积指数',
 
+                                    data: [0.8, 1.5, 2.3, 3.2, 4.1, 4.8, 5.2, 5.5],
 
+                                    borderColor: '#2196F3',
 
+                                    backgroundColor: 'rgba(33, 150, 243, 0.1)',
 
+                                    tension: 0.4,
 
+                                    fill: true
 
+                                }
 
+                            ]
 
+                        },
 
+                        options: {
 
+                            responsive: true,
 
+                            maintainAspectRatio: false,
 
+                            interaction: {
 
+                                mode: 'index',
 
+                                intersect: false,
 
+                            },
 
+                            plugins: {
 
+                                tooltip: {
 
+                                    enabled: true
 
+                                },
 
+                                legend: {
 
+                                    position: 'top',
 
+                                }
 
+                            },
 
+                            scales: {
 
+                                y: {
 
+                                    beginAtZero: false
 
+                                }
 
                             }
 
-                        ])
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    }
 
-                }
 
-            ]
 
-        });
 
-        
-        // 区域分布地图
 
-        const regionMapChart = echarts.init(document.getElementById('regionMap'));
 
-        regionMapChart.setOption({
 
-            geo: {
 
-                map: 'china',
 
-                roam: true,
 
-                label: {
 
-                    emphasis: {
 
-                        show: false
 
-                    }
 
-                },
 
-                itemStyle: {
 
-                    normal: {
 
-                        areaColor: '#323c48',
 
-                        borderColor: '#111'
 
-                    },
 
-                    emphasis: {
 
-                        areaColor: '#2a333d'
 
-                    }
 
-                }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '农田分布',
 
-                    type: 'scatter',
 
-                    coordinateSystem: 'geo',
 
-                    data: [
 
-                        {name: '北京', value: [116.46, 39.92, 100]},
 
-                        {name: '上海', value: [121.48, 31.22, 80]},
 
-                        {name: '广州', value: [113.23, 23.16, 70]},
 
-                        {name: '深圳', value: [114.07, 22.62, 60]},
 
-                        {name: '杭州', value: [120.19, 30.26, 90]},
 
-                        {name: '西安', value: [108.95, 34.27, 50]},
 
-                        {name: '成都', value: [104.06, 30.67, 85]}
 
-                    ],
 
-                    symbolSize: function (val) {
 
-                        return val[2] / 10;
 
-                    },
 
-                    label: {
 
-                        formatter: '{b}',
 
-                        position: 'right',
 
-                        show: false
 
-                    },
 
-                    itemStyle: {
 
-                        color: '#4CAF50'
 
-                    },
 
-                    emphasis: {
 
-                        label: {
 
-                            show: true
 
                         }
 
-                    }
 
-                }
 
-            ]
 
-        });
 
-        
-        // 设备在线状态
 
-        const deviceStatusChart = echarts.init(document.getElementById('deviceStatus'));
 
-        deviceStatusChart.setOption({
 
-            tooltip: {
 
-                trigger: 'item'
 
-            },
 
-            legend: {
 
-                top: '5%',
 
-                left: 'center',
 
-                textStyle: {
 
-                    color: '#fff'
 
+                    });
 
                 }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '设备状态',
 
-                    type: 'pie',
 
-                    radius: ['40%', '70%'],
 
-                    avoidLabelOverlap: false,
 
-                    itemStyle: {
 
-                        borderRadius: 10,
 
-                        borderColor: '#001529',
 
-                        borderWidth: 2
 
-                    },
 
-                    label: {
 
-                        show: false,
 
-                        position: 'center'
 
-                    },
 
-                    emphasis: {
 
-                        label: {
 
-                            show: true,
 
-                            fontSize: '18',
 
-                            fontWeight: 'bold'
 
+                
+                // 调整图表大小以适应容器
 
+                setTimeout(() => {
 
+                    cropDistributionChart.resize();
 
+                    growthStageChart.resize();
 
+                    cropHealthChart.resize();
 
+                }, 0);
 
+            });
 
+            
+            // 当切换到设备数据选项卡时初始化图表
 
+            document.querySelector('[data-tab="device"]').addEventListener('click', function() {
 
+                if (!deviceTypeChart) {
 
+                    // 设备类型分布图
 
+                    deviceTypeChart = echarts.init(document.getElementById('deviceTypeChart'));
 
+                    deviceTypeChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'item',
 
+                            formatter: '{a} <br/>{b}: {c} ({d}%)'
 
+                        },
 
+                        legend: {
 
+                            orient: 'vertical',
 
+                            right: 10,
 
+                            top: 'center',
 
+                            data: ['传感器', '摄像头', '控制器', '气象设备']
 
+                        },
 
+                        series: [
 
+                            {
 
+                                name: '设备类型',
 
+                                type: 'pie',
 
+                                radius: ['50%', '70%'],
 
+                                avoidLabelOverlap: false,
 
+                                itemStyle: {
 
+                                    borderRadius: 10,
 
+                                    borderWidth: 2
 
+                                },
 
+                                label: {
 
+                                    show: false,
 
+                                    position: 'center'
 
+                                },
 
+                                emphasis: {
 
+                                    label: {
 
+                                        show: true,
 
+                                        fontSize: '18',
 
+                                        fontWeight: 'bold'
 
+                                    }
 
+                                },
 
+                                labelLine: {
 
+                                    show: false
 
+                                },
 
+                                data: [
 
+                                    { value: 24, name: '传感器' },
 
+                                    { value: 8, name: '摄像头' },
 
+                                    { value: 6, name: '控制器' },
 
+                                    { value: 4, name: '气象设备' }
 
+                                ],
 
+                                color: ['#2196F3', '#9C27B0', '#FF9800', '#4CAF50']
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 设备状态分布图
 
+                    deviceStatusChart = echarts.init(document.getElementById('deviceStatusChart'));
 
+                    deviceStatusChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'item',
 
+                            formatter: '{a} <br/>{b}: {c} ({d}%)'
 
+                        },
 
+                        legend: {
 
+                            orient: 'vertical',
 
+                            right: 10,
 
+                            top: 'center',
 
+                            data: ['在线', '离线', '故障', '维护中']
 
+                        },
 
+                        series: [
 
+                            {
 
+                                name: '设备状态',
 
+                                type: 'pie',
 
+                                radius: ['50%', '70%'],
 
+                                avoidLabelOverlap: false,
 
+                                itemStyle: {
 
+                                    borderRadius: 10,
 
+                                    borderWidth: 2
 
+                                },
 
+                                label: {
 
+                                    show: false,
 
+                                    position: 'center'
 
+                                },
 
+                                emphasis: {
 
+                                    label: {
 
+                                        show: true,
 
+                                        fontSize: '18',
 
+                                        fontWeight: 'bold'
 
+                                    }
 
+                                },
 
+                                labelLine: {
 
+                                    show: false
 
+                                },
 
+                                data: [
 
+                                    { value: 36, name: '在线' },
 
+                                    { value: 3, name: '离线' },
 
+                                    { value: 2, name: '故障' },
 
+                                    { value: 1, name: '维护中' }
 
+                                ],
 
+                                color: ['#4CAF50', '#FFC107', '#F44336', '#9E9E9E']
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 设备告警统计图
 
+                    deviceAlertChart = echarts.init(document.getElementById('deviceAlertChart'));
 
+                    deviceAlertChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'axis',
 
+                            axisPointer: {
 
+                                type: 'shadow'
 
+                            }
 
+                        },
 
+                        legend: {
 
+                            data: ['设备故障', '电量不足', '数据异常', '信号弱', '其他']
 
+                        },
 
+                        grid: {
 
+                            left: '3%',
 
+                            right: '4%',
 
+                            bottom: '3%',
 
+                            containLabel: true
 
+                        },
 
+                        xAxis: {
 
+                            type: 'category',
 
+                            data: ['传感器', '摄像头', '控制器', '气象设备']
 
+                        },
 
+                        yAxis: {
 
+                            type: 'value'
 
+                        },
 
+                        series: [
 
+                            {
 
+                                name: '设备故障',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [2, 1, 3, 0],
 
+                                color: '#F44336'
 
+                            },
 
+                            {
 
+                                name: '电量不足',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [5, 2, 0, 1],
 
+                                color: '#FF9800'
 
+                            },
 
+                            {
 
+                                name: '数据异常',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [3, 0, 2, 2],
 
+                                color: '#FFC107'
 
+                            },
 
+                            {
 
+                                name: '信号弱',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [2, 3, 1, 1],
 
+                                color: '#2196F3'
 
+                            },
 
+                            {
 
+                                name: '其他',
 
+                                type: 'bar',
 
+                                stack: 'total',
 
+                                data: [1, 0, 1, 0],
 
+                                color: '#9E9E9E'
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 设备活动趋势图表
 
+                    const deviceActivityCtx = document.getElementById('deviceActivityChart').getContext('2d');
 
+                    deviceActivityChart = new Chart(deviceActivityCtx, {
 
+                        type: 'line',
 
+                        data: {
 
+                            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
 
+                            datasets: [
 
+                                {
 
+                                    label: '活动次数',
 
+                                    data: [125, 132, 128, 142, 135, 92, 88],
 
+                                    borderColor: '#4CAF50',
 
+                                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
 
+                                    tension: 0.4,
 
+                                    fill: true
 
+                                },
 
+                                {
 
+                                    label: '数据上传量(KB)',
 
+                                    data: [850, 920, 880, 950, 910, 720, 680],
 
+                                    borderColor: '#2196F3',
 
+                                    backgroundColor: 'rgba(33, 150, 243, 0.1)',
 
+                                    tension: 0.4,
 
+                                    fill: true
 
+                                }
 
+                            ]
 
+                        },
 
+                        options: {
 
+                            responsive: true,
 
+                            maintainAspectRatio: false,
 
+                            interaction: {
 
+                                mode: 'index',
 
+                                intersect: false,
 
+                            },
 
+                            plugins: {
 
+                                tooltip: {
 
+                                    enabled: true
 
+                                },
 
+                                legend: {
 
+                                    position: 'top',
 
+                                }
 
+                            },
 
+                            scales: {
 
+                                y: {
 
+                                    beginAtZero: false
 
+                                }
 
+                            }
 
                         }
 
-                    },
 
-                    labelLine: {
 
-                        show: false
 
-                    },
 
-                    data: [
 
-                        { value: 86, name: '在线', itemStyle: { color: '#4CAF50' } },
 
-                        { value: 8, name: '离线', itemStyle: { color: '#F44336' } },
 
-                        { value: 6, name: '维护中', itemStyle: { color: '#FF9800' } }
 
-                    ]
 
+                    });
 
                 }
 
-            ]
 
-        });
 
-        
-        // 农业资源消耗
 
-        const resourceUsageChart = echarts.init(document.getElementById('resourceUsage'));
 
-        resourceUsageChart.setOption({
 
-            tooltip: {
 
-                trigger: 'axis',
 
-                axisPointer: {
 
-                    type: 'shadow'
 
-                }
 
-            },
 
-            legend: {
 
-                data: ['水资源', '肥料', '农药', '能源'],
 
-                textStyle: {
 
-                    color: '#fff'
 
-                }
 
-            },
 
-            grid: {
 
-                left: '3%',
 
-                right: '4%',
 
-                bottom: '3%',
 
-                containLabel: true
 
-            },
 
-            xAxis: {
 
-                type: 'value',
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
-                    }
 
-                },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
-                },
 
-                splitLine: {
 
-                    lineStyle: {
 
-                        color: 'rgba(255,255,255,0.1)'
 
-                    }
 
-                }
 
-            },
 
-            yAxis: {
 
-                type: 'category',
 
-                data: ['一季度', '二季度', '三季度', '四季度'],
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
-                    }
 
-                },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
-                }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '水资源',
 
-                    type: 'bar',
 
-                    stack: 'total',
 
-                    label: {
 
-                        show: true
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    },
 
-                    data: [320, 302, 301, 334],
 
-                    color: '#2196F3'
 
-                },
 
-                {
 
-                    name: '肥料',
 
-                    type: 'bar',
 
-                    stack: 'total',
 
-                    label: {
 
-                        show: true
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    },
 
-                    data: [120, 132, 101, 134],
 
-                    color: '#4CAF50'
 
-                },
 
-                {
 
-                    name: '农药',
 
-                    type: 'bar',
 
-                    stack: 'total',
 
-                    label: {
 
-                        show: true
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    },
 
-                    data: [220, 182, 191, 234],
 
-                    color: '#FF9800'
 
-                },
 
-                {
 
-                    name: '能源',
 
-                    type: 'bar',
 
-                    stack: 'total',
 
-                    label: {
 
-                        show: true
 
-                    },
 
-                    emphasis: {
 
-                        focus: 'series'
 
-                    },
 
-                    data: [150, 212, 201, 154],
 
-                    color: '#9C27B0'
 
-                }
 
-            ]
 
-        });
 
-        
-        // 气象数据监测
 
-        const weatherMonitorChart = echarts.init(document.getElementById('weatherMonitor'));
 
-        weatherMonitorChart.setOption({
 
-            tooltip: {
 
-                trigger: 'axis'
 
-            },
 
-            legend: {
 
-                data: ['温度', '湿度', '降水量'],
 
-                textStyle: {
 
-                    color: '#fff'
 
-                }
 
-            },
 
-            grid: {
 
-                left: '3%',
 
-                right: '4%',
 
-                bottom: '3%',
 
-                containLabel: true
 
-            },
 
-            xAxis: {
 
-                type: 'category',
 
-                boundaryGap: false,
 
-                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
-                    }
 
-                },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
-                }
 
-            },
 
-            yAxis: {
 
-                type: 'value',
 
-                axisLine: {
 
-                    lineStyle: {
 
-                        color: '#aaa'
 
-                    }
 
-                },
 
-                axisLabel: {
 
-                    color: '#aaa'
 
-                },
 
-                splitLine: {
 
-                    lineStyle: {
 
-                        color: 'rgba(255,255,255,0.1)'
 
-                    }
 
-                }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '温度',
 
-                    type: 'line',
 
-                    data: [22, 24, 26, 25, 23, 22, 21],
 
-                    color: '#FF5722'
 
-                },
 
-                {
 
-                    name: '湿度',
 
-                    type: 'line',
 
-                    data: [65, 60, 55, 58, 62, 68, 70],
 
-                    color: '#2196F3'
 
-                },
 
-                {
 
-                    name: '降水量',
 
-                    type: 'line',
 
-                    data: [0, 0, 5, 10, 2, 0, 0],
 
-                    color: '#00BCD4'
 
-                }
 
-            ]
 
-        });
 
-        
-        // 智能设备分布
 
-        const deviceDistributionChart = echarts.init(document.getElementById('deviceDistribution'));
 
-        deviceDistributionChart.setOption({
 
-            tooltip: {
 
-                trigger: 'item'
 
-            },
 
-            legend: {
 
-                top: '5%',
 
-                left: 'center',
 
-                textStyle: {
 
-                    color: '#fff'
 
-                }
 
-            },
 
-            series: [
 
-                {
 
-                    name: '设备类型',
 
-                    type: 'pie',
 
-                    radius: ['30%', '70%'],
 
-                    roseType: 'area',
 
-                    itemStyle: {
 
-                        borderRadius: 8
 
-                    },
 
-                    data: [
 
-                        { value: 30, name: '气象站', itemStyle: { color: '#2196F3' } },
 
-                        { value: 28, name: '摄像头', itemStyle: { color: '#4CAF50' } },
 
-                        { value: 26, name: '土壤传感器', itemStyle: { color: '#FF9800' } },
 
-                        { value: 24, name: '水质监测', itemStyle: { color: '#00BCD4' } },
 
-                        { value: 22, name: '自动灌溉', itemStyle: { color: '#9C27B0' } },
 
-                        { value: 20, name: '无人机', itemStyle: { color: '#F44336' } }
 
-                    ],
 
-                    label: {
 
-                        color: '#fff'
 
-                    },
 
-                    labelLine: {
 
-                        lineStyle: {
 
-                            color: 'rgba(255, 255, 255, 0.3)'
 
+                
+                // 调整图表大小以适应容器
 
+                setTimeout(() => {
 
+                    deviceTypeChart.resize();
 
+                    deviceStatusChart.resize();
 
+                    deviceAlertChart.resize();
 
+                }, 0);
 
+            });
 
+            
+            // 当切换到产量数据选项卡时初始化图表
 
+            document.querySelector('[data-tab="yield"]').addEventListener('click', function() {
 
+                if (!yieldDistributionChart) {
 
+                    // 产量分布饼图
 
+                    yieldDistributionChart = echarts.init(document.getElementById('yieldDistributionChart'));
 
+                    yieldDistributionChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'item',
 
+                            formatter: '{a} <br/>{b}: {c}吨 ({d}%)'
 
                         },
 
-                        smooth: 0.2,
 
-                        length: 10,
 
-                        length2: 20
 
-                    }
 
+                        legend: {
 
+                            orient: 'vertical',
 
+                            right: 10,
 
+                            top: 'center',
 
+                            data: ['水稻', '小麦', '玉米', '大豆']
 
+                        },
 
+                        series: [
 
+                            {
 
+                                name: '产量分布',
 
+                                type: 'pie',
 
+                                radius: ['50%', '70%'],
 
+                                avoidLabelOverlap: false,
 
+                                itemStyle: {
 
+                                    borderRadius: 10,
 
+                                    borderWidth: 2
 
+                                },
 
+                                label: {
 
+                                    show: false,
 
+                                    position: 'center'
 
+                                },
 
+                                emphasis: {
 
+                                    label: {
 
+                                        show: true,
 
+                                        fontSize: '18',
 
+                                        fontWeight: 'bold'
 
+                                    }
 
+                                },
 
+                                labelLine: {
 
+                                    show: false
 
+                                },
 
+                                data: [
 
+                                    { value: 1200, name: '水稻' },
 
+                                    { value: 580, name: '小麦' },
 
+                                    { value: 520, name: '玉米' },
 
+                                    { value: 150, name: '大豆' }
 
+                                ],
 
+                                color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107']
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 区域产量对比图
 
+                    yieldByRegionChart = echarts.init(document.getElementById('yieldByRegionChart'));
 
+                    yieldByRegionChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'axis',
 
+                            axisPointer: {
 
+                                type: 'shadow'
 
+                            }
 
+                        },
 
+                        legend: {
 
+                            data: ['2021年', '2022年', '2023年']
 
+                        },
 
+                        grid: {
 
+                            left: '3%',
 
+                            right: '4%',
 
+                            bottom: '3%',
 
+                            containLabel: true
 
+                        },
 
+                        xAxis: {
 
+                            type: 'category',
 
+                            data: ['东区', '西区', '南区', '北区']
 
+                        },
 
+                        yAxis: {
 
+                            type: 'value',
 
+                            name: '产量(吨)'
 
+                        },
 
+                        series: [
 
+                            {
 
+                                name: '2021年',
 
+                                type: 'bar',
 
+                                data: [580, 480, 520, 420],
 
+                                color: '#CDDC39'
 
+                            },
 
+                            {
 
+                                name: '2022年',
 
+                                type: 'bar',
 
+                                data: [620, 520, 580, 450],
 
+                                color: '#8BC34A'
 
+                            },
 
+                            {
 
+                                name: '2023年',
 
+                                type: 'bar',
 
+                                data: [680, 560, 630, 480],
 
+                                color: '#4CAF50'
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 产量与环境因素关系图
 
+                    yieldFactorsChart = echarts.init(document.getElementById('yieldFactorsChart'));
 
+                    yieldFactorsChart.setOption({
 
+                        tooltip: {
 
+                            trigger: 'axis'
 
+                        },
 
+                        legend: {
 
+                            data: ['产量', '温度', '降水量', '光照']
 
+                        },
 
+                        grid: {
 
+                            left: '3%',
 
+                            right: '4%',
 
+                            bottom: '3%',
 
+                            containLabel: true
 
+                        },
 
+                        xAxis: {
 
+                            type: 'category',
 
+                            boundaryGap: false,
 
+                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 
+                        },
 
+                        yAxis: [
 
+                            {
 
+                                type: 'value',
 
+                                name: '产量',
 
+                                position: 'left',
 
+                                axisLine: {
 
+                                    show: true,
 
+                                    lineStyle: {
 
+                                        color: '#4CAF50'
 
+                                    }
 
+                                }
 
+                            },
 
+                            {
 
+                                type: 'value',
 
+                                name: '环境因素',
 
+                                position: 'right',
 
+                                axisLine: {
 
+                                    show: true,
 
+                                    lineStyle: {
 
+                                        color: '#FF9800'
 
+                                    }
 
+                                }
 
+                            }
 
+                        ],
 
+                        series: [
 
+                            {
 
+                                name: '产量',
 
+                                type: 'line',
 
+                                data: [0, 0, 0, 120, 180, 240, 320, 420, 580, 420, 180, 0],
 
+                                color: '#4CAF50',
 
+                                yAxisIndex: 0
 
+                            },
 
+                            {
 
+                                name: '温度',
 
+                                type: 'line',
 
+                                data: [5, 8, 12, 18, 24, 28, 32, 30, 25, 18, 12, 6],
 
+                                color: '#FF9800',
 
+                                yAxisIndex: 1
 
+                            },
 
+                            {
 
+                                name: '降水量',
 
+                                type: 'line',
 
+                                data: [20, 25, 35, 45, 80, 120, 150, 120, 90, 60, 30, 20],
 
+                                color: '#2196F3',
 
+                                yAxisIndex: 1
 
+                            },
 
+                            {
 
+                                name: '光照',
 
+                                type: 'line',
 
+                                data: [40, 45, 55, 65, 80, 85, 90, 85, 75, 60, 50, 40],
 
+                                color: '#FFC107',
 
+                                yAxisIndex: 1
 
+                            }
 
+                        ]
 
+                    });
 
+                    
+                    // 年度产量趋势图表
 
+                    const yieldTrendCtx = document.getElementById('yieldTrendChart').getContext('2d');
 
+                    yieldTrendChart = new Chart(yieldTrendCtx, {
 
+                        type: 'bar',
 
+                        data: {
 
+                            labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
 
+                            datasets: [
 
+                                {
 
+                                    label: '水稻',
 
+                                    data: [980, 1020, 1080, 1120, 1150, 1200],
 
+                                    backgroundColor: '#4CAF50'
 
+                                },
 
+                                {
 
+                                    label: '小麦',
 
+                                    data: [450, 480, 520, 550, 560, 580],
 
+                                    backgroundColor: '#8BC34A'
 
+                                },
 
+                                {
 
+                                    label: '玉米',
 
+                                    data: [420, 440, 460, 480, 500, 520],
 
+                                    backgroundColor: '#CDDC39'
 
+                                },
 
+                                {
 
+                                    label: '大豆',
 
+                                    data: [120, 130, 135, 140, 145, 150],
 
+                                    backgroundColor: '#FFC107'
 
+                                }
 
+                            ]
 
+                        },
 
+                        options: {
 
+                            responsive: true,
 
+                            maintainAspectRatio: false,
 
+                            plugins: {
 
+                                tooltip: {
 
+                                    enabled: true
 
+                                },
 
+                                legend: {
 
+                                    position: 'top',
 
+                                }
 
+                            },
 
+                            scales: {
 
+                                x: {
 
+                                    stacked: true,
 
+                                },
 
+                                y: {
 
+                                    stacked: true,
 
+                                    title: {
 
+                                        display: true,
 
+                                        text: '产量(吨)'
 
+                                    }
 
+                                }
 
+                            }
 
+                        }
 
+                    });
 
                 }
 
-            ]
 
-        });
 
-        
-        // 响应式调整图表大小
 
-        window.addEventListener('resize', function() {
 
-            cropDistributionChart.resize();
 
-            yieldTrendChart.resize();
 
-            regionMapChart.resize();
 
-            deviceStatusChart.resize();
 
-            resourceUsageChart.resize();
 
-            weatherMonitorChart.resize();
 
-            deviceDistributionChart.resize();
 
+                
+                // 调整图表大小以适应容器
 
+                setTimeout(() => {
 
+                    yieldDistributionChart.resize();
 
+                    yieldByRegionChart.resize();
 
+                    yieldFactorsChart.resize();
 
+                }, 0);
 
+            });
 
+            
+            // 初始化图表变量
 
+            let deviceTypeChart, deviceStatusChart, deviceAlertChart, deviceActivityChart;
 
+            let yieldDistributionChart, yieldByRegionChart, yieldFactorsChart, yieldTrendChart;
 
         });
 
     </script>
 
 </body>