1 năm trước cách đây · be748e0c46
--- a/.DS_Store
+++ b/.DS_Store
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -0,0 +1,156 @@
 
				+/* 全局样式 */
			
 
				+body {
			
 
				+    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+    background-color: #f5f7f9;
			
 
				+    color: #333;
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    height: auto;
			
 
				+    min-height: 100%;
			
 
				+    width: 100%;
			
 
				+    max-width: 100%;
			
 
				+    overflow-x: hidden;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+    height: 100%;
			
 
				+    overflow: auto;
			
 
				+}
			
 
				+
			
 
				+/* Iframe内容样式 */
			
 
				+html.iframe-content {
			
 
				+    overflow: auto;
			
 
				+    height: 100%;
			
 
				+}
			
 
				+
			
 
				+html.iframe-content body {
			
 
				+    min-height: 100%;
			
 
				+    height: auto;
			
 
				+    overflow: visible;
			
 
				+}
			
 
				+
			
 
				+.page-container {
			
 
				+    padding: 20px;
			
 
				+    position: relative;
			
 
				+    min-height: 100vh;
			
 
				+    width: 100%;
			
 
				+    box-sizing: border-box;
			
 
				+    overflow-x: hidden;
			
 
				+}
			
 
				+
			
 
				+/* 响应式容器 */
			
 
				+.responsive-container {
			
 
				+    width: 100%;
			
 
				+    overflow-x: auto;
			
 
				+}
			
 
				+
			
 
				+/* 滚动条美化 */
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 8px;
			
 
				+    height: 8px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-track {
			
 
				+    background-color: #f1f1f1;
			
 
				+    border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+    background-color: #c1c1c1;
			
 
				+    border-radius: 4px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+    background-color: #a8a8a8;
			
 
				+}
			
 
				+
			
 
				+/* 卡片样式 */
			
 
				+.card {
			
 
				+    background-color: white;
			
 
				+    border-radius: 8px;
			
 
				+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			
 
				+}
			
 
				+
			
 
				+/* 表格样式 */
			
 
				+.table-container {
			
 
				+    overflow-x: auto;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+    width: 100%;
			
 
				+    border-collapse: collapse;
			
 
				+}
			
 
				+
			
 
				+th {
			
 
				+    background-color: #f9fafb;
			
 
				+    padding: 12px 16px;
			
 
				+    text-align: left;
			
 
				+    font-weight: 500;
			
 
				+    color: #6b7280;
			
 
				+    border-bottom: 1px solid #e5e7eb;
			
 
				+}
			
 
				+
			
 
				+td {
			
 
				+    padding: 12px 16px;
			
 
				+    border-bottom: 1px solid #e5e7eb;
			
 
				+}
			
 
				+
			
 
				+tr:hover {
			
 
				+    background-color: #f9fafb;
			
 
				+}
			
 
				+
			
 
				+/* 按钮样式 */
			
 
				+.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-sm {
			
 
				+    padding: 4px 8px;
			
 
				+    font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+.btn-icon {
			
 
				+    margin-right: 4px;
			
 
				+}
			
 
				+
			
 
				+/* 响应式布局支持 */
			
 
				+@media (max-width: 768px) {
			
 
				+    .page-container {
			
 
				+        padding: 10px;
			
 
				+    }
			
 
				+} 
			
--- a/fix-all-pages.sh
+++ b/fix-all-pages.sh
@@ -0,0 +1,159 @@
 
				+#!/bin/bash
			
 
				+
			
 
				+# 定义颜色
			
 
				+GREEN='\033[0;32m'
			
 
				+BLUE='\033[0;34m'
			
 
				+NC='\033[0m' # No Color
			
 
				+
			
 
				+# 确认函数
			
 
				+confirm() {
			
 
				+    read -p "$1 (y/n): " choice
			
 
				+    case "$choice" in 
			
 
				+        y|Y ) return 0;;
			
 
				+        * ) return 1;;
			
 
				+    esac
			
 
				+}
			
 
				+
			
 
				+echo -e "${BLUE}爱智农平台页面修复工具${NC}"
			
 
				+echo "-----------------------------------"
			
 
				+echo "此脚本将批量修复所有页面的UI按钮遮挡问题"
			
 
				+echo "-----------------------------------"
			
 
				+
			
 
				+# 获取未处理的页面
			
 
				+pages_to_process=()
			
 
				+for file in pages/*.html; do
			
 
				+    # 排除已经创建的content页面
			
 
				+    if [[ ! $file == *-content.html ]] && [[ ! -f "${file%.*}-content.html" ]] && [[ ! $file == "field-management.html" ]] && [[ ! $file == "device-management.html" ]] && [[ ! $file == "machine-monitor.html" ]] && [[ ! $file == "device-monitor.html" ]]; then
			
 
				+        pages_to_process+=("$file")
			
 
				+    fi
			
 
				+done
			
 
				+
			
 
				+# 显示待处理的页面
			
 
				+echo -e "\n${GREEN}找到以下待处理页面:${NC}"
			
 
				+for page in "${pages_to_process[@]}"; do
			
 
				+    echo "- $page"
			
 
				+done
			
 
				+
			
 
				+if confirm "是否继续处理这些页面？"; then
			
 
				+    for page in "${pages_to_process[@]}"; do
			
 
				+        base_name=$(basename "$page" .html)
			
 
				+        content_file="pages/${base_name}-content.html"
			
 
				+        
			
 
				+        echo -e "\n${GREEN}处理页面: $page${NC}"
			
 
				+        
			
 
				+        # 1. 复制原始文件为content文件
			
 
				+        cp "$page" "$content_file"
			
 
				+        echo "✓ 已创建内容页面: $content_file"
			
 
				+        
			
 
				+        # 2. 为内容页面添加必要的CSS和类
			
 
				+        sed -i '' 's/<html lang="zh-CN">/<html lang="zh-CN" class="iframe-content">/' "$content_file"
			
 
				+        sed -i '' 's/<div class="page-container">/<div class="page-container responsive-container">/' "$content_file"
			
 
				+        sed -i '' 's/<div class="flex justify-between items-center mb-6">/<div class="flex justify-between items-center mb-6 page-header">/' "$content_file"
			
 
				+        sed -i '' 's/<div class="flex gap-2">/<div class="flex gap-2 button-container">/' "$content_file"
			
 
				+        
			
 
				+        # 添加CSS样式到内容页面
			
 
				+        css_insert='body {\n    padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */\n}\n\n.page-container {\n    position: relative;\n    padding-top: 40px; /* 增加顶部内边距，给按钮腾出空间 */\n}\n\n/* 防止重复菜单 */\nbody > div:not(.page-container):not(.modal-container),\niframe#sidebar, \ndiv.system-menu,\n[id^="system-menu"],\n[class^="system-menu"],\n#admin-sidebar,\n.menu-popup,\n.user-avatar-circle {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    opacity: 0 !important;\n    position: absolute !important;\n    top: -9999px !important;\n    left: -9999px !important;\n    z-index: -9999 !important;\n    pointer-events: none !important;\n}\n\n/* 防止右侧白圈和浮动元素 */\n.circle-btn,\n.floating-circle,\n.round-button,\n.scroll-top-btn,\n[class*="round"],\n[class*="circle"],\n.help-btn,\n.chat-btn,\nbody > .btn,\nbody > button,\nbody > div:not(.page-container):not(.modal-container) {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n}\n\n/* 页面标题和操作按钮容器 */\n.page-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    padding-top: 10px;\n    position: relative;\n    z-index: 10;\n}\n\n/* 添加按钮的特定样式 */\n.button-container {\n    position: relative;\n    z-index: 20;\n}\n\n.btn {\n    position: relative;\n    z-index: 5;\n    height: 38px;\n    visibility: visible !important;\n    opacity: 1 !important;\n    display: inline-flex !important;\n}'
			
 
				+        
			
 
				+        sed -i '' "/<style>/a\\
			
 
				+        $css_insert
			
 
				+        " "$content_file"
			
 
				+        echo "✓ 已添加样式到内容页面"
			
 
				+        
			
 
				+        # 3. 创建iframe容器页面
			
 
				+        cat > "$page" << EOF
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>${base_name//-/ } - 爱智农</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>
			
 
				+        :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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100vh;
			
 
				+            width: 100vw;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        /* 内容页面框架 */
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            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;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 使用iframe来完全隔离和控制页面内容 -->
			
 
				+    <iframe id="content-frame" src="${base_name}-content.html" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="eager" scrolling="auto" frameborder="0" allowfullscreen></iframe>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 监听iframe加载完成
			
 
				+        document.getElementById('content-frame').onload = function() {
			
 
				+            // 确保iframe高度铺满
			
 
				+            this.style.height = window.innerHeight + 'px';
			
 
				+        };
			
 
				+        
			
 
				+        // 页面大小变化时调整iframe大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
 
				+EOF
			
 
				+        echo "✓ 已创建iframe容器页面: $page"
			
 
				+        
			
 
				+        echo "✓ 页面 $page 处理完成!"
			
 
				+    done
			
 
				+    
			
 
				+    echo -e "\n${GREEN}所有页面处理完成!${NC}"
			
 
				+    echo "共处理了 ${#pages_to_process[@]} 个页面"
			
 
				+else
			
 
				+    echo "已取消操作"
			
 
				+fi 
			
--- a/fix-container-class.sh
+++ b/fix-container-class.sh
@@ -0,0 +1,13 @@
 
				+#!/bin/bash
			
 
				+
			
 
				+# 为所有页面的容器添加responsive-container类
			
 
				+for file in pages/*.html; do
			
 
				+  echo "更新容器类: $file"
			
 
				+  
			
 
				+  # 添加responsive-container类到页面容器
			
 
				+  sed -i '' 's/<div class="page-container">/<div class="page-container responsive-container">/' "$file"
			
 
				+  
			
 
				+  echo "更新完成: $file"
			
 
				+done
			
 
				+
			
 
				+echo "所有页面容器类更新完成!" 
			
--- a/fix-html-class.sh
+++ b/fix-html-class.sh
@@ -0,0 +1,13 @@
 
				+#!/bin/bash
			
 
				+
			
 
				+# 为所有页面的HTML标签添加iframe-content类
			
 
				+for file in pages/*.html; do
			
 
				+  echo "更新HTML类: $file"
			
 
				+  
			
 
				+  # 添加iframe-content类到html标签
			
 
				+  sed -i '' 's/<html lang="zh-CN">/<html lang="zh-CN" class="iframe-content">/' "$file"
			
 
				+  
			
 
				+  echo "更新完成: $file"
			
 
				+done
			
 
				+
			
 
				+echo "所有页面HTML类更新完成!" 
			
--- a/fix-iframe-content.sh
+++ b/fix-iframe-content.sh
@@ -0,0 +1,16 @@
 
				+#!/bin/bash
			
 
				+
			
 
				+# 更新所有页面的body和container样式
			
 
				+for file in pages/*.html; do
			
 
				+  echo "更新页面样式: $file"
			
 
				+  
			
 
				+  # 更新body样式
			
 
				+  sed -i '' 's/height: auto;/height: auto; overflow-y: auto; overflow-x: hidden;/' "$file"
			
 
				+  
			
 
				+  # 更新page-container样式
			
 
				+  sed -i '' 's/min-height: 100vh;/min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;/' "$file"
			
 
				+  
			
 
				+  echo "更新完成: $file"
			
 
				+done
			
 
				+
			
 
				+echo "所有页面更新完成!" 
			
--- a/fix-pages.sh
+++ b/fix-pages.sh
@@ -0,0 +1,17 @@
 
				+#!/bin/bash
			
 
				+
			
 
				+# 遍历pages目录中的所有HTML文件
			
 
				+for file in pages/*.html; do
			
 
				+  echo "处理文件: $file"
			
 
				+  
			
 
				+  # 检查文件是否已包含global.css引用
			
 
				+  if grep -q "../assets/css/global.css" "$file"; then
			
 
				+    echo "文件已包含全局CSS引用，跳过"
			
 
				+  else
			
 
				+    # 添加全局CSS引用
			
 
				+    sed -i '' 's|<link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">|<link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">\n    <link rel="stylesheet" href="../assets/css/global.css">|' "$file"
			
 
				+    echo "已添加全局CSS引用"
			
 
				+  fi
			
 
				+done
			
 
				+
			
 
				+echo "所有文件处理完成!" 
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,550 @@
 
				+<!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">
			
 
				+    <style>
			
 
				+        :root {
			
 
				+            --primary-color: #4CAF50;
			
 
				+            --primary-dark: #388E3C;
			
 
				+            --primary-light: #C8E6C9;
			
 
				+            --accent-color: #8BC34A;
			
 
				+            --text-color: #333;
			
 
				+            --sidebar-width: 240px;
			
 
				+            --sidebar-collapsed-width: 64px;
			
 
				+            --header-height: 60px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            color: var(--text-color);
			
 
				+            background-color: #f5f7f9;
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100vh;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .app-header {
			
 
				+            height: var(--header-height);
			
 
				+            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
			
 
				+            color: white;
			
 
				+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			
 
				+            z-index: 100;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar {
			
 
				+            width: var(--sidebar-width);
			
 
				+            background-color: white;
			
 
				+            box-shadow: 2px 0 5px rgba(0,0,0,0.05);
			
 
				+            transition: all 0.3s;
			
 
				+            height: calc(100vh - var(--header-height));
			
 
				+            overflow-y: auto;
			
 
				+            z-index: 99;
			
 
				+            position: fixed;
			
 
				+            top: var(--header-height);
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar.collapsed {
			
 
				+            width: var(--sidebar-collapsed-width);
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-item {
			
 
				+            padding: 12px 16px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+            border-left: 3px solid transparent;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-item:hover {
			
 
				+            background-color: #f0f7f0;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-item.active {
			
 
				+            background-color: #e8f5e9;
			
 
				+            border-left: 3px solid var(--primary-color);
			
 
				+            color: var(--primary-color);
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-item i {
			
 
				+            margin-right: 12px;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar.collapsed .sidebar-item span,
			
 
				+        .sidebar.collapsed .sidebar-submenu {
			
 
				+            display: none;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar.collapsed .sidebar-item {
			
 
				+            text-align: center;
			
 
				+            justify-content: center;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar.collapsed .sidebar-item i {
			
 
				+            margin-right: 0;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-submenu {
			
 
				+            padding-left: 24px;
			
 
				+            max-height: 0;
			
 
				+            overflow: hidden;
			
 
				+            transition: max-height 0.3s ease;
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar-submenu.open {
			
 
				+            max-height: 1000px;
			
 
				+        }
			
 
				+        
			
 
				+        .content-wrapper {
			
 
				+            margin-left: var(--sidebar-width);
			
 
				+            transition: all 0.3s;
			
 
				+            height: calc(100vh - var(--header-height));
			
 
				+            position: relative;
			
 
				+            overflow: hidden;
			
 
				+            width: calc(100% - var(--sidebar-width));
			
 
				+        }
			
 
				+        
			
 
				+        .sidebar.collapsed + .content-wrapper {
			
 
				+            margin-left: var(--sidebar-collapsed-width);
			
 
				+        }
			
 
				+        
			
 
				+        .content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            background-color: #fff;
			
 
				+            overflow: auto;
			
 
				+            display: block;
			
 
				+        }
			
 
				+        
			
 
				+        .toggle-sidebar {
			
 
				+            cursor: pointer;
			
 
				+            font-size: 20px;
			
 
				+            padding: 0 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .user-info {
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+        
			
 
				+        .dropdown-menu {
			
 
				+            display: none;
			
 
				+            position: absolute;
			
 
				+            right: 0;
			
 
				+            top: 100%;
			
 
				+            background: white;
			
 
				+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
			
 
				+            border-radius: 4px;
			
 
				+            width: 160px;
			
 
				+            z-index: 101;
			
 
				+        }
			
 
				+        
			
 
				+        .dropdown-menu.show {
			
 
				+            display: block;
			
 
				+        }
			
 
				+        
			
 
				+        .dropdown-item {
			
 
				+            padding: 10px 16px;
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+        
			
 
				+        .dropdown-item:hover {
			
 
				+            background-color: #f0f7f0;
			
 
				+        }
			
 
				+        
			
 
				+        @media (max-width: 768px) {
			
 
				+            .sidebar {
			
 
				+                width: var(--sidebar-collapsed-width);
			
 
				+                transform: translateX(-100%);
			
 
				+                position: fixed;
			
 
				+                z-index: 1000;
			
 
				+            }
			
 
				+            
			
 
				+            .sidebar.collapsed {
			
 
				+                transform: translateX(0);
			
 
				+            }
			
 
				+            
			
 
				+            .content-wrapper {
			
 
				+                margin-left: 0;
			
 
				+                width: 100%;
			
 
				+            }
			
 
				+            
			
 
				+            .sidebar.collapsed + .content-wrapper {
			
 
				+                margin-left: var(--sidebar-collapsed-width);
			
 
				+                width: calc(100% - var(--sidebar-collapsed-width));
			
 
				+            }
			
 
				+            
			
 
				+            .app-header {
			
 
				+                padding-left: 0;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 顶部导航栏 -->
			
 
				+    <header class="app-header fixed w-full top-0 flex items-center justify-between px-4">
			
 
				+        <div class="flex items-center">
			
 
				+            <div class="toggle-sidebar flex items-center justify-center mr-2">
			
 
				+                <i class="iconfont icon-menu"></i>
			
 
				+            </div>
			
 
				+            <div class="flex items-center">
			
 
				+                <img src="assets/images/logo.png" alt="爱智农" class="h-8 mr-2" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 fill=%22%234CAF50%22 /><text x=%2220%22 y=%2225%22 font-size=%2220%22 text-anchor=%22middle%22 fill=%22white%22>爱</text></svg>'">
			
 
				+                <h1 class="text-xl font-bold">爱智农智慧农业平台</h1>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="flex items-center">
			
 
				+            <div class="mr-4">
			
 
				+                <i class="iconfont icon-notification text-xl"></i>
			
 
				+            </div>
			
 
				+            <div class="user-info relative flex items-center">
			
 
				+                <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center mr-2">
			
 
				+                    <i class="iconfont icon-user text-green-600"></i>
			
 
				+                </div>
			
 
				+                <span>管理员</span>
			
 
				+                <i class="iconfont icon-down ml-1"></i>
			
 
				+                
			
 
				+                <div class="dropdown-menu">
			
 
				+                    <div class="dropdown-item flex items-center">
			
 
				+                        <i class="iconfont icon-user mr-2"></i>
			
 
				+                        <span>个人中心</span>
			
 
				+                    </div>
			
 
				+                    <div class="dropdown-item flex items-center">
			
 
				+                        <i class="iconfont icon-setting mr-2"></i>
			
 
				+                        <span>系统设置</span>
			
 
				+                    </div>
			
 
				+                    <div class="dropdown-item flex items-center" id="logout">
			
 
				+                        <i class="iconfont icon-logout mr-2"></i>
			
 
				+                        <span>退出登录</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </header>
			
 
				+
			
 
				+    <!-- 左侧菜单栏和主内容区域 -->
			
 
				+    <div class="flex pt-[60px] w-full">
			
 
				+        <aside class="sidebar fixed left-0">
			
 
				+            <div class="sidebar-menu">
			
 
				+                <div class="sidebar-item" data-page="dashboard">
			
 
				+                    <i class="iconfont icon-dashboard"></i>
			
 
				+                    <span>首页</span>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-setting"></i>
			
 
				+                    <span>系统管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="user-management">
			
 
				+                        <i class="iconfont icon-user"></i>
			
 
				+                        <span>用户管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="role-management">
			
 
				+                        <i class="iconfont icon-team"></i>
			
 
				+                        <span>角色管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="permission-management">
			
 
				+                        <i class="iconfont icon-lock"></i>
			
 
				+                        <span>权限管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="org-management">
			
 
				+                        <i class="iconfont icon-apartment"></i>
			
 
				+                        <span>组织机构管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="login-log">
			
 
				+                        <i class="iconfont icon-file"></i>
			
 
				+                        <span>登录日志</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="operation-log">
			
 
				+                        <i class="iconfont icon-file-text"></i>
			
 
				+                        <span>操作日志</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="dict-management">
			
 
				+                        <i class="iconfont icon-book"></i>
			
 
				+                        <span>字典管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="menu-management">
			
 
				+                        <i class="iconfont icon-menu"></i>
			
 
				+                        <span>菜单管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="task-management">
			
 
				+                        <i class="iconfont icon-schedule"></i>
			
 
				+                        <span>定时任务管理</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-appstore"></i>
			
 
				+                    <span>地块与农场管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="field-management">
			
 
				+                        <i class="iconfont icon-database"></i>
			
 
				+                        <span>地块管理</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item" data-page="visualization-dashboard">
			
 
				+                    <i class="iconfont icon-dashboard"></i>
			
 
				+                    <span>可视化统计大屏</span>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-car"></i>
			
 
				+                    <span>农机设备管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="machine-management">
			
 
				+                        <i class="iconfont icon-car"></i>
			
 
				+                        <span>农机管理列表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="machine-monitor">
			
 
				+                        <i class="iconfont icon-eye"></i>
			
 
				+                        <span>农机实时监控</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="machine-alarm">
			
 
				+                        <i class="iconfont icon-warning"></i>
			
 
				+                        <span>农机故障告警</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="machine-record">
			
 
				+                        <i class="iconfont icon-file-text"></i>
			
 
				+                        <span>农机作业记录</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="machine-maintenance">
			
 
				+                        <i class="iconfont icon-tool"></i>
			
 
				+                        <span>农机保养管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="machine-statistics">
			
 
				+                        <i class="iconfont icon-bar-chart"></i>
			
 
				+                        <span>农机使用统计</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-video-camera"></i>
			
 
				+                    <span>设备监控管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="device-management">
			
 
				+                        <i class="iconfont icon-database"></i>
			
 
				+                        <span>设备管理列表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="device-monitor">
			
 
				+                        <i class="iconfont icon-eye"></i>
			
 
				+                        <span>设备监控实时展示</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="device-alarm">
			
 
				+                        <i class="iconfont icon-warning"></i>
			
 
				+                        <span>设备告警信息</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-calendar"></i>
			
 
				+                    <span>智慧农作管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="task-list">
			
 
				+                        <i class="iconfont icon-ordered-list"></i>
			
 
				+                        <span>作业任务列表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="farm-plan">
			
 
				+                        <i class="iconfont icon-schedule"></i>
			
 
				+                        <span>农事计划制定</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="task-track">
			
 
				+                        <i class="iconfont icon-environment"></i>
			
 
				+                        <span>作业轨迹地图</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-cluster"></i>
			
 
				+                    <span>作物生命周期</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="crop-profile">
			
 
				+                        <i class="iconfont icon-profile"></i>
			
 
				+                        <span>作物档案</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="crop-trace">
			
 
				+                        <i class="iconfont icon-qrcode"></i>
			
 
				+                        <span>溯源信息展示</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-experiment"></i>
			
 
				+                    <span>AI模型与智能分析</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="model-list">
			
 
				+                        <i class="iconfont icon-appstore"></i>
			
 
				+                        <span>模型列表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="data-analysis">
			
 
				+                        <i class="iconfont icon-bar-chart"></i>
			
 
				+                        <span>数据分析图表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="model-visualization">
			
 
				+                        <i class="iconfont icon-fund"></i>
			
 
				+                        <span>模型结果可视化</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-medicine-box"></i>
			
 
				+                    <span>农作处方管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="prescription-list">
			
 
				+                        <i class="iconfont icon-ordered-list"></i>
			
 
				+                        <span>农作处方列表</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="prescription-detail">
			
 
				+                        <i class="iconfont icon-file-text"></i>
			
 
				+                        <span>处方详情展示</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-file-pdf"></i>
			
 
				+                    <span>报表与档案管理</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="report-download">
			
 
				+                        <i class="iconfont icon-download"></i>
			
 
				+                        <span>报表下载</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="farm-archive">
			
 
				+                        <i class="iconfont icon-folder"></i>
			
 
				+                        <span>农事档案</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="device-archive">
			
 
				+                        <i class="iconfont icon-folder-open"></i>
			
 
				+                        <span>设备档案</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="statistics-summary">
			
 
				+                        <i class="iconfont icon-file-excel"></i>
			
 
				+                        <span>统计类汇总</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="sidebar-item has-submenu">
			
 
				+                    <i class="iconfont icon-customer-service"></i>
			
 
				+                    <span>对外服务</span>
			
 
				+                    <i class="iconfont icon-arrow-down ml-auto"></i>
			
 
				+                </div>
			
 
				+                <div class="sidebar-submenu">
			
 
				+                    <div class="sidebar-item" data-page="tech-promotion">
			
 
				+                        <i class="iconfont icon-bulb"></i>
			
 
				+                        <span>农技推广中心</span>
			
 
				+                    </div>
			
 
				+                    <div class="sidebar-item" data-page="policy-info">
			
 
				+                        <i class="iconfont icon-file-text"></i>
			
 
				+                        <span>政策信息汇总</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </aside>
			
 
				+
			
 
				+        <!-- 主内容区域 -->
			
 
				+        <main class="content-wrapper">
			
 
				+            <iframe id="contentFrame" class="content-frame" src="pages/dashboard.html" frameborder="0"></iframe>
			
 
				+        </main>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 侧边栏折叠功能
			
 
				+            const toggleBtn = document.querySelector('.toggle-sidebar');
			
 
				+            const sidebar = document.querySelector('.sidebar');
			
 
				+            const contentWrapper = document.querySelector('.content-wrapper');
			
 
				+            
			
 
				+            toggleBtn.addEventListener('click', function() {
			
 
				+                sidebar.classList.toggle('collapsed');
			
 
				+                if (sidebar.classList.contains('collapsed')) {
			
 
				+                    contentWrapper.style.width = `calc(100% - var(--sidebar-collapsed-width))`;
			
 
				+                    contentWrapper.style.marginLeft = `var(--sidebar-collapsed-width)`;
			
 
				+                } else {
			
 
				+                    contentWrapper.style.width = `calc(100% - var(--sidebar-width))`;
			
 
				+                    contentWrapper.style.marginLeft = `var(--sidebar-width)`;
			
 
				+                }
			
 
				+            });
			
 
				+            
			
 
				+            // 用户下拉菜单
			
 
				+            const userInfo = document.querySelector('.user-info');
			
 
				+            const dropdownMenu = document.querySelector('.dropdown-menu');
			
 
				+            
			
 
				+            userInfo.addEventListener('click', function(e) {
			
 
				+                e.stopPropagation();
			
 
				+                dropdownMenu.classList.toggle('show');
			
 
				+            });
			
 
				+            
			
 
				+            document.addEventListener('click', function() {
			
 
				+                dropdownMenu.classList.remove('show');
			
 
				+            });
			
 
				+            
			
 
				+            // 子菜单展开/折叠
			
 
				+            const subMenuItems = document.querySelectorAll('.has-submenu');
			
 
				+            
			
 
				+            subMenuItems.forEach(item => {
			
 
				+                item.addEventListener('click', function() {
			
 
				+                    const submenu = this.nextElementSibling;
			
 
				+                    submenu.classList.toggle('open');
			
 
				+                    
			
 
				+                    // 切换箭头方向
			
 
				+                    const arrow = this.querySelector('.icon-arrow-down');
			
 
				+                    if (submenu.classList.contains('open')) {
			
 
				+                        arrow.style.transform = 'rotate(180deg)';
			
 
				+                    } else {
			
 
				+                        arrow.style.transform = 'rotate(0)';
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 页面导航
			
 
				+            const menuItems = document.querySelectorAll('.sidebar-item[data-page]');
			
 
				+            const contentFrame = document.getElementById('contentFrame');
			
 
				+            
			
 
				+            menuItems.forEach(item => {
			
 
				+                item.addEventListener('click', function() {
			
 
				+                    const page = this.getAttribute('data-page');
			
 
				+                    contentFrame.src = `pages/${page}.html`;
			
 
				+                    
			
 
				+                    // 移除其他菜单项的活动状态
			
 
				+                    menuItems.forEach(i => i.classList.remove('active'));
			
 
				+                    
			
 
				+                    // 添加当前菜单项的活动状态
			
 
				+                    this.classList.add('active');
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 登出功能
			
 
				+            document.getElementById('logout').addEventListener('click', function() {
			
 
				+                window.location.href = 'login.html';
			
 
				+            });
			
 
				+            
			
 
				+            // 默认选中首页
			
 
				+            document.querySelector('.sidebar-item[data-page="dashboard"]').classList.add('active');
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/login.html
+++ b/login.html
@@ -0,0 +1,186 @@
 
				+<!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">
			
 
				+    <style>
			
 
				+        :root {
			
 
				+            --primary-color: #4CAF50;
			
 
				+            --primary-dark: #388E3C;
			
 
				+            --primary-light: #C8E6C9;
			
 
				+            --accent-color: #8BC34A;
			
 
				+            --text-color: #333;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            color: var(--text-color);
			
 
				+            background-color: #f5f7f9;
			
 
				+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,10 Q50,0 70,10 T90,30 Q100,50 90,70 T70,90 Q50,100 30,90 T10,70 Q0,50 10,30 T30,10" fill="none" stroke="%234CAF5022" stroke-width="2"/></svg>');
			
 
				+            background-size: 300px;
			
 
				+        }
			
 
				+        
			
 
				+        .login-container {
			
 
				+            background-color: white;
			
 
				+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
			
 
				+            border-radius: 8px;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .login-header {
			
 
				+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
			
 
				+            color: white;
			
 
				+            padding: 20px;
			
 
				+            text-align: center;
			
 
				+        }
			
 
				+        
			
 
				+        .input-group {
			
 
				+            position: relative;
			
 
				+            margin-bottom: 24px;
			
 
				+        }
			
 
				+        
			
 
				+        .input-group input {
			
 
				+            width: 100%;
			
 
				+            padding: 12px 16px;
			
 
				+            border: 1px solid #ddd;
			
 
				+            border-radius: 4px;
			
 
				+            font-size: 16px;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+        
			
 
				+        .input-group input:focus {
			
 
				+            border-color: var(--primary-color);
			
 
				+            box-shadow: 0 0 0 2px var(--primary-light);
			
 
				+            outline: none;
			
 
				+        }
			
 
				+        
			
 
				+        .input-group label {
			
 
				+            position: absolute;
			
 
				+            left: 16px;
			
 
				+            top: 12px;
			
 
				+            color: #999;
			
 
				+            pointer-events: none;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+        
			
 
				+        .input-group input:focus + label,
			
 
				+        .input-group input:not(:placeholder-shown) + label {
			
 
				+            transform: translateY(-24px);
			
 
				+            font-size: 12px;
			
 
				+            color: var(--primary-color);
			
 
				+            background-color: white;
			
 
				+            padding: 0 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .login-btn {
			
 
				+            width: 100%;
			
 
				+            padding: 12px;
			
 
				+            background-color: var(--primary-color);
			
 
				+            color: white;
			
 
				+            border: none;
			
 
				+            border-radius: 4px;
			
 
				+            font-size: 16px;
			
 
				+            font-weight: 500;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+        
			
 
				+        .login-btn:hover {
			
 
				+            background-color: var(--primary-dark);
			
 
				+        }
			
 
				+        
			
 
				+        .bg-decoration {
			
 
				+            position: absolute;
			
 
				+            z-index: -1;
			
 
				+        }
			
 
				+        
			
 
				+        .bg-circle-1 {
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            background-color: rgba(76, 175, 80, 0.05);
			
 
				+            border-radius: 50%;
			
 
				+            top: -100px;
			
 
				+            left: -100px;
			
 
				+        }
			
 
				+        
			
 
				+        .bg-circle-2 {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background-color: rgba(139, 195, 74, 0.05);
			
 
				+            border-radius: 50%;
			
 
				+            bottom: -50px;
			
 
				+            right: -50px;
			
 
				+        }
			
 
				+        
			
 
				+        .login-image {
			
 
				+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,80 C40,70 60,90 80,80 L80,20 C60,10 40,30 20,20 Z" fill="%234CAF5033"/><path d="M30,70 C45,65 55,75 70,70 L70,30 C55,25 45,35 30,30 Z" fill="%234CAF5022"/><circle cx="50" cy="50" r="10" fill="%234CAF5044"/></svg>');
			
 
				+            background-size: cover;
			
 
				+            background-position: center;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative">
			
 
				+        <div class="bg-decoration bg-circle-1"></div>
			
 
				+        <div class="bg-decoration bg-circle-2"></div>
			
 
				+        
			
 
				+        <div class="login-container max-w-md w-full mx-auto">
			
 
				+            <div class="login-header">
			
 
				+                <h2 class="text-2xl font-bold">爱智农智慧农业平台</h2>
			
 
				+                <p class="mt-2 text-sm opacity-80">科技赋能农业，智慧创造未来</p>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="flex">
			
 
				+                <div class="w-full p-6">
			
 
				+                    <h3 class="text-xl font-medium text-center mb-6">账号登录</h3>
			
 
				+                    
			
 
				+                    <form id="loginForm">
			
 
				+                        <div class="input-group">
			
 
				+                            <input type="text" id="username" placeholder=" " value="admin">
			
 
				+                            <label for="username">用户名</label>
			
 
				+                        </div>
			
 
				+                        
			
 
				+                        <div class="input-group">
			
 
				+                            <input type="password" id="password" placeholder=" " value="123456">
			
 
				+                            <label for="password">密码</label>
			
 
				+                        </div>
			
 
				+                        
			
 
				+                        <div class="flex items-center justify-between mb-6">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <input id="remember" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
			
 
				+                                <label for="remember" class="ml-2 block text-sm text-gray-600">记住我</label>
			
 
				+                            </div>
			
 
				+                            <a href="#" class="text-sm text-green-600 hover:text-green-800">忘记密码?</a>
			
 
				+                        </div>
			
 
				+                        
			
 
				+                        <button type="submit" class="login-btn">登 录</button>
			
 
				+                    </form>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="px-6 pb-6 text-center">
			
 
				+                <p class="text-sm text-gray-500">© 2023 爱智农智慧农业平台 版权所有</p>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.getElementById('loginForm').addEventListener('submit', function(e) {
			
 
				+            e.preventDefault();
			
 
				+            
			
 
				+            const username = document.getElementById('username').value;
			
 
				+            const password = document.getElementById('password').value;
			
 
				+            
			
 
				+            // 简单的前端验证
			
 
				+            if (username === 'admin' && password === '123456') {
			
 
				+                // 登录成功，跳转到主页
			
 
				+                window.location.href = 'index.html';
			
 
				+            } else {
			
 
				+                alert('用户名或密码错误，请使用默认账号：admin / 123456');
			
 
				+            }
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/dashboard.html
+++ b/pages/dashboard.html
@@ -0,0 +1,371 @@
 
				+<!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">
			
 
				+    <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;
			
 
				+        }
			
 
				+        
			
 
				+        .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);
			
 
				+            transform: translateY(-2px);
			
 
				+        }
			
 
				+        
			
 
				+        .stat-card {
			
 
				+            position: relative;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .stat-card .icon {
			
 
				+            position: absolute;
			
 
				+            right: 20px;
			
 
				+            top: 20px;
			
 
				+            font-size: 48px;
			
 
				+            opacity: 0.1;
			
 
				+        }
			
 
				+        
			
 
				+        .chart-container {
			
 
				+            height: 300px;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        
			
 
				+        .weather-card {
			
 
				+            background: linear-gradient(135deg, #4CAF50, #2E7D32);
			
 
				+            color: white;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="p-6">
			
 
				+        <div class="mb-6">
			
 
				+            <h1 class="text-2xl font-bold mb-2">智慧农业概览</h1>
			
 
				+            <p class="text-gray-500">欢迎回来，管理员！今天是 <span id="current-date"></span></p>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 统计卡片 -->
			
 
				+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
			
 
				+            <div class="card stat-card p-6">
			
 
				+                <div class="icon">🌱</div>
			
 
				+                <h3 class="text-gray-500 mb-2">种植面积</h3>
			
 
				+                <div class="text-3xl font-bold">2,560<span class="text-lg ml-1">亩</span></div>
			
 
				+                <div class="text-green-500 mt-2">↑ 5.2% 较上月</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card stat-card p-6">
			
 
				+                <div class="icon">🚜</div>
			
 
				+                <h3 class="text-gray-500 mb-2">农机设备</h3>
			
 
				+                <div class="text-3xl font-bold">128<span class="text-lg ml-1">台</span></div>
			
 
				+                <div class="text-green-500 mt-2">↑ 3.1% 较上月</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card stat-card p-6">
			
 
				+                <div class="icon">👨‍🌾</div>
			
 
				+                <h3 class="text-gray-500 mb-2">农事人员</h3>
			
 
				+                <div class="text-3xl font-bold">86<span class="text-lg ml-1">人</span></div>
			
 
				+                <div class="text-gray-500 mt-2">持平 较上月</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card stat-card p-6">
			
 
				+                <div class="icon">📊</div>
			
 
				+                <h3 class="text-gray-500 mb-2">农作产量</h3>
			
 
				+                <div class="text-3xl font-bold">1,850<span class="text-lg ml-1">吨</span></div>
			
 
				+                <div class="text-green-500 mt-2">↑ 7.8% 较上年同期</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 天气和告警 -->
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
			
 
				+            <div class="card weather-card p-6">
			
 
				+                <div class="flex justify-between items-center mb-4">
			
 
				+                    <h3 class="font-bold">今日天气</h3>
			
 
				+                    <span>晴朗</span>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="flex items-center justify-between">
			
 
				+                    <div class="text-4xl font-bold">26°C</div>
			
 
				+                    <div class="text-5xl">☀️</div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="mt-4 grid grid-cols-4 gap-2 text-center">
			
 
				+                    <div>
			
 
				+                        <div class="text-xs opacity-80">湿度</div>
			
 
				+                        <div>65%</div>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                        <div class="text-xs opacity-80">风速</div>
			
 
				+                        <div>3km/h</div>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                        <div class="text-xs opacity-80">气压</div>
			
 
				+                        <div>1013hPa</div>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                        <div class="text-xs opacity-80">降水</div>
			
 
				+                        <div>0mm</div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card p-6 col-span-2">
			
 
				+                <h3 class="font-bold mb-4">最近告警</h3>
			
 
				+                <div class="overflow-x-auto">
			
 
				+                    <table class="min-w-full">
			
 
				+                        <thead>
			
 
				+                            <tr class="border-b">
			
 
				+                                <th class="text-left pb-2">类型</th>
			
 
				+                                <th class="text-left pb-2">位置</th>
			
 
				+                                <th class="text-left pb-2">时间</th>
			
 
				+                                <th class="text-left pb-2">状态</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="border-b">
			
 
				+                                <td class="py-2"><span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">设备故障</span></td>
			
 
				+                                <td>东区3号地块</td>
			
 
				+                                <td>10:25</td>
			
 
				+                                <td><span class="text-red-500">未处理</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="border-b">
			
 
				+                                <td class="py-2"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">土壤湿度</span></td>
			
 
				+                                <td>西区1号地块</td>
			
 
				+                                <td>09:12</td>
			
 
				+                                <td><span class="text-green-500">已处理</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="border-b">
			
 
				+                                <td class="py-2"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">水位预警</span></td>
			
 
				+                                <td>南区灌溉系统</td>
			
 
				+                                <td>昨天</td>
			
 
				+                                <td><span class="text-green-500">已处理</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td class="py-2"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">病虫害</span></td>
			
 
				+                                <td>北区2号地块</td>
			
 
				+                                <td>昨天</td>
			
 
				+                                <td><span class="text-green-500">已处理</span></td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 图表 -->
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
			
 
				+            <div class="card p-6">
			
 
				+                <h3 class="font-bold mb-4">作物分布</h3>
			
 
				+                <div id="cropDistribution" class="chart-container"></div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card p-6">
			
 
				+                <h3 class="font-bold mb-4">月度产量趋势</h3>
			
 
				+                <div id="yieldTrend" class="chart-container"></div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 农事进度 -->
			
 
				+        <div class="card p-6">
			
 
				+            <h3 class="font-bold mb-4">农事进度</h3>
			
 
				+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
			
 
				+                <div>
			
 
				+                    <div class="flex justify-between mb-2">
			
 
				+                        <span>水稻种植</span>
			
 
				+                        <span class="text-green-500">75%</span>
			
 
				+                    </div>
			
 
				+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
			
 
				+                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div>
			
 
				+                    <div class="flex justify-between mb-2">
			
 
				+                        <span>小麦收割</span>
			
 
				+                        <span class="text-green-500">90%</span>
			
 
				+                    </div>
			
 
				+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
			
 
				+                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 90%"></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div>
			
 
				+                    <div class="flex justify-between mb-2">
			
 
				+                        <span>玉米播种</span>
			
 
				+                        <span class="text-green-500">45%</span>
			
 
				+                    </div>
			
 
				+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
			
 
				+                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 45%"></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div>
			
 
				+                    <div class="flex justify-between mb-2">
			
 
				+                        <span>果树修剪</span>
			
 
				+                        <span class="text-green-500">60%</span>
			
 
				+                    </div>
			
 
				+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
			
 
				+                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%"></div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 设置当前日期
			
 
				+        const now = new Date();
			
 
				+        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
			
 
				+        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
			
 
				+        
			
 
				+        // 作物分布饼图
			
 
				+        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',
			
 
				+                data: ['水稻', '小麦', '玉米', '蔬菜', '果树', '其他']
			
 
				+            },
			
 
				+            series: [
			
 
				+                {
			
 
				+                    name: '作物分布',
			
 
				+                    type: 'pie',
			
 
				+                    radius: ['40%', '70%'],
			
 
				+                    avoidLabelOverlap: false,
			
 
				+                    itemStyle: {
			
 
				+                        borderRadius: 10,
			
 
				+                        borderColor: '#fff',
			
 
				+                        borderWidth: 2
			
 
				+                    },
			
 
				+                    label: {
			
 
				+                        show: false,
			
 
				+                        position: 'center'
			
 
				+                    },
			
 
				+                    emphasis: {
			
 
				+                        label: {
			
 
				+                            show: true,
			
 
				+                            fontSize: '18',
			
 
				+                            fontWeight: 'bold'
			
 
				+                        }
			
 
				+                    },
			
 
				+                    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: ['去年产量', '今年产量']
			
 
				+            },
			
 
				+            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'
			
 
				+            },
			
 
				+            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, [
			
 
				+                            {
			
 
				+                                offset: 0,
			
 
				+                                color: 'rgba(128, 255, 165, 0.7)'
			
 
				+                            },
			
 
				+                            {
			
 
				+                                offset: 1,
			
 
				+                                color: 'rgba(1, 191, 236, 0.1)'
			
 
				+                            }
			
 
				+                        ])
			
 
				+                    },
			
 
				+                    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, [
			
 
				+                            {
			
 
				+                                offset: 0,
			
 
				+                                color: 'rgba(0, 221, 255, 0.7)'
			
 
				+                            },
			
 
				+                            {
			
 
				+                                offset: 1,
			
 
				+                                color: 'rgba(77, 119, 255, 0.1)'
			
 
				+                            }
			
 
				+                        ])
			
 
				+                    },
			
 
				+                    emphasis: {
			
 
				+                        focus: 'series'
			
 
				+                    }
			
 
				+                }
			
 
				+            ]
			
 
				+        });
			
 
				+        
			
 
				+        // 响应式调整图表大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            cropDistributionChart.resize();
			
 
				+            yieldTrendChart.resize();
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/device-alarm.html
+++ b/pages/device-alarm.html
@@ -0,0 +1,720 @@
 
				+<!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;
			
 
				+            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 {
			
 
				+            overflow-x: auto;
			
 
				+        }
			
 
				+        
			
 
				+        table {
			
 
				+            width: 100%;
			
 
				+            border-collapse: collapse;
			
 
				+        }
			
 
				+        
			
 
				+        th {
			
 
				+            background-color: #f9fafb;
			
 
				+            padding: 12px 16px;
			
 
				+            text-align: left;
			
 
				+            font-weight: 500;
			
 
				+            color: #6b7280;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        td {
			
 
				+            padding: 12px 16px;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        tr:hover {
			
 
				+            background-color: #f9fafb;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+    </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>
			
 
				+                
			
 
				+                <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">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>告警ID</th>
			
 
				+                            <th>告警等级</th>
			
 
				+                            <th>设备名称</th>
			
 
				+                            <th>设备类型</th>
			
 
				+                            <th>告警内容</th>
			
 
				+                            <th>告警时间</th>
			
 
				+                            <th>处理状态</th>
			
 
				+                            <th>处理人</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>ALM-20230001</td>
			
 
				+                            <td><span class="badge badge-danger">紧急</span></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>
			
 
				+                                <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>摄像设备</td>
			
 
				+                            <td>信号弱，视频画面不稳定</td>
			
 
				+                            <td>2023-05-15 09:18:42</td>
			
 
				+                            <td><span class="badge badge-warning">处理中</span></td>
			
 
				+                            <td>张三</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>传感器</td>
			
 
				+                            <td>水位超过预警线，可能发生溢出</td>
			
 
				+                            <td>2023-05-15 08:45:20</td>
			
 
				+                            <td><span class="badge badge-success">已处理</span></td>
			
 
				+                            <td>李四</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>气象设备</td>
			
 
				+                            <td>湿度传感器异常，读数不稳定</td>
			
 
				+                            <td>2023-05-14 17:32:15</td>
			
 
				+                            <td><span class="badge badge-danger">未处理</span></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>控制器</td>
			
 
				+                            <td>设备需要例行维护检查</td>
			
 
				+                            <td>2023-05-14 14:10:08</td>
			
 
				+                            <td><span class="badge badge-success">已处理</span></td>
			
 
				+                            <td>王五</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() {
			
 
				+            // 告警详情弹窗
			
 
				+            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> 
			
--- a/pages/device-management-content.html
+++ b/pages/device-management-content.html
@@ -0,0 +1,463 @@
 
				+<!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>
			
 
				+        :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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: auto; overflow-y: auto; overflow-x: hidden;
			
 
				+            min-height: 100%;
			
 
				+            overflow-y: auto;
			
 
				+            overflow-x: hidden;
			
 
				+            padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */
			
 
				+        }
			
 
				+        
			
 
				+        /* 内容页面框架 */
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            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;
			
 
				+        }
			
 
				+        
			
 
				+        .page-container {
			
 
				+            padding: 20px;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
			
 
				+            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;
			
 
				+        }
			
 
				+        
			
 
				+        #addDeviceBtn, 
			
 
				+        #importBtn,
			
 
				+        #exportBtn {
			
 
				+            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);
			
 
				+        }
			
 
				+        
			
 
				+        .table-container {
			
 
				+            overflow-x: auto;
			
 
				+        }
			
 
				+        
			
 
				+        table {
			
 
				+            width: 100%;
			
 
				+            border-collapse: collapse;
			
 
				+        }
			
 
				+        
			
 
				+        th {
			
 
				+            background-color: #f9fafb;
			
 
				+            padding: 12px 16px;
			
 
				+            text-align: left;
			
 
				+            font-weight: 500;
			
 
				+            color: #6b7280;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        td {
			
 
				+            padding: 12px 16px;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        tr:hover {
			
 
				+            background-color: #f9fafb;
			
 
				+        }
			
 
				+        
			
 
				+        .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-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;
			
 
				+        }
			
 
				+        
			
 
				+        .form-group {
			
 
				+            margin-bottom: 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .form-label {
			
 
				+            display: block;
			
 
				+            margin-bottom: 4px;
			
 
				+            font-weight: 500;
			
 
				+        }
			
 
				+        
			
 
				+        .form-input {
			
 
				+            width: 100%;
			
 
				+            padding: 8px 12px;
			
 
				+            border: 1px solid #d1d5db;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .form-input:focus {
			
 
				+            outline: none;
			
 
				+            border-color: #4CAF50;
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .grid-2 {
			
 
				+            display: grid;
			
 
				+            grid-template-columns: 1fr 1fr;
			
 
				+            gap: 16px;
			
 
				+        }
			
 
				+    </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-primary" id="addDeviceBtn">
			
 
				+                    <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                    新增设备
			
 
				+                </button>
			
 
				+                <button class="btn btn-default" id="importBtn">
			
 
				+                    <i class="iconfont icon-import btn-icon"></i>
			
 
				+                    导入
			
 
				+                </button>
			
 
				+                <button class="btn btn-default" id="exportBtn">
			
 
				+                    <i class="iconfont icon-export 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="sensor">传感器</option>
			
 
				+                        <option value="camera">摄像头</option>
			
 
				+                        <option value="controller">控制器</option>
			
 
				+                        <option value="weather">气象设备</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="modal-overlay" id="deviceModal">
			
 
				+            // ... existing code ...
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 监听iframe加载完成
			
 
				+        document.getElementById('content-frame').onload = function() {
			
 
				+            // 确保iframe高度铺满
			
 
				+            this.style.height = window.innerHeight + 'px';
			
 
				+        };
			
 
				+        
			
 
				+        // 页面大小变化时调整iframe大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/pages/device-management.html
+++ b/pages/device-management.html
@@ -0,0 +1,85 @@
 
				+<!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>
			
 
				+        :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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100vh;
			
 
				+            width: 100vw;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        /* 内容页面框架 */
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            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;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 使用iframe来完全隔离和控制页面内容 -->
			
 
				+    <iframe id="content-frame" src="device-management-content.html" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="eager" scrolling="auto" frameborder="0" allowfullscreen></iframe>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 监听iframe加载完成
			
 
				+        document.getElementById('content-frame').onload = function() {
			
 
				+            // 确保iframe高度铺满
			
 
				+            this.style.height = window.innerHeight + 'px';
			
 
				+        };
			
 
				+        
			
 
				+        // 页面大小变化时调整iframe大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/pages/device-monitor-content.html
+++ b/pages/device-monitor-content.html
@@ -0,0 +1,816 @@
 
				+<!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> 
			
--- a/pages/device-monitor.html
+++ b/pages/device-monitor.html
@@ -0,0 +1,85 @@
 
				+<!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">
			
 
				+    <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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100vh;
			
 
				+            width: 100vw;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        /* 内容页面框架 */
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            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;
			
 
				+        }
			
 
				+    </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>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 监听iframe加载完成
			
 
				+        document.getElementById('content-frame').onload = function() {
			
 
				+            // 确保iframe高度铺满
			
 
				+            this.style.height = window.innerHeight + 'px';
			
 
				+        };
			
 
				+        
			
 
				+        // 页面大小变化时调整iframe大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/dict-management.html
+++ b/pages/dict-management.html
@@ -0,0 +1,481 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addDictBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增字典
			
 
				+            </button>
			
 
				+        </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="1">启用</option>
			
 
				+                        <option value="0">禁用</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			
 
				+            <!-- 左侧字典类型列表 -->
			
 
				+            <div class="card">
			
 
				+                <div class="flex justify-between items-center border-b p-4">
			
 
				+                    <h2 class="font-medium">字典类型</h2>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="table-container">
			
 
				+                    <table>
			
 
				+                        <thead>
			
 
				+                            <tr>
			
 
				+                                <th>字典名称</th>
			
 
				+                                <th>字典编码</th>
			
 
				+                                <th>状态</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="dict-type-row active" data-id="1">
			
 
				+                                <td>用户性别</td>
			
 
				+                                <td>sys_user_sex</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="2">
			
 
				+                                <td>菜单状态</td>
			
 
				+                                <td>sys_menu_status</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="3">
			
 
				+                                <td>系统开关</td>
			
 
				+                                <td>sys_normal_disable</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="4">
			
 
				+                                <td>任务状态</td>
			
 
				+                                <td>sys_job_status</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="5">
			
 
				+                                <td>任务分组</td>
			
 
				+                                <td>sys_job_group</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="6">
			
 
				+                                <td>通知类型</td>
			
 
				+                                <td>sys_notice_type</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="7">
			
 
				+                                <td>通知状态</td>
			
 
				+                                <td>sys_notice_status</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="8">
			
 
				+                                <td>作业状态</td>
			
 
				+                                <td>farm_task_status</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="9">
			
 
				+                                <td>设备类型</td>
			
 
				+                                <td>device_type</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                            </tr>
			
 
				+                            <tr class="dict-type-row" data-id="10">
			
 
				+                                <td>作物类型</td>
			
 
				+                                <td>crop_type</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></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">10</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">
			
 
				+                            <i class="iconfont icon-right"></i>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 右侧字典数据列表 -->
			
 
				+            <div class="card lg:col-span-2">
			
 
				+                <div class="flex justify-between items-center border-b p-4">
			
 
				+                    <h2 class="font-medium">字典数据 - 用户性别</h2>
			
 
				+                    <button class="btn btn-primary" id="addDictDataBtn">
			
 
				+                        <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                        新增字典数据
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="table-container">
			
 
				+                    <table>
			
 
				+                        <thead>
			
 
				+                            <tr>
			
 
				+                                <th>字典标签</th>
			
 
				+                                <th>字典键值</th>
			
 
				+                                <th>字典排序</th>
			
 
				+                                <th>状态</th>
			
 
				+                                <th>操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr>
			
 
				+                                <td>男</td>
			
 
				+                                <td>1</td>
			
 
				+                                <td>1</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                                <td>
			
 
				+                                    <div class="flex gap-2">
			
 
				+                                        <button class="btn btn-default btn-sm edit-data-btn" data-id="1">
			
 
				+                                            <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                            编辑
			
 
				+                                        </button>
			
 
				+                                        <button class="btn btn-danger btn-sm">
			
 
				+                                            <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                            删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>女</td>
			
 
				+                                <td>2</td>
			
 
				+                                <td>2</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                                <td>
			
 
				+                                    <div class="flex gap-2">
			
 
				+                                        <button class="btn btn-default btn-sm edit-data-btn" data-id="2">
			
 
				+                                            <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                            编辑
			
 
				+                                        </button>
			
 
				+                                        <button class="btn btn-danger btn-sm">
			
 
				+                                            <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                            删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>未知</td>
			
 
				+                                <td>0</td>
			
 
				+                                <td>3</td>
			
 
				+                                <td><span class="badge badge-success">启用</span></td>
			
 
				+                                <td>
			
 
				+                                    <div class="flex gap-2">
			
 
				+                                        <button class="btn btn-default btn-sm edit-data-btn" data-id="3">
			
 
				+                                            <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                            编辑
			
 
				+                                        </button>
			
 
				+                                        <button class="btn btn-danger btn-sm">
			
 
				+                                            <i class="iconfont icon-delete 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">3</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">
			
 
				+                            <i class="iconfont icon-right"></i>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 字典类型表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="dictModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="dictModalTitle">新增字典</h3>
			
 
				+                <div class="modal-close" id="closeDictModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="dictForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictName">字典名称</label>
			
 
				+                        <input type="text" id="dictName" class="form-input" placeholder="请输入字典名称">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictCode">字典编码</label>
			
 
				+                        <input type="text" id="dictCode" class="form-input" placeholder="请输入字典编码">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictDesc">字典描述</label>
			
 
				+                        <textarea id="dictDesc" class="form-input" rows="3" placeholder="请输入字典描述"></textarea>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="dictStatus" value="1" checked class="mr-2">
			
 
				+                                启用
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="dictStatus" value="0" class="mr-2">
			
 
				+                                禁用
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelDictBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveDictBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 字典数据表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="dictDataModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="dictDataModalTitle">新增字典数据</h3>
			
 
				+                <div class="modal-close" id="closeDictDataModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="dictDataForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictType">字典类型</label>
			
 
				+                        <input type="text" id="dictType" class="form-input" value="用户性别" readonly>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictLabel">字典标签</label>
			
 
				+                        <input type="text" id="dictLabel" class="form-input" placeholder="请输入字典标签">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictValue">字典键值</label>
			
 
				+                        <input type="text" id="dictValue" class="form-input" placeholder="请输入字典键值">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="dictSort">字典排序</label>
			
 
				+                        <input type="number" id="dictSort" class="form-input" placeholder="请输入字典排序" value="1">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="dataStatus" value="1" checked class="mr-2">
			
 
				+                                启用
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="dataStatus" value="0" class="mr-2">
			
 
				+                                禁用
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="remark">备注</label>
			
 
				+                        <textarea id="remark" class="form-input" rows="2" placeholder="请输入备注"></textarea>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelDataBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveDataBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 字典类型行点击事件
			
 
				+            const dictTypeRows = document.querySelectorAll('.dict-type-row');
			
 
				+            
			
 
				+            dictTypeRows.forEach(row => {
			
 
				+                row.addEventListener('click', function() {
			
 
				+                    // 移除其他行的活动状态
			
 
				+                    dictTypeRows.forEach(r => r.classList.remove('active'));
			
 
				+                    
			
 
				+                    // 添加当前行的活动状态
			
 
				+                    this.classList.add('active');
			
 
				+                    
			
 
				+                    // 更新右侧标题
			
 
				+                    const dictName = this.querySelector('td:first-child').textContent;
			
 
				+                    document.querySelector('.card.lg\\:col-span-2 h2').textContent = `字典数据 - ${dictName}`;
			
 
				+                    
			
 
				+                    // 更新字典数据表单中的字典类型
			
 
				+                    document.getElementById('dictType').value = dictName;
			
 
				+                    
			
 
				+                    // 实际应用中，这里应该发送请求获取对应的字典数据
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 字典类型表单弹窗
			
 
				+            const dictModal = document.getElementById('dictModal');
			
 
				+            const dictModalTitle = document.getElementById('dictModalTitle');
			
 
				+            const addDictBtn = document.getElementById('addDictBtn');
			
 
				+            const closeDictModal = document.getElementById('closeDictModal');
			
 
				+            const cancelDictBtn = document.getElementById('cancelDictBtn');
			
 
				+            const saveDictBtn = document.getElementById('saveDictBtn');
			
 
				+            
			
 
				+            // 打开新增字典弹窗
			
 
				+            addDictBtn.addEventListener('click', function() {
			
 
				+                dictModalTitle.textContent = '新增字典';
			
 
				+                document.getElementById('dictForm').reset();
			
 
				+                dictModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭字典弹窗
			
 
				+            function closeDictModalFunc() {
			
 
				+                dictModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeDictModal.addEventListener('click', closeDictModalFunc);
			
 
				+            cancelDictBtn.addEventListener('click', closeDictModalFunc);
			
 
				+            
			
 
				+            // 保存字典
			
 
				+            saveDictBtn.addEventListener('click', function() {
			
 
				+                alert('字典保存成功！');
			
 
				+                closeDictModalFunc();
			
 
				+            });
			
 
				+            
			
 
				+            // 字典数据表单弹窗
			
 
				+            const dictDataModal = document.getElementById('dictDataModal');
			
 
				+            const dictDataModalTitle = document.getElementById('dictDataModalTitle');
			
 
				+            const addDictDataBtn = document.getElementById('addDictDataBtn');
			
 
				+            const closeDictDataModal = document.getElementById('closeDictDataModal');
			
 
				+            const cancelDataBtn = document.getElementById('cancelDataBtn');
			
 
				+            const saveDataBtn = document.getElementById('saveDataBtn');
			
 
				+            const editDataBtns = document.querySelectorAll('.edit-data-btn');
			
 
				+            
			
 
				+            // 打开新增字典数据弹窗
			
 
				+            addDictDataBtn.addEventListener('click', function() {
			
 
				+                dictDataModalTitle.textContent = '新增字典数据';
			
 
				+                document.getElementById('dictDataForm').reset();
			
 
				+                
			
 
				+                // 设置字典类型为当前选中的字典类型
			
 
				+                const activeType = document.querySelector('.dict-type-row.active td:first-child').textContent;
			
 
				+                document.getElementById('dictType').value = activeType;
			
 
				+                
			
 
				+                dictDataModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑字典数据弹窗
			
 
				+            editDataBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const dataId = this.getAttribute('data-id');
			
 
				+                    dictDataModalTitle.textContent = '编辑字典数据';
			
 
				+                    
			
 
				+                    // 模拟获取字典数据
			
 
				+                    if (dataId === '1') {
			
 
				+                        document.getElementById('dictLabel').value = '男';
			
 
				+                        document.getElementById('dictValue').value = '1';
			
 
				+                        document.getElementById('dictSort').value = '1';
			
 
				+                        document.querySelector('input[name="dataStatus"][value="1"]').checked = true;
			
 
				+                        document.getElementById('remark').value = '男性用户';
			
 
				+                    }
			
 
				+                    
			
 
				+                    dictDataModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭字典数据弹窗
			
 
				+            function closeDictDataModalFunc() {
			
 
				+                dictDataModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeDictDataModal.addEventListener('click', closeDictDataModalFunc);
			
 
				+            cancelDataBtn.addEventListener('click', closeDictDataModalFunc);
			
 
				+            
			
 
				+            // 保存字典数据
			
 
				+            saveDataBtn.addEventListener('click', function() {
			
 
				+                alert('字典数据保存成功！');
			
 
				+                closeDictDataModalFunc();
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === dictModal) {
			
 
				+                    closeDictModalFunc();
			
 
				+                }
			
 
				+                if (e.target === dictDataModal) {
			
 
				+                    closeDictDataModalFunc();
			
 
				+                }
			
 
				+            });
			
 
				+            
			
 
				+            // 添加表格行的悬停效果
			
 
				+            const tableRows = document.querySelectorAll('tbody tr');
			
 
				+            tableRows.forEach(row => {
			
 
				+                row.classList.add('hover:bg-gray-50', 'cursor-pointer');
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/field-detail.html
+++ b/pages/field-detail.html
@@ -0,0 +1,935 @@
 
				+<!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;
			
 
				+        }
			
 
				+        
			
 
				+        .page-container {
			
 
				+            padding: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .card {
			
 
				+            background-color: white;
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			
 
				+        }
			
 
				+        
			
 
				+        .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-icon {
			
 
				+            margin-right: 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .tabs {
			
 
				+            display: flex;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        .tab {
			
 
				+            padding: 12px 20px;
			
 
				+            cursor: pointer;
			
 
				+            border-bottom: 2px solid transparent;
			
 
				+            font-weight: 500;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tab:hover {
			
 
				+            color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .tab.active {
			
 
				+            color: #4CAF50;
			
 
				+            border-bottom: 2px solid #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .tab-content {
			
 
				+            display: none;
			
 
				+            padding: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .tab-content.active {
			
 
				+            display: block;
			
 
				+        }
			
 
				+        
			
 
				+        .info-group {
			
 
				+            margin-bottom: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .info-label {
			
 
				+            color: #6b7280;
			
 
				+            margin-bottom: 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .info-value {
			
 
				+            font-weight: 500;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container {
			
 
				+            overflow-x: auto;
			
 
				+        }
			
 
				+        
			
 
				+        table {
			
 
				+            width: 100%;
			
 
				+            border-collapse: collapse;
			
 
				+        }
			
 
				+        
			
 
				+        th {
			
 
				+            background-color: #f9fafb;
			
 
				+            padding: 12px 16px;
			
 
				+            text-align: left;
			
 
				+            font-weight: 500;
			
 
				+            color: #6b7280;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        td {
			
 
				+            padding: 12px 16px;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        tr:hover {
			
 
				+            background-color: #f9fafb;
			
 
				+        }
			
 
				+        
			
 
				+        .device-item, .person-item {
			
 
				+            border: 1px solid #e5e7eb;
			
 
				+            border-radius: 8px;
			
 
				+            padding: 12px;
			
 
				+            margin-bottom: 12px;
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				+        }
			
 
				+        
			
 
				+        .device-item-bound, .person-item-bound {
			
 
				+            background-color: #f0fdf4;
			
 
				+            border-color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .map-container {
			
 
				+            height: 500px;
			
 
				+            width: 100%;
			
 
				+            position: relative;
			
 
				+            background-color: #eee;
			
 
				+            overflow: hidden;
			
 
				+            border-radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        .map-toolbar {
			
 
				+            position: absolute;
			
 
				+            top: 20px;
			
 
				+            left: 20px;
			
 
				+            background-color: white;
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
			
 
				+            padding: 10px;
			
 
				+            z-index: 10;
			
 
				+        }
			
 
				+        
			
 
				+        .map-tool {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            padding: 8px 12px;
			
 
				+            cursor: pointer;
			
 
				+            border-radius: 4px;
			
 
				+            margin-bottom: 8px;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .map-tool:hover {
			
 
				+            background-color: #f3f4f6;
			
 
				+        }
			
 
				+        
			
 
				+        .map-tool.active {
			
 
				+            background-color: #e8f5e9;
			
 
				+            color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .map-tool i {
			
 
				+            margin-right: 8px;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+
			
 
				+        .detail-card {
			
 
				+            background: #fff;
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			
 
				+            margin-bottom: 20px;
			
 
				+            padding: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .detail-grid {
			
 
				+            display: grid;
			
 
				+            grid-template-columns: repeat(4, 1fr);
			
 
				+            gap: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .detail-item {
			
 
				+            display: flex;
			
 
				+            flex-direction: column;
			
 
				+            gap: 8px;
			
 
				+        }
			
 
				+
			
 
				+        .detail-label {
			
 
				+            font-size: 13px;
			
 
				+            color: #64748b;
			
 
				+        }
			
 
				+
			
 
				+        .detail-value {
			
 
				+            font-size: 14px;
			
 
				+            color: #1e293b;
			
 
				+            font-weight: 500;
			
 
				+        }
			
 
				+
			
 
				+        .count-badge {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            gap: 4px;
			
 
				+            font-size: 13px;
			
 
				+            color: #475569;
			
 
				+            padding: 2px 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .count-badge i {
			
 
				+            color: #64748b;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+
			
 
				+        .btn-sm {
			
 
				+            padding: 4px 12px;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+
			
 
				+        .btn-default.active {
			
 
				+            background-color: #f0fdf4;
			
 
				+            border-color: #4ade80;
			
 
				+            color: #16a34a;
			
 
				+        }
			
 
				+
			
 
				+        .search-input {
			
 
				+            min-width: 280px;
			
 
				+            padding: 8px 12px;
			
 
				+            padding-right: 36px;
			
 
				+            border: 2px solid #e5e7eb;
			
 
				+            border-radius: 6px;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+
			
 
				+        .search-input:focus {
			
 
				+            outline: none;
			
 
				+            border-color: #4CAF50;
			
 
				+            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
			
 
				+        }
			
 
				+
			
 
				+        .search-input::placeholder {
			
 
				+            color: #9ca3af;
			
 
				+        }
			
 
				+
			
 
				+        table {
			
 
				+            border-collapse: separate;
			
 
				+            border-spacing: 0;
			
 
				+        }
			
 
				+
			
 
				+        th {
			
 
				+            font-weight: 500;
			
 
				+            white-space: nowrap;
			
 
				+        }
			
 
				+
			
 
				+        td {
			
 
				+            white-space: nowrap;
			
 
				+        }
			
 
				+
			
 
				+        tbody tr:hover {
			
 
				+            background-color: #f8fafc;
			
 
				+        }
			
 
				+
			
 
				+        .btn-danger {
			
 
				+            background-color: #fee2e2;
			
 
				+            color: #dc2626;
			
 
				+            border: 1px solid #fecaca;
			
 
				+        }
			
 
				+
			
 
				+        .btn-danger:hover {
			
 
				+            background-color: #fecaca;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tabs {
			
 
				+            display: flex;
			
 
				+            gap: 1px;
			
 
				+            padding: 2px;
			
 
				+            background: #f3f4f6;
			
 
				+            border-radius: 8px;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tab {
			
 
				+            padding: 6px 16px;
			
 
				+            font-size: 14px;
			
 
				+            border-radius: 6px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+            background: transparent;
			
 
				+            border: none;
			
 
				+            color: #6b7280;
			
 
				+            position: relative;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            gap: 6px;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tab:hover {
			
 
				+            color: #4b5563;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tab.active {
			
 
				+            background: white;
			
 
				+            color: #4CAF50;
			
 
				+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			
 
				+        }
			
 
				+
			
 
				+        .filter-badge {
			
 
				+            padding: 2px 8px;
			
 
				+            font-size: 12px;
			
 
				+            border-radius: 10px;
			
 
				+            font-weight: 500;
			
 
				+            background: #f3f4f6;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tab.active .filter-badge {
			
 
				+            background: #ecfdf5;
			
 
				+            color: #059669;
			
 
				+        }
			
 
				+
			
 
				+        .filter-tab:not(.active) .filter-badge {
			
 
				+            background: #f3f4f6;
			
 
				+            color: #6b7280;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="page-container">
			
 
				+        <div class="flex justify-between items-center mb-6">
			
 
				+            <div class="flex items-center">
			
 
				+                <a href="field-management.html" class="mr-2">
			
 
				+                    <i class="iconfont icon-left"></i>
			
 
				+                </a>
			
 
				+                <h1 class="text-2xl font-bold">地块详情</h1>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="flex gap-2">
			
 
				+                <button class="btn btn-default" id="editBtn">
			
 
				+                    <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                    编辑
			
 
				+                </button>
			
 
				+                <button class="btn btn-default" id="refreshBtn">
			
 
				+                    <i class="iconfont icon-reload btn-icon"></i>
			
 
				+                    刷新
			
 
				+                </button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="card">
			
 
				+            <div class="tabs">
			
 
				+                <div class="tab active" data-tab="info">基本信息</div>
			
 
				+                <div class="tab" data-tab="device">设备绑定</div>
			
 
				+                <div class="tab" data-tab="person">人员绑定</div>
			
 
				+                <div class="tab" data-tab="map">区域绘制</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 基本信息 -->
			
 
				+            <div class="tab-content active" id="tab-info">
			
 
				+                <div class="grid grid-cols-1 gap-4">
			
 
				+                    <!-- 基础信息展示 -->
			
 
				+                    <div class="detail-card">
			
 
				+                        <div class="detail-grid">
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">地块编号</div>
			
 
				+                                <div class="detail-value" id="fieldId">FK20230001</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">地块名称</div>
			
 
				+                                <div class="detail-value" id="fieldName">东区水稻田A</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">所属农场</div>
			
 
				+                                <div class="detail-value">智慧农场一号</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">所属区域</div>
			
 
				+                                <div class="detail-value" id="fieldArea">东区</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">地块类型</div>
			
 
				+                                <div class="detail-value" id="fieldType">水田</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">面积(亩)</div>
			
 
				+                                <div class="detail-value" id="fieldSize">120</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">种植作物</div>
			
 
				+                                <div class="detail-value">水稻</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">土壤类型</div>
			
 
				+                                <div class="detail-value">黏土</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">灌溉方式</div>
			
 
				+                                <div class="detail-value">喷灌</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">使用状态</div>
			
 
				+                                <div class="detail-value">
			
 
				+                                    <span class="badge badge-success">
			
 
				+                                        <i class="iconfont icon-check-circle badge-icon"></i>使用中
			
 
				+                                    </span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">绑定设备</div>
			
 
				+                                <div class="detail-value">
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-device"></i>3
			
 
				+                                    </span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">绑定人员</div>
			
 
				+                                <div class="detail-value">
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-user"></i>2
			
 
				+                                    </span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">负责人</div>
			
 
				+                                <div class="detail-value">张三</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">创建时间</div>
			
 
				+                                <div class="detail-value" id="createTime">2023-05-15</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item">
			
 
				+                                <div class="detail-label">上次更新</div>
			
 
				+                                <div class="detail-value">2023-06-20</div>
			
 
				+                            </div>
			
 
				+                            <div class="detail-item col-span-4">
			
 
				+                                <div class="detail-label">地块描述</div>
			
 
				+                                <div class="detail-value" id="fieldDesc" style="white-space: pre-line; line-height: 1.5;">
			
 
				+                                    这是一块位于东区的水稻田，土壤肥沃，水源充足，适合种植水稻。年产量约为10000公斤，是农场的主要粮食生产区域。
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="info-group">
			
 
				+                        <div class="info-label">作物信息</div>
			
 
				+                        <div class="table-container mt-2">
			
 
				+                            <table>
			
 
				+                                <thead>
			
 
				+                                    <tr>
			
 
				+                                        <th>作物名称</th>
			
 
				+                                        <th>种植面积(亩)</th>
			
 
				+                                        <th>种植时间</th>
			
 
				+                                        <th>预计收获时间</th>
			
 
				+                                        <th>状态</th>
			
 
				+                                    </tr>
			
 
				+                                </thead>
			
 
				+                                <tbody>
			
 
				+                                    <tr>
			
 
				+                                        <td>水稻(早稻)</td>
			
 
				+                                        <td>120</td>
			
 
				+                                        <td>2023-02-15</td>
			
 
				+                                        <td>2023-06-20</td>
			
 
				+                                        <td><span class="badge badge-success">生长中</span></td>
			
 
				+                                    </tr>
			
 
				+                                </tbody>
			
 
				+                            </table>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 设备绑定 -->
			
 
				+            <div class="tab-content" id="tab-device">
			
 
				+                <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="filter-tabs">
			
 
				+                            <button class="filter-tab active" data-filter="bound" data-target="device-bound-list">
			
 
				+                                已绑定
			
 
				+                                <span class="filter-badge">3</span>
			
 
				+                            </button>
			
 
				+                            <button class="filter-tab" data-filter="unbound" data-target="device-unbound-list">
			
 
				+                                未绑定
			
 
				+                                <span class="filter-badge">8</span>
			
 
				+                            </button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="relative">
			
 
				+                        <input type="text" class="search-input" placeholder="搜索设备编号/名称">
			
 
				+                        <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div id="device-bound-list" class="bg-white rounded-lg overflow-hidden">
			
 
				+                    <table class="min-w-full">
			
 
				+                        <!-- 已绑定设备表格内容 -->
			
 
				+                        <thead>
			
 
				+                            <tr class="bg-gray-50">
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备编号</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备名称</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备类型</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">绑定时间</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="border-t border-gray-100">
			
 
				+                                <td class="px-4 py-3 text-sm">DEV001</td>
			
 
				+                                <td class="px-4 py-3 text-sm">土壤湿度传感器</td>
			
 
				+                                <td class="px-4 py-3 text-sm">传感器</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <span class="badge badge-success">在线</span>
			
 
				+                                </td>
			
 
				+                                <td class="px-4 py-3 text-sm">2023-05-15 10:30</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <button class="btn btn-sm btn-danger">解绑</button>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+
			
 
				+                <div id="device-unbound-list" class="bg-white rounded-lg overflow-hidden" style="display: none;">
			
 
				+                    <table class="min-w-full">
			
 
				+                        <!-- 未绑定设备表格内容 -->
			
 
				+                        <thead>
			
 
				+                            <tr class="bg-gray-50">
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备编号</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备名称</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备类型</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="border-t border-gray-100">
			
 
				+                                <td class="px-4 py-3 text-sm">DEV004</td>
			
 
				+                                <td class="px-4 py-3 text-sm">气象站</td>
			
 
				+                                <td class="px-4 py-3 text-sm">监测设备</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <span class="badge badge-success">在线</span>
			
 
				+                                </td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <button class="btn btn-sm btn-primary">绑定</button>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+
			
 
				+                <!-- 分页 -->
			
 
				+                <div class="flex justify-between items-center mt-4">
			
 
				+                    <div class="text-sm text-gray-600">
			
 
				+                        共 <span class="text-primary font-medium">11</span> 条记录
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center gap-2">
			
 
				+                        <button class="btn btn-default btn-sm" disabled>上一页</button>
			
 
				+                        <button class="btn btn-default btn-sm bg-primary text-white">1</button>
			
 
				+                        <button class="btn btn-default btn-sm">2</button>
			
 
				+                        <button class="btn btn-default btn-sm">下一页</button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 人员绑定 -->
			
 
				+            <div class="tab-content" id="tab-person">
			
 
				+                <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="filter-tabs">
			
 
				+                            <button class="filter-tab active" data-filter="bound" data-target="person-bound-list">
			
 
				+                                已绑定
			
 
				+                                <span class="filter-badge">2</span>
			
 
				+                            </button>
			
 
				+                            <button class="filter-tab" data-filter="unbound" data-target="person-unbound-list">
			
 
				+                                未绑定
			
 
				+                                <span class="filter-badge">6</span>
			
 
				+                            </button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="relative">
			
 
				+                        <input type="text" class="search-input" placeholder="搜索姓名/职位">
			
 
				+                        <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div id="person-bound-list" class="bg-white rounded-lg overflow-hidden">
			
 
				+                    <table class="min-w-full">
			
 
				+                        <!-- 已绑定人员表格内容 -->
			
 
				+                        <thead>
			
 
				+                            <tr class="bg-gray-50">
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">工号</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">姓名</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">职位</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">联系方式</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">绑定时间</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="border-t border-gray-100">
			
 
				+                                <td class="px-4 py-3 text-sm">EMP001</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <div class="flex items-center gap-2">
			
 
				+                                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
			
 
				+                                            <i class="iconfont icon-user text-green-600"></i>
			
 
				+                                        </div>
			
 
				+                                        <span>张三</span>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                                <td class="px-4 py-3 text-sm">农场技术员</td>
			
 
				+                                <td class="px-4 py-3 text-sm">13800138000</td>
			
 
				+                                <td class="px-4 py-3 text-sm">2023-05-15 10:30</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <button class="btn btn-sm btn-danger">解绑</button>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+
			
 
				+                <div id="person-unbound-list" class="bg-white rounded-lg overflow-hidden" style="display: none;">
			
 
				+                    <table class="min-w-full">
			
 
				+                        <!-- 未绑定人员表格内容 -->
			
 
				+                        <thead>
			
 
				+                            <tr class="bg-gray-50">
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">工号</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">姓名</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">职位</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">联系方式</th>
			
 
				+                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr class="border-t border-gray-100">
			
 
				+                                <td class="px-4 py-3 text-sm">EMP004</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <div class="flex items-center gap-2">
			
 
				+                                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
			
 
				+                                            <i class="iconfont icon-user text-gray-600"></i>
			
 
				+                                        </div>
			
 
				+                                        <span>李四</span>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                                <td class="px-4 py-3 text-sm">农场工人</td>
			
 
				+                                <td class="px-4 py-3 text-sm">13900139000</td>
			
 
				+                                <td class="px-4 py-3 text-sm">
			
 
				+                                    <button class="btn btn-sm btn-primary">绑定</button>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+
			
 
				+                <!-- 分页 -->
			
 
				+                <div class="flex justify-between items-center mt-4">
			
 
				+                    <div class="text-sm text-gray-600">
			
 
				+                        共 <span class="text-primary font-medium">8</span> 条记录
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center gap-2">
			
 
				+                        <button class="btn btn-default btn-sm" disabled>上一页</button>
			
 
				+                        <button class="btn btn-default btn-sm bg-primary text-white">1</button>
			
 
				+                        <button class="btn btn-default btn-sm">2</button>
			
 
				+                        <button class="btn btn-default btn-sm">下一页</button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 区域绘制 -->
			
 
				+            <div class="tab-content" id="tab-map">
			
 
				+                <div class="flex justify-between items-center mb-4">
			
 
				+                    <h3 class="text-lg font-medium">地块区域绘制</h3>
			
 
				+                    <button class="btn btn-primary" id="saveMapBtn">
			
 
				+                        <i class="iconfont icon-save btn-icon"></i>
			
 
				+                        保存绘制区域
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="map-container">
			
 
				+                    <!-- 地图工具栏 -->
			
 
				+                    <div class="map-toolbar">
			
 
				+                        <div class="map-tool active">
			
 
				+                            <i class="iconfont icon-select"></i>
			
 
				+                            <span>选择</span>
			
 
				+                        </div>
			
 
				+                        <div class="map-tool">
			
 
				+                            <i class="iconfont icon-edit"></i>
			
 
				+                            <span>绘制区域</span>
			
 
				+                        </div>
			
 
				+                        <div class="map-tool">
			
 
				+                            <i class="iconfont icon-edit-square"></i>
			
 
				+                            <span>编辑节点</span>
			
 
				+                        </div>
			
 
				+                        <div class="map-tool">
			
 
				+                            <i class="iconfont icon-delete"></i>
			
 
				+                            <span>删除</span>
			
 
				+                        </div>
			
 
				+                        <div class="map-tool">
			
 
				+                            <i class="iconfont icon-undo"></i>
			
 
				+                            <span>撤销</span>
			
 
				+                        </div>
			
 
				+                        <div class="map-tool">
			
 
				+                            <i class="iconfont icon-redo"></i>
			
 
				+                            <span>重做</span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 地图区域 (实际项目中这里会使用高德地图、百度地图等API) -->
			
 
				+                    <div class="w-full h-full flex items-center justify-center text-gray-400">
			
 
				+                        <div class="text-center">
			
 
				+                            <i class="iconfont icon-map text-6xl"></i>
			
 
				+                            <div class="mt-2">地图加载中...</div>
			
 
				+                            <div class="mt-2 text-sm">实际项目中这里将集成高德地图、百度地图等API</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="mt-4">
			
 
				+                    <div class="font-medium mb-2">地块坐标信息</div>
			
 
				+                    <div class="p-3 bg-gray-50 rounded-md text-sm font-mono">
			
 
				+                        {"type":"Polygon","coordinates":[[[120.12345,30.12345],[120.23456,30.12345],[120.23456,30.23456],[120.12345,30.23456],[120.12345,30.12345]]]}
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 获取URL参数
			
 
				+            const urlParams = new URLSearchParams(window.location.search);
			
 
				+            const fieldId = urlParams.get('id');
			
 
				+            const activeTab = urlParams.get('tab');
			
 
				+            
			
 
				+            // 切换Tab
			
 
				+            const tabs = document.querySelectorAll('.tab');
			
 
				+            const tabContents = document.querySelectorAll('.tab-content');
			
 
				+            
			
 
				+            // 如果URL中有指定的tab，则激活它
			
 
				+            if (activeTab) {
			
 
				+                tabs.forEach(tab => {
			
 
				+                    tab.classList.remove('active');
			
 
				+                    if (tab.getAttribute('data-tab') === activeTab) {
			
 
				+                        tab.classList.add('active');
			
 
				+                    }
			
 
				+                });
			
 
				+                
			
 
				+                tabContents.forEach(content => {
			
 
				+                    content.classList.remove('active');
			
 
				+                    if (content.id === 'tab-' + activeTab) {
			
 
				+                        content.classList.add('active');
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+            
			
 
				+            // Tab点击事件
			
 
				+            tabs.forEach(tab => {
			
 
				+                tab.addEventListener('click', function() {
			
 
				+                    const tabId = this.getAttribute('data-tab');
			
 
				+                    
			
 
				+                    // 更新URL参数但不刷新页面
			
 
				+                    const url = new URL(window.location);
			
 
				+                    url.searchParams.set('tab', tabId);
			
 
				+                    window.history.pushState({}, '', url);
			
 
				+                    
			
 
				+                    // 切换激活状态
			
 
				+                    tabs.forEach(t => t.classList.remove('active'));
			
 
				+                    this.classList.add('active');
			
 
				+                    
			
 
				+                    // 显示对应内容
			
 
				+                    tabContents.forEach(content => {
			
 
				+                        content.classList.remove('active');
			
 
				+                        if (content.id === 'tab-' + tabId) {
			
 
				+                            content.classList.add('active');
			
 
				+                        }
			
 
				+                    });
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 编辑按钮事件
			
 
				+            document.getElementById('editBtn').addEventListener('click', function() {
			
 
				+                // 跳转到地块管理页的编辑模态框
			
 
				+                window.location.href = `field-management-content.html?edit=${fieldId}`;
			
 
				+            });
			
 
				+            
			
 
				+            // 设备绑定保存按钮
			
 
				+            document.getElementById('saveDeviceBtn')?.addEventListener('click', function() {
			
 
				+                alert('设备绑定关系保存成功');
			
 
				+            });
			
 
				+            
			
 
				+            // 人员绑定保存按钮
			
 
				+            document.getElementById('savePersonBtn')?.addEventListener('click', function() {
			
 
				+                alert('人员绑定关系保存成功');
			
 
				+            });
			
 
				+            
			
 
				+            // 地图区域保存按钮
			
 
				+            document.getElementById('saveMapBtn').addEventListener('click', function() {
			
 
				+                alert('地块区域保存成功');
			
 
				+            });
			
 
				+            
			
 
				+            // 设备绑定/解绑按钮
			
 
				+            const deviceBindBtns = document.querySelectorAll('#tab-device .btn-primary');
			
 
				+            deviceBindBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const deviceItem = this.closest('.device-item');
			
 
				+                    deviceItem.classList.add('device-item-bound');
			
 
				+                    this.className = 'btn btn-sm btn-danger';
			
 
				+                    this.textContent = '解绑';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            const deviceUnbindBtns = document.querySelectorAll('#tab-device .btn-danger');
			
 
				+            deviceUnbindBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const deviceItem = this.closest('.device-item');
			
 
				+                    deviceItem.classList.remove('device-item-bound');
			
 
				+                    this.className = 'btn btn-sm btn-primary';
			
 
				+                    this.textContent = '绑定';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 人员绑定/解绑按钮
			
 
				+            const personBindBtns = document.querySelectorAll('#tab-person .btn-primary');
			
 
				+            personBindBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const personItem = this.closest('.person-item');
			
 
				+                    personItem.classList.add('person-item-bound');
			
 
				+                    this.className = 'btn btn-sm btn-danger';
			
 
				+                    this.textContent = '解绑';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            const personUnbindBtns = document.querySelectorAll('#tab-person .btn-danger');
			
 
				+            personUnbindBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const personItem = this.closest('.person-item');
			
 
				+                    personItem.classList.remove('person-item-bound');
			
 
				+                    this.className = 'btn btn-sm btn-primary';
			
 
				+                    this.textContent = '绑定';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 地图工具点击事件
			
 
				+            const mapTools = document.querySelectorAll('.map-tool');
			
 
				+            mapTools.forEach(tool => {
			
 
				+                tool.addEventListener('click', function() {
			
 
				+                    mapTools.forEach(t => t.classList.remove('active'));
			
 
				+                    this.classList.add('active');
			
 
				+                });
			
 
				+            });
			
 
				+
			
 
				+            // 绑定/未绑定切换功能
			
 
				+            function initFilterTabs(container) {
			
 
				+                const tabs = container.querySelectorAll('.filter-tab');
			
 
				+                tabs.forEach(tab => {
			
 
				+                    tab.addEventListener('click', function() {
			
 
				+                        // 移除所有tab的active状态
			
 
				+                        tabs.forEach(t => t.classList.remove('active'));
			
 
				+                        // 添加当前tab的active状态
			
 
				+                        this.classList.add('active');
			
 
				+                        
			
 
				+                        // 获取目标列表
			
 
				+                        const targetId = this.getAttribute('data-target');
			
 
				+                        const lists = container.closest('.tab-content').querySelectorAll('[id$="-list"]');
			
 
				+                        
			
 
				+                        // 隐藏所有列表
			
 
				+                        lists.forEach(list => list.style.display = 'none');
			
 
				+                        
			
 
				+                        // 显示目标列表
			
 
				+                        document.getElementById(targetId).style.display = 'block';
			
 
				+                    });
			
 
				+                });
			
 
				+            }
			
 
				+
			
 
				+            // 初始化设备和人员的过滤标签
			
 
				+            const deviceContent = document.getElementById('tab-device');
			
 
				+            const personContent = document.getElementById('tab-person');
			
 
				+            initFilterTabs(deviceContent);
			
 
				+            initFilterTabs(personContent);
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/field-edit.html
+++ b/pages/field-edit.html
@@ -0,0 +1,403 @@
 
				+<!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">
			
 
				+    <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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+
			
 
				+        body {
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+        }
			
 
				+
			
 
				+        .page-container {
			
 
				+            max-width: 1200px;
			
 
				+            margin: 0 auto;
			
 
				+            padding: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .page-header {
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				+            margin-bottom: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .page-title {
			
 
				+            font-size: 20px;
			
 
				+            font-weight: 600;
			
 
				+            color: var(--text-primary);
			
 
				+        }
			
 
				+
			
 
				+        .btn-back {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            padding: 8px 16px;
			
 
				+            color: #666;
			
 
				+            background: #fff;
			
 
				+            border: 1px solid #ddd;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+
			
 
				+        .btn-back:hover {
			
 
				+            color: var(--primary);
			
 
				+            border-color: var(--primary);
			
 
				+        }
			
 
				+
			
 
				+        .btn-back i {
			
 
				+            margin-right: 4px;
			
 
				+        }
			
 
				+
			
 
				+        .content-card {
			
 
				+            background: #fff;
			
 
				+            border-radius: var(--radius);
			
 
				+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			
 
				+            padding: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .form-grid {
			
 
				+            display: grid;
			
 
				+            grid-template-columns: repeat(2, 1fr);
			
 
				+            gap: 20px;
			
 
				+        }
			
 
				+
			
 
				+        .form-group {
			
 
				+            margin-bottom: 0;
			
 
				+        }
			
 
				+
			
 
				+        .form-label {
			
 
				+            display: block;
			
 
				+            margin-bottom: 8px;
			
 
				+            font-size: 14px;
			
 
				+            color: #333;
			
 
				+        }
			
 
				+
			
 
				+        .form-input {
			
 
				+            width: 100%;
			
 
				+            padding: 8px 12px;
			
 
				+            border: 1px solid #ddd;
			
 
				+            border-radius: 4px;
			
 
				+            font-size: 14px;
			
 
				+            transition: all 0.3s;
			
 
				+            height: 36px;
			
 
				+        }
			
 
				+
			
 
				+        .form-input:focus {
			
 
				+            border-color: var(--primary);
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
			
 
				+            outline: none;
			
 
				+        }
			
 
				+
			
 
				+        .required {
			
 
				+            color: #f44336;
			
 
				+            margin-left: 4px;
			
 
				+        }
			
 
				+
			
 
				+        .btn {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            padding: 8px 16px;
			
 
				+            font-size: 14px;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.3s;
			
 
				+            height: 36px;
			
 
				+        }
			
 
				+
			
 
				+        .btn-primary {
			
 
				+            background-color: var(--primary);
			
 
				+            color: white;
			
 
				+            border: none;
			
 
				+        }
			
 
				+
			
 
				+        .btn-primary:hover {
			
 
				+            background-color: var(--primary-dark);
			
 
				+        }
			
 
				+
			
 
				+        .btn-outline {
			
 
				+            background-color: white;
			
 
				+            color: #666;
			
 
				+            border: 1px solid #ddd;
			
 
				+        }
			
 
				+
			
 
				+        .btn-outline:hover {
			
 
				+            border-color: var(--primary);
			
 
				+            color: var(--primary);
			
 
				+        }
			
 
				+
			
 
				+        .footer-actions {
			
 
				+            display: flex;
			
 
				+            justify-content: flex-end;
			
 
				+            gap: 12px;
			
 
				+            margin-top: 24px;
			
 
				+            padding-top: 24px;
			
 
				+            border-top: 1px solid #f0f0f0;
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 768px) {
			
 
				+            .form-grid {
			
 
				+                grid-template-columns: 1fr;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="page-container">
			
 
				+        <div class="page-header">
			
 
				+            <h1 class="page-title">编辑地块</h1>
			
 
				+            <button class="btn-back" onclick="history.back()">
			
 
				+                <i class="iconfont icon-left"></i>返回
			
 
				+            </button>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="content-card">
			
 
				+            <form id="fieldForm">
			
 
				+                <div class="form-grid">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">地块名称<span class="required">*</span></label>
			
 
				+                        <input type="text" name="fieldName" class="form-input" required>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">地块编号</label>
			
 
				+                        <input type="text" name="fieldCode" class="form-input" disabled>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">所属农场<span class="required">*</span></label>
			
 
				+                        <select name="farmId" class="form-input" required>
			
 
				+                            <option value="">请选择农场</option>
			
 
				+                            <option value="1">智慧农场一号</option>
			
 
				+                            <option value="2">智慧农场二号</option>
			
 
				+                            <option value="3">智慧农场三号</option>
			
 
				+                            <option value="4">有机蔬菜基地</option>
			
 
				+                            <option value="5">生态果园基地</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">所属区域<span class="required">*</span></label>
			
 
				+                        <select name="fieldArea" class="form-input" required>
			
 
				+                            <option value="">请选择区域</option>
			
 
				+                            <option value="1">东区</option>
			
 
				+                            <option value="2">西区</option>
			
 
				+                            <option value="3">南区</option>
			
 
				+                            <option value="4">北区</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">地块类型<span class="required">*</span></label>
			
 
				+                        <select name="fieldType" class="form-input" required>
			
 
				+                            <option value="">请选择类型</option>
			
 
				+                            <option value="1">水田</option>
			
 
				+                            <option value="2">旱地</option>
			
 
				+                            <option value="3">果园</option>
			
 
				+                            <option value="4">菜地</option>
			
 
				+                            <option value="5">其他</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">面积(亩)<span class="required">*</span></label>
			
 
				+                        <input type="number" name="fieldSize" class="form-input" required>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">负责人</label>
			
 
				+                        <select name="manager" class="form-input">
			
 
				+                            <option value="">请选择负责人</option>
			
 
				+                            <option value="1">张三</option>
			
 
				+                            <option value="2">李四</option>
			
 
				+                            <option value="3">王五</option>
			
 
				+                            <option value="4">赵六</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">种植作物</label>
			
 
				+                        <select name="crops" class="form-input">
			
 
				+                            <option value="">请选择作物</option>
			
 
				+                            <optgroup label="粮食作物">
			
 
				+                                <option value="101">水稻</option>
			
 
				+                                <option value="102">小麦</option>
			
 
				+                                <option value="103">玉米</option>
			
 
				+                                <option value="104">大豆</option>
			
 
				+                                <option value="105">高粱</option>
			
 
				+                                <option value="106">谷子</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="经济作物">
			
 
				+                                <option value="201">棉花</option>
			
 
				+                                <option value="202">油菜</option>
			
 
				+                                <option value="203">花生</option>
			
 
				+                                <option value="204">芝麻</option>
			
 
				+                                <option value="205">甘蔗</option>
			
 
				+                                <option value="206">烟草</option>
			
 
				+                                <option value="207">茶叶</option>
			
 
				+                                <option value="208">药材</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="果树作物">
			
 
				+                                <option value="301">葡萄</option>
			
 
				+                                <option value="302">苹果</option>
			
 
				+                                <option value="303">梨</option>
			
 
				+                                <option value="304">桃</option>
			
 
				+                                <option value="305">柑橘</option>
			
 
				+                                <option value="306">枣</option>
			
 
				+                                <option value="307">猕猴桃</option>
			
 
				+                                <option value="308">石榴</option>
			
 
				+                                <option value="309">杏</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="蔬菜作物">
			
 
				+                                <option value="401">叶菜类</option>
			
 
				+                                <option value="402">根茎类</option>
			
 
				+                                <option value="403">瓜果类</option>
			
 
				+                                <option value="404">豆类</option>
			
 
				+                                <option value="405">茄果类</option>
			
 
				+                                <option value="406">葱蒜类</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="其他作物">
			
 
				+                                <option value="901">饲料作物</option>
			
 
				+                                <option value="902">观赏作物</option>
			
 
				+                                <option value="903">食用菌</option>
			
 
				+                                <option value="999">其他</option>
			
 
				+                            </optgroup>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">土壤类型</label>
			
 
				+                        <select name="soilType" class="form-input">
			
 
				+                            <option value="">请选择</option>
			
 
				+                            <option value="1">黏土</option>
			
 
				+                            <option value="2">沙质土</option>
			
 
				+                            <option value="3">壤土</option>
			
 
				+                            <option value="4">沙壤土</option>
			
 
				+                            <option value="5">其他</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">灌溉方式</label>
			
 
				+                        <select name="irrigationType" class="form-input">
			
 
				+                            <option value="">请选择</option>
			
 
				+                            <option value="1">喷灌</option>
			
 
				+                            <option value="2">滴灌</option>
			
 
				+                            <option value="3">微喷灌</option>
			
 
				+                            <option value="4">漫灌</option>
			
 
				+                            <option value="5">其他</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">使用状态</label>
			
 
				+                        <select name="status" class="form-input">
			
 
				+                            <option value="1">使用中</option>
			
 
				+                            <option value="2">维护中</option>
			
 
				+                            <option value="0">未使用</option>
			
 
				+                            <option value="3">闲置中</option>
			
 
				+                            <option value="4">待开发</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="form-group mt-4">
			
 
				+                    <label class="form-label">地块描述</label>
			
 
				+                    <textarea name="description" class="form-input" rows="4"></textarea>
			
 
				+                </div>
			
 
				+
			
 
				+                <div class="footer-actions">
			
 
				+                    <button type="button" class="btn btn-outline" onclick="history.back()">取消</button>
			
 
				+                    <button type="submit" class="btn btn-primary">保存</button>
			
 
				+                </div>
			
 
				+            </form>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 获取URL参数
			
 
				+            const urlParams = new URLSearchParams(window.location.search);
			
 
				+            const fieldId = urlParams.get('id');
			
 
				+
			
 
				+            // 获取表单元素
			
 
				+            const form = document.getElementById('fieldForm');
			
 
				+
			
 
				+            // 模拟获取地块数据
			
 
				+            const mockFieldData = {
			
 
				+                fieldName: '西区蔬菜园B',
			
 
				+                fieldCode: 'FK20230002',
			
 
				+                farmId: '4', // 有机蔬菜基地
			
 
				+                fieldArea: '2', // 西区
			
 
				+                fieldType: '4', // 菜地
			
 
				+                fieldSize: '85',
			
 
				+                manager: '2', // 李四
			
 
				+                crops: '401', // 叶菜类
			
 
				+                soilType: '2', // 沙质土
			
 
				+                irrigationType: '2', // 滴灌
			
 
				+                status: '1', // 使用中
			
 
				+                description: '这是一个示例地块描述。'
			
 
				+            };
			
 
				+
			
 
				+            // 填充表单数据
			
 
				+            if (form) {
			
 
				+                Object.keys(mockFieldData).forEach(key => {
			
 
				+                    const input = form.elements[key];
			
 
				+                    if (input) {
			
 
				+                        input.value = mockFieldData[key];
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+
			
 
				+            // 表单提交处理
			
 
				+            form.onsubmit = function(e) {
			
 
				+                e.preventDefault();
			
 
				+                
			
 
				+                // 表单验证
			
 
				+                const requiredFields = form.querySelectorAll('[required]');
			
 
				+                let isValid = true;
			
 
				+                
			
 
				+                requiredFields.forEach(field => {
			
 
				+                    if (!field.value.trim()) {
			
 
				+                        field.style.borderColor = '#f44336';
			
 
				+                        isValid = false;
			
 
				+                    } else {
			
 
				+                        field.style.borderColor = '#ddd';
			
 
				+                    }
			
 
				+                });
			
 
				+                
			
 
				+                if (!isValid) {
			
 
				+                    alert('请填写必填项');
			
 
				+                    return;
			
 
				+                }
			
 
				+                
			
 
				+                // 模拟保存成功
			
 
				+                alert('地块信息保存成功');
			
 
				+                history.back();
			
 
				+            };
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/field-management-content.html
+++ b/pages/field-management-content.html
@@ -0,0 +1,1710 @@
 
				+<!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">
			
 
				+    <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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        /* 全局样式重置 */
			
 
				+        * {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除所有固定定位和绝对定位元素 */
			
 
				+        .fixed,
			
 
				+        .absolute,
			
 
				+        [style*="position: fixed"],
			
 
				+        [style*="position: absolute"] {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除所有圆形按钮和浮动元素 */
			
 
				+        .circle,
			
 
				+        .rounded-full,
			
 
				+        .floating,
			
 
				+        [class*="circle"],
			
 
				+        [class*="round"],
			
 
				+        [class*="float"] {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保内容不会溢出 */
			
 
				+        html, body {
			
 
				+            overflow-x: hidden;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除所有可能的遮罩层 */
			
 
				+        [class*="overlay"],
			
 
				+        [class*="mask"],
			
 
				+        [style*="z-index: 9999"] {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 重置默认样式 */
			
 
				+        html, body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            height: 100%;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            overflow-x: hidden;
			
 
				+            padding-top: 15px;
			
 
				+        }
			
 
				+        
			
 
				+        /* 防止重复菜单 - 修改选择器避免影响按钮和模态框 */
			
 
				+        body > div:not(.page-container):not(.modal):not(#fieldModal),
			
 
				+        iframe#sidebar, 
			
 
				+        div.system-menu,
			
 
				+        [id^="system-menu"],
			
 
				+        [class^="system-menu"],
			
 
				+        #admin-sidebar,
			
 
				+        .menu-popup,
			
 
				+        .user-avatar-circle {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 移除可能影响按钮和模态框的全局样式 */
			
 
				+        .circle-btn,
			
 
				+        .floating-circle,
			
 
				+        .round-button,
			
 
				+        .scroll-top-btn,
			
 
				+        .help-btn,
			
 
				+        .chat-btn {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 模态框样式 */
			
 
				+        .modal {
			
 
				+            display: none;
			
 
				+            position: fixed;
			
 
				+            top: 0;
			
 
				+            left: 0;
			
 
				+            right: 0;
			
 
				+            bottom: 0;
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            background-color: rgba(0, 0, 0, 0.5);
			
 
				+            z-index: 99999;
			
 
				+            opacity: 0;
			
 
				+            visibility: hidden;
			
 
				+            transition: opacity 0.3s ease, visibility 0.3s ease;
			
 
				+        }
			
 
				+
			
 
				+        .modal.show {
			
 
				+            display: block !important;
			
 
				+            opacity: 1 !important;
			
 
				+            visibility: visible !important;
			
 
				+        }
			
 
				+
			
 
				+        .modal-dialog {
			
 
				+            position: fixed;
			
 
				+            top: 50%;
			
 
				+            left: 50%;
			
 
				+            transform: translate(-50%, -50%);
			
 
				+            width: 90%;
			
 
				+            max-width: 800px;
			
 
				+            margin-top: 20px;
			
 
				+            background: #fff;
			
 
				+            border-radius: 8px;
			
 
				+            z-index: 100000;
			
 
				+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			
 
				+        }
			
 
				+
			
 
				+        .modal-content {
			
 
				+            background: #fff;
			
 
				+            border-radius: 8px;
			
 
				+            overflow: hidden;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+
			
 
				+        .modal-header {
			
 
				+            padding: 16px 24px;
			
 
				+            border-bottom: 1px solid #e0e0e0;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: space-between;
			
 
				+            background: #fff;
			
 
				+            position: sticky;
			
 
				+            top: 0;
			
 
				+            z-index: 1;
			
 
				+        }
			
 
				+
			
 
				+        .modal-close {
			
 
				+            padding: 8px;
			
 
				+            background: none;
			
 
				+            border: none;
			
 
				+            cursor: pointer;
			
 
				+            font-size: 20px;
			
 
				+            color: #666;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            border-radius: 4px;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+
			
 
				+        .modal-close:hover {
			
 
				+            background-color: rgba(0, 0, 0, 0.05);
			
 
				+            color: #333;
			
 
				+        }
			
 
				+
			
 
				+        .modal-title {
			
 
				+            font-size: 18px;
			
 
				+            font-weight: 500;
			
 
				+            color: #333;
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+
			
 
				+        .modal-body {
			
 
				+            padding: 24px;
			
 
				+            max-height: calc(100vh - 200px);
			
 
				+            overflow-y: auto;
			
 
				+            background: #fff;
			
 
				+        }
			
 
				+
			
 
				+        .modal-footer {
			
 
				+            padding: 16px 24px;
			
 
				+            border-top: 1px solid #e0e0e0;
			
 
				+            display: flex;
			
 
				+            justify-content: flex-end;
			
 
				+            gap: 12px;
			
 
				+            background: #fff;
			
 
				+        }
			
 
				+
			
 
				+        .form-grid {
			
 
				+            display: grid;
			
 
				+            grid-template-columns: repeat(2, 1fr);
			
 
				+            gap: 20px;
			
 
				+        }
			
 
				+
			
 
				+        .form-group {
			
 
				+            margin-bottom: 0;
			
 
				+        }
			
 
				+
			
 
				+        .form-label {
			
 
				+            display: block;
			
 
				+            margin-bottom: 8px;
			
 
				+            font-size: 14px;
			
 
				+            color: #333;
			
 
				+        }
			
 
				+
			
 
				+        .form-input {
			
 
				+            width: 100%;
			
 
				+            padding: 8px 12px;
			
 
				+            border: 1px solid #ddd;
			
 
				+            border-radius: 4px;
			
 
				+            font-size: 14px;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+
			
 
				+        .form-input:focus {
			
 
				+            border-color: var(--primary);
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
			
 
				+            outline: none;
			
 
				+        }
			
 
				+
			
 
				+        .required {
			
 
				+            color: #f44336;
			
 
				+            margin-left: 4px;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保所有按钮可点击 */
			
 
				+        .action-btn,
			
 
				+        .btn,
			
 
				+        button {
			
 
				+            cursor: pointer !important;
			
 
				+            pointer-events: auto !important;
			
 
				+            position: relative;
			
 
				+            z-index: 1;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除可能影响按钮的样式 */
			
 
				+        body > div:not(.page-container):not(.modal):not(#fieldModal) {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 确保所有操作按钮可见和可交互 */
			
 
				+        .action-btn,
			
 
				+        #addFieldBtn,
			
 
				+        .btn-primary,
			
 
				+        .btn-outline,
			
 
				+        .modal button {
			
 
				+            visibility: visible !important;
			
 
				+            opacity: 1 !important;
			
 
				+            display: inline-flex !important;
			
 
				+            pointer-events: auto !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 页面容器 */
			
 
				+        .page-container {
			
 
				+            max-width: 100%;
			
 
				+            padding: 24px;
			
 
				+            padding-top: 42px;
			
 
				+            margin: 0;
			
 
				+            box-sizing: border-box;
			
 
				+            position: relative;
			
 
				+            z-index: 1;
			
 
				+        }
			
 
				+        
			
 
				+        /* 页面标题和操作按钮容器 */
			
 
				+        .page-header {
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				+            margin-bottom: 20px;
			
 
				+            padding-bottom: 16px;
			
 
				+            border-bottom: 1px solid var(--border);
			
 
				+            padding-top: 10px;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        
			
 
				+        /* 添加新增按钮的特定样式 */
			
 
				+        .add-button-container {
			
 
				+            position: relative;
			
 
				+            z-index: 9999;
			
 
				+        }
			
 
				+        
			
 
				+        #addFieldBtn {
			
 
				+            position: relative;
			
 
				+            z-index: 9999 !important;
			
 
				+            visibility: visible !important;
			
 
				+            opacity: 1 !important;
			
 
				+            display: inline-flex !important;
			
 
				+            cursor: pointer;
			
 
				+            pointer-events: auto !important;
			
 
				+        }
			
 
				+        
			
 
				+        .page-title {
			
 
				+            font-size: 22px;
			
 
				+            font-weight: 600;
			
 
				+            position: relative;
			
 
				+            color: var(--text-primary);
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        
			
 
				+        .page-title::before {
			
 
				+            content: "";
			
 
				+            width: 4px;
			
 
				+            height: 22px;
			
 
				+            background-color: var(--primary);
			
 
				+            margin-right: 8px;
			
 
				+            border-radius: 2px;
			
 
				+        }
			
 
				+        
			
 
				+        .search-card {
			
 
				+            background-color: #fff;
			
 
				+            border-radius: var(--radius);
			
 
				+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			
 
				+            padding: 16px;
			
 
				+            margin-bottom: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .search-input {
			
 
				+            width: 100%;
			
 
				+            border: 1px solid var(--border);
			
 
				+            border-radius: 4px;
			
 
				+            padding: 6px 12px;
			
 
				+            font-size: 13px;
			
 
				+            transition: all 0.3s;
			
 
				+            height: 32px;
			
 
				+        }
			
 
				+        
			
 
				+        .search-input:focus {
			
 
				+            border-color: var(--primary);
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
			
 
				+            outline: none;
			
 
				+        }
			
 
				+        
			
 
				+        .form-select {
			
 
				+            width: 100%;
			
 
				+            padding: 6px 24px 6px 10px;
			
 
				+            border: 1px solid var(--border);
			
 
				+            border-radius: 4px;
			
 
				+            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='%23757575' 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: 14px;
			
 
				+            -webkit-appearance: none;
			
 
				+            -moz-appearance: none;
			
 
				+            appearance: none;
			
 
				+            font-size: 13px;
			
 
				+            color: #333;
			
 
				+            height: 32px;
			
 
				+            line-height: 1.2;
			
 
				+        }
			
 
				+        
			
 
				+        .form-select:focus {
			
 
				+            border-color: var(--primary);
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
			
 
				+            outline: none;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整搜索区按钮样式 */
			
 
				+        .search-card .btn {
			
 
				+            height: 32px;
			
 
				+            padding: 0 16px;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+
			
 
				+        .search-card .btn-icon {
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整间距 */
			
 
				+        .search-card .grid.gap-4 {
			
 
				+            gap: 12px;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整搜索图标大小和位置 */
			
 
				+        .search-input + button .iconfont {
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整日期输入框样式 */
			
 
				+        .search-card input[type="date"] {
			
 
				+            height: 32px;
			
 
				+            font-size: 13px;
			
 
				+            padding: 6px 10px;
			
 
				+        }
			
 
				+
			
 
				+        /* 添加placeholder样式 */
			
 
				+        .search-input::placeholder {
			
 
				+            color: #999;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整select的placeholder颜色 */
			
 
				+        .form-select option:first-child {
			
 
				+            color: #999;
			
 
				+        }
			
 
				+        
			
 
				+        .table-card {
			
 
				+            background-color: #fff;
			
 
				+            border-radius: var(--radius);
			
 
				+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			
 
				+            overflow: hidden;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container {
			
 
				+            overflow-x: auto;
			
 
				+            border-radius: var(--radius);
			
 
				+            max-height: calc(100vh - 320px);
			
 
				+            min-height: 400px;
			
 
				+            overflow-y: auto;
			
 
				+            position: relative;
			
 
				+            scrollbar-width: thin;
			
 
				+            scrollbar-color: #cbd5e1 #f1f5f9;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container::-webkit-scrollbar {
			
 
				+            height: 6px;
			
 
				+            width: 6px;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container::-webkit-scrollbar-track {
			
 
				+            background: #f1f5f9;
			
 
				+            border-radius: 3px;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container::-webkit-scrollbar-thumb {
			
 
				+            background: #cbd5e1;
			
 
				+            border-radius: 3px;
			
 
				+        }
			
 
				+        
			
 
				+        .table-container::-webkit-scrollbar-thumb:hover {
			
 
				+            background: #94a3b8;
			
 
				+        }
			
 
				+        
			
 
				+        .badge {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            padding: 2px 8px;
			
 
				+            border-radius: 12px;
			
 
				+            font-size: 12px;
			
 
				+            font-weight: 500;
			
 
				+            line-height: 1.5;
			
 
				+        }
			
 
				+        
			
 
				+        .badge-success {
			
 
				+            background-color: #dcfce7;
			
 
				+            color: #15803d;
			
 
				+        }
			
 
				+        
			
 
				+        .badge-warning {
			
 
				+            background-color: #fef9c3;
			
 
				+            color: #854d0e;
			
 
				+        }
			
 
				+        
			
 
				+        .badge-danger {
			
 
				+            background-color: #fee2e2;
			
 
				+            color: #b91c1c;
			
 
				+        }
			
 
				+        
			
 
				+        .badge-icon {
			
 
				+            margin-right: 4px;
			
 
				+            font-size: 12px;
			
 
				+        }
			
 
				+        
			
 
				+        .action-group {
			
 
				+            display: flex;
			
 
				+            gap: 8px;
			
 
				+            flex-wrap: wrap;
			
 
				+            padding: 4px 0;
			
 
				+        }
			
 
				+        
			
 
				+        .action-group + .action-group {
			
 
				+            margin-top: 4px;
			
 
				+            padding-top: 4px;
			
 
				+            border-top: 1px solid #f0f0f0;
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            padding: 4px 8px;
			
 
				+            font-size: 13px;
			
 
				+            line-height: 1;
			
 
				+            color: #666;
			
 
				+            background: transparent;
			
 
				+            border: none;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+            white-space: nowrap;
			
 
				+            text-decoration: none;
			
 
				+            -webkit-appearance: none;
			
 
				+            -moz-appearance: none;
			
 
				+            appearance: none;
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn:hover {
			
 
				+            color: var(--primary);
			
 
				+            background-color: rgba(76, 175, 80, 0.1);
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn:focus {
			
 
				+            outline: none;
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn i {
			
 
				+            margin-right: 4px;
			
 
				+            font-size: 14px;
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn.view:hover {
			
 
				+            color: var(--primary);
			
 
				+            background-color: rgba(76, 175, 80, 0.1);
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn.edit:hover {
			
 
				+            color: var(--info);
			
 
				+            background-color: rgba(33, 150, 243, 0.1);
			
 
				+        }
			
 
				+        
			
 
				+        .action-btn.delete:hover {
			
 
				+            color: var(--danger);
			
 
				+            background-color: rgba(244, 67, 54, 0.1);
			
 
				+        }
			
 
				+
			
 
				+        /* 确保最后一列的操作按钮容器没有背景 */
			
 
				+        tr td:last-child {
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        .pagination {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            gap: 8px;
			
 
				+            margin-top: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .pagination .page-item {
			
 
				+            width: 32px;
			
 
				+            height: 32px;
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            font-size: 14px;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .pagination .page-item:hover {
			
 
				+            background-color: #f5f5f5;
			
 
				+        }
			
 
				+        
			
 
				+        .pagination .page-item.active {
			
 
				+            background-color: var(--primary);
			
 
				+            color: white;
			
 
				+        }
			
 
				+        
			
 
				+        .pagination .page-item.disabled {
			
 
				+            color: #ccc;
			
 
				+            cursor: not-allowed;
			
 
				+        }
			
 
				+        
			
 
				+        .count-badge {
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            gap: 4px;
			
 
				+            font-size: 13px;
			
 
				+            color: #475569;
			
 
				+            padding: 2px 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .count-badge i {
			
 
				+            color: #64748b;
			
 
				+            font-size: 13px;
			
 
				+        }
			
 
				+        
			
 
				+        /* 新增按钮容器样式 */
			
 
				+        .add-button-container {
			
 
				+            position: relative;
			
 
				+            z-index: 9999;
			
 
				+        }
			
 
				+        
			
 
				+        /* 新增按钮的特定样式 */
			
 
				+        #addFieldBtn {
			
 
				+            position: relative;
			
 
				+            z-index: 9999 !important;
			
 
				+            visibility: visible !important;
			
 
				+            opacity: 1 !important;
			
 
				+            display: inline-flex !important;
			
 
				+            cursor: pointer;
			
 
				+            pointer-events: auto !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 防止页面滚动 */
			
 
				+        body.modal-open {
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+
			
 
				+        @media (max-width: 768px) {
			
 
				+            .form-grid {
			
 
				+                grid-template-columns: 1fr;
			
 
				+            }
			
 
				+            
			
 
				+            .modal-dialog {
			
 
				+                margin: 10px;
			
 
				+                width: auto;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        /* 表格样式优化 */
			
 
				+        table {
			
 
				+            width: 100%;
			
 
				+            border-collapse: separate;
			
 
				+            border-spacing: 0;
			
 
				+            font-size: 13px;
			
 
				+            table-layout: fixed;
			
 
				+            background: transparent !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 表格行样式 */
			
 
				+        tr {
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        tr::before,
			
 
				+        tr::after {
			
 
				+            display: none !important;
			
 
				+            content: none !important;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+        
			
 
				+        /* 表格单元格基础样式 */
			
 
				+        th, td {
			
 
				+            position: relative;
			
 
				+            background: none !important;
			
 
				+            border-radius: 0 !important;
			
 
				+            -webkit-border-radius: 0 !important;
			
 
				+            -moz-border-radius: 0 !important;
			
 
				+        }
			
 
				+
			
 
				+        td {
			
 
				+            padding: 12px 16px;
			
 
				+            border-bottom: 1px solid #e2e8f0;
			
 
				+            color: #1e293b;
			
 
				+            line-height: 1.4;
			
 
				+            vertical-align: middle;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保操作列没有任何装饰 */
			
 
				+        td:last-child {
			
 
				+            background: none !important;
			
 
				+            border-radius: 0 !important;
			
 
				+            -webkit-border-radius: 0 !important;
			
 
				+            -moz-border-radius: 0 !important;
			
 
				+        }
			
 
				+
			
 
				+        td:last-child::before,
			
 
				+        td:last-child::after {
			
 
				+            display: none !important;
			
 
				+            content: none !important;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 操作按钮组容器样式 */
			
 
				+        .action-group {
			
 
				+            display: flex;
			
 
				+            gap: 6px;
			
 
				+            flex-wrap: wrap;
			
 
				+            justify-content: flex-start;
			
 
				+            background: none !important;
			
 
				+            position: relative;
			
 
				+            border-radius: 0 !important;
			
 
				+            -webkit-border-radius: 0 !important;
			
 
				+            -moz-border-radius: 0 !important;
			
 
				+        }
			
 
				+
			
 
				+        .action-group::before,
			
 
				+        .action-group::after {
			
 
				+            display: none !important;
			
 
				+            content: none !important;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 操作按钮样式 */
			
 
				+        .action-btn {
			
 
				+            padding: 4px 8px;
			
 
				+            background: none !important;
			
 
				+            color: #64748b;
			
 
				+            cursor: pointer !important;
			
 
				+            transition: all 0.2s;
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            border: none !important;
			
 
				+            font-size: 12px;
			
 
				+            line-height: 1;
			
 
				+            position: relative;
			
 
				+            outline: none !important;
			
 
				+            box-shadow: none !important;
			
 
				+            -webkit-appearance: none !important;
			
 
				+            -moz-appearance: none !important;
			
 
				+            appearance: none !important;
			
 
				+            border-radius: 4px !important;
			
 
				+            -webkit-border-radius: 4px !important;
			
 
				+            -moz-border-radius: 4px !important;
			
 
				+            text-decoration: none !important;
			
 
				+        }
			
 
				+
			
 
				+        .action-btn::before,
			
 
				+        .action-btn::after {
			
 
				+            display: none !important;
			
 
				+            content: none !important;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 鼠标悬停效果 */
			
 
				+        .action-btn:hover {
			
 
				+            color: var(--primary);
			
 
				+            background-color: rgba(241, 245, 249, 0.9) !important;
			
 
				+        }
			
 
				+
			
 
				+        .action-btn.edit:hover {
			
 
				+            color: #0284c7;
			
 
				+            background-color: rgba(240, 249, 255, 0.9) !important;
			
 
				+        }
			
 
				+
			
 
				+        .action-btn.delete:hover {
			
 
				+            color: #dc2626;
			
 
				+            background-color: rgba(254, 242, 242, 0.9) !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 按钮图标样式 */
			
 
				+        .action-btn i {
			
 
				+            margin-right: 4px;
			
 
				+            font-size: 14px;
			
 
				+            display: inline-flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除所有可能的装饰性样式 */
			
 
				+        .action-btn,
			
 
				+        .action-btn:focus,
			
 
				+        .action-btn:hover,
			
 
				+        .action-btn:active,
			
 
				+        .action-group,
			
 
				+        td,
			
 
				+        tr,
			
 
				+        th {
			
 
				+            text-decoration: none !important;
			
 
				+            -webkit-appearance: none !important;
			
 
				+            -moz-appearance: none !important;
			
 
				+            appearance: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保表格行交替背景色正确 */
			
 
				+        tbody tr:hover {
			
 
				+            background-color: #f8fafc !important;
			
 
				+        }
			
 
				+
			
 
				+        tbody tr:hover td {
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除所有可能的轮廓和装饰 */
			
 
				+        *:focus {
			
 
				+            outline: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保按钮组之间的间距正确 */
			
 
				+        .action-group + .action-group {
			
 
				+            margin-top: 4px;
			
 
				+            border-top: none !important;
			
 
				+            background: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 移除滚动按钮相关样式 */
			
 
				+        #scrollLeftBtn,
			
 
				+        #scrollRightBtn {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+
			
 
				+        .w-8,
			
 
				+        .h-8,
			
 
				+        .shadow-md {
			
 
				+            display: none !important;
			
 
				+        }
			
 
				+
			
 
				+        /* 表格容器相关样式 */
			
 
				+        .table-container-wrapper {
			
 
				+            position: relative;
			
 
				+            padding: 0 40px;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button {
			
 
				+            position: absolute;
			
 
				+            top: 50%;
			
 
				+            transform: translateY(-50%);
			
 
				+            width: 32px;
			
 
				+            height: 32px;
			
 
				+            background: #fff;
			
 
				+            border: 1px solid #e5e7eb;
			
 
				+            border-radius: 50%;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            cursor: pointer;
			
 
				+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			
 
				+            z-index: 10;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button:hover {
			
 
				+            background: #f9fafb;
			
 
				+            border-color: #d1d5db;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button:disabled {
			
 
				+            opacity: 0.5;
			
 
				+            cursor: not-allowed;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button.left {
			
 
				+            left: 4px;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button.right {
			
 
				+            right: 4px;
			
 
				+        }
			
 
				+
			
 
				+        .scroll-button i {
			
 
				+            font-size: 16px;
			
 
				+            color: #6b7280;
			
 
				+        }
			
 
				+
			
 
				+        /* 确保操作按钮在一行 */
			
 
				+        .action-group {
			
 
				+            display: flex;
			
 
				+            gap: 8px;
			
 
				+            flex-wrap: nowrap;
			
 
				+            white-space: nowrap;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整表格滚动容器 */
			
 
				+        .table-container {
			
 
				+            overflow-x: auto;
			
 
				+            scrollbar-width: thin;
			
 
				+            scrollbar-color: #cbd5e1 #f1f5f9;
			
 
				+            -ms-overflow-style: none;
			
 
				+            scroll-behavior: smooth;
			
 
				+        }
			
 
				+
			
 
				+        .table-container::-webkit-scrollbar {
			
 
				+            height: 6px;
			
 
				+        }
			
 
				+
			
 
				+        .table-container::-webkit-scrollbar-track {
			
 
				+            background: #f1f5f9;
			
 
				+            border-radius: 3px;
			
 
				+        }
			
 
				+
			
 
				+        .table-container::-webkit-scrollbar-thumb {
			
 
				+            background: #cbd5e1;
			
 
				+            border-radius: 3px;
			
 
				+        }
			
 
				+
			
 
				+        .table-container::-webkit-scrollbar-thumb:hover {
			
 
				+            background: #94a3b8;
			
 
				+        }
			
 
				+
			
 
				+        /* 调整表格最后一列宽度 */
			
 
				+        table th:last-child,
			
 
				+        table td:last-child {
			
 
				+            min-width: 200px;
			
 
				+            width: 200px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="page-container">
			
 
				+        <!-- 页面标题和操作按钮 -->
			
 
				+        <div class="page-header">
			
 
				+            <div class="flex items-center">
			
 
				+                <h1 class="page-title">地块管理</h1>
			
 
				+            </div>
			
 
				+            <div class="add-button-container">
			
 
				+                <button type="button" 
			
 
				+                        class="btn btn-primary" 
			
 
				+                        id="addFieldBtn" 
			
 
				+                        onclick="showModalDialog(event)">
			
 
				+                    <i class="iconfont icon-plus btn-icon"></i>新增地块
			
 
				+                </button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 搜索和筛选区域 -->
			
 
				+        <div class="search-card">
			
 
				+            <div class="grid grid-cols-1 gap-4">
			
 
				+                <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4">
			
 
				+                    <!-- 搜索框 -->
			
 
				+                    <div class="md:col-span-2 lg:col-span-2">
			
 
				+                        <div class="relative">
			
 
				+                            <input type="text" class="search-input" placeholder="请输入地块编号、名称、位置关键词">
			
 
				+                            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 focus:outline-none">
			
 
				+                                <i class="iconfont icon-search"></i>
			
 
				+                            </button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 筛选项第一行 -->
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">所属农场</option>
			
 
				+                            <option value="1">智慧农场一号</option>
			
 
				+                            <option value="2">智慧农场二号</option>
			
 
				+                            <option value="3">智慧农场三号</option>
			
 
				+                            <option value="4">有机蔬菜基地</option>
			
 
				+                            <option value="5">生态果园基地</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">所属区域</option>
			
 
				+                            <option value="1">东区</option>
			
 
				+                            <option value="2">西区</option>
			
 
				+                            <option value="3">南区</option>
			
 
				+                            <option value="4">北区</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">使用状态</option>
			
 
				+                            <option value="1">使用中</option>
			
 
				+                            <option value="2">维护中</option>
			
 
				+                            <option value="0">未使用</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">土壤类型</option>
			
 
				+                            <option value="1">黏土</option>
			
 
				+                            <option value="2">沙质土</option>
			
 
				+                            <option value="3">壤土</option>
			
 
				+                            <option value="4">沙壤土</option>
			
 
				+                            <option value="5">其他</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <!-- 筛选项第二行 -->
			
 
				+                <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4">
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">灌溉方式</option>
			
 
				+                            <option value="1">喷灌</option>
			
 
				+                            <option value="2">滴灌</option>
			
 
				+                            <option value="3">微喷灌</option>
			
 
				+                            <option value="4">漫灌</option>
			
 
				+                            <option value="5">其他</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <select class="form-select">
			
 
				+                            <option value="">种植作物</option>
			
 
				+                            <optgroup label="粮食作物">
			
 
				+                                <option value="101">水稻</option>
			
 
				+                                <option value="102">小麦</option>
			
 
				+                                <option value="103">玉米</option>
			
 
				+                                <option value="104">大豆</option>
			
 
				+                                <option value="105">高粱</option>
			
 
				+                                <option value="106">谷子</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="经济作物">
			
 
				+                                <option value="201">棉花</option>
			
 
				+                                <option value="202">油菜</option>
			
 
				+                                <option value="203">花生</option>
			
 
				+                                <option value="204">芝麻</option>
			
 
				+                                <option value="205">甘蔗</option>
			
 
				+                                <option value="206">烟草</option>
			
 
				+                                <option value="207">茶叶</option>
			
 
				+                                <option value="208">药材</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="果树作物">
			
 
				+                                <option value="301">葡萄</option>
			
 
				+                                <option value="302">苹果</option>
			
 
				+                                <option value="303">梨</option>
			
 
				+                                <option value="304">桃</option>
			
 
				+                                <option value="305">柑橘</option>
			
 
				+                                <option value="306">枣</option>
			
 
				+                                <option value="307">猕猴桃</option>
			
 
				+                                <option value="308">石榴</option>
			
 
				+                                <option value="309">杏</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="蔬菜作物">
			
 
				+                                <option value="401">叶菜类</option>
			
 
				+                                <option value="402">根茎类</option>
			
 
				+                                <option value="403">瓜果类</option>
			
 
				+                                <option value="404">豆类</option>
			
 
				+                                <option value="405">茄果类</option>
			
 
				+                                <option value="406">葱蒜类</option>
			
 
				+                            </optgroup>
			
 
				+                            <optgroup label="其他作物">
			
 
				+                                <option value="901">饲料作物</option>
			
 
				+                                <option value="902">观赏作物</option>
			
 
				+                                <option value="903">食用菌</option>
			
 
				+                                <option value="999">其他</option>
			
 
				+                            </optgroup>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <div class="relative">
			
 
				+                            <input type="text" class="search-input" placeholder="负责人">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-1 lg:col-span-1">
			
 
				+                        <div class="relative">
			
 
				+                            <input type="date" class="search-input" placeholder="创建日期">
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="md:col-span-2 lg:col-span-2 flex justify-end items-center gap-2">
			
 
				+                        <button class="btn btn-primary">
			
 
				+                            <i class="iconfont icon-search btn-icon"></i>查询
			
 
				+                        </button>
			
 
				+                        <button class="btn btn-outline">
			
 
				+                            <i class="iconfont icon-refresh btn-icon"></i>重置
			
 
				+                        </button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <!-- 表格列表 -->
			
 
				+        <div class="table-card">
			
 
				+            <div class="relative table-container-wrapper">
			
 
				+                <!-- 左滑动按钮 -->
			
 
				+                <button type="button" class="scroll-button left" id="scrollLeftBtn" disabled>
			
 
				+                    <i class="iconfont icon-left"></i>
			
 
				+                </button>
			
 
				+                
			
 
				+                <!-- 右滑动按钮 -->
			
 
				+                <button type="button" class="scroll-button right" id="scrollRightBtn">
			
 
				+                    <i class="iconfont icon-right"></i>
			
 
				+                </button>
			
 
				+                
			
 
				+                <!-- 表格容器 -->
			
 
				+                <div class="table-container" id="tableContainer">
			
 
				+                    <table>
			
 
				+                        <thead>
			
 
				+                            <tr>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">地块编号</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">地块名称</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">所属农场</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">所属区域</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">地块类型</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[90px]">面积(亩)</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">种植作物</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">土壤类型</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">灌溉方式</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">使用状态</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">绑定设备</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">绑定人员</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[100px]">负责人</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">创建时间</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[120px]">上次更新</th>
			
 
				+                                <th class="whitespace-nowrap min-w-[180px]">操作</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr>
			
 
				+                                <td>FK20230001</td>
			
 
				+                                <td>东区水稻田A</td>
			
 
				+                                <td>智慧农场一号</td>
			
 
				+                                <td>东区</td>
			
 
				+                                <td>水田</td>
			
 
				+                                <td>120</td>
			
 
				+                                <td>水稻</td>
			
 
				+                                <td>黏土</td>
			
 
				+                                <td>喷灌</td>
			
 
				+                                <td>
			
 
				+                                    <span class="badge badge-success">
			
 
				+                                        <i class="iconfont icon-check-circle badge-icon"></i>使用中
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-device"></i>3
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-user"></i>2
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>张三</td>
			
 
				+                                <td>2023-05-15</td>
			
 
				+                                <td>2023-06-20</td>
			
 
				+                                <td>
			
 
				+                                    <div class="action-group">
			
 
				+                                        <button type="button" class="action-btn view" title="地块管理">
			
 
				+                                            <i class="iconfont icon-eye"></i>管理
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn edit" title="编辑地块">
			
 
				+                                            <i class="iconfont icon-edit"></i>编辑
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn delete" title="删除地块">
			
 
				+                                            <i class="iconfont icon-delete"></i>删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>FK20230002</td>
			
 
				+                                <td>西区蔬菜园B</td>
			
 
				+                                <td>有机蔬菜基地</td>
			
 
				+                                <td>西区</td>
			
 
				+                                <td>菜地</td>
			
 
				+                                <td>85</td>
			
 
				+                                <td>青菜、萝卜</td>
			
 
				+                                <td>沙质土</td>
			
 
				+                                <td>滴灌</td>
			
 
				+                                <td>
			
 
				+                                    <span class="badge badge-success">
			
 
				+                                        <i class="iconfont icon-check-circle badge-icon"></i>使用中
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-device"></i>2
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-user"></i>1
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>李四</td>
			
 
				+                                <td>2023-05-18</td>
			
 
				+                                <td>2023-06-25</td>
			
 
				+                                <td>
			
 
				+                                    <div class="action-group">
			
 
				+                                        <button type="button" class="action-btn view" title="地块管理">
			
 
				+                                            <i class="iconfont icon-eye"></i>管理
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn edit" title="编辑地块">
			
 
				+                                            <i class="iconfont icon-edit"></i>编辑
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn delete" title="删除地块">
			
 
				+                                            <i class="iconfont icon-delete"></i>删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>FK20230003</td>
			
 
				+                                <td>南区果园C</td>
			
 
				+                                <td>生态果园基地</td>
			
 
				+                                <td>南区</td>
			
 
				+                                <td>果园</td>
			
 
				+                                <td>200</td>
			
 
				+                                <td>苹果</td>
			
 
				+                                <td>壤土</td>
			
 
				+                                <td>微喷灌</td>
			
 
				+                                <td>
			
 
				+                                    <span class="badge badge-warning">
			
 
				+                                        <i class="iconfont icon-warning badge-icon"></i>维护中
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-device"></i>5
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-user"></i>3
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>王五</td>
			
 
				+                                <td>2023-05-20</td>
			
 
				+                                <td>2023-07-05</td>
			
 
				+                                <td>
			
 
				+                                    <div class="action-group">
			
 
				+                                        <button type="button" class="action-btn view" title="地块管理">
			
 
				+                                            <i class="iconfont icon-eye"></i>管理
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn edit" title="编辑地块">
			
 
				+                                            <i class="iconfont icon-edit"></i>编辑
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn delete" title="删除地块">
			
 
				+                                            <i class="iconfont icon-delete"></i>删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>FK20230004</td>
			
 
				+                                <td>北区小麦田D</td>
			
 
				+                                <td>智慧农场二号</td>
			
 
				+                                <td>北区</td>
			
 
				+                                <td>旱地</td>
			
 
				+                                <td>160</td>
			
 
				+                                <td>小麦</td>
			
 
				+                                <td>沙壤土</td>
			
 
				+                                <td>漫灌</td>
			
 
				+                                <td>
			
 
				+                                    <span class="badge badge-danger">
			
 
				+                                        <i class="iconfont icon-close-circle badge-icon"></i>未使用
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-device"></i>0
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>
			
 
				+                                    <span class="count-badge">
			
 
				+                                        <i class="iconfont icon-user"></i>0
			
 
				+                                    </span>
			
 
				+                                </td>
			
 
				+                                <td>赵六</td>
			
 
				+                                <td>2023-06-10</td>
			
 
				+                                <td>2023-07-15</td>
			
 
				+                                <td>
			
 
				+                                    <div class="action-group">
			
 
				+                                        <button type="button" class="action-btn view" title="地块管理">
			
 
				+                                            <i class="iconfont icon-eye"></i>管理
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn edit" title="编辑地块">
			
 
				+                                            <i class="iconfont icon-edit"></i>编辑
			
 
				+                                        </button>
			
 
				+                                        <button type="button" class="action-btn delete" title="删除地块">
			
 
				+                                            <i class="iconfont icon-delete"></i>删除
			
 
				+                                        </button>
			
 
				+                                    </div>
			
 
				+                                </td>
			
 
				+                            </tr>
			
 
				+                        </tbody>
			
 
				+                    </table>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 分页 -->
			
 
				+            <div class="flex justify-between items-center px-6 py-4">
			
 
				+                <div class="text-sm text-gray-600">
			
 
				+                    共 <span class="text-primary font-medium">24</span> 条记录
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="pagination">
			
 
				+                    <div class="page-item disabled">
			
 
				+                        <i class="iconfont icon-left"></i>
			
 
				+                    </div>
			
 
				+                    <div class="page-item active">1</div>
			
 
				+                    <div class="page-item">2</div>
			
 
				+                    <div class="page-item">3</div>
			
 
				+                    <div class="page-item">
			
 
				+                        <i class="iconfont icon-right"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 新增/编辑地块模态框 -->
			
 
				+    <div id="fieldModal" class="modal hidden">
			
 
				+        <div class="modal-backdrop"></div>
			
 
				+        <div class="modal-dialog">
			
 
				+            <div class="modal-content">
			
 
				+                <!-- 模态框头部 -->
			
 
				+                <div class="modal-header">
			
 
				+                    <h3 class="modal-title">新增地块</h3>
			
 
				+                    <button type="button" class="modal-close" id="closeModal">
			
 
				+                        <i class="iconfont icon-close"></i>
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+                
			
 
				+                <!-- 模态框内容 -->
			
 
				+                <div class="modal-body">
			
 
				+                    <form id="fieldForm">
			
 
				+                        <div class="form-grid">
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">地块名称<span class="required">*</span></label>
			
 
				+                                <input type="text" name="fieldName" class="form-input" required>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">地块编号</label>
			
 
				+                                <input type="text" name="fieldCode" class="form-input" placeholder="自动生成" disabled>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">所属农场<span class="required">*</span></label>
			
 
				+                                <select name="farmId" class="form-input" required>
			
 
				+                                    <option value="">请选择农场</option>
			
 
				+                                    <option value="1">智慧农场一号</option>
			
 
				+                                    <option value="2">智慧农场二号</option>
			
 
				+                                    <option value="3">智慧农场三号</option>
			
 
				+                                    <option value="4">有机蔬菜基地</option>
			
 
				+                                    <option value="5">生态果园基地</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">所属区域<span class="required">*</span></label>
			
 
				+                                <select name="fieldArea" class="form-input" required>
			
 
				+                                    <option value="">请选择区域</option>
			
 
				+                                    <option value="1">东区</option>
			
 
				+                                    <option value="2">西区</option>
			
 
				+                                    <option value="3">南区</option>
			
 
				+                                    <option value="4">北区</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">地块类型<span class="required">*</span></label>
			
 
				+                                <select name="fieldType" class="form-input" required>
			
 
				+                                    <option value="">请选择类型</option>
			
 
				+                                    <option value="1">水田</option>
			
 
				+                                    <option value="2">旱地</option>
			
 
				+                                    <option value="3">果园</option>
			
 
				+                                    <option value="4">菜地</option>
			
 
				+                                    <option value="5">其他</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">面积(亩)<span class="required">*</span></label>
			
 
				+                                <input type="number" name="fieldSize" class="form-input" required>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">负责人</label>
			
 
				+                                <select name="manager" class="form-input">
			
 
				+                                    <option value="">请选择负责人</option>
			
 
				+                                    <option value="1">张三</option>
			
 
				+                                    <option value="2">李四</option>
			
 
				+                                    <option value="3">王五</option>
			
 
				+                                    <option value="4">赵六</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">种植作物</label>
			
 
				+                                <select name="crops" class="form-input">
			
 
				+                                    <option value="">请选择作物</option>
			
 
				+                                    <optgroup label="粮食作物">
			
 
				+                                        <option value="101">水稻</option>
			
 
				+                                        <option value="102">小麦</option>
			
 
				+                                        <option value="103">玉米</option>
			
 
				+                                        <option value="104">大豆</option>
			
 
				+                                        <option value="105">高粱</option>
			
 
				+                                        <option value="106">谷子</option>
			
 
				+                                    </optgroup>
			
 
				+                                    <optgroup label="经济作物">
			
 
				+                                        <option value="201">棉花</option>
			
 
				+                                        <option value="202">油菜</option>
			
 
				+                                        <option value="203">花生</option>
			
 
				+                                        <option value="204">芝麻</option>
			
 
				+                                        <option value="205">甘蔗</option>
			
 
				+                                        <option value="206">烟草</option>
			
 
				+                                        <option value="207">茶叶</option>
			
 
				+                                        <option value="208">药材</option>
			
 
				+                                    </optgroup>
			
 
				+                                    <optgroup label="果树作物">
			
 
				+                                        <option value="301">葡萄</option>
			
 
				+                                        <option value="302">苹果</option>
			
 
				+                                        <option value="303">梨</option>
			
 
				+                                        <option value="304">桃</option>
			
 
				+                                        <option value="305">柑橘</option>
			
 
				+                                        <option value="306">枣</option>
			
 
				+                                        <option value="307">猕猴桃</option>
			
 
				+                                        <option value="308">石榴</option>
			
 
				+                                        <option value="309">杏</option>
			
 
				+                                    </optgroup>
			
 
				+                                    <optgroup label="蔬菜作物">
			
 
				+                                        <option value="401">叶菜类</option>
			
 
				+                                        <option value="402">根茎类</option>
			
 
				+                                        <option value="403">瓜果类</option>
			
 
				+                                        <option value="404">豆类</option>
			
 
				+                                        <option value="405">茄果类</option>
			
 
				+                                        <option value="406">葱蒜类</option>
			
 
				+                                    </optgroup>
			
 
				+                                    <optgroup label="其他作物">
			
 
				+                                        <option value="901">饲料作物</option>
			
 
				+                                        <option value="902">观赏作物</option>
			
 
				+                                        <option value="903">食用菌</option>
			
 
				+                                        <option value="999">其他</option>
			
 
				+                                    </optgroup>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">土壤类型</label>
			
 
				+                                <select name="soilType" class="form-input">
			
 
				+                                    <option value="">请选择</option>
			
 
				+                                    <option value="1">黏土</option>
			
 
				+                                    <option value="2">沙质土</option>
			
 
				+                                    <option value="3">壤土</option>
			
 
				+                                    <option value="4">沙壤土</option>
			
 
				+                                    <option value="5">其他</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">灌溉方式</label>
			
 
				+                                <select name="irrigationType" class="form-input">
			
 
				+                                    <option value="">请选择</option>
			
 
				+                                    <option value="1">喷灌</option>
			
 
				+                                    <option value="2">滴灌</option>
			
 
				+                                    <option value="3">微喷灌</option>
			
 
				+                                    <option value="4">漫灌</option>
			
 
				+                                    <option value="5">其他</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="form-group">
			
 
				+                                <label class="form-label">使用状态</label>
			
 
				+                                <select name="status" class="form-input">
			
 
				+                                    <option value="1">使用中</option>
			
 
				+                                    <option value="2">维护中</option>
			
 
				+                                    <option value="0">未使用</option>
			
 
				+                                    <option value="3">闲置中</option>
			
 
				+                                    <option value="4">待开发</option>
			
 
				+                                </select>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        
			
 
				+                        <div class="form-group mt-4">
			
 
				+                            <label class="form-label">地块描述</label>
			
 
				+                            <textarea name="description" class="form-input" rows="4"></textarea>
			
 
				+                        </div>
			
 
				+                    </form>
			
 
				+                </div>
			
 
				+                
			
 
				+                <!-- 模态框底部 -->
			
 
				+                <div class="modal-footer">
			
 
				+                    <button type="button" class="btn btn-outline" id="cancelBtn">取消</button>
			
 
				+                    <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 页面跳转函数
			
 
				+        function navigateTo(type, id) {
			
 
				+            switch(type) {
			
 
				+                case 'view':
			
 
				+                    window.location.href = `../pages/field-detail.html?id=${id}`;
			
 
				+                    break;
			
 
				+                case 'edit':
			
 
				+                    window.location.href = `../pages/field-edit.html?id=${id}`;
			
 
				+                    break;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        // 全局函数，用于显示模态框
			
 
				+        function showModalDialog(event, type = 'add', rowData = null) {
			
 
				+            console.log('showModalDialog called', {type, rowData});
			
 
				+            try {
			
 
				+                if (event) {
			
 
				+                    event.preventDefault();
			
 
				+                    event.stopPropagation();
			
 
				+                }
			
 
				+
			
 
				+                const modal = document.getElementById('fieldModal');
			
 
				+                if (!modal) {
			
 
				+                    console.error('Modal not found');
			
 
				+                    return;
			
 
				+                }
			
 
				+
			
 
				+                // 设置模态框标题
			
 
				+                const modalTitle = modal.querySelector('.modal-title');
			
 
				+                if (modalTitle) {
			
 
				+                    modalTitle.textContent = type === 'edit' ? '编辑地块' : '新增地块';
			
 
				+                }
			
 
				+
			
 
				+                // 如果是编辑模式，预填充表单数据
			
 
				+                if (type === 'edit') {
			
 
				+                    // 这里使用模拟数据，实际项目中应该从后端获取
			
 
				+                    const mockFieldData = {
			
 
				+                        fieldName: '西区蔬菜园B',
			
 
				+                        fieldCode: 'FK20230002',
			
 
				+                        farmId: '4', // 有机蔬菜基地
			
 
				+                        fieldArea: '2', // 西区
			
 
				+                        fieldType: '4', // 菜地
			
 
				+                        fieldSize: '85',
			
 
				+                        manager: '2', // 李四
			
 
				+                        crops: '401', // 叶菜类
			
 
				+                        soilType: '2', // 沙质土
			
 
				+                        irrigationType: '2', // 滴灌
			
 
				+                        status: '1', // 使用中
			
 
				+                        description: '这是一个示例地块描述。'
			
 
				+                    };
			
 
				+
			
 
				+                    const form = document.getElementById('fieldForm');
			
 
				+                    if (form) {
			
 
				+                        Object.keys(mockFieldData).forEach(key => {
			
 
				+                            const input = form.elements[key];
			
 
				+                            if (input) {
			
 
				+                                input.value = mockFieldData[key];
			
 
				+                            }
			
 
				+                        });
			
 
				+                    }
			
 
				+                }
			
 
				+                
			
 
				+                // 显示模态框
			
 
				+                modal.style.cssText = 'display: block !important; opacity: 1 !important; visibility: visible !important;';
			
 
				+                modal.classList.remove('hidden');
			
 
				+                modal.classList.add('show');
			
 
				+                document.body.classList.add('modal-open');
			
 
				+            } catch (error) {
			
 
				+                console.error('Error in showModalDialog:', error);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            console.log('DOM Content Loaded');
			
 
				+            
			
 
				+            // 添加按钮点击事件
			
 
				+            const addButton = document.getElementById('addFieldBtn');
			
 
				+            if (addButton) {
			
 
				+                addButton.addEventListener('click', e => showModalDialog(e, 'add'));
			
 
				+            }
			
 
				+            
			
 
				+            // 为所有操作按钮添加事件监听
			
 
				+            document.querySelectorAll('.action-btn').forEach(btn => {
			
 
				+                btn.addEventListener('click', function(e) {
			
 
				+                    e.preventDefault();
			
 
				+                    e.stopPropagation();
			
 
				+                    
			
 
				+                    let type = 'add';
			
 
				+                    if (this.classList.contains('view')) {
			
 
				+                        type = 'view';
			
 
				+                        navigateTo(type, this.getAttribute('data-id'));
			
 
				+                    } else if (this.classList.contains('edit')) {
			
 
				+                        type = 'edit';
			
 
				+                        showModalDialog(e, type, {id: this.getAttribute('data-id')});
			
 
				+                    } else if (this.classList.contains('delete')) {
			
 
				+                        if (confirm('确认要删除该地块吗？')) {
			
 
				+                            console.log('删除地块:', this.getAttribute('data-id'));
			
 
				+                            // 这里添加删除逻辑
			
 
				+                        }
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 模态框关闭逻辑
			
 
				+            const modal = document.getElementById('fieldModal');
			
 
				+            const closeBtn = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const form = document.getElementById('fieldForm');
			
 
				+
			
 
				+            function hideModal(e) {
			
 
				+                if (e) {
			
 
				+                    e.preventDefault();
			
 
				+                    e.stopPropagation();
			
 
				+                }
			
 
				+                
			
 
				+                if (!modal) return;
			
 
				+                
			
 
				+                // 强制隐藏模态框
			
 
				+                modal.style.cssText = 'display: none !important; opacity: 0 !important; visibility: hidden !important;';
			
 
				+                modal.classList.remove('show');
			
 
				+                modal.classList.add('hidden');
			
 
				+                document.body.classList.remove('modal-open');
			
 
				+                
			
 
				+                // 重置表单
			
 
				+                if (form) {
			
 
				+                    form.reset();
			
 
				+                    const inputs = form.querySelectorAll('input, select, textarea');
			
 
				+                    inputs.forEach(input => {
			
 
				+                        input.disabled = false;
			
 
				+                        input.style.borderColor = '#ddd';
			
 
				+                    });
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            // 关闭按钮事件
			
 
				+            if (closeBtn) {
			
 
				+                closeBtn.onclick = hideModal;
			
 
				+            }
			
 
				+
			
 
				+            // 取消按钮事件
			
 
				+            if (cancelBtn) {
			
 
				+                cancelBtn.onclick = hideModal;
			
 
				+            }
			
 
				+
			
 
				+            // 点击背景关闭
			
 
				+            if (modal) {
			
 
				+                modal.onclick = function(e) {
			
 
				+                    if (e.target === modal || e.target.classList.contains('modal-backdrop')) {
			
 
				+                        hideModal(e);
			
 
				+                    }
			
 
				+                };
			
 
				+            }
			
 
				+
			
 
				+            // 保存按钮点击事件
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            if (saveBtn) {
			
 
				+                saveBtn.onclick = function(e) {
			
 
				+                    e.preventDefault();
			
 
				+                    e.stopPropagation();
			
 
				+                    
			
 
				+                    if (!form) return;
			
 
				+                    
			
 
				+                    const requiredFields = form.querySelectorAll('[required]');
			
 
				+                    let isValid = true;
			
 
				+                    
			
 
				+                    requiredFields.forEach(field => {
			
 
				+                        if (!field.value.trim()) {
			
 
				+                            field.style.borderColor = '#f44336';
			
 
				+                            isValid = false;
			
 
				+                        } else {
			
 
				+                            field.style.borderColor = '#ddd';
			
 
				+                        }
			
 
				+                    });
			
 
				+                    
			
 
				+                    if (!isValid) {
			
 
				+                        alert('请填写必填项');
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    
			
 
				+                    alert('地块信息保存成功');
			
 
				+                    hideModal(e);
			
 
				+                };
			
 
				+            }
			
 
				+
			
 
				+            // 防止表单提交
			
 
				+            if (form) {
			
 
				+                form.onsubmit = function(e) {
			
 
				+                    e.preventDefault();
			
 
				+                    return false;
			
 
				+                };
			
 
				+            }
			
 
				+
			
 
				+            // 获取滚动相关元素
			
 
				+            const tableContainer = document.getElementById('tableContainer');
			
 
				+            const scrollLeftBtn = document.getElementById('scrollLeftBtn');
			
 
				+            const scrollRightBtn = document.getElementById('scrollRightBtn');
			
 
				+            
			
 
				+            // 更新滚动按钮状态
			
 
				+            function updateScrollButtons() {
			
 
				+                if (tableContainer) {
			
 
				+                    const { scrollLeft, scrollWidth, clientWidth } = tableContainer;
			
 
				+                    
			
 
				+                    // 更新左滚动按钮状态
			
 
				+                    if (scrollLeftBtn) {
			
 
				+                        scrollLeftBtn.disabled = scrollLeft <= 0;
			
 
				+                    }
			
 
				+                    
			
 
				+                    // 更新右滚动按钮状态
			
 
				+                    if (scrollRightBtn) {
			
 
				+                        scrollRightBtn.disabled = scrollLeft + clientWidth >= scrollWidth;
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+            
			
 
				+            // 初始化滚动按钮状态
			
 
				+            updateScrollButtons();
			
 
				+            
			
 
				+            // 监听滚动事件
			
 
				+            if (tableContainer) {
			
 
				+                tableContainer.addEventListener('scroll', updateScrollButtons);
			
 
				+            }
			
 
				+            
			
 
				+            // 左滚动按钮点击事件
			
 
				+            if (scrollLeftBtn) {
			
 
				+                scrollLeftBtn.addEventListener('click', () => {
			
 
				+                    if (tableContainer) {
			
 
				+                        tableContainer.scrollLeft -= 200; // 每次滚动200px
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+            
			
 
				+            // 右滚动按钮点击事件
			
 
				+            if (scrollRightBtn) {
			
 
				+                scrollRightBtn.addEventListener('click', () => {
			
 
				+                    if (tableContainer) {
			
 
				+                        tableContainer.scrollLeft += 200; // 每次滚动200px
			
 
				+                    }
			
 
				+                });
			
 
				+            }
			
 
				+            
			
 
				+            // 监听窗口大小变化
			
 
				+            window.addEventListener('resize', updateScrollButtons);
			
 
				+        });
			
 
				+
			
 
				+        // 添加全局错误处理
			
 
				+        window.onerror = function(msg, url, line, col, error) {
			
 
				+            console.error('Global error:', {msg, url, line, col, error});
			
 
				+            return false;
			
 
				+        };
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/pages/field-management.html
+++ b/pages/field-management.html
@@ -0,0 +1,34 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>地块管理 - 爱智农</title>
			
 
				+    <style>
			
 
				+        html, body {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100%;
			
 
				+            width: 100%;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            position: relative;
			
 
				+            z-index: 1;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <iframe id="content-frame" 
			
 
				+            src="field-management-content.html" 
			
 
				+            sandbox="allow-scripts allow-forms allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox" 
			
 
				+            scrolling="auto" 
			
 
				+            frameborder="0"></iframe>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/land-device-binding.html
+++ b/pages/land-device-binding.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="refresh" content="0;url=field-detail.html?tab=device">
			
 
				+    <title>重定向到设备绑定</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <p>页面已移动，正在重定向到 <a href="field-detail.html?tab=device">地块设备绑定</a>...</p>
			
 
				+    <script>
			
 
				+        window.location.href = 'field-detail.html?tab=device';
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/pages/land-draw.html
+++ b/pages/land-draw.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="refresh" content="0;url=field-detail.html?tab=map">
			
 
				+    <title>重定向到区域绘制</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <p>页面已移动，正在重定向到 <a href="field-detail.html?tab=map">地块区域绘制</a>...</p>
			
 
				+    <script>
			
 
				+        window.location.href = 'field-detail.html?tab=map';
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/land-management.html
+++ b/pages/land-management.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="refresh" content="0;url=field-management.html">
			
 
				+    <title>重定向到地块管理</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <p>页面已移动，正在重定向到 <a href="field-management.html">地块管理</a>...</p>
			
 
				+    <script>
			
 
				+        window.location.href = 'field-management.html';
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/land-person-binding.html
+++ b/pages/land-person-binding.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="refresh" content="0;url=field-detail.html?tab=person">
			
 
				+    <title>重定向到人员绑定</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <p>页面已移动，正在重定向到 <a href="field-detail.html?tab=person">地块人员绑定</a>...</p>
			
 
				+    <script>
			
 
				+        window.location.href = 'field-detail.html?tab=person';
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/login-log.html
+++ b/pages/login-log.html
@@ -0,0 +1,379 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </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-export btn-icon"></i>
			
 
				+                    导出
			
 
				+                </button>
			
 
				+                <button class="btn btn-danger">
			
 
				+                    <i class="iconfont icon-delete 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">
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
			
 
				+                    <input type="text" class="input w-full" placeholder="请输入用户名">
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">登录状态</label>
			
 
				+                    <select class="select w-full">
			
 
				+                        <option value="">所有状态</option>
			
 
				+                        <option value="1">成功</option>
			
 
				+                        <option value="0">失败</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">登录时间</label>
			
 
				+                    <div class="flex items-center gap-2">
			
 
				+                        <input type="date" class="input w-full">
			
 
				+                        <span class="text-gray-500">至</span>
			
 
				+                        <input type="date" class="input w-full">
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="flex items-end gap-2">
			
 
				+                    <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">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>序号</th>
			
 
				+                            <th>用户名</th>
			
 
				+                            <th>登录IP</th>
			
 
				+                            <th>登录地点</th>
			
 
				+                            <th>浏览器</th>
			
 
				+                            <th>操作系统</th>
			
 
				+                            <th>登录状态</th>
			
 
				+                            <th>登录时间</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>1</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>Windows 10</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 10:25:36</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="1">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>2</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>192.168.1.101</td>
			
 
				+                            <td>上海市</td>
			
 
				+                            <td>Firefox 95.0</td>
			
 
				+                            <td>Windows 10</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 09:15:22</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="2">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>3</td>
			
 
				+                            <td>user001</td>
			
 
				+                            <td>192.168.1.102</td>
			
 
				+                            <td>广州市</td>
			
 
				+                            <td>Safari 15.2</td>
			
 
				+                            <td>macOS 12.1</td>
			
 
				+                            <td><span class="badge badge-warning">失败</span></td>
			
 
				+                            <td>2023-05-15 08:45:11</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="3">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>4</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>192.168.1.103</td>
			
 
				+                            <td>深圳市</td>
			
 
				+                            <td>Edge 96.0.1054.62</td>
			
 
				+                            <td>Windows 11</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-14 18:30:45</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="4">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>5</td>
			
 
				+                            <td>user002</td>
			
 
				+                            <td>192.168.1.104</td>
			
 
				+                            <td>成都市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>Android 12</td>
			
 
				+                            <td><span class="badge badge-warning">失败</span></td>
			
 
				+                            <td>2023-05-14 17:20:33</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="5">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>6</td>
			
 
				+                            <td>user002</td>
			
 
				+                            <td>192.168.1.104</td>
			
 
				+                            <td>成都市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>Android 12</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-14 17:21:05</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="6">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>7</td>
			
 
				+                            <td>viewer</td>
			
 
				+                            <td>192.168.1.105</td>
			
 
				+                            <td>武汉市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>iOS 15.2</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-14 16:10:22</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="7">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>8</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>192.168.1.106</td>
			
 
				+                            <td>杭州市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>Windows 10</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-14 15:05:18</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="8">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>9</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>192.168.1.107</td>
			
 
				+                            <td>南京市</td>
			
 
				+                            <td>Firefox 95.0</td>
			
 
				+                            <td>Windows 10</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-14 14:30:42</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="9">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>10</td>
			
 
				+                            <td>user003</td>
			
 
				+                            <td>192.168.1.108</td>
			
 
				+                            <td>重庆市</td>
			
 
				+                            <td>Chrome 96.0.4664.110</td>
			
 
				+                            <td>Windows 10</td>
			
 
				+                            <td><span class="badge badge-warning">失败</span></td>
			
 
				+                            <td>2023-05-14 13:15:36</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="10">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </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">100</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">4</div>
			
 
				+                    <div class="pagination-item">5</div>
			
 
				+                    <div class="pagination-item">
			
 
				+                        <i class="iconfont icon-right"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 日志详情弹窗 -->
			
 
				+    <div class="modal-overlay" id="logModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title">登录日志详情</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <div class="bg-gray-50 p-4 rounded-md">
			
 
				+                    <div class="grid grid-cols-2 gap-4">
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">日志编号:</span>
			
 
				+                            <span class="font-medium">1</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">用户名:</span>
			
 
				+                            <span class="font-medium">admin</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">登录IP:</span>
			
 
				+                            <span class="font-medium">192.168.1.100</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">登录地点:</span>
			
 
				+                            <span class="font-medium">北京市</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">浏览器:</span>
			
 
				+                            <span class="font-medium">Chrome 96.0.4664.110</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作系统:</span>
			
 
				+                            <span class="font-medium">Windows 10</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">登录状态:</span>
			
 
				+                            <span class="badge badge-success">成功</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">登录时间:</span>
			
 
				+                            <span class="font-medium">2023-05-15 10:25:36</span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mt-4">
			
 
				+                        <div class="text-gray-500 mb-2">登录信息:</div>
			
 
				+                        <div class="bg-white p-3 rounded border border-gray-200 text-sm font-mono overflow-x-auto">
			
 
				+                            {"username":"admin","ip":"192.168.1.100","location":"北京市","browser":"Chrome 96.0.4664.110","os":"Windows 10","status":"success","msg":"登录成功","time":"2023-05-15 10:25:36","device":"PC","userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"}
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="closeBtn">关闭</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 日志详情弹窗
			
 
				+            const logModal = document.getElementById('logModal');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const closeBtn = document.getElementById('closeBtn');
			
 
				+            const viewBtns = document.querySelectorAll('.view-btn');
			
 
				+            
			
 
				+            // 打开日志详情弹窗
			
 
				+            viewBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const logId = this.getAttribute('data-id');
			
 
				+                    // 实际应用中应该通过API获取日志详情
			
 
				+                    logModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeLogModal() {
			
 
				+                logModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeLogModal);
			
 
				+            closeBtn.addEventListener('click', closeLogModal);
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === logModal) {
			
 
				+                    closeLogModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/machine-monitor-content.html
+++ b/pages/machine-monitor-content.html
@@ -0,0 +1,597 @@
 
				+<!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%;
			
 
				+            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 {
			
 
				+            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);
			
 
				+        }
			
 
				+        
			
 
				+        .map-container {
			
 
				+            height: 480px;
			
 
				+            width: 100%;
			
 
				+            position: relative;
			
 
				+            overflow: hidden;
			
 
				+            border-radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        .monitor-card {
			
 
				+            height: 100%;
			
 
				+            transition: all 0.3s;
			
 
				+        }
			
 
				+        
			
 
				+        .monitor-card:hover {
			
 
				+            transform: translateY(-3px);
			
 
				+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-bar {
			
 
				+            height: 8px;
			
 
				+            border-radius: 4px;
			
 
				+            background-color: #e5e7eb;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-fill {
			
 
				+            height: 100%;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .map-controls {
			
 
				+            position: absolute;
			
 
				+            top: 20px;
			
 
				+            right: 20px;
			
 
				+            z-index: 10;
			
 
				+        }
			
 
				+        
			
 
				+        .map-control {
			
 
				+            background-color: white;
			
 
				+            width: 36px;
			
 
				+            height: 36px;
			
 
				+            border-radius: 4px;
			
 
				+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            justify-content: center;
			
 
				+            margin-bottom: 8px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .map-control:hover {
			
 
				+            background-color: #f3f4f6;
			
 
				+        }
			
 
				+        
			
 
				+        .machine-info {
			
 
				+            position: absolute;
			
 
				+            bottom: 20px;
			
 
				+            left: 20px;
			
 
				+            background-color: white;
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
			
 
				+            padding: 16px;
			
 
				+            width: 300px;
			
 
				+            max-width: 90%;
			
 
				+            display: none;
			
 
				+        }
			
 
				+        
			
 
				+        .machine-info.show {
			
 
				+            display: block;
			
 
				+        }
			
 
				+        
			
 
				+        .device-marker {
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .device-marker:hover {
			
 
				+            transform: scale(1.1);
			
 
				+        }
			
 
				+        
			
 
				+        .gauge {
			
 
				+            position: relative;
			
 
				+            width: 100%;
			
 
				+            height: 120px;
			
 
				+        }
			
 
				+        
			
 
				+        .gauge-value {
			
 
				+            position: absolute;
			
 
				+            bottom: 0;
			
 
				+            left: 50%;
			
 
				+            transform: translateX(-50%);
			
 
				+            font-size: 20px;
			
 
				+            font-weight: bold;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .gauge-svg {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+    </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">8</div>
			
 
				+                <div class="text-sm text-gray-400 mt-1">总数：12</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">5</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-yellow-600">2</div>
			
 
				+                <div class="text-sm text-gray-400 mt-1">未处理：1</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">126 亩</div>
			
 
				+                <div class="text-sm text-gray-400 mt-1">计划：180 亩</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			
 
				+            <div class="lg:col-span-2">
			
 
				+                <div class="card">
			
 
				+                    <div class="map-container">
			
 
				+                        <!-- 模拟地图，实际项目中应替换为地图组件 -->
			
 
				+                        <svg width="100%" height="100%" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice">
			
 
				+                            <defs>
			
 
				+                                <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
			
 
				+                                    <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#ccc" stroke-width="1"/>
			
 
				+                                </pattern>
			
 
				+                            </defs>
			
 
				+                            
			
 
				+                            <rect width="100%" height="100%" fill="#f3f4f6"/>
			
 
				+                            <rect width="100%" height="100%" fill="url(#grid)"/>
			
 
				+                            
			
 
				+                            <!-- 地块区域 -->
			
 
				+                            <polygon points="150,150 350,150 350,250 150,250" fill="#4CAF5022" stroke="#4CAF50" stroke-width="2"/>
			
 
				+                            <polygon points="400,150 500,150 500,350 400,350" fill="#FF980022" stroke="#FF9800" stroke-width="2"/>
			
 
				+                            <polygon points="150,300 350,300 350,450 150,450" fill="#2196F322" stroke="#2196F3" stroke-width="2"/>
			
 
				+                            <polygon points="600,150 800,150 800,300 600,300" fill="#9C27B022" stroke="#9C27B0" stroke-width="2"/>
			
 
				+                            
			
 
				+                            <!-- 道路 -->
			
 
				+                            <line x1="0" y1="400" x2="1000" y2="400" stroke="#795548" stroke-width="15"/>
			
 
				+                            <line x1="550" y1="0" x2="550" y2="600" stroke="#795548" stroke-width="10"/>
			
 
				+                            
			
 
				+                            <!-- 设备位置标记 -->
			
 
				+                            <circle cx="250" cy="200" r="12" fill="#4CAF50" class="device-marker" data-id="1"/>
			
 
				+                            <circle cx="450" cy="250" r="12" fill="#FF9800" class="device-marker" data-id="2"/>
			
 
				+                            <circle cx="250" cy="350" r="12" fill="#2196F3" class="device-marker" data-id="3"/>
			
 
				+                            <circle cx="700" cy="220" r="12" fill="#ef4444" class="device-marker" data-id="4"/>
			
 
				+                            <circle cx="600" cy="400" r="12" fill="#4CAF50" class="device-marker" data-id="5"/>
			
 
				+                            
			
 
				+                            <!-- 设备移动路径 -->
			
 
				+                            <path d="M 250,200 L 260,210 L 270,230 L 290,240" fill="none" stroke="#4CAF5088" stroke-width="3" stroke-dasharray="5,5"/>
			
 
				+                            <path d="M 450,250 L 460,270 L 470,300 L 480,320" fill="none" stroke="#FF980088" stroke-width="3" stroke-dasharray="5,5"/>
			
 
				+                        </svg>
			
 
				+                        
			
 
				+                        <!-- 地图控制按钮 -->
			
 
				+                        <div class="map-controls">
			
 
				+                            <div class="map-control" title="放大">
			
 
				+                                <i class="iconfont icon-zoom-in"></i>
			
 
				+                            </div>
			
 
				+                            <div class="map-control" title="缩小">
			
 
				+                                <i class="iconfont icon-zoom-out"></i>
			
 
				+                            </div>
			
 
				+                            <div class="map-control" title="定位">
			
 
				+                                <i class="iconfont icon-location"></i>
			
 
				+                            </div>
			
 
				+                            <div class="map-control" title="全屏">
			
 
				+                                <i class="iconfont icon-fullscreen"></i>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        
			
 
				+                        <!-- 设备信息窗口 -->
			
 
				+                        <div class="machine-info" id="machineInfo">
			
 
				+                            <div class="flex justify-between items-center mb-4">
			
 
				+                                <h3 class="font-bold">拖拉机 #1</h3>
			
 
				+                                <div class="flex items-center">
			
 
				+                                    <span class="status-indicator status-online"></span>
			
 
				+                                    <span>在线</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="mb-4">
			
 
				+                                <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">5.6 km/h</span>
			
 
				+                                </div>
			
 
				+                                <div class="mb-1 flex justify-between">
			
 
				+                                    <span>油量</span>
			
 
				+                                    <span class="font-medium">75%</span>
			
 
				+                                </div>
			
 
				+                                <div class="mb-1 flex justify-between">
			
 
				+                                    <span>作业面积</span>
			
 
				+                                    <span class="font-medium">35 亩</span>
			
 
				+                                </div>
			
 
				+                                <div class="mb-1 flex justify-between">
			
 
				+                                    <span>运行时间</span>
			
 
				+                                    <span class="font-medium">3.5 小时</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <div class="flex gap-2">
			
 
				+                                <button class="btn btn-default btn-sm flex-1">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    实时视频
			
 
				+                                </button>
			
 
				+                                <button class="btn btn-default btn-sm flex-1">
			
 
				+                                    <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                    详细信息
			
 
				+                                </button>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="grid grid-rows-3 gap-6">
			
 
				+                <!-- 设备列表 -->
			
 
				+                <div class="card p-4 row-span-1 overflow-auto" style="max-height: 300px;">
			
 
				+                    <h3 class="font-bold mb-4">设备列表</h3>
			
 
				+                    
			
 
				+                    <div class="mb-3 pb-3 border-b">
			
 
				+                        <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="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">作业中</span>
			
 
				+                        </div>
			
 
				+                        <div class="text-xs text-gray-500">东区1号地块 | 驾驶员：张三</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mb-3 pb-3 border-b">
			
 
				+                        <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="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">告警</span>
			
 
				+                        </div>
			
 
				+                        <div class="text-xs text-gray-500">西区2号地块 | 驾驶员：李四</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mb-3 pb-3 border-b">
			
 
				+                        <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="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">作业中</span>
			
 
				+                        </div>
			
 
				+                        <div class="text-xs text-gray-500">南区3号地块 | 驾驶员：王五</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mb-3 pb-3 border-b">
			
 
				+                        <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">喷药机 #4</span>
			
 
				+                            </div>
			
 
				+                            <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">离线</span>
			
 
				+                        </div>
			
 
				+                        <div class="text-xs text-gray-500">北区4号地块 | 驾驶员：赵六</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mb-3 pb-3 border-b">
			
 
				+                        <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">拖拉机 #5</span>
			
 
				+                            </div>
			
 
				+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">待机</span>
			
 
				+                        </div>
			
 
				+                        <div class="text-xs text-gray-500">中央区域 | 驾驶员：钱七</div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <!-- 燃油监控 -->
			
 
				+                <div class="card p-4 row-span-1">
			
 
				+                    <h3 class="font-bold mb-4">燃油监控</h3>
			
 
				+                    
			
 
				+                    <div class="gauge">
			
 
				+                        <svg class="gauge-svg" viewBox="0 0 200 100">
			
 
				+                            <path d="M 40 90 A 60 60 0 0 1 160 90" fill="none" stroke="#e5e7eb" stroke-width="16" stroke-linecap="round" />
			
 
				+                            <path d="M 40 90 A 60 60 0 0 1 160 90" fill="none" stroke="#4CAF50" stroke-width="16" stroke-linecap="round" stroke-dasharray="188.5 188.5" stroke-dashoffset="47.1" />
			
 
				+                        </svg>
			
 
				+                        <div class="gauge-value">75%</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="grid grid-cols-2 gap-4 mt-2">
			
 
				+                        <div>
			
 
				+                            <div class="text-xs text-gray-500 mb-1">今日消耗</div>
			
 
				+                            <div class="font-medium">32.5 L</div>
			
 
				+                        </div>
			
 
				+                        <div>
			
 
				+                            <div class="text-xs text-gray-500 mb-1">剩余可用</div>
			
 
				+                            <div class="font-medium">125.8 L</div>
			
 
				+                        </div>
			
 
				+                        <div>
			
 
				+                            <div class="text-xs text-gray-500 mb-1">平均油耗</div>
			
 
				+                            <div class="font-medium">9.2 L/h</div>
			
 
				+                        </div>
			
 
				+                        <div>
			
 
				+                            <div class="text-xs text-gray-500 mb-1">预计续航</div>
			
 
				+                            <div class="font-medium">13.7 小时</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <!-- 设备动态 -->
			
 
				+                <div class="card p-4 row-span-1">
			
 
				+                    <h3 class="font-bold mb-4">设备动态</h3>
			
 
				+                    
			
 
				+                    <div class="timeline">
			
 
				+                        <div class="timeline-item">
			
 
				+                            <div class="timeline-time">10:25</div>
			
 
				+                            <div class="font-medium">拖拉机 #1 开始作业</div>
			
 
				+                        </div>
			
 
				+                        <div class="timeline-item">
			
 
				+                            <div class="timeline-time">09:48</div>
			
 
				+                            <div class="font-medium">收割机 #2 发出低油量警告</div>
			
 
				+                        </div>
			
 
				+                        <div class="timeline-item">
			
 
				+                            <div class="timeline-time">09:15</div>
			
 
				+                            <div class="font-medium">播种机 #3 完成作业</div>
			
 
				+                        </div>
			
 
				+                        <div class="timeline-item">
			
 
				+                            <div class="timeline-time">08:30</div>
			
 
				+                            <div class="font-medium">喷药机 #4 离线</div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 点击设备标记显示信息窗口
			
 
				+            const deviceMarkers = document.querySelectorAll('.device-marker');
			
 
				+            const machineInfo = document.getElementById('machineInfo');
			
 
				+            
			
 
				+            deviceMarkers.forEach(marker => {
			
 
				+                marker.addEventListener('click', function() {
			
 
				+                    const deviceId = this.getAttribute('data-id');
			
 
				+                    // 在实际应用中，这里应该根据设备ID获取详细信息
			
 
				+                    machineInfo.style.display = 'block';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 模拟实时数据更新
			
 
				+            setInterval(function() {
			
 
				+                // 这里可以添加实时数据更新逻辑
			
 
				+                // 例如通过WebSocket接收设备位置、状态等信息
			
 
				+            }, 3000);
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/machine-monitor.html
+++ b/pages/machine-monitor.html
@@ -0,0 +1,85 @@
 
				+<!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">
			
 
				+    <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;
			
 
				+            --radius: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        body {
			
 
				+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
			
 
				+            background-color: #f5f7f9;
			
 
				+            color: var(--text-primary);
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            height: 100vh;
			
 
				+            width: 100vw;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        /* 内容页面框架 */
			
 
				+        #content-frame {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+            border: none;
			
 
				+            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;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 使用iframe来完全隔离和控制页面内容 -->
			
 
				+    <iframe id="content-frame" src="machine-monitor-content.html" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="eager" scrolling="auto" frameborder="0" allowfullscreen></iframe>
			
 
				+    
			
 
				+    <script>
			
 
				+        // 监听iframe加载完成
			
 
				+        document.getElementById('content-frame').onload = function() {
			
 
				+            // 确保iframe高度铺满
			
 
				+            this.style.height = window.innerHeight + 'px';
			
 
				+        };
			
 
				+        
			
 
				+        // 页面大小变化时调整iframe大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            document.getElementById('content-frame').style.height = window.innerHeight + 'px';
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/menu-management.html
+++ b/pages/menu-management.html
@@ -0,0 +1,556 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node {
			
 
				+            padding: 8px 0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            padding: 8px 12px;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content:hover {
			
 
				+            background-color: #f0f7f0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content.active {
			
 
				+            background-color: #e8f5e9;
			
 
				+            color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-icon {
			
 
				+            margin-right: 8px;
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow {
			
 
				+            margin-left: auto;
			
 
				+            transition: transform 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow.open {
			
 
				+            transform: rotate(90deg);
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children {
			
 
				+            padding-left: 24px;
			
 
				+            max-height: 0;
			
 
				+            overflow: hidden;
			
 
				+            transition: max-height 0.3s ease;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children.open {
			
 
				+            max-height: 1000px;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addMenuBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增菜单
			
 
				+            </button>
			
 
				+        </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="1">显示</option>
			
 
				+                        <option value="0">隐藏</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			
 
				+            <!-- 左侧菜单树 -->
			
 
				+            <div class="card p-4">
			
 
				+                <h2 class="font-medium mb-4">菜单树</h2>
			
 
				+                
			
 
				+                <div class="tree-container overflow-y-auto" style="max-height: 600px;">
			
 
				+                    <!-- 系统管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="1">
			
 
				+                            <i class="iconfont icon-setting tree-node-icon"></i>
			
 
				+                            <span>系统管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children open">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="101">
			
 
				+                                    <i class="iconfont icon-user tree-node-icon"></i>
			
 
				+                                    <span>用户管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="102">
			
 
				+                                    <i class="iconfont icon-team tree-node-icon"></i>
			
 
				+                                    <span>角色管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="103">
			
 
				+                                    <i class="iconfont icon-lock tree-node-icon"></i>
			
 
				+                                    <span>权限管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="104">
			
 
				+                                    <i class="iconfont icon-apartment tree-node-icon"></i>
			
 
				+                                    <span>组织机构管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="105">
			
 
				+                                    <i class="iconfont icon-file tree-node-icon"></i>
			
 
				+                                    <span>登录日志</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="106">
			
 
				+                                    <i class="iconfont icon-file-text tree-node-icon"></i>
			
 
				+                                    <span>操作日志</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content active" data-id="107">
			
 
				+                                    <i class="iconfont icon-book tree-node-icon"></i>
			
 
				+                                    <span>字典管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="108">
			
 
				+                                    <i class="iconfont icon-menu tree-node-icon"></i>
			
 
				+                                    <span>菜单管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="109">
			
 
				+                                    <i class="iconfont icon-schedule tree-node-icon"></i>
			
 
				+                                    <span>定时任务管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 地块与农场管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="2">
			
 
				+                            <i class="iconfont icon-appstore tree-node-icon"></i>
			
 
				+                            <span>地块与农场管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="201">
			
 
				+                                    <i class="iconfont icon-database tree-node-icon"></i>
			
 
				+                                    <span>地块管理列表</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="202">
			
 
				+                                    <i class="iconfont icon-link tree-node-icon"></i>
			
 
				+                                    <span>地块设备绑定</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="203">
			
 
				+                                    <i class="iconfont icon-user-add tree-node-icon"></i>
			
 
				+                                    <span>地块人员绑定</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="204">
			
 
				+                                    <i class="iconfont icon-edit tree-node-icon"></i>
			
 
				+                                    <span>地块绘制区域</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 设备监控管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="3">
			
 
				+                            <i class="iconfont icon-video-camera tree-node-icon"></i>
			
 
				+                            <span>设备监控管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="301">
			
 
				+                                    <i class="iconfont icon-database tree-node-icon"></i>
			
 
				+                                    <span>设备管理列表</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="302">
			
 
				+                                    <i class="iconfont icon-eye tree-node-icon"></i>
			
 
				+                                    <span>设备监控实时展示</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="303">
			
 
				+                                    <i class="iconfont icon-warning tree-node-icon"></i>
			
 
				+                                    <span>设备告警信息</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 右侧菜单详情 -->
			
 
				+            <div class="card p-4 lg:col-span-2">
			
 
				+                <h2 class="font-medium mb-4">菜单详情</h2>
			
 
				+                
			
 
				+                <div class="bg-gray-50 p-4 rounded-md mb-6">
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">菜单名称:</span>
			
 
				+                        <span class="font-medium">字典管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">菜单类型:</span>
			
 
				+                        <span class="font-medium">菜单</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">菜单图标:</span>
			
 
				+                        <span class="font-medium"><i class="iconfont icon-book mr-2"></i>icon-book</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">排序:</span>
			
 
				+                        <span class="font-medium">7</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">权限标识:</span>
			
 
				+                        <span class="font-medium">system:dict:list</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">路由地址:</span>
			
 
				+                        <span class="font-medium">/system/dict</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">组件路径:</span>
			
 
				+                        <span class="font-medium">system/dict/index</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">显示状态:</span>
			
 
				+                        <span class="badge badge-success">显示</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">是否外链:</span>
			
 
				+                        <span class="badge badge-default">否</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">缓存状态:</span>
			
 
				+                        <span class="badge badge-success">是</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">创建时间:</span>
			
 
				+                        <span class="font-medium">2023-01-01 00:00:00</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="mb-6">
			
 
				+                    <h3 class="font-medium mb-3">菜单按钮</h3>
			
 
				+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">查询</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:dict:query</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">新增</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:dict:add</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">编辑</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:dict:edit</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">删除</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:dict:delete</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">导出</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:dict:export</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="flex gap-2">
			
 
				+                    <button class="btn btn-default" id="editMenuBtn">
			
 
				+                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                        编辑菜单
			
 
				+                    </button>
			
 
				+                    <button class="btn btn-primary">
			
 
				+                        <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                        添加子菜单
			
 
				+                    </button>
			
 
				+                    <button class="btn btn-danger">
			
 
				+                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                        删除菜单
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 菜单表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="menuModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">编辑菜单</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="menuForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="menuType">菜单类型</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="menuType" value="M" class="mr-2" checked>
			
 
				+                                目录
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="menuType" value="C" class="mr-2">
			
 
				+                                菜单
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="menuType" value="F" class="mr-2">
			
 
				+                                按钮
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="menuName">菜单名称</label>
			
 
				+                        <input type="text" id="menuName" class="form-input" placeholder="请输入菜单名称" value="字典管理">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="parentId">上级菜单</label>
			
 
				+                        <select id="parentId" class="form-input">
			
 
				+                            <option value="0">顶级菜单</option>
			
 
				+                            <option value="1" selected>系统管理</option>
			
 
				+                            <option value="2">地块与农场管理</option>
			
 
				+                            <option value="3">设备监控管理</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="menuIcon">菜单图标</label>
			
 
				+                        <input type="text" id="menuIcon" class="form-input" placeholder="请输入菜单图标" value="icon-book">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="menuSort">显示排序</label>
			
 
				+                        <input type="number" id="menuSort" class="form-input" placeholder="请输入显示排序" value="7">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="routePath">路由地址</label>
			
 
				+                        <input type="text" id="routePath" class="form-input" placeholder="请输入路由地址" value="/system/dict">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="component">组件路径</label>
			
 
				+                        <input type="text" id="component" class="form-input" placeholder="请输入组件路径" value="system/dict/index">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="permission">权限标识</label>
			
 
				+                        <input type="text" id="permission" class="form-input" placeholder="请输入权限标识" value="system:dict:list">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">显示状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="visible" value="1" checked class="mr-2">
			
 
				+                                显示
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="visible" value="0" class="mr-2">
			
 
				+                                隐藏
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">是否外链</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="isFrame" value="1" class="mr-2">
			
 
				+                                是
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="isFrame" value="0" checked class="mr-2">
			
 
				+                                否
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">是否缓存</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="isCache" value="1" checked class="mr-2">
			
 
				+                                是
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="isCache" value="0" class="mr-2">
			
 
				+                                否
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 菜单树展开/折叠
			
 
				+            const treeNodeContents = document.querySelectorAll('.tree-node-content');
			
 
				+            
			
 
				+            treeNodeContents.forEach(node => {
			
 
				+                const arrow = node.querySelector('.tree-node-arrow');
			
 
				+                if (arrow) {
			
 
				+                    node.addEventListener('click', function() {
			
 
				+                        const children = this.nextElementSibling;
			
 
				+                        if (children && children.classList.contains('tree-node-children')) {
			
 
				+                            children.classList.toggle('open');
			
 
				+                            arrow.classList.toggle('open');
			
 
				+                        }
			
 
				+                    });
			
 
				+                }
			
 
				+            });
			
 
				+            
			
 
				+            // 默认展开系统管理
			
 
				+            document.querySelector('.tree-node-content[data-id="1"] .tree-node-arrow').classList.add('open');
			
 
				+            
			
 
				+            // 菜单项点击事件
			
 
				+            const menuItems = document.querySelectorAll('.tree-node-content');
			
 
				+            
			
 
				+            menuItems.forEach(item => {
			
 
				+                item.addEventListener('click', function(e) {
			
 
				+                    if (!e.target.classList.contains('tree-node-arrow') && !e.target.classList.contains('icon-right')) {
			
 
				+                        // 移除其他项的活动状态
			
 
				+                        menuItems.forEach(i => i.classList.remove('active'));
			
 
				+                        
			
 
				+                        // 添加当前项的活动状态
			
 
				+                        this.classList.add('active');
			
 
				+                        
			
 
				+                        // 实际应用中，这里应该发送请求获取对应的菜单详情
			
 
				+                    }
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 菜单表单弹窗
			
 
				+            const menuModal = document.getElementById('menuModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addMenuBtn = document.getElementById('addMenuBtn');
			
 
				+            const editMenuBtn = document.getElementById('editMenuBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            
			
 
				+            // 打开新增菜单弹窗
			
 
				+            addMenuBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增菜单';
			
 
				+                document.getElementById('menuForm').reset();
			
 
				+                menuModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑菜单弹窗
			
 
				+            editMenuBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '编辑菜单';
			
 
				+                menuModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeMenuModal() {
			
 
				+                menuModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeMenuModal);
			
 
				+            cancelBtn.addEventListener('click', closeMenuModal);
			
 
				+            
			
 
				+            // 保存菜单
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                alert('菜单信息保存成功！');
			
 
				+                closeMenuModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === menuModal) {
			
 
				+                    closeMenuModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/operation-log.html
+++ b/pages/operation-log.html
@@ -0,0 +1,428 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </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-export btn-icon"></i>
			
 
				+                    导出
			
 
				+                </button>
			
 
				+                <button class="btn btn-danger">
			
 
				+                    <i class="iconfont icon-delete 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">
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">操作人员</label>
			
 
				+                    <input type="text" class="input w-full" placeholder="请输入操作人员">
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">操作类型</label>
			
 
				+                    <select class="select w-full">
			
 
				+                        <option value="">所有类型</option>
			
 
				+                        <option value="1">新增</option>
			
 
				+                        <option value="2">修改</option>
			
 
				+                        <option value="3">删除</option>
			
 
				+                        <option value="4">导出</option>
			
 
				+                        <option value="5">导入</option>
			
 
				+                        <option value="6">查询</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">操作模块</label>
			
 
				+                    <select class="select w-full">
			
 
				+                        <option value="">所有模块</option>
			
 
				+                        <option value="1">用户管理</option>
			
 
				+                        <option value="2">角色管理</option>
			
 
				+                        <option value="3">权限管理</option>
			
 
				+                        <option value="4">组织机构管理</option>
			
 
				+                        <option value="5">地块管理</option>
			
 
				+                        <option value="6">设备管理</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">操作状态</label>
			
 
				+                    <select class="select w-full">
			
 
				+                        <option value="">所有状态</option>
			
 
				+                        <option value="1">成功</option>
			
 
				+                        <option value="0">失败</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                    <label class="block text-sm font-medium text-gray-700 mb-1">操作时间</label>
			
 
				+                    <div class="flex items-center gap-2">
			
 
				+                        <input type="date" class="input w-full">
			
 
				+                        <span class="text-gray-500">至</span>
			
 
				+                        <input type="date" class="input w-full">
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <div class="flex items-end gap-2">
			
 
				+                    <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">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>序号</th>
			
 
				+                            <th>操作模块</th>
			
 
				+                            <th>操作类型</th>
			
 
				+                            <th>操作人员</th>
			
 
				+                            <th>操作内容</th>
			
 
				+                            <th>操作IP</th>
			
 
				+                            <th>操作地点</th>
			
 
				+                            <th>操作状态</th>
			
 
				+                            <th>操作时间</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>1</td>
			
 
				+                            <td>用户管理</td>
			
 
				+                            <td>新增</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>新增用户：user005</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 10:30:25</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="1">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>2</td>
			
 
				+                            <td>角色管理</td>
			
 
				+                            <td>修改</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>修改角色：运营管理员</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 10:15:18</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="2">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>3</td>
			
 
				+                            <td>地块管理</td>
			
 
				+                            <td>新增</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>新增地块：A区-01</td>
			
 
				+                            <td>192.168.1.101</td>
			
 
				+                            <td>上海市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 09:45:32</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="3">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>4</td>
			
 
				+                            <td>设备管理</td>
			
 
				+                            <td>删除</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>删除设备：温湿度传感器-0023</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-warning">失败</span></td>
			
 
				+                            <td>2023-05-15 09:30:15</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="4">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>5</td>
			
 
				+                            <td>地块设备绑定</td>
			
 
				+                            <td>修改</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>绑定设备：A区-01 - 温湿度传感器-0025</td>
			
 
				+                            <td>192.168.1.101</td>
			
 
				+                            <td>上海市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 09:20:45</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="5">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>6</td>
			
 
				+                            <td>用户管理</td>
			
 
				+                            <td>修改</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>修改用户：user003 - 启用账号</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 09:10:22</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="6">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>7</td>
			
 
				+                            <td>地块人员绑定</td>
			
 
				+                            <td>新增</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>绑定人员：A区-01 - 李四</td>
			
 
				+                            <td>192.168.1.101</td>
			
 
				+                            <td>上海市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 08:55:30</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="7">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>8</td>
			
 
				+                            <td>组织机构管理</td>
			
 
				+                            <td>新增</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>新增部门：数据分析部</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 08:40:15</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="8">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>9</td>
			
 
				+                            <td>权限管理</td>
			
 
				+                            <td>修改</td>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>修改权限：数据分析模块</td>
			
 
				+                            <td>192.168.1.100</td>
			
 
				+                            <td>北京市</td>
			
 
				+                            <td><span class="badge badge-success">成功</span></td>
			
 
				+                            <td>2023-05-15 08:30:42</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="9">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>10</td>
			
 
				+                            <td>设备管理</td>
			
 
				+                            <td>导入</td>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>批量导入设备：10条记录</td>
			
 
				+                            <td>192.168.1.101</td>
			
 
				+                            <td>上海市</td>
			
 
				+                            <td><span class="badge badge-warning">失败</span></td>
			
 
				+                            <td>2023-05-15 08:20:36</td>
			
 
				+                            <td>
			
 
				+                                <button class="btn btn-default btn-sm view-btn" data-id="10">
			
 
				+                                    <i class="iconfont icon-eye btn-icon"></i>
			
 
				+                                    详情
			
 
				+                                </button>
			
 
				+                            </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">125</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">4</div>
			
 
				+                    <div class="pagination-item">5</div>
			
 
				+                    <div class="pagination-item">
			
 
				+                        <i class="iconfont icon-right"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 操作日志详情弹窗 -->
			
 
				+    <div class="modal-overlay" id="logModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title">操作日志详情</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <div class="bg-gray-50 p-4 rounded-md">
			
 
				+                    <div class="grid grid-cols-2 gap-4">
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">日志编号:</span>
			
 
				+                            <span class="font-medium">1</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作人员:</span>
			
 
				+                            <span class="font-medium">admin</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作模块:</span>
			
 
				+                            <span class="font-medium">用户管理</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作类型:</span>
			
 
				+                            <span class="font-medium">新增</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作IP:</span>
			
 
				+                            <span class="font-medium">192.168.1.100</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作地点:</span>
			
 
				+                            <span class="font-medium">北京市</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作状态:</span>
			
 
				+                            <span class="badge badge-success">成功</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">操作时间:</span>
			
 
				+                            <span class="font-medium">2023-05-15 10:30:25</span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mt-4">
			
 
				+                        <div class="text-gray-500 mb-2">操作内容:</div>
			
 
				+                        <div class="bg-white p-3 rounded border border-gray-200 text-sm">
			
 
				+                            新增用户：user005
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mt-4">
			
 
				+                        <div class="text-gray-500 mb-2">请求参数:</div>
			
 
				+                        <div class="bg-white p-3 rounded border border-gray-200 text-sm font-mono overflow-x-auto">
			
 
				+                            {"username":"user005","name":"王小五","phone":"13900139005","email":"user005@aizhinong.com","roleId":6,"deptId":102,"status":1}
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="mt-4">
			
 
				+                        <div class="text-gray-500 mb-2">操作方法:</div>
			
 
				+                        <div class="bg-white p-3 rounded border border-gray-200 text-sm font-mono">
			
 
				+                            com.aizhinong.system.controller.UserController.add()
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="closeBtn">关闭</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 操作日志详情弹窗
			
 
				+            const logModal = document.getElementById('logModal');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const closeBtn = document.getElementById('closeBtn');
			
 
				+            const viewBtns = document.querySelectorAll('.view-btn');
			
 
				+            
			
 
				+            // 打开操作日志详情弹窗
			
 
				+            viewBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const logId = this.getAttribute('data-id');
			
 
				+                    // 实际应用中应该通过API获取日志详情
			
 
				+                    logModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeLogModal() {
			
 
				+                logModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeLogModal);
			
 
				+            closeBtn.addEventListener('click', closeLogModal);
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === logModal) {
			
 
				+                    closeLogModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/org-management.html
+++ b/pages/org-management.html
@@ -0,0 +1,429 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node {
			
 
				+            padding: 8px 0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            padding: 8px 12px;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content:hover {
			
 
				+            background-color: #f0f7f0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content.active {
			
 
				+            background-color: #e8f5e9;
			
 
				+            color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-icon {
			
 
				+            margin-right: 8px;
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow {
			
 
				+            margin-left: auto;
			
 
				+            transition: transform 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow.open {
			
 
				+            transform: rotate(90deg);
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children {
			
 
				+            padding-left: 24px;
			
 
				+            max-height: 0;
			
 
				+            overflow: hidden;
			
 
				+            transition: max-height 0.3s ease;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children.open {
			
 
				+            max-height: 1000px;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addOrgBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增组织
			
 
				+            </button>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			
 
				+            <!-- 左侧组织树 -->
			
 
				+            <div class="card p-4">
			
 
				+                <h2 class="font-medium mb-4">组织机构树</h2>
			
 
				+                
			
 
				+                <div class="search-box mb-4">
			
 
				+                    <input type="text" class="input w-full" placeholder="搜索组织">
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="tree-container overflow-y-auto" style="max-height: 600px;">
			
 
				+                    <!-- 总公司 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="1">
			
 
				+                            <i class="iconfont icon-home tree-node-icon"></i>
			
 
				+                            <span>爱智农科技有限公司</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <!-- 技术部 -->
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="101">
			
 
				+                                    <i class="iconfont icon-code tree-node-icon"></i>
			
 
				+                                    <span>技术部</span>
			
 
				+                                    <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                                </div>
			
 
				+                                <div class="tree-node-children">
			
 
				+                                    <div class="tree-node">
			
 
				+                                        <div class="tree-node-content" data-id="10101">
			
 
				+                                            <i class="iconfont icon-code tree-node-icon"></i>
			
 
				+                                            <span>研发一组</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                    <div class="tree-node">
			
 
				+                                        <div class="tree-node-content" data-id="10102">
			
 
				+                                            <i class="iconfont icon-code tree-node-icon"></i>
			
 
				+                                            <span>研发二组</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                    <div class="tree-node">
			
 
				+                                        <div class="tree-node-content" data-id="10103">
			
 
				+                                            <i class="iconfont icon-code tree-node-icon"></i>
			
 
				+                                            <span>测试组</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <!-- 运营部 -->
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content active" data-id="102">
			
 
				+                                    <i class="iconfont icon-dashboard tree-node-icon"></i>
			
 
				+                                    <span>运营部</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <!-- 市场部 -->
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="103">
			
 
				+                                    <i class="iconfont icon-shop tree-node-icon"></i>
			
 
				+                                    <span>市场部</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <!-- 农业技术部 -->
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="104">
			
 
				+                                    <i class="iconfont icon-experiment tree-node-icon"></i>
			
 
				+                                    <span>农业技术部</span>
			
 
				+                                    <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                                </div>
			
 
				+                                <div class="tree-node-children">
			
 
				+                                    <div class="tree-node">
			
 
				+                                        <div class="tree-node-content" data-id="10401">
			
 
				+                                            <i class="iconfont icon-experiment tree-node-icon"></i>
			
 
				+                                            <span>种植技术组</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                    <div class="tree-node">
			
 
				+                                        <div class="tree-node-content" data-id="10402">
			
 
				+                                            <i class="iconfont icon-experiment tree-node-icon"></i>
			
 
				+                                            <span>设备技术组</span>
			
 
				+                                        </div>
			
 
				+                                    </div>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            
			
 
				+                            <!-- 行政人事部 -->
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="105">
			
 
				+                                    <i class="iconfont icon-team tree-node-icon"></i>
			
 
				+                                    <span>行政人事部</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 右侧组织详情 -->
			
 
				+            <div class="card p-4 lg:col-span-2">
			
 
				+                <h2 class="font-medium mb-4">组织详情</h2>
			
 
				+                
			
 
				+                <div class="bg-gray-50 p-4 rounded-md mb-6">
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">组织名称:</span>
			
 
				+                        <span class="font-medium">运营部</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">组织编码:</span>
			
 
				+                        <span class="font-medium">OP-DEPT</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">上级组织:</span>
			
 
				+                        <span class="font-medium">爱智农科技有限公司</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">负责人:</span>
			
 
				+                        <span class="font-medium">张三</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">联系电话:</span>
			
 
				+                        <span class="font-medium">13800138000</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">排序:</span>
			
 
				+                        <span class="font-medium">2</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">状态:</span>
			
 
				+                        <span class="badge badge-success">启用</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">创建时间:</span>
			
 
				+                        <span class="font-medium">2023-01-01 00:00:00</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="mb-6">
			
 
				+                    <h3 class="font-medium mb-3">部门成员</h3>
			
 
				+                    <div class="table-container">
			
 
				+                        <table>
			
 
				+                            <thead>
			
 
				+                                <tr>
			
 
				+                                    <th>姓名</th>
			
 
				+                                    <th>职位</th>
			
 
				+                                    <th>手机号</th>
			
 
				+                                    <th>邮箱</th>
			
 
				+                                    <th>状态</th>
			
 
				+                                </tr>
			
 
				+                            </thead>
			
 
				+                            <tbody>
			
 
				+                                <tr>
			
 
				+                                    <td>张三</td>
			
 
				+                                    <td>运营总监</td>
			
 
				+                                    <td>13800138000</td>
			
 
				+                                    <td>zhangsan@aizhinong.com</td>
			
 
				+                                    <td><span class="badge badge-success">在职</span></td>
			
 
				+                                </tr>
			
 
				+                                <tr>
			
 
				+                                    <td>李四</td>
			
 
				+                                    <td>运营经理</td>
			
 
				+                                    <td>13800138001</td>
			
 
				+                                    <td>lisi@aizhinong.com</td>
			
 
				+                                    <td><span class="badge badge-success">在职</span></td>
			
 
				+                                </tr>
			
 
				+                                <tr>
			
 
				+                                    <td>王五</td>
			
 
				+                                    <td>运营专员</td>
			
 
				+                                    <td>13800138002</td>
			
 
				+                                    <td>wangwu@aizhinong.com</td>
			
 
				+                                    <td><span class="badge badge-success">在职</span></td>
			
 
				+                                </tr>
			
 
				+                                <tr>
			
 
				+                                    <td>赵六</td>
			
 
				+                                    <td>运营专员</td>
			
 
				+                                    <td>13800138003</td>
			
 
				+                                    <td>zhaoliu@aizhinong.com</td>
			
 
				+                                    <td><span class="badge badge-success">在职</span></td>
			
 
				+                                </tr>
			
 
				+                            </tbody>
			
 
				+                        </table>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="flex gap-2">
			
 
				+                    <button class="btn btn-default" id="editOrgBtn">
			
 
				+                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                        编辑组织
			
 
				+                    </button>
			
 
				+                    <button class="btn btn-danger">
			
 
				+                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                        删除组织
			
 
				+                    </button>
			
 
				+                    <button class="btn btn-default">
			
 
				+                        <i class="iconfont icon-user-add btn-icon"></i>
			
 
				+                        添加成员
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 组织表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="orgModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">编辑组织</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="orgForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="orgName">组织名称</label>
			
 
				+                        <input type="text" id="orgName" class="form-input" placeholder="请输入组织名称" value="运营部">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="orgCode">组织编码</label>
			
 
				+                        <input type="text" id="orgCode" class="form-input" placeholder="请输入组织编码" value="OP-DEPT">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="parentId">上级组织</label>
			
 
				+                        <select id="parentId" class="form-input">
			
 
				+                            <option value="0">无</option>
			
 
				+                            <option value="1" selected>爱智农科技有限公司</option>
			
 
				+                            <option value="101">技术部</option>
			
 
				+                            <option value="104">农业技术部</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="leader">负责人</label>
			
 
				+                        <select id="leader" class="form-input">
			
 
				+                            <option value="">请选择负责人</option>
			
 
				+                            <option value="1" selected>张三</option>
			
 
				+                            <option value="2">李四</option>
			
 
				+                            <option value="3">王五</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="phone">联系电话</label>
			
 
				+                        <input type="text" id="phone" class="form-input" placeholder="请输入联系电话" value="13800138000">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="sort">排序</label>
			
 
				+                        <input type="number" id="sort" class="form-input" placeholder="请输入排序" value="2">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="1" checked class="mr-2">
			
 
				+                                启用
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="0" class="mr-2">
			
 
				+                                禁用
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 组织树展开/折叠
			
 
				+            const treeNodeContents = document.querySelectorAll('.tree-node-content');
			
 
				+            
			
 
				+            treeNodeContents.forEach(node => {
			
 
				+                const arrow = node.querySelector('.tree-node-arrow');
			
 
				+                if (arrow) {
			
 
				+                    node.addEventListener('click', function() {
			
 
				+                        const children = this.nextElementSibling;
			
 
				+                        if (children && children.classList.contains('tree-node-children')) {
			
 
				+                            children.classList.toggle('open');
			
 
				+                            arrow.classList.toggle('open');
			
 
				+                        }
			
 
				+                    });
			
 
				+                }
			
 
				+            });
			
 
				+            
			
 
				+            // 默认展开总公司
			
 
				+            document.querySelector('.tree-node-content[data-id="1"]').click();
			
 
				+            
			
 
				+            // 组织表单弹窗
			
 
				+            const orgModal = document.getElementById('orgModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addOrgBtn = document.getElementById('addOrgBtn');
			
 
				+            const editOrgBtn = document.getElementById('editOrgBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            
			
 
				+            // 打开新增组织弹窗
			
 
				+            addOrgBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增组织';
			
 
				+                document.getElementById('orgForm').reset();
			
 
				+                orgModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑组织弹窗
			
 
				+            editOrgBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '编辑组织';
			
 
				+                orgModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeOrgModal() {
			
 
				+                orgModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeOrgModal);
			
 
				+            cancelBtn.addEventListener('click', closeOrgModal);
			
 
				+            
			
 
				+            // 保存组织
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                alert('组织信息保存成功！');
			
 
				+                closeOrgModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === orgModal) {
			
 
				+                    closeOrgModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/permission-management.html
+++ b/pages/permission-management.html
@@ -0,0 +1,437 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node {
			
 
				+            padding: 8px 0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            padding: 8px 12px;
			
 
				+            border-radius: 4px;
			
 
				+            cursor: pointer;
			
 
				+            transition: all 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content:hover {
			
 
				+            background-color: #f0f7f0;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-content.active {
			
 
				+            background-color: #e8f5e9;
			
 
				+            color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-icon {
			
 
				+            margin-right: 8px;
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow {
			
 
				+            margin-left: auto;
			
 
				+            transition: transform 0.2s;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-arrow.open {
			
 
				+            transform: rotate(90deg);
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children {
			
 
				+            padding-left: 24px;
			
 
				+            max-height: 0;
			
 
				+            overflow: hidden;
			
 
				+            transition: max-height 0.3s ease;
			
 
				+        }
			
 
				+        
			
 
				+        .tree-node-children.open {
			
 
				+            max-height: 1000px;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addPermissionBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增权限
			
 
				+            </button>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
			
 
				+            <!-- 左侧权限树 -->
			
 
				+            <div class="card p-4">
			
 
				+                <h2 class="font-medium mb-4">权限菜单树</h2>
			
 
				+                
			
 
				+                <div class="search-box mb-4">
			
 
				+                    <input type="text" class="input w-full" placeholder="搜索权限">
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="tree-container overflow-y-auto" style="max-height: 600px;">
			
 
				+                    <!-- 系统管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="1">
			
 
				+                            <i class="iconfont icon-setting tree-node-icon"></i>
			
 
				+                            <span>系统管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="101">
			
 
				+                                    <i class="iconfont icon-user tree-node-icon"></i>
			
 
				+                                    <span>用户管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="102">
			
 
				+                                    <i class="iconfont icon-team tree-node-icon"></i>
			
 
				+                                    <span>角色管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content active" data-id="103">
			
 
				+                                    <i class="iconfont icon-lock tree-node-icon"></i>
			
 
				+                                    <span>权限管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="104">
			
 
				+                                    <i class="iconfont icon-apartment tree-node-icon"></i>
			
 
				+                                    <span>组织机构管理</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="105">
			
 
				+                                    <i class="iconfont icon-file tree-node-icon"></i>
			
 
				+                                    <span>登录日志</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="106">
			
 
				+                                    <i class="iconfont icon-file-text tree-node-icon"></i>
			
 
				+                                    <span>操作日志</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 地块与农场管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="2">
			
 
				+                            <i class="iconfont icon-appstore tree-node-icon"></i>
			
 
				+                            <span>地块与农场管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="201">
			
 
				+                                    <i class="iconfont icon-database tree-node-icon"></i>
			
 
				+                                    <span>地块管理列表</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="202">
			
 
				+                                    <i class="iconfont icon-link tree-node-icon"></i>
			
 
				+                                    <span>地块设备绑定</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="203">
			
 
				+                                    <i class="iconfont icon-user-add tree-node-icon"></i>
			
 
				+                                    <span>地块人员绑定</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="204">
			
 
				+                                    <i class="iconfont icon-edit tree-node-icon"></i>
			
 
				+                                    <span>地块绘制区域</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 设备监控管理 -->
			
 
				+                    <div class="tree-node">
			
 
				+                        <div class="tree-node-content" data-id="3">
			
 
				+                            <i class="iconfont icon-video-camera tree-node-icon"></i>
			
 
				+                            <span>设备监控管理</span>
			
 
				+                            <i class="iconfont icon-right tree-node-arrow"></i>
			
 
				+                        </div>
			
 
				+                        <div class="tree-node-children">
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="301">
			
 
				+                                    <i class="iconfont icon-database tree-node-icon"></i>
			
 
				+                                    <span>设备管理列表</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="302">
			
 
				+                                    <i class="iconfont icon-eye tree-node-icon"></i>
			
 
				+                                    <span>设备监控实时展示</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                            <div class="tree-node">
			
 
				+                                <div class="tree-node-content" data-id="303">
			
 
				+                                    <i class="iconfont icon-warning tree-node-icon"></i>
			
 
				+                                    <span>设备告警信息</span>
			
 
				+                                </div>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <!-- 右侧权限详情 -->
			
 
				+            <div class="card p-4 lg:col-span-2">
			
 
				+                <h2 class="font-medium mb-4">权限详情</h2>
			
 
				+                
			
 
				+                <div class="bg-gray-50 p-4 rounded-md mb-6">
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">权限名称:</span>
			
 
				+                        <span class="font-medium">权限管理</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">权限编码:</span>
			
 
				+                        <span class="font-medium">system:permission:list</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">权限类型:</span>
			
 
				+                        <span class="font-medium">菜单</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">菜单图标:</span>
			
 
				+                        <span class="font-medium"><i class="iconfont icon-lock mr-2"></i>icon-lock</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">菜单路径:</span>
			
 
				+                        <span class="font-medium">/system/permission</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">排序:</span>
			
 
				+                        <span class="font-medium">3</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">状态:</span>
			
 
				+                        <span class="badge badge-success">启用</span>
			
 
				+                    </div>
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <span class="text-gray-500 w-24">创建时间:</span>
			
 
				+                        <span class="font-medium">2023-01-01 00:00:00</span>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="mb-6">
			
 
				+                    <h3 class="font-medium mb-3">功能权限</h3>
			
 
				+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">查询</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:permission:query</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">新增</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:permission:add</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">编辑</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:permission:edit</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                        <div class="card p-3 border border-gray-200">
			
 
				+                            <div class="flex items-center">
			
 
				+                                <span class="mr-2">删除</span>
			
 
				+                                <span class="text-xs text-gray-500 ml-auto">system:permission:delete</span>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="flex gap-2">
			
 
				+                    <button class="btn btn-default" id="editPermissionBtn">
			
 
				+                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                        编辑权限
			
 
				+                    </button>
			
 
				+                    <button class="btn btn-danger">
			
 
				+                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                        删除权限
			
 
				+                    </button>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 权限表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="permissionModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">编辑权限</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="permissionForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="permissionName">权限名称</label>
			
 
				+                        <input type="text" id="permissionName" class="form-input" placeholder="请输入权限名称" value="权限管理">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="permissionCode">权限编码</label>
			
 
				+                        <input type="text" id="permissionCode" class="form-input" placeholder="请输入权限编码" value="system:permission:list">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="permissionType">权限类型</label>
			
 
				+                        <select id="permissionType" class="form-input">
			
 
				+                            <option value="menu" selected>菜单</option>
			
 
				+                            <option value="button">按钮</option>
			
 
				+                            <option value="api">接口</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="parentId">上级权限</label>
			
 
				+                        <select id="parentId" class="form-input">
			
 
				+                            <option value="0">顶级权限</option>
			
 
				+                            <option value="1" selected>系统管理</option>
			
 
				+                            <option value="2">地块与农场管理</option>
			
 
				+                            <option value="3">设备监控管理</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="icon">菜单图标</label>
			
 
				+                        <input type="text" id="icon" class="form-input" placeholder="请输入菜单图标" value="icon-lock">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="path">菜单路径</label>
			
 
				+                        <input type="text" id="path" class="form-input" placeholder="请输入菜单路径" value="/system/permission">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="sort">排序</label>
			
 
				+                        <input type="number" id="sort" class="form-input" placeholder="请输入排序" value="3">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="1" checked class="mr-2">
			
 
				+                                启用
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="0" class="mr-2">
			
 
				+                                禁用
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 权限树展开/折叠
			
 
				+            const treeNodeContents = document.querySelectorAll('.tree-node-content');
			
 
				+            
			
 
				+            treeNodeContents.forEach(node => {
			
 
				+                const arrow = node.querySelector('.tree-node-arrow');
			
 
				+                if (arrow) {
			
 
				+                    node.addEventListener('click', function() {
			
 
				+                        const children = this.nextElementSibling;
			
 
				+                        if (children && children.classList.contains('tree-node-children')) {
			
 
				+                            children.classList.toggle('open');
			
 
				+                            arrow.classList.toggle('open');
			
 
				+                        }
			
 
				+                    });
			
 
				+                }
			
 
				+            });
			
 
				+            
			
 
				+            // 默认展开系统管理
			
 
				+            document.querySelector('.tree-node-content[data-id="1"]').click();
			
 
				+            
			
 
				+            // 权限表单弹窗
			
 
				+            const permissionModal = document.getElementById('permissionModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addPermissionBtn = document.getElementById('addPermissionBtn');
			
 
				+            const editPermissionBtn = document.getElementById('editPermissionBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            
			
 
				+            // 打开新增权限弹窗
			
 
				+            addPermissionBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增权限';
			
 
				+                document.getElementById('permissionForm').reset();
			
 
				+                permissionModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑权限弹窗
			
 
				+            editPermissionBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '编辑权限';
			
 
				+                permissionModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closePermissionModal() {
			
 
				+                permissionModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closePermissionModal);
			
 
				+            cancelBtn.addEventListener('click', closePermissionModal);
			
 
				+            
			
 
				+            // 保存权限
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                alert('权限信息保存成功！');
			
 
				+                closePermissionModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === permissionModal) {
			
 
				+                    closePermissionModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/role-management.html
+++ b/pages/role-management.html
@@ -0,0 +1,537 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addRoleBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增角色
			
 
				+            </button>
			
 
				+        </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="1">启用</option>
			
 
				+                        <option value="0">禁用</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="card">
			
 
				+            <div class="table-container">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>角色名称</th>
			
 
				+                            <th>角色编码</th>
			
 
				+                            <th>描述</th>
			
 
				+                            <th>创建时间</th>
			
 
				+                            <th>状态</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>超级管理员</td>
			
 
				+                            <td>SUPER_ADMIN</td>
			
 
				+                            <td>拥有系统所有权限</td>
			
 
				+                            <td>2023-01-01 00:00:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>系统管理员</td>
			
 
				+                            <td>ADMIN</td>
			
 
				+                            <td>管理系统基础功能</td>
			
 
				+                            <td>2023-01-01 00:00:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>运营管理员</td>
			
 
				+                            <td>OPERATOR</td>
			
 
				+                            <td>管理日常运营事务</td>
			
 
				+                            <td>2023-01-02 10:30:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>农场管理员</td>
			
 
				+                            <td>FARM_MANAGER</td>
			
 
				+                            <td>管理农场相关功能</td>
			
 
				+                            <td>2023-01-03 09:15:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>数据分析员</td>
			
 
				+                            <td>DATA_ANALYST</td>
			
 
				+                            <td>查看和分析数据</td>
			
 
				+                            <td>2023-01-04 14:20:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>普通用户</td>
			
 
				+                            <td>USER</td>
			
 
				+                            <td>基础功能访问</td>
			
 
				+                            <td>2023-01-05 16:45:00</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="6">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm permission-btn" data-id="6">
			
 
				+                                        <i class="iconfont icon-lock btn-icon"></i>
			
 
				+                                        权限
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete 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">6</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">
			
 
				+                        <i class="iconfont icon-right"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 角色表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="roleModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">新增角色</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="roleForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="roleName">角色名称</label>
			
 
				+                        <input type="text" id="roleName" class="form-input" placeholder="请输入角色名称">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="roleCode">角色编码</label>
			
 
				+                        <input type="text" id="roleCode" class="form-input" placeholder="请输入角色编码">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="roleDesc">角色描述</label>
			
 
				+                        <textarea id="roleDesc" class="form-input" rows="3" placeholder="请输入角色描述"></textarea>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="1" checked class="mr-2">
			
 
				+                                启用
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="0" class="mr-2">
			
 
				+                                禁用
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 权限设置弹窗 -->
			
 
				+    <div class="modal-overlay" id="permissionModal">
			
 
				+        <div class="modal" style="max-width: 700px;">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title">角色权限设置</h3>
			
 
				+                <div class="modal-close" id="closePermissionModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <div class="mb-4">
			
 
				+                    <h4 class="font-medium mb-2">角色：<span id="currentRoleName">系统管理员</span></h4>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="border rounded p-4 mb-4">
			
 
				+                    <div class="flex items-center mb-2">
			
 
				+                        <input type="checkbox" id="selectAll" class="mr-2">
			
 
				+                        <label for="selectAll" class="font-medium">全选</label>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="max-h-96 overflow-y-auto">
			
 
				+                    <!-- 系统管理 -->
			
 
				+                    <div class="border rounded p-4 mb-4">
			
 
				+                        <div class="flex items-center mb-2">
			
 
				+                            <input type="checkbox" id="system" class="mr-2 parent-checkbox">
			
 
				+                            <label for="system" class="font-medium">系统管理</label>
			
 
				+                        </div>
			
 
				+                        <div class="pl-8">
			
 
				+                            <div class="grid grid-cols-3 gap-4">
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    用户管理
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    角色管理
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    权限管理
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    组织机构管理
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    登录日志
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="system">
			
 
				+                                    操作日志
			
 
				+                                </label>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 地块与农场管理 -->
			
 
				+                    <div class="border rounded p-4 mb-4">
			
 
				+                        <div class="flex items-center mb-2">
			
 
				+                            <input type="checkbox" id="farm" class="mr-2 parent-checkbox">
			
 
				+                            <label for="farm" class="font-medium">地块与农场管理</label>
			
 
				+                        </div>
			
 
				+                        <div class="pl-8">
			
 
				+                            <div class="grid grid-cols-3 gap-4">
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="farm">
			
 
				+                                    地块管理列表
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="farm">
			
 
				+                                    地块设备绑定
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="farm">
			
 
				+                                    地块人员绑定
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="farm">
			
 
				+                                    地块绘制区域
			
 
				+                                </label>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <!-- 设备监控管理 -->
			
 
				+                    <div class="border rounded p-4 mb-4">
			
 
				+                        <div class="flex items-center mb-2">
			
 
				+                            <input type="checkbox" id="device" class="mr-2 parent-checkbox">
			
 
				+                            <label for="device" class="font-medium">设备监控管理</label>
			
 
				+                        </div>
			
 
				+                        <div class="pl-8">
			
 
				+                            <div class="grid grid-cols-3 gap-4">
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="device">
			
 
				+                                    设备管理列表
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="device">
			
 
				+                                    设备监控实时展示
			
 
				+                                </label>
			
 
				+                                <label class="flex items-center">
			
 
				+                                    <input type="checkbox" class="mr-2 child-checkbox" data-parent="device">
			
 
				+                                    设备告警信息
			
 
				+                                </label>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelPermissionBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="savePermissionBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 角色表单弹窗
			
 
				+            const roleModal = document.getElementById('roleModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addRoleBtn = document.getElementById('addRoleBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            const editBtns = document.querySelectorAll('.edit-btn');
			
 
				+            const roleForm = document.getElementById('roleForm');
			
 
				+            
			
 
				+            // 打开新增角色弹窗
			
 
				+            addRoleBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增角色';
			
 
				+                roleForm.reset();
			
 
				+                roleModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑角色弹窗
			
 
				+            editBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const roleId = this.getAttribute('data-id');
			
 
				+                    modalTitle.textContent = '编辑角色';
			
 
				+                    
			
 
				+                    // 模拟获取角色数据
			
 
				+                    // 实际应用中应该通过API获取
			
 
				+                    if (roleId === '2') {
			
 
				+                        document.getElementById('roleName').value = '系统管理员';
			
 
				+                        document.getElementById('roleCode').value = 'ADMIN';
			
 
				+                        document.getElementById('roleDesc').value = '管理系统基础功能';
			
 
				+                    }
			
 
				+                    
			
 
				+                    roleModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeRoleModal() {
			
 
				+                roleModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeRoleModal);
			
 
				+            cancelBtn.addEventListener('click', closeRoleModal);
			
 
				+            
			
 
				+            // 保存角色
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                alert('角色信息保存成功！');
			
 
				+                closeRoleModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 权限设置弹窗
			
 
				+            const permissionModal = document.getElementById('permissionModal');
			
 
				+            const permissionBtns = document.querySelectorAll('.permission-btn');
			
 
				+            const closePermissionModal = document.getElementById('closePermissionModal');
			
 
				+            const cancelPermissionBtn = document.getElementById('cancelPermissionBtn');
			
 
				+            const savePermissionBtn = document.getElementById('savePermissionBtn');
			
 
				+            const currentRoleName = document.getElementById('currentRoleName');
			
 
				+            
			
 
				+            // 打开权限设置弹窗
			
 
				+            permissionBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const roleId = this.getAttribute('data-id');
			
 
				+                    const roleName = this.closest('tr').querySelector('td:first-child').textContent;
			
 
				+                    currentRoleName.textContent = roleName;
			
 
				+                    permissionModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭权限设置弹窗
			
 
				+            function closePermissionModalFunc() {
			
 
				+                permissionModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closePermissionModal.addEventListener('click', closePermissionModalFunc);
			
 
				+            cancelPermissionBtn.addEventListener('click', closePermissionModalFunc);
			
 
				+            
			
 
				+            // 保存权限设置
			
 
				+            savePermissionBtn.addEventListener('click', function() {
			
 
				+                alert('权限设置保存成功！');
			
 
				+                closePermissionModalFunc();
			
 
				+            });
			
 
				+            
			
 
				+            // 全选功能
			
 
				+            const selectAll = document.getElementById('selectAll');
			
 
				+            const allCheckboxes = document.querySelectorAll('.parent-checkbox, .child-checkbox');
			
 
				+            
			
 
				+            selectAll.addEventListener('change', function() {
			
 
				+                allCheckboxes.forEach(checkbox => {
			
 
				+                    checkbox.checked = this.checked;
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 父级选择框控制子级
			
 
				+            const parentCheckboxes = document.querySelectorAll('.parent-checkbox');
			
 
				+            
			
 
				+            parentCheckboxes.forEach(parent => {
			
 
				+                parent.addEventListener('change', function() {
			
 
				+                    const parentId = this.id;
			
 
				+                    const children = document.querySelectorAll(`.child-checkbox[data-parent="${parentId}"]`);
			
 
				+                    
			
 
				+                    children.forEach(child => {
			
 
				+                        child.checked = this.checked;
			
 
				+                    });
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 子级选择框影响父级
			
 
				+            const childCheckboxes = document.querySelectorAll('.child-checkbox');
			
 
				+            
			
 
				+            childCheckboxes.forEach(child => {
			
 
				+                child.addEventListener('change', function() {
			
 
				+                    const parentId = this.getAttribute('data-parent');
			
 
				+                    const parent = document.getElementById(parentId);
			
 
				+                    const siblings = document.querySelectorAll(`.child-checkbox[data-parent="${parentId}"]`);
			
 
				+                    
			
 
				+                    // 如果所有子级都选中，则父级也选中
			
 
				+                    const allChecked = Array.from(siblings).every(sibling => sibling.checked);
			
 
				+                    parent.checked = allChecked;
			
 
				+                    
			
 
				+                    // 更新全选状态
			
 
				+                    const allParentsChecked = Array.from(parentCheckboxes).every(p => p.checked);
			
 
				+                    selectAll.checked = allParentsChecked;
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === roleModal) {
			
 
				+                    closeRoleModal();
			
 
				+                }
			
 
				+                if (e.target === permissionModal) {
			
 
				+                    closePermissionModalFunc();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/task-management.html
+++ b/pages/task-management.html
@@ -0,0 +1,542 @@
 
				+<!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;
			
 
				+            position: relative;
			
 
				+            min-height: 100vh; 
			
 
				+            width: 100%; 
			
 
				+            max-width: 100%; 
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addTaskBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增任务
			
 
				+            </button>
			
 
				+        </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="1">正常</option>
			
 
				+                        <option value="0">暂停</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="card">
			
 
				+            <div class="table-container">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>任务名称</th>
			
 
				+                            <th>任务组</th>
			
 
				+                            <th>调用目标</th>
			
 
				+                            <th>执行表达式</th>
			
 
				+                            <th>状态</th>
			
 
				+                            <th>下次执行时间</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>系统监控</td>
			
 
				+                            <td>系统任务</td>
			
 
				+                            <td>com.aizhinong.monitor.SystemMonitorTask.execute</td>
			
 
				+                            <td>0 0/30 * * * ?</td>
			
 
				+                            <td><span class="badge badge-success">正常</span></td>
			
 
				+                            <td>2023-05-16 08:30:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>数据备份</td>
			
 
				+                            <td>系统任务</td>
			
 
				+                            <td>com.aizhinong.system.DataBackupTask.execute</td>
			
 
				+                            <td>0 0 2 * * ?</td>
			
 
				+                            <td><span class="badge badge-success">正常</span></td>
			
 
				+                            <td>2023-05-16 02:00:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>设备状态检查</td>
			
 
				+                            <td>设备任务</td>
			
 
				+                            <td>com.aizhinong.device.DeviceStatusTask.execute</td>
			
 
				+                            <td>0 0/15 * * * ?</td>
			
 
				+                            <td><span class="badge badge-success">正常</span></td>
			
 
				+                            <td>2023-05-16 08:15:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>数据清理</td>
			
 
				+                            <td>系统任务</td>
			
 
				+                            <td>com.aizhinong.system.DataCleanTask.execute</td>
			
 
				+                            <td>0 0 3 * * ?</td>
			
 
				+                            <td><span class="badge badge-warning">暂停</span></td>
			
 
				+                            <td>-</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>天气数据同步</td>
			
 
				+                            <td>农业任务</td>
			
 
				+                            <td>com.aizhinong.farm.WeatherSyncTask.execute</td>
			
 
				+                            <td>0 0 0/1 * * ?</td>
			
 
				+                            <td><span class="badge badge-success">正常</span></td>
			
 
				+                            <td>2023-05-16 09:00:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>农作物生长监测</td>
			
 
				+                            <td>农业任务</td>
			
 
				+                            <td>com.aizhinong.farm.CropMonitorTask.execute</td>
			
 
				+                            <td>0 0 8,14,20 * * ?</td>
			
 
				+                            <td><span class="badge badge-success">正常</span></td>
			
 
				+                            <td>2023-05-16 08:00:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="6">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm run-btn" data-id="6">
			
 
				+                                        <i class="iconfont icon-play-circle btn-icon"></i>
			
 
				+                                        执行
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-default btn-sm log-btn" data-id="6">
			
 
				+                                        <i class="iconfont icon-file-text btn-icon"></i>
			
 
				+                                        日志
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete 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">6</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">
			
 
				+                        <i class="iconfont icon-right"></i>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 任务表单弹窗 -->
			
 
				+    <div class="modal-overlay" id="taskModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">编辑任务</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="taskForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="taskName">任务名称</label>
			
 
				+                        <input type="text" id="taskName" class="form-input" placeholder="请输入任务名称" value="系统监控">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="taskGroup">任务组</label>
			
 
				+                        <select id="taskGroup" class="form-input">
			
 
				+                            <option value="系统任务" selected>系统任务</option>
			
 
				+                            <option value="设备任务">设备任务</option>
			
 
				+                            <option value="农业任务">农业任务</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="invokeTarget">调用目标</label>
			
 
				+                        <input type="text" id="invokeTarget" class="form-input" placeholder="请输入调用目标" value="com.aizhinong.monitor.SystemMonitorTask.execute">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="cronExpression">执行表达式</label>
			
 
				+                        <input type="text" id="cronExpression" class="form-input" placeholder="请输入执行表达式" value="0 0/30 * * * ?">
			
 
				+                        <div class="text-xs text-gray-500 mt-1">* * * * * ? *  分别对应：秒 分 时 日 月 周 年</div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="concurrent">是否并发执行</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="concurrent" value="1" class="mr-2">
			
 
				+                                是
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="concurrent" value="0" checked class="mr-2">
			
 
				+                                否
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label">状态</label>
			
 
				+                        <div class="flex items-center gap-4">
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="1" checked class="mr-2">
			
 
				+                                正常
			
 
				+                            </label>
			
 
				+                            <label class="flex items-center">
			
 
				+                                <input type="radio" name="status" value="0" class="mr-2">
			
 
				+                                暂停
			
 
				+                            </label>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="remark">备注</label>
			
 
				+                        <textarea id="remark" class="form-input" rows="3" placeholder="请输入备注">系统监控任务，每30分钟执行一次，检查系统运行状态</textarea>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <!-- 任务日志弹窗 -->
			
 
				+    <div class="modal-overlay" id="logModal">
			
 
				+        <div class="modal" style="max-width: 800px;">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title">任务日志</h3>
			
 
				+                <div class="modal-close" id="closeLogModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <div class="bg-gray-50 p-4 rounded-md mb-4">
			
 
				+                    <div class="grid grid-cols-2 gap-4">
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">任务名称:</span>
			
 
				+                            <span class="font-medium">系统监控</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">任务组:</span>
			
 
				+                            <span class="font-medium">系统任务</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">调用目标:</span>
			
 
				+                            <span class="font-medium">com.aizhinong.monitor.SystemMonitorTask.execute</span>
			
 
				+                        </div>
			
 
				+                        <div class="flex items-center">
			
 
				+                            <span class="text-gray-500 w-24">执行表达式:</span>
			
 
				+                            <span class="font-medium">0 0/30 * * * ?</span>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                
			
 
				+                <div class="table-container">
			
 
				+                    <table>
			
 
				+                        <thead>
			
 
				+                            <tr>
			
 
				+                                <th>序号</th>
			
 
				+                                <th>执行时间</th>
			
 
				+                                <th>执行耗时</th>
			
 
				+                                <th>执行状态</th>
			
 
				+                                <th>执行结果</th>
			
 
				+                            </tr>
			
 
				+                        </thead>
			
 
				+                        <tbody>
			
 
				+                            <tr>
			
 
				+                                <td>1</td>
			
 
				+                                <td>2023-05-15 08:00:00</td>
			
 
				+                                <td>3.2秒</td>
			
 
				+                                <td><span class="badge badge-success">成功</span></td>
			
 
				+                                <td>系统监控执行成功</td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>2</td>
			
 
				+                                <td>2023-05-15 07:30:00</td>
			
 
				+                                <td>3.5秒</td>
			
 
				+                                <td><span class="badge badge-success">成功</span></td>
			
 
				+                                <td>系统监控执行成功</td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>3</td>
			
 
				+                                <td>2023-05-15 07:00:00</td>
			
 
				+                                <td>4.1秒</td>
			
 
				+                                <td><span class="badge badge-success">成功</span></td>
			
 
				+                                <td>系统监控执行成功</td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>4</td>
			
 
				+                                <td>2023-05-15 06:30:00</td>
			
 
				+                                <td>3.8秒</td>
			
 
				+                                <td><span class="badge badge-success">成功</span></td>
			
 
				+                                <td>系统监控执行成功</td>
			
 
				+                            </tr>
			
 
				+                            <tr>
			
 
				+                                <td>5</td>
			
 
				+                                <td>2023-05-15 06:00:00</td>
			
 
				+                                <td>5.2秒</td>
			
 
				+                                <td><span class="badge badge-warning">失败</span></td>
			
 
				+                                <td>执行异常：连接超时</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">5</span> 条记录，每页 <span class="font-medium">5</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">
			
 
				+                            <i class="iconfont icon-right"></i>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="closeLogBtn">关闭</button>
			
 
				+                <button class="btn btn-default">
			
 
				+                    <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                    清空日志
			
 
				+                </button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            // 任务表单弹窗
			
 
				+            const taskModal = document.getElementById('taskModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addTaskBtn = document.getElementById('addTaskBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            const editBtns = document.querySelectorAll('.edit-btn');
			
 
				+            
			
 
				+            // 打开新增任务弹窗
			
 
				+            addTaskBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增任务';
			
 
				+                document.getElementById('taskForm').reset();
			
 
				+                taskModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑任务弹窗
			
 
				+            editBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const taskId = this.getAttribute('data-id');
			
 
				+                    modalTitle.textContent = '编辑任务';
			
 
				+                    
			
 
				+                    // 模拟获取任务数据
			
 
				+                    // 实际应用中应该通过API获取
			
 
				+                    taskModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeTaskModal() {
			
 
				+                taskModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeTaskModal);
			
 
				+            cancelBtn.addEventListener('click', closeTaskModal);
			
 
				+            
			
 
				+            // 保存任务
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                alert('任务保存成功！');
			
 
				+                closeTaskModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 任务日志弹窗
			
 
				+            const logModal = document.getElementById('logModal');
			
 
				+            const closeLogModal = document.getElementById('closeLogModal');
			
 
				+            const closeLogBtn = document.getElementById('closeLogBtn');
			
 
				+            const logBtns = document.querySelectorAll('.log-btn');
			
 
				+            
			
 
				+            // 打开任务日志弹窗
			
 
				+            logBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const taskId = this.getAttribute('data-id');
			
 
				+                    // 实际应用中应该通过API获取任务日志
			
 
				+                    logModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭日志弹窗
			
 
				+            function closeLogModalFunc() {
			
 
				+                logModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeLogModal.addEventListener('click', closeLogModalFunc);
			
 
				+            closeLogBtn.addEventListener('click', closeLogModalFunc);
			
 
				+            
			
 
				+            // 执行任务
			
 
				+            const runBtns = document.querySelectorAll('.run-btn');
			
 
				+            
			
 
				+            runBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const taskId = this.getAttribute('data-id');
			
 
				+                    alert(`执行任务成功！任务ID：${taskId}`);
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            window.addEventListener('click', function(e) {
			
 
				+                if (e.target === taskModal) {
			
 
				+                    closeTaskModal();
			
 
				+                }
			
 
				+                if (e.target === logModal) {
			
 
				+                    closeLogModalFunc();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/user-management.html
+++ b/pages/user-management.html
@@ -0,0 +1,585 @@
 
				+<!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;
			
 
				+        }
			
 
				+        
			
 
				+        .page-container {
			
 
				+            padding: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .card {
			
 
				+            background-color: white;
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			
 
				+        }
			
 
				+        
			
 
				+        .table-container {
			
 
				+            overflow-x: auto;
			
 
				+        }
			
 
				+        
			
 
				+        table {
			
 
				+            width: 100%;
			
 
				+            border-collapse: collapse;
			
 
				+        }
			
 
				+        
			
 
				+        th {
			
 
				+            background-color: #f9fafb;
			
 
				+            padding: 12px 16px;
			
 
				+            text-align: left;
			
 
				+            font-weight: 500;
			
 
				+            color: #6b7280;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        td {
			
 
				+            padding: 12px 16px;
			
 
				+            border-bottom: 1px solid #e5e7eb;
			
 
				+        }
			
 
				+        
			
 
				+        tr:hover {
			
 
				+            background-color: #f9fafb;
			
 
				+        }
			
 
				+        
			
 
				+        .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-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: 500px;
			
 
				+            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;
			
 
				+        }
			
 
				+        
			
 
				+        .form-group {
			
 
				+            margin-bottom: 16px;
			
 
				+        }
			
 
				+        
			
 
				+        .form-label {
			
 
				+            display: block;
			
 
				+            margin-bottom: 4px;
			
 
				+            font-weight: 500;
			
 
				+        }
			
 
				+        
			
 
				+        .form-input {
			
 
				+            width: 100%;
			
 
				+            padding: 8px 12px;
			
 
				+            border: 1px solid #d1d5db;
			
 
				+            border-radius: 4px;
			
 
				+        }
			
 
				+        
			
 
				+        .form-input:focus {
			
 
				+            outline: none;
			
 
				+            border-color: #4CAF50;
			
 
				+            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+    </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>
			
 
				+            <button class="btn btn-primary" id="addUserBtn">
			
 
				+                <i class="iconfont icon-plus btn-icon"></i>
			
 
				+                新增用户
			
 
				+            </button>
			
 
				+        </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="admin">管理员</option>
			
 
				+                        <option value="operator">操作员</option>
			
 
				+                        <option value="viewer">查看者</option>
			
 
				+                    </select>
			
 
				+                    
			
 
				+                    <select class="select">
			
 
				+                        <option value="">所有状态</option>
			
 
				+                        <option value="1">启用</option>
			
 
				+                        <option value="0">禁用</option>
			
 
				+                    </select>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        
			
 
				+        <div class="card">
			
 
				+            <div class="table-container">
			
 
				+                <table>
			
 
				+                    <thead>
			
 
				+                        <tr>
			
 
				+                            <th>用户名</th>
			
 
				+                            <th>姓名</th>
			
 
				+                            <th>手机号</th>
			
 
				+                            <th>邮箱</th>
			
 
				+                            <th>角色</th>
			
 
				+                            <th>部门</th>
			
 
				+                            <th>状态</th>
			
 
				+                            <th>创建时间</th>
			
 
				+                            <th>操作</th>
			
 
				+                        </tr>
			
 
				+                    </thead>
			
 
				+                    <tbody>
			
 
				+                        <tr>
			
 
				+                            <td>admin</td>
			
 
				+                            <td>系统管理员</td>
			
 
				+                            <td>13800138000</td>
			
 
				+                            <td>admin@aizhinong.com</td>
			
 
				+                            <td>管理员</td>
			
 
				+                            <td>技术部</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>2023-01-01 12:00:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="1">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>operator</td>
			
 
				+                            <td>张三</td>
			
 
				+                            <td>13900139000</td>
			
 
				+                            <td>zhangsan@aizhinong.com</td>
			
 
				+                            <td>操作员</td>
			
 
				+                            <td>运营部</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>2023-01-02 10:30:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="2">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>viewer</td>
			
 
				+                            <td>李四</td>
			
 
				+                            <td>13700137000</td>
			
 
				+                            <td>lisi@aizhinong.com</td>
			
 
				+                            <td>查看者</td>
			
 
				+                            <td>市场部</td>
			
 
				+                            <td><span class="badge badge-warning">禁用</span></td>
			
 
				+                            <td>2023-01-03 09:15:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="3">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>tester</td>
			
 
				+                            <td>王五</td>
			
 
				+                            <td>13600136000</td>
			
 
				+                            <td>wangwu@aizhinong.com</td>
			
 
				+                            <td>操作员</td>
			
 
				+                            <td>测试部</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>2023-01-04 14:20:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="4">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete btn-icon"></i>
			
 
				+                                        删除
			
 
				+                                    </button>
			
 
				+                                </div>
			
 
				+                            </td>
			
 
				+                        </tr>
			
 
				+                        <tr>
			
 
				+                            <td>guest</td>
			
 
				+                            <td>访客</td>
			
 
				+                            <td>13500135000</td>
			
 
				+                            <td>guest@aizhinong.com</td>
			
 
				+                            <td>查看者</td>
			
 
				+                            <td>-</td>
			
 
				+                            <td><span class="badge badge-success">启用</span></td>
			
 
				+                            <td>2023-01-05 16:45:00</td>
			
 
				+                            <td>
			
 
				+                                <div class="flex gap-2">
			
 
				+                                    <button class="btn btn-default btn-sm edit-btn" data-id="5">
			
 
				+                                        <i class="iconfont icon-edit btn-icon"></i>
			
 
				+                                        编辑
			
 
				+                                    </button>
			
 
				+                                    <button class="btn btn-danger btn-sm">
			
 
				+                                        <i class="iconfont icon-delete 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">5</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="userModal">
			
 
				+        <div class="modal">
			
 
				+            <div class="modal-header">
			
 
				+                <h3 class="modal-title" id="modalTitle">新增用户</h3>
			
 
				+                <div class="modal-close" id="closeModal">&times;</div>
			
 
				+            </div>
			
 
				+            <div class="modal-body">
			
 
				+                <form id="userForm">
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="username">用户名</label>
			
 
				+                        <input type="text" id="username" class="form-input" placeholder="请输入用户名">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="realname">姓名</label>
			
 
				+                        <input type="text" id="realname" class="form-input" placeholder="请输入姓名">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="password">密码</label>
			
 
				+                        <input type="password" id="password" class="form-input" placeholder="请输入密码">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="phone">手机号</label>
			
 
				+                        <input type="text" id="phone" class="form-input" placeholder="请输入手机号">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="email">邮箱</label>
			
 
				+                        <input type="email" id="email" class="form-input" placeholder="请输入邮箱">
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="role">角色</label>
			
 
				+                        <select id="role" class="form-input">
			
 
				+                            <option value="">请选择角色</option>
			
 
				+                            <option value="admin">管理员</option>
			
 
				+                            <option value="operator">操作员</option>
			
 
				+                            <option value="viewer">查看者</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="department">部门</label>
			
 
				+                        <select id="department" class="form-input">
			
 
				+                            <option value="">请选择部门</option>
			
 
				+                            <option value="tech">技术部</option>
			
 
				+                            <option value="operation">运营部</option>
			
 
				+                            <option value="market">市场部</option>
			
 
				+                            <option value="test">测试部</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="status">状态</label>
			
 
				+                        <select id="status" class="form-input">
			
 
				+                            <option value="1">启用</option>
			
 
				+                            <option value="0">禁用</option>
			
 
				+                        </select>
			
 
				+                    </div>
			
 
				+                    
			
 
				+                    <div class="form-group">
			
 
				+                        <label class="form-label" for="remark">备注</label>
			
 
				+                        <textarea id="remark" class="form-input" rows="3" placeholder="请输入备注信息"></textarea>
			
 
				+                    </div>
			
 
				+                </form>
			
 
				+            </div>
			
 
				+            <div class="modal-footer">
			
 
				+                <button class="btn btn-default" id="cancelBtn">取消</button>
			
 
				+                <button class="btn btn-primary" id="saveBtn">保存</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    
			
 
				+    <script>
			
 
				+        document.addEventListener('DOMContentLoaded', function() {
			
 
				+            const userModal = document.getElementById('userModal');
			
 
				+            const modalTitle = document.getElementById('modalTitle');
			
 
				+            const addUserBtn = document.getElementById('addUserBtn');
			
 
				+            const closeModal = document.getElementById('closeModal');
			
 
				+            const cancelBtn = document.getElementById('cancelBtn');
			
 
				+            const saveBtn = document.getElementById('saveBtn');
			
 
				+            const editBtns = document.querySelectorAll('.edit-btn');
			
 
				+            const userForm = document.getElementById('userForm');
			
 
				+            
			
 
				+            // 打开新增用户弹窗
			
 
				+            addUserBtn.addEventListener('click', function() {
			
 
				+                modalTitle.textContent = '新增用户';
			
 
				+                userForm.reset();
			
 
				+                userModal.style.display = 'flex';
			
 
				+            });
			
 
				+            
			
 
				+            // 打开编辑用户弹窗
			
 
				+            editBtns.forEach(btn => {
			
 
				+                btn.addEventListener('click', function() {
			
 
				+                    const userId = this.getAttribute('data-id');
			
 
				+                    modalTitle.textContent = '编辑用户';
			
 
				+                    
			
 
				+                    // 模拟获取用户数据
			
 
				+                    // 实际应用中应该通过API获取
			
 
				+                    if (userId === '1') {
			
 
				+                        document.getElementById('username').value = 'admin';
			
 
				+                        document.getElementById('realname').value = '系统管理员';
			
 
				+                        document.getElementById('phone').value = '13800138000';
			
 
				+                        document.getElementById('email').value = 'admin@aizhinong.com';
			
 
				+                        document.getElementById('role').value = 'admin';
			
 
				+                        document.getElementById('department').value = 'tech';
			
 
				+                        document.getElementById('status').value = '1';
			
 
				+                    }
			
 
				+                    
			
 
				+                    userModal.style.display = 'flex';
			
 
				+                });
			
 
				+            });
			
 
				+            
			
 
				+            // 关闭弹窗
			
 
				+            function closeUserModal() {
			
 
				+                userModal.style.display = 'none';
			
 
				+            }
			
 
				+            
			
 
				+            closeModal.addEventListener('click', closeUserModal);
			
 
				+            cancelBtn.addEventListener('click', closeUserModal);
			
 
				+            
			
 
				+            // 保存用户
			
 
				+            saveBtn.addEventListener('click', function() {
			
 
				+                // 模拟保存
			
 
				+                alert('用户信息保存成功！');
			
 
				+                closeUserModal();
			
 
				+            });
			
 
				+            
			
 
				+            // 点击弹窗外部关闭弹窗
			
 
				+            userModal.addEventListener('click', function(e) {
			
 
				+                if (e.target === userModal) {
			
 
				+                    closeUserModal();
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/pages/visualization-dashboard.html
+++ b/pages/visualization-dashboard.html
@@ -0,0 +1,884 @@
 
				+<!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">
			
 
				+    <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: #001529;
			
 
				+            color: #fff;
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+            overflow-x: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .dashboard-container {
			
 
				+            padding: 20px;
			
 
				+            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
			
 
				+        }
			
 
				+        
			
 
				+        .dashboard-header {
			
 
				+            text-align: center;
			
 
				+            margin-bottom: 30px;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        
			
 
				+        .dashboard-title {
			
 
				+            font-size: 36px;
			
 
				+            font-weight: bold;
			
 
				+            background: linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39);
			
 
				+            -webkit-background-clip: text;
			
 
				+            -webkit-text-fill-color: transparent;
			
 
				+            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);
			
 
				+            border-radius: 8px;
			
 
				+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
			
 
				+            padding: 20px;
			
 
				+            position: relative;
			
 
				+            overflow: hidden;
			
 
				+            height: 100%;
			
 
				+        }
			
 
				+        
			
 
				+        .card::before {
			
 
				+            content: "";
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            left: 0;
			
 
				+            right: 0;
			
 
				+            height: 2px;
			
 
				+            background: linear-gradient(90deg, #4CAF50, #8BC34A);
			
 
				+        }
			
 
				+        
			
 
				+        .card-title {
			
 
				+            font-size: 18px;
			
 
				+            font-weight: bold;
			
 
				+            margin-bottom: 20px;
			
 
				+            color: #4CAF50;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+        }
			
 
				+        
			
 
				+        .card-title::before {
			
 
				+            content: "";
			
 
				+            display: block;
			
 
				+            width: 4px;
			
 
				+            height: 16px;
			
 
				+            background: #4CAF50;
			
 
				+            margin-right: 8px;
			
 
				+            border-radius: 2px;
			
 
				+        }
			
 
				+        
			
 
				+        .chart-container {
			
 
				+            height: 300px;
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+        
			
 
				+        .number-card {
			
 
				+            text-align: center;
			
 
				+            padding: 20px;
			
 
				+        }
			
 
				+        
			
 
				+        .number-value {
			
 
				+            font-size: 36px;
			
 
				+            font-weight: bold;
			
 
				+            margin-bottom: 5px;
			
 
				+            background: linear-gradient(90deg, #4CAF50, #8BC34A);
			
 
				+            -webkit-background-clip: text;
			
 
				+            -webkit-text-fill-color: transparent;
			
 
				+        }
			
 
				+        
			
 
				+        .number-label {
			
 
				+            font-size: 14px;
			
 
				+            color: #aaa;
			
 
				+        }
			
 
				+        
			
 
				+        .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;
			
 
				+        }
			
 
				+        
			
 
				+        .map-container {
			
 
				+            height: 400px;
			
 
				+            position: relative;
			
 
				+        }
			
 
				+        
			
 
				+        .map-overlay {
			
 
				+            position: absolute;
			
 
				+            top: 20px;
			
 
				+            right: 20px;
			
 
				+            background: rgba(16, 36, 64, 0.9);
			
 
				+            padding: 10px;
			
 
				+            border-radius: 4px;
			
 
				+            z-index: 10;
			
 
				+        }
			
 
				+        
			
 
				+        .map-legend {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            margin-bottom: 5px;
			
 
				+        }
			
 
				+        
			
 
				+        .map-legend-color {
			
 
				+            width: 12px;
			
 
				+            height: 12px;
			
 
				+            margin-right: 5px;
			
 
				+            border-radius: 2px;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-container {
			
 
				+            margin-bottom: 15px;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-label {
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            margin-bottom: 5px;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-bar {
			
 
				+            height: 8px;
			
 
				+            border-radius: 4px;
			
 
				+            background: rgba(255, 255, 255, 0.1);
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        
			
 
				+        .progress-fill {
			
 
				+            height: 100%;
			
 
				+            border-radius: 4px;
			
 
				+            background: linear-gradient(90deg, #4CAF50, #8BC34A);
			
 
				+        }
			
 
				+        
			
 
				+        .device-status {
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            margin-bottom: 10px;
			
 
				+        }
			
 
				+        
			
 
				+        .status-dot {
			
 
				+            width: 10px;
			
 
				+            height: 10px;
			
 
				+            border-radius: 50%;
			
 
				+            margin-right: 8px;
			
 
				+        }
			
 
				+        
			
 
				+        .status-online {
			
 
				+            background-color: #4CAF50;
			
 
				+        }
			
 
				+        
			
 
				+        .status-offline {
			
 
				+            background-color: #F44336;
			
 
				+        }
			
 
				+        
			
 
				+        .status-warning {
			
 
				+            background-color: #FF9800;
			
 
				+        }
			
 
				+        
			
 
				+        .clock {
			
 
				+            font-size: 18px;
			
 
				+            color: #8BC34A;
			
 
				+            margin-bottom: 10px;
			
 
				+            text-align: center;
			
 
				+        }
			
 
				+        
			
 
				+        @keyframes pulse {
			
 
				+            0% { transform: scale(1); }
			
 
				+            50% { transform: scale(1.05); }
			
 
				+            100% { transform: scale(1); }
			
 
				+        }
			
 
				+        
			
 
				+        .pulse-animation {
			
 
				+            animation: pulse 2s infinite;
			
 
				+        }
			
 
				+    </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>
			
 
				+        
			
 
				+        <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>
			
 
				+            
			
 
				+            <div class="number-card card">
			
 
				+                <div class="number-value pulse-animation">1,850</div>
			
 
				+                <div class="number-label">年产量（吨）</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="number-card card">
			
 
				+                <div class="number-value pulse-animation">86%</div>
			
 
				+                <div class="number-label">设备在线率</div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="number-card card">
			
 
				+                <div class="number-value pulse-animation">12</div>
			
 
				+                <div class="number-label">智能农机设备（台）</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>
			
 
				+            
			
 
				+            <div class="card">
			
 
				+                <h3 class="card-title">年度产量趋势</h3>
			
 
				+                <div id="yieldTrend" class="chart-container"></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>
			
 
				+                </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>
			
 
				+                
			
 
				+                <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>
			
 
				+                
			
 
				+                <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>
			
 
				+                
			
 
				+                <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>
			
 
				+                </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>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card">
			
 
				+                <h3 class="card-title">设备在线状态</h3>
			
 
				+                <div id="deviceStatus" class="chart-container"></div>
			
 
				+            </div>
			
 
				+            
			
 
				+            <div class="card">
			
 
				+                <h3 class="card-title">农业资源消耗</h3>
			
 
				+                <div id="resourceUsage" class="chart-container"></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>
			
 
				+            
			
 
				+            <div class="card">
			
 
				+                <h3 class="card-title">智能设备分布</h3>
			
 
				+                <div id="deviceDistribution" class="chart-container"></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'
			
 
				+                },
			
 
				+                data: ['水稻', '小麦', '玉米', '蔬菜', '果树', '其他']
			
 
				+            },
			
 
				+            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'
			
 
				+                        }
			
 
				+                    },
			
 
				+                    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'
			
 
				+                    }
			
 
				+                },
			
 
				+                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',
			
 
				+                    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, [
			
 
				+                            {
			
 
				+                                offset: 0,
			
 
				+                                color: 'rgba(128, 255, 165, 0.7)'
			
 
				+                            },
			
 
				+                            {
			
 
				+                                offset: 1,
			
 
				+                                color: 'rgba(1, 191, 236, 0.1)'
			
 
				+                            }
			
 
				+                        ])
			
 
				+                    },
			
 
				+                    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, [
			
 
				+                            {
			
 
				+                                offset: 0,
			
 
				+                                color: 'rgba(0, 221, 255, 0.7)'
			
 
				+                            },
			
 
				+                            {
			
 
				+                                offset: 1,
			
 
				+                                color: 'rgba(77, 119, 255, 0.1)'
			
 
				+                            }
			
 
				+                        ])
			
 
				+                    },
			
 
				+                    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'
			
 
				+                        }
			
 
				+                    },
			
 
				+                    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)'
			
 
				+                        },
			
 
				+                        smooth: 0.2,
			
 
				+                        length: 10,
			
 
				+                        length2: 20
			
 
				+                    }
			
 
				+                }
			
 
				+            ]
			
 
				+        });
			
 
				+        
			
 
				+        // 响应式调整图表大小
			
 
				+        window.addEventListener('resize', function() {
			
 
				+            cropDistributionChart.resize();
			
 
				+            yieldTrendChart.resize();
			
 
				+            regionMapChart.resize();
			
 
				+            deviceStatusChart.resize();
			
 
				+            resourceUsageChart.resize();
			
 
				+            weatherMonitorChart.resize();
			
 
				+            deviceDistributionChart.resize();
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>