新增设备管理列表

clear-duplicates.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# 清理field-management-content.html中的重复样式
+# 作者: AI助手
+# 日期: 2024年5月
+
+file="pages/field-management-content.html"
+echo "正在处理: $file"
+
+# 1. 移除重复的position定义
+sed -i '' 's/position: relative;[[:space:]]*position: relative;/position: relative;/g' "$file"
+
+# 2. 移除重复的white-space定义
+sed -i '' 's/white-space: nowrap;[[:space:]]*white-space: nowrap;/white-space: nowrap;/g' "$file"
+
+# 3. 移除重复的overflow/text-overflow定义
+sed -i '' 's/overflow: hidden;[[:space:]]*text-overflow: ellipsis;[[:space:]]*overflow: hidden;[[:space:]]*text-overflow: ellipsis;/overflow: hidden;\n    text-overflow: ellipsis;/g' "$file"
+
+# 4. 移除重复的max-width定义
+sed -i '' 's/max-width: 200px;[[:space:]]*max-width: 200px;/max-width: 200px;/g' "$file"
+
+echo "完成处理" 

fix-tables.sh

@@ -0,0 +1,175 @@
+#!/bin/bash
+
+# 为所有具有表格的页面添加固定列和滚动控件功能
+# 作者: AI助手
+# 日期: 2024年5月
+
+# 查找所有包含表格容器的HTML文件
+files=$(grep -l "table-container" pages/*.html)
+
+for file in $files; do
+  echo "正在处理: $file"
+  
+  # 1. 添加表格容器位置样式
+  sed -i '' 's/\.table-container {/\.table-container {\n    position: relative;/' "$file"
+  
+  # 2. 修改表格边框合并方式
+  sed -i '' 's/border-collapse: collapse;/border-collapse: separate;\n    border-spacing: 0;/' "$file"
+  
+  # 3. 分别处理表头和单元格样式
+  # 表头：允许完整显示
+  sed -i '' 's/th {/th {\n    white-space: nowrap;\n    position: relative;\n    overflow: visible;\n    max-width: none;\n    text-overflow: clip;/' "$file"
+  
+  # 普通单元格：应用省略号
+  sed -i '' 's/td {/td {\n    white-space: nowrap;\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;/' "$file"
+  
+  # 4. 添加固定列和滚动控件相关样式（如果不存在）
+  if ! grep -q "table-fixed-right" "$file"; then
+    # 查找tr:hover样式的位置，在其后添加新样式
+    sed -i '' '/tr:hover {/a\
+    \
+    tr:hover td:last-child {\
+        background-color: #f9fafb;\
+    }\
+    \
+    /* 固定最后一列（操作列）样式 */\
+    .table-fixed-right {\
+        position: relative;\
+    }\
+    \
+    .table-fixed-right th:last-child,\
+    .table-fixed-right td:last-child {\
+        position: sticky;\
+        right: 0;\
+        z-index: 2;\
+        background-color: white;\
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);\
+    }\
+    \
+    .table-fixed-right th:last-child {\
+        background-color: #f9fafb;\
+    }\
+    \
+    /* 表格滚动控件 */\
+    .table-scroll-controls {\
+        display: none;\
+        position: absolute;\
+        top: 50%;\
+        transform: translateY(-50%);\
+        width: 100%;\
+        pointer-events: none;\
+        z-index: 3;\
+    }\
+    \
+    .table-scroll-btn {\
+        position: absolute;\
+        width: 32px;\
+        height: 32px;\
+        border-radius: 50%;\
+        background-color: rgba(255, 255, 255, 0.9);\
+        color: #4CAF50;\
+        border: 1px solid #e0e0e0;\
+        display: flex;\
+        align-items: center;\
+        justify-content: center;\
+        cursor: pointer;\
+        pointer-events: auto;\
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\
+        z-index: 4;\
+    }\
+    \
+    .table-scroll-left {\
+        left: 10px;\
+    }\
+    \
+    .table-scroll-right {\
+        right: 10px;\
+    }\
+    \
+    .has-overflow .table-scroll-controls {\
+        display: block;\
+    }' "$file"
+  fi
+  
+  # 5. 在表格容器中添加滚动控件和表格类（如果不存在）
+  if ! grep -q "table-scroll-controls" "$file"; then
+    sed -i '' '/<div class="table-container">/a\
+        <div class="table-scroll-controls">\
+            <button class="table-scroll-btn table-scroll-left">\
+                <i class="iconfont icon-left"><\/i>\
+            <\/button>\
+            <button class="table-scroll-btn table-scroll-right">\
+                <i class="iconfont icon-right"><\/i>\
+            <\/button>\
+        <\/div>' "$file"
+    
+    # 将表格添加固定右侧类
+    sed -i '' 's/<table>/<table class="table-fixed-right">/' "$file"
+    sed -i '' 's/<table class="/<table class="table-fixed-right /' "$file"
+  fi
+  
+  # 6. 添加表格滚动初始化JavaScript（如果不存在）
+  if ! grep -q "initTableScroll" "$file"; then
+    # 查找第一个script标签开始的位置
+    sed -i '' '/<script>/a\
+    document.addEventListener("DOMContentLoaded", function() {\
+        // 初始化表格滚动功能\
+        function initTableScroll() {\
+            const tableContainer = document.querySelector(".table-container");\
+            if (!tableContainer) return;\
+            \
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");\
+            const scrollRightBtn = document.querySelector(".table-scroll-right");\
+            \
+            if (!scrollLeftBtn || !scrollRightBtn) return;\
+            \
+            // 检查表格是否需要水平滚动\
+            function checkTableOverflow() {\
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {\
+                    tableContainer.classList.add("has-overflow");\
+                } else {\
+                    tableContainer.classList.remove("has-overflow");\
+                }\
+            }\
+            \
+            // 左右滚动按钮点击事件\
+            scrollLeftBtn.addEventListener("click", function() {\
+                tableContainer.scrollLeft -= 150;\
+            });\
+            \
+            scrollRightBtn.addEventListener("click", function() {\
+                tableContainer.scrollLeft += 150;\
+            });\
+            \
+            // 初始检查和窗口大小变化时检查\
+            checkTableOverflow();\
+            window.addEventListener("resize", checkTableOverflow);\
+            \
+            // 滚动事件处理\
+            tableContainer.addEventListener("scroll", function() {\
+                // 根据滚动位置显示/隐藏滚动按钮\
+                if (tableContainer.scrollLeft <= 10) {\
+                    scrollLeftBtn.style.opacity = "0.5";\
+                } else {\
+                    scrollLeftBtn.style.opacity = "1";\
+                }\
+                \
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {\
+                    scrollRightBtn.style.opacity = "0.5";\
+                } else {\
+                    scrollRightBtn.style.opacity = "1";\
+                }\
+            });\
+            \
+            // 初始触发滚动事件，设置初始按钮状态\
+            tableContainer.dispatchEvent(new Event("scroll"));\
+        }\
+        \
+        // 初始化表格滚动\
+        initTableScroll();' "$file"
+  fi
+  
+  echo "完成处理: $file"
+done
+
+echo "所有表格优化完成！" 

index.html

@@ -288,7 +288,7 @@
                     <i class="iconfont icon-arrow-down ml-auto"></i>
                 </div>
                 <div class="sidebar-submenu">
-                    <div class="sidebar-item" data-page="field-management">
+                    <div class="sidebar-item" data-page="field-management-content">
                         <i class="iconfont icon-database"></i>
                         <span>地块管理</span>
                     </div>
@@ -381,6 +381,18 @@
                         <i class="iconfont icon-profile"></i>
                         <span>作物档案</span>
                     </div>
+                    <div class="sidebar-item" data-page="crop-monitoring">
+                        <i class="iconfont icon-eye"></i>
+                        <span>作物生长监测</span>
+                    </div>
+                    <div class="sidebar-item" data-page="crop-health-analysis">
+                        <i class="iconfont icon-experiment"></i>
+                        <span>作物健康分析</span>
+                    </div>
+                    <div class="sidebar-item" data-page="crop-yield-prediction">
+                        <i class="iconfont icon-bar-chart"></i>
+                        <span>产量智能预测</span>
+                    </div>
                     <div class="sidebar-item" data-page="crop-trace">
                         <i class="iconfont icon-qrcode"></i>
                         <span>溯源信息展示</span>

pages/crop-health-analysis.html

@@ -0,0 +1 @@
+ 

pages/crop-monitoring.html

@@ -0,0 +1,534 @@
+<!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;
+        }
+        
+        .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;
+        }
+        
+        .crop-card {
+            transition: all 0.3s;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        
+        .crop-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        
+        .crop-card.selected {
+            border-color: #4CAF50;
+        }
+        
+        .growth-stage {
+            position: relative;
+        }
+        
+        .growth-stage-line {
+            position: absolute;
+            top: 16px;
+            left: 0;
+            height: 4px;
+            background-color: #e5e7eb;
+            width: 100%;
+            z-index: 1;
+        }
+        
+        .growth-stage-progress {
+            position: absolute;
+            top: 16px;
+            left: 0;
+            height: 4px;
+            background-color: #4CAF50;
+            z-index: 2;
+        }
+        
+        .growth-stage-item {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: white;
+            border: 2px solid #e5e7eb;
+            z-index: 3;
+            position: relative;
+        }
+        
+        .growth-stage-item.completed {
+            background-color: #4CAF50;
+            border-color: #4CAF50;
+            color: white;
+        }
+        
+        .growth-stage-item.current {
+            border-color: #4CAF50;
+            color: #4CAF50;
+        }
+        
+        .sensor-data-card {
+            height: 100%;
+        }
+        
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        
+        .metric-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #ebf7ee;
+            color: #4CAF50;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        
+        .chart-container {
+            height: 300px;
+            width: 100%;
+        }
+
+        .image-thumbnail {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 4px;
+        }
+        
+        .status-tag {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .status-tag.healthy {
+            background-color: #d1fae5;
+            color: #065f46;
+        }
+        
+        .status-tag.alert {
+            background-color: #fef3c7;
+            color: #92400e;
+        }
+        
+        .status-tag.danger {
+            background-color: #fee2e2;
+            color: #b91c1c;
+        }
+        
+        .recommendation-card {
+            border-left: 4px solid #4CAF50;
+        }
+    </style>
+</head>
+<body>
+    <div class="page-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-filter mr-1"></i>
+                    筛选
+                </button>
+                <button class="btn btn-default">
+                    <i class="iconfont icon-download mr-1"></i>
+                    导出数据
+                </button>
+                <button class="btn btn-primary">
+                    <i class="iconfont icon-plus mr-1"></i>
+                    添加监测
+                </button>
+            </div>
+        </div>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            <div class="crop-card card p-4 selected">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="font-semibold">水稻 (东区A地块)</h3>
+                    <span class="status-tag healthy">健康</span>
+                </div>
+                <img src="https://images.unsplash.com/photo-1569880153113-76e33fc52d5f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTI0MXwwfDF8c2VhcmNofDl8fHJpY2UlMjBmaWVsZHxlbnwwfHx8fDE2MTI5MzIwMTQ&ixlib=rb-4.0.3&q=80&w=500" class="image-thumbnail mb-3" alt="水稻">
+                <div class="flex justify-between text-sm">
+                    <div>生长阶段: <span class="font-medium">抽穗期</span></div>
+                    <div>已种植: <span class="font-medium">65天</span></div>
+                </div>
+            </div>
+            
+            <div class="crop-card card p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="font-semibold">小麦 (西区B地块)</h3>
+                    <span class="status-tag alert">需关注</span>
+                </div>
+                <img src="https://images.unsplash.com/photo-1534876516388-4fd7f08be5b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTI0MXwwfDF8c2VhcmNofDN8fHdoZWF0JTIwZmllbGR8ZW58MHx8fHwxNjEyOTMyMDc2&ixlib=rb-4.0.3&q=80&w=500" class="image-thumbnail mb-3" alt="小麦">
+                <div class="flex justify-between text-sm">
+                    <div>生长阶段: <span class="font-medium">灌浆期</span></div>
+                    <div>已种植: <span class="font-medium">110天</span></div>
+                </div>
+            </div>
+            
+            <div class="crop-card card p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="font-semibold">玉米 (南区C地块)</h3>
+                    <span class="status-tag healthy">健康</span>
+                </div>
+                <img src="https://images.unsplash.com/photo-1540820658830-001814294075?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTI0MXwwfDF8c2VhcmNofDEwfHxjb3JuJTIwZmllbGR8ZW58MHx8fHwxNjEyOTMyMTEw&ixlib=rb-4.0.3&q=80&w=500" class="image-thumbnail mb-3" alt="玉米">
+                <div class="flex justify-between text-sm">
+                    <div>生长阶段: <span class="font-medium">拔节期</span></div>
+                    <div>已种植: <span class="font-medium">40天</span></div>
+                </div>
+            </div>
+            
+            <div class="crop-card card p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="font-semibold">大豆 (北区D地块)</h3>
+                    <span class="status-tag danger">异常</span>
+                </div>
+                <img src="https://images.unsplash.com/photo-1599048695674-7a7881c51b9f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTI0MXwwfDF8c2VhcmNofDF8fHNveWJlYW4lMjBmaWVsZHxlbnwwfHx8fDE2MTI5MzIxNTQ&ixlib=rb-4.0.3&q=80&w=500" class="image-thumbnail mb-3" alt="大豆">
+                <div class="flex justify-between text-sm">
+                    <div>生长阶段: <span class="font-medium">开花期</span></div>
+                    <div>已种植: <span class="font-medium">55天</span></div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card p-6 mb-6">
+            <h2 class="text-xl font-bold mb-4">水稻生长详情 (东区A地块)</h2>
+            
+            <div class="growth-stage flex justify-between items-center mb-6 relative px-4">
+                <div class="growth-stage-line"></div>
+                <div class="growth-stage-progress" style="width: 62%"></div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item completed flex items-center justify-center mb-2">
+                        <i class="iconfont icon-check text-sm"></i>
+                    </div>
+                    <div class="text-xs text-center">播种期</div>
+                    <div class="text-xs text-gray-500">5月1日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item completed flex items-center justify-center mb-2">
+                        <i class="iconfont icon-check text-sm"></i>
+                    </div>
+                    <div class="text-xs text-center">秧苗期</div>
+                    <div class="text-xs text-gray-500">5月15日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item completed flex items-center justify-center mb-2">
+                        <i class="iconfont icon-check text-sm"></i>
+                    </div>
+                    <div class="text-xs text-center">分蘖期</div>
+                    <div class="text-xs text-gray-500">6月1日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item current flex items-center justify-center mb-2">
+                        4
+                    </div>
+                    <div class="text-xs text-center font-medium">抽穗期</div>
+                    <div class="text-xs text-gray-500">7月5日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item flex items-center justify-center mb-2">
+                        5
+                    </div>
+                    <div class="text-xs text-center">开花期</div>
+                    <div class="text-xs text-gray-500">7月20日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item flex items-center justify-center mb-2">
+                        6
+                    </div>
+                    <div class="text-xs text-center">灌浆期</div>
+                    <div class="text-xs text-gray-500">8月10日</div>
+                </div>
+                
+                <div class="flex flex-col items-center">
+                    <div class="growth-stage-item flex items-center justify-center mb-2">
+                        7
+                    </div>
+                    <div class="text-xs text-center">成熟期</div>
+                    <div class="text-xs text-gray-500">9月5日</div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
+                <div class="card sensor-data-card p-4 border border-gray-200">
+                    <div class="flex justify-between items-center mb-4">
+                        <div>
+                            <div class="text-sm text-gray-500">土壤湿度</div>
+                            <div class="metric-value">68<span class="text-sm font-normal">%</span></div>
+                        </div>
+                        <div class="metric-icon">
+                            <i class="iconfont icon-water"></i>
+                        </div>
+                    </div>
+                    <div class="text-xs text-green-600">
+                        <i class="iconfont icon-arrow-up"></i>
+                        较昨日 +2%
+                    </div>
+                </div>
+                
+                <div class="card sensor-data-card p-4 border border-gray-200">
+                    <div class="flex justify-between items-center mb-4">
+                        <div>
+                            <div class="text-sm text-gray-500">土壤温度</div>
+                            <div class="metric-value">24<span class="text-sm font-normal">°C</span></div>
+                        </div>
+                        <div class="metric-icon">
+                            <i class="iconfont icon-temperature"></i>
+                        </div>
+                    </div>
+                    <div class="text-xs text-gray-500">
+                        <i class="iconfont icon-minus"></i>
+                        较昨日 持平
+                    </div>
+                </div>
+                
+                <div class="card sensor-data-card p-4 border border-gray-200">
+                    <div class="flex justify-between items-center mb-4">
+                        <div>
+                            <div class="text-sm text-gray-500">光照强度</div>
+                            <div class="metric-value">45K<span class="text-sm font-normal">lux</span></div>
+                        </div>
+                        <div class="metric-icon">
+                            <i class="iconfont icon-sun"></i>
+                        </div>
+                    </div>
+                    <div class="text-xs text-red-600">
+                        <i class="iconfont icon-arrow-down"></i>
+                        较昨日 -5K
+                    </div>
+                </div>
+                
+                <div class="card sensor-data-card p-4 border border-gray-200">
+                    <div class="flex justify-between items-center mb-4">
+                        <div>
+                            <div class="text-sm text-gray-500">叶绿素指数</div>
+                            <div class="metric-value">42<span class="text-sm font-normal">SPAD</span></div>
+                        </div>
+                        <div class="metric-icon">
+                            <i class="iconfont icon-leaf"></i>
+                        </div>
+                    </div>
+                    <div class="text-xs text-green-600">
+                        <i class="iconfont icon-arrow-up"></i>
+                        较昨日 +1.5
+                    </div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                <div class="card p-4 border border-gray-200">
+                    <h3 class="font-semibold mb-3">传感器数据趋势 (近7天)</h3>
+                    <div id="sensorTrend" class="chart-container"></div>
+                </div>
+                
+                <div class="card p-4 border border-gray-200">
+                    <h3 class="font-semibold mb-3">生长指标对比</h3>
+                    <div id="growthComparison" class="chart-container"></div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 gap-4">
+                <div class="card p-4 border border-gray-200 recommendation-card">
+                    <div class="flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
+                            <i class="iconfont icon-bulb text-green-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold mb-1">AI生长建议</h3>
+                            <p class="text-gray-600 text-sm mb-2">基于当前土壤湿度和天气预报，建议在未来3天内增加灌溉水量，保持土壤湿度在70%-75%之间，以促进抽穗期水稻的生长。</p>
+                            <div class="flex gap-2">
+                                <button class="btn btn-primary text-xs py-1 px-3">应用建议</button>
+                                <button class="btn btn-default text-xs py-1 px-3">查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card p-4 border border-gray-200 recommendation-card">
+                    <div class="flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3 mt-1">
+                            <i class="iconfont icon-warning text-yellow-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold mb-1">预警提示</h3>
+                            <p class="text-gray-600 text-sm mb-2">东区A地块东北角的部分水稻叶片出现轻微黄化，可能是缺铁所致。建议对该区域进行铁元素叶面喷施，用量为0.2%的硫酸亚铁溶液。</p>
+                            <div class="flex gap-2">
+                                <button class="btn btn-primary text-xs py-1 px-3">记录处理</button>
+                                <button class="btn btn-default text-xs py-1 px-3">推迟处理</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 传感器数据趋势图
+            const sensorTrendChart = echarts.init(document.getElementById('sensorTrend'));
+            sensorTrendChart.setOption({
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['土壤湿度', '土壤温度', '光照强度']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['6月29日', '6月30日', '7月1日', '7月2日', '7月3日', '7月4日', '7月5日']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '土壤湿度',
+                        type: 'line',
+                        data: [62, 64, 65, 63, 65, 66, 68],
+                        smooth: true,
+                        color: '#4CAF50'
+                    },
+                    {
+                        name: '土壤温度',
+                        type: 'line',
+                        data: [22, 23, 24, 25, 25, 24, 24],
+                        smooth: true,
+                        color: '#FF9800'
+                    },
+                    {
+                        name: '光照强度',
+                        type: 'line',
+                        data: [42, 44, 48, 50, 52, 50, 45],
+                        smooth: true,
+                        color: '#03A9F4'
+                    }
+                ]
+            });
+            
+            // 生长指标对比图
+            const growthComparisonChart = echarts.init(document.getElementById('growthComparison'));
+            growthComparisonChart.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    data: ['当前值', '理想值']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value'
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['叶绿素', '株高', '分蘖数', '叶面积']
+                },
+                series: [
+                    {
+                        name: '当前值',
+                        type: 'bar',
+                        data: [42, 85, 12, 28],
+                        color: '#4CAF50'
+                    },
+                    {
+                        name: '理想值',
+                        type: 'bar',
+                        data: [45, 90, 15, 30],
+                        color: '#CDDC39'
+                    }
+                ]
+            });
+            
+            // 响应式调整图表大小
+            window.addEventListener('resize', function() {
+                sensorTrendChart.resize();
+                growthComparisonChart.resize();
+            });
+            
+            // 选择作物卡片
+            const cropCards = document.querySelectorAll('.crop-card');
+            cropCards.forEach(card => {
+                card.addEventListener('click', function() {
+                    cropCards.forEach(c => c.classList.remove('selected'));
+                    this.classList.add('selected');
+                });
+            });
+        });
+    </script>
+</body>
+</html> 

pages/crop-yield-prediction.html

@@ -0,0 +1,630 @@
+<!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;
+        }
+        
+        .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;
+        }
+        
+        .chart-container {
+            height: 350px;
+            width: 100%;
+        }
+        
+        .prediction-card {
+            background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
+            border-left: 4px solid #4CAF50;
+        }
+        
+        .yield-indicator {
+            position: relative;
+            height: 40px;
+            width: 100%;
+            background-color: #f3f4f6;
+            border-radius: 20px;
+            margin: 20px 0;
+            overflow: hidden;
+        }
+        
+        .yield-range {
+            position: absolute;
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #8BC34A);
+            border-radius: 20px;
+        }
+        
+        .yield-marker {
+            position: absolute;
+            top: -6px;
+            width: 12px;
+            height: 52px;
+            background-color: #1e293b;
+            z-index: 5;
+        }
+        
+        .yield-label {
+            position: absolute;
+            bottom: -25px;
+            transform: translateX(-50%);
+            font-size: 12px;
+            white-space: nowrap;
+        }
+        
+        .factor-card {
+            border-left: 3px solid;
+            transition: all 0.2s;
+        }
+        
+        .factor-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        
+        .positive-factor {
+            border-color: #4CAF50;
+        }
+        
+        .negative-factor {
+            border-color: #f44336;
+        }
+        
+        .neutral-factor {
+            border-color: #9e9e9e;
+        }
+        
+        .factor-icon {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+        }
+        
+        .positive-icon {
+            background-color: #e8f5e9;
+            color: #4CAF50;
+        }
+        
+        .negative-icon {
+            background-color: #ffebee;
+            color: #f44336;
+        }
+        
+        .neutral-icon {
+            background-color: #f5f5f5;
+            color: #9e9e9e;
+        }
+        
+        .impact-meter {
+            height: 6px;
+            background-color: #e5e7eb;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        
+        .impact-fill {
+            height: 100%;
+            border-radius: 3px;
+        }
+        
+        .positive-impact {
+            background-color: #4CAF50;
+        }
+        
+        .negative-impact {
+            background-color: #f44336;
+        }
+        
+        .neutral-impact {
+            background-color: #9e9e9e;
+        }
+        
+        .filter-button {
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 14px;
+            transition: all 0.2s;
+        }
+        
+        .filter-button.active {
+            background-color: #4CAF50;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="page-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-history mr-1"></i>
+                    历史预测
+                </button>
+                <button class="btn btn-default">
+                    <i class="iconfont icon-download mr-1"></i>
+                    导出报告
+                </button>
+                <button class="btn btn-primary">
+                    <i class="iconfont icon-reload mr-1"></i>
+                    更新预测
+                </button>
+            </div>
+        </div>
+        
+        <!-- 筛选器 -->
+        <div class="mb-6 flex items-center">
+            <div class="mr-3 text-gray-500">筛选:</div>
+            <div class="flex gap-2">
+                <button class="filter-button bg-gray-100 active">全部作物</button>
+                <button class="filter-button bg-gray-100">水稻</button>
+                <button class="filter-button bg-gray-100">小麦</button>
+                <button class="filter-button bg-gray-100">玉米</button>
+                <button class="filter-button bg-gray-100">大豆</button>
+            </div>
+            <div class="ml-auto">
+                <select class="px-3 py-2 bg-white border border-gray-300 rounded-md">
+                    <option>2023年</option>
+                    <option>2022年</option>
+                    <option>2021年</option>
+                </select>
+            </div>
+        </div>
+        
+        <!-- 产量预测总览 -->
+        <div class="card p-6 mb-6">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="col-span-2">
+                    <h2 class="text-lg font-bold mb-4">农场产量预测</h2>
+                    <div id="yieldPredictionChart" class="chart-container"></div>
+                </div>
+                
+                <div>
+                    <h2 class="text-lg font-bold mb-4">本年度产量预计</h2>
+                    <div class="space-y-6">
+                        <div class="prediction-card p-4 rounded-md">
+                            <div class="flex justify-between items-center">
+                                <div class="text-sm text-gray-600">总产量预测</div>
+                                <div class="text-lg font-bold">2,850 吨</div>
+                            </div>
+                            <div class="text-sm text-green-600 mt-1">
+                                <i class="iconfont icon-arrow-up"></i>
+                                较去年 +8.2%
+                            </div>
+                            <div class="text-xs text-gray-500 mt-1">
+                                置信区间: 2,730 - 2,950 吨
+                            </div>
+                        </div>
+                        
+                        <div class="prediction-card p-4 rounded-md">
+                            <div class="flex justify-between items-center">
+                                <div class="text-sm text-gray-600">亩均产量预测</div>
+                                <div class="text-lg font-bold">1,120 斤</div>
+                            </div>
+                            <div class="text-sm text-green-600 mt-1">
+                                <i class="iconfont icon-arrow-up"></i>
+                                较去年 +5.6%
+                            </div>
+                            <div class="text-xs text-gray-500 mt-1">
+                                置信区间: 1,080 - 1,150 斤
+                            </div>
+                        </div>
+                        
+                        <div class="prediction-card p-4 rounded-md">
+                            <div class="flex justify-between items-center">
+                                <div class="text-sm text-gray-600">潜在最高产量</div>
+                                <div class="text-lg font-bold">3,120 吨</div>
+                            </div>
+                            <div class="text-xs text-gray-500 mt-1">
+                                实现率: 91.3% (优)
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 作物产量预测详情 -->
+        <div class="card p-6 mb-6">
+            <h2 class="text-lg font-bold mb-4">各作物产量预测详情</h2>
+            <div class="overflow-x-auto">
+                <table class="min-w-full">
+                    <thead>
+                        <tr class="bg-gray-50">
+                            <th class="px-4 py-3 text-left">作物</th>
+                            <th class="px-4 py-3 text-left">种植面积(亩)</th>
+                            <th class="px-4 py-3 text-left">预测产量(吨)</th>
+                            <th class="px-4 py-3 text-left">亩均产量(斤)</th>
+                            <th class="px-4 py-3 text-left">较去年</th>
+                            <th class="px-4 py-3 text-left">预测准确率</th>
+                            <th class="px-4 py-3 text-left">风险因素</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y">
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
+                                        🌾
+                                    </div>
+                                    水稻
+                                </div>
+                            </td>
+                            <td class="px-4 py-3">1,200</td>
+                            <td class="px-4 py-3 font-medium">1,380</td>
+                            <td class="px-4 py-3">1,150</td>
+                            <td class="px-4 py-3 text-green-600">+9.1%</td>
+                            <td class="px-4 py-3">92%</td>
+                            <td class="px-4 py-3">
+                                <span class="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-xs">高温</span>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-2">
+                                        🌽
+                                    </div>
+                                    玉米
+                                </div>
+                            </td>
+                            <td class="px-4 py-3">800</td>
+                            <td class="px-4 py-3 font-medium">920</td>
+                            <td class="px-4 py-3">1,150</td>
+                            <td class="px-4 py-3 text-green-600">+7.3%</td>
+                            <td class="px-4 py-3">88%</td>
+                            <td class="px-4 py-3">
+                                <span class="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-xs">雨量</span>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 rounded-full bg-amber-50 flex items-center justify-center mr-2">
+                                        🌾
+                                    </div>
+                                    小麦
+                                </div>
+                            </td>
+                            <td class="px-4 py-3">600</td>
+                            <td class="px-4 py-3 font-medium">480</td>
+                            <td class="px-4 py-3">800</td>
+                            <td class="px-4 py-3 text-red-600">-2.1%</td>
+                            <td class="px-4 py-3">85%</td>
+                            <td class="px-4 py-3">
+                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">病害</span>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
+                                        🫘
+                                    </div>
+                                    大豆
+                                </div>
+                            </td>
+                            <td class="px-4 py-3">120</td>
+                            <td class="px-4 py-3 font-medium">70</td>
+                            <td class="px-4 py-3">583</td>
+                            <td class="px-4 py-3 text-green-600">+11.5%</td>
+                            <td class="px-4 py-3">90%</td>
+                            <td class="px-4 py-3">
+                                <span class="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-xs">无</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        
+        <!-- 水稻产量详细预测 -->
+        <div class="card p-6 mb-6">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div class="lg:col-span-2">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-bold">水稻产量详细预测</h2>
+                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
+                            <option>按地块查看</option>
+                            <option>按月份查看</option>
+                            <option>按品种查看</option>
+                        </select>
+                    </div>
+                    
+                    <div id="detailedPredictionChart" class="chart-container mb-4"></div>
+                    
+                    <div>
+                        <h3 class="font-medium mb-2">产量预测区间</h3>
+                        <div class="yield-indicator">
+                            <div class="yield-range" style="left: 20%; right: 20%"></div>
+                            <div class="yield-marker" style="left: 50%"></div>
+                            
+                            <div class="yield-label" style="left: 0%">
+                                低产 (1,000吨)
+                            </div>
+                            <div class="yield-label" style="left: 20%">
+                                1,240吨
+                            </div>
+                            <div class="yield-label" style="left: 50%">
+                                预测值: 1,380吨
+                            </div>
+                            <div class="yield-label" style="left: 80%">
+                                1,520吨
+                            </div>
+                            <div class="yield-label" style="left: 100%">
+                                高产 (1,650吨)
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <h2 class="text-lg font-bold mb-4">影响因素分析</h2>
+                    <div class="space-y-3">
+                        <div class="factor-card positive-factor p-3 bg-white rounded-md shadow-sm">
+                            <div class="flex items-center">
+                                <div class="factor-icon positive-icon mr-3">
+                                    <i class="iconfont icon-sun"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium">光照充足</div>
+                                    <div class="text-xs text-gray-500">平均日照时长较理想值高8%</div>
+                                    <div class="flex items-center mt-1">
+                                        <div class="text-xs mr-2">影响:</div>
+                                        <div class="impact-meter flex-grow">
+                                            <div class="impact-fill positive-impact" style="width: 75%"></div>
+                                        </div>
+                                        <div class="text-xs ml-2">+7.5%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="factor-card positive-factor p-3 bg-white rounded-md shadow-sm">
+                            <div class="flex items-center">
+                                <div class="factor-icon positive-icon mr-3">
+                                    <i class="iconfont icon-experiment"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium">优质品种</div>
+                                    <div class="text-xs text-gray-500">使用"丰优838"高产水稻品种</div>
+                                    <div class="flex items-center mt-1">
+                                        <div class="text-xs mr-2">影响:</div>
+                                        <div class="impact-meter flex-grow">
+                                            <div class="impact-fill positive-impact" style="width: 60%"></div>
+                                        </div>
+                                        <div class="text-xs ml-2">+6.0%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="factor-card neutral-factor p-3 bg-white rounded-md shadow-sm">
+                            <div class="flex items-center">
+                                <div class="factor-icon neutral-icon mr-3">
+                                    <i class="iconfont icon-water"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium">降水量适中</div>
+                                    <div class="text-xs text-gray-500">降水量与多年平均值相当</div>
+                                    <div class="flex items-center mt-1">
+                                        <div class="text-xs mr-2">影响:</div>
+                                        <div class="impact-meter flex-grow">
+                                            <div class="impact-fill neutral-impact" style="width: 40%"></div>
+                                        </div>
+                                        <div class="text-xs ml-2">+0.5%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="factor-card negative-factor p-3 bg-white rounded-md shadow-sm">
+                            <div class="flex items-center">
+                                <div class="factor-icon negative-icon mr-3">
+                                    <i class="iconfont icon-temperature"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium">高温胁迫</div>
+                                    <div class="text-xs text-gray-500">灌浆期连续5天高温(>35°C)</div>
+                                    <div class="flex items-center mt-1">
+                                        <div class="text-xs mr-2">影响:</div>
+                                        <div class="impact-meter flex-grow">
+                                            <div class="impact-fill negative-impact" style="width: 50%"></div>
+                                        </div>
+                                        <div class="text-xs ml-2">-5.0%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-4 p-4 bg-gray-50 rounded-md">
+                        <h3 class="font-medium mb-2">AI优化建议</h3>
+                        <ul class="text-sm space-y-2">
+                            <li class="flex">
+                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
+                                <span>针对高温胁迫，建议增加灌溉频次，保持田间湿度</span>
+                            </li>
+                            <li class="flex">
+                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
+                                <span>适当增加钾肥施用量，提高植株抗逆性</span>
+                            </li>
+                            <li class="flex">
+                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
+                                <span>预计产量可提升至1,450吨(+5%)</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 总体产量预测图表
+            const yieldPredictionChart = echarts.init(document.getElementById('yieldPredictionChart'));
+            yieldPredictionChart.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    data: ['实际产量', '预测产量', '误差范围']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '产量(吨)'
+                },
+                series: [
+                    {
+                        name: '实际产量',
+                        type: 'bar',
+                        data: [1800, 1920, 2100, 2250, 2400, 2630, null],
+                        color: '#66BB6A'
+                    },
+                    {
+                        name: '预测产量',
+                        type: 'bar',
+                        data: [null, null, null, null, null, null, 2850],
+                        color: '#42A5F5'
+                    },
+                    {
+                        name: '误差范围',
+                        type: 'boxplot',
+                        data: [
+                            [null, null, null, null, null],
+                            [null, null, null, null, null],
+                            [null, null, null, null, null],
+                            [null, null, null, null, null],
+                            [null, null, null, null, null],
+                            [null, null, null, null, null],
+                            [2730, 2800, 2850, 2900, 2950]
+                        ],
+                        itemStyle: {
+                            color: '#90CAF9'
+                        }
+                    }
+                ]
+            });
+            
+            // 详细预测图表
+            const detailedPredictionChart = echarts.init(document.getElementById('detailedPredictionChart'));
+            detailedPredictionChart.setOption({
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['去年产量', '预测产量']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['东区A', '东区B', '西区A', '西区B', '南区', '北区A', '北区B']
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '产量(吨)'
+                },
+                series: [
+                    {
+                        name: '去年产量',
+                        type: 'bar',
+                        data: [220, 182, 191, 234, 290, 150, 198],
+                        color: '#AED581'
+                    },
+                    {
+                        name: '预测产量',
+                        type: 'bar',
+                        data: [240, 195, 210, 250, 310, 160, 215],
+                        color: '#4CAF50'
+                    }
+                ]
+            });
+            
+            // 响应式调整图表大小
+            window.addEventListener('resize', function() {
+                yieldPredictionChart.resize();
+                detailedPredictionChart.resize();
+            });
+            
+            // 筛选按钮点击事件
+            const filterButtons = document.querySelectorAll('.filter-button');
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                    this.classList.add('active');
+                });
+            });
+        });
+    </script>
+</body>
+</html> 

pages/device-alarm.html

@@ -31,15 +31,25 @@
         }
         
         .table-container {
+    position: relative;
+    position: relative;
             overflow-x: auto;
         }
         
         table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate;
+    border-spacing: 0;
         }
         
         th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
             background-color: #f9fafb;
             padding: 12px 16px;
             text-align: left;
@@ -49,12 +59,81 @@
         }
         
         td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
             padding: 12px 16px;
             border-bottom: 1px solid #e5e7eb;
         }
         
         tr:hover {
-            background-color: #f9fafb;
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }            background-color: #f9fafb;
         }
         
         .btn {
@@ -387,13 +466,13 @@
                         <tr>
                             <th>告警ID</th>
                             <th>告警等级</th>
-                            <th>设备名称</th>
-                            <th>设备类型</th>
+                            <th class="min-w-[120px]">设备名称</th>
+                            <th class="min-w-[100px]">设备类型</th>
                             <th>告警内容</th>
                             <th>告警时间</th>
                             <th>处理状态</th>
                             <th>处理人</th>
-                            <th>操作</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -648,7 +727,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 告警详情弹窗
             const alarmDetailModal = document.getElementById('alarmDetailModal');
             const closeDetailModal = document.getElementById('closeDetailModal');

pages/device-management-content.html

@@ -34,7 +34,7 @@
             min-height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
-            padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */
+            padding-top: 70px; /* 增加顶部填充，确保内容不被系统导航栏遮挡 */
         }
         
         /* 内容页面框架 */
@@ -69,15 +69,18 @@
         .page-container {
             padding: 20px;
             position: relative;
-            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
-            width: 100%;
-            max-width: 100%;
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 100%; 
             box-sizing: border-box;
-            padding-top: 40px; /* 增加顶部内边距，给按钮腾出空间 */
+            padding-top: 20px; /* 减少顶部内边距，因为body已经有较大的padding-top */
+            display: block !important; /* 确保容器可见 */
+            visibility: visible !important; /* 确保容器可见 */
+            z-index: 5; /* 确保层级足够高 */
         }
         
-        /* 防止重复菜单 */
-        body > div:not(.page-container):not(.modal-container),
+        /* 防止重复菜单，但允许页面容器显示 */
+        body > div:not(.page-container):not(.modal-overlay),
         iframe#sidebar, 
         div.system-menu,
         [id^="system-menu"],
@@ -86,32 +89,18 @@
         .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"],
+        [class*="circle-button"],
+        [class*="float-circle"],
         .help-btn,
-        .chat-btn,
-        body > .btn,
-        body > button,
-        body > div:not(.page-container):not(.modal-container) {
+        .chat-btn {
             display: none !important;
-            visibility: hidden !important;
-            opacity: 0 !important;
-            pointer-events: none !important;
         }
         
         /* 页面标题和操作按钮容器 */
@@ -151,15 +140,25 @@
         }
         
         .table-container {
+    position: relative;
+    position: relative;
             overflow-x: auto;
         }
         
         table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate;
+    border-spacing: 0;
         }
         
         th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
             background-color: #f9fafb;
             padding: 12px 16px;
             text-align: left;
@@ -169,12 +168,81 @@
         }
         
         td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
             padding: 12px 16px;
             border-bottom: 1px solid #e5e7eb;
         }
         
         tr:hover {
-            background-color: #f9fafb;
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }            background-color: #f9fafb;
         }
         
         .btn {
@@ -441,22 +509,337 @@
             </div>
         </div>
         
+        <!-- 添加设备列表表格 -->
+        <div class="card">
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>设备ID</th>
+                            <th class="min-w-[120px]">设备名称</th>
+                            <th class="min-w-[100px]">设备类型</th>
+                            <th>所在位置</th>
+                            <th class="min-w-[100px]">安装日期</th>
+                            <th class="min-w-[80px]">状态</th>
+                            <th>最后活动</th>
+                            <th class="min-w-[150px]">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>DEV20230001</td>
+                            <td>温湿度传感器-A1</td>
+                            <td>传感器</td>
+                            <td>东区大棚A区</td>
+                            <td>2023-01-15</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-15 14:30</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230001">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230001">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230002</td>
+                            <td>土壤湿度检测仪-B1</td>
+                            <td>传感器</td>
+                            <td>西区稻田B区</td>
+                            <td>2023-02-20</td>
+                            <td><span class="badge badge-warning">离线</span></td>
+                            <td>2023-10-10 09:15</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230002">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230002">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230003</td>
+                            <td>气象站-C1</td>
+                            <td>气象设备</td>
+                            <td>中心监测站</td>
+                            <td>2023-03-10</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-16 10:25</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230003">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230003">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230004</td>
+                            <td>智能灌溉控制器-D1</td>
+                            <td>控制器</td>
+                            <td>南区果园</td>
+                            <td>2023-04-05</td>
+                            <td><span class="badge badge-danger">故障</span></td>
+                            <td>2023-10-12 18:40</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230004">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230004">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230005</td>
+                            <td>作物监控摄像头-E1</td>
+                            <td>摄像头</td>
+                            <td>东区大棚B区</td>
+                            <td>2023-05-20</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-16 11:05</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230005">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230005">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+            <!-- 分页 -->
+            <div class="p-4 border-t border-gray-200 flex justify-between items-center">
+                <div class="text-sm text-gray-500">显示 1 至 5，共 24 条记录</div>
+                <div class="pagination">
+                    <div class="pagination-item disabled">&lt;</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">&gt;</div>
+                </div>
+            </div>
+        </div>
+        
         <!-- 设备表单弹窗 -->
         <div class="modal-overlay" id="deviceModal">
-            // ... existing code ...
+            <div class="modal">
+                <div class="modal-header">
+                    <div class="modal-title">添加设备</div>
+                    <div class="modal-close" id="closeModal">&times;</div>
+                </div>
+                <div class="modal-body">
+                    <form id="deviceForm">
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">设备ID</label>
+                                <input type="text" class="form-input" id="deviceId" placeholder="输入设备ID">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">设备名称</label>
+                                <input type="text" class="form-input" id="deviceName" placeholder="输入设备名称">
+                            </div>
+                        </div>
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">设备类型</label>
+                                <select class="form-input" id="deviceType">
+                                    <option value="">请选择设备类型</option>
+                                    <option value="sensor">传感器</option>
+                                    <option value="camera">摄像头</option>
+                                    <option value="controller">控制器</option>
+                                    <option value="weather">气象设备</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">所在位置</label>
+                                <input type="text" class="form-input" id="deviceLocation" placeholder="输入设备位置">
+                            </div>
+                        </div>
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">安装日期</label>
+                                <input type="date" class="form-input" id="installDate">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">状态</label>
+                                <select class="form-input" id="deviceStatus">
+                                    <option value="1">在线</option>
+                                    <option value="0">离线</option>
+                                    <option value="2">维护中</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">设备描述</label>
+                            <textarea class="form-input" id="deviceDesc" 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>
     </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';
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        // 添加设备按钮点击事件
+        document.getElementById('addDeviceBtn').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'flex';
+        });
+        
+        // 关闭模态框
+        document.getElementById('closeModal').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 取消按钮点击事件
+        document.getElementById('cancelBtn').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 保存按钮点击事件
+        document.getElementById('saveBtn').addEventListener('click', function() {
+            alert('设备信息已保存');
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 编辑按钮点击事件
+        const editBtns = document.querySelectorAll('.edit-btn');
+        editBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const deviceId = this.getAttribute('data-id');
+                document.getElementById('deviceModal').style.display = 'flex';
+                document.querySelector('.modal-title').textContent = '编辑设备';
+                // 这里可以根据deviceId加载设备信息
+            });
+        });
+        
+        // 查看按钮点击事件
+        const viewBtns = document.querySelectorAll('.view-btn');
+        viewBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const deviceId = this.getAttribute('data-id');
+                alert('查看设备详情：' + deviceId);
+                // 这里可以跳转到设备详情页面
+            });
+        });
+        
+        // 监听来自父页面的消息
+        window.addEventListener('message', function(event) {
+            if (event.data === 'parentReady') {
+                console.log('父页面已就绪，内容页面显示完成');
+                // 可以在这里添加需要在父页面加载完成后执行的代码
+            }
+        });
+        
+        // 确保页面在iframe中正确显示
+        document.addEventListener('DOMContentLoaded', function() {
+            // 显示页面内容，以防被CSS规则隐藏
+            document.querySelector('.page-container').style.display = 'block';
+            document.querySelector('.page-container').style.visibility = 'visible';
+            document.querySelector('.page-container').style.opacity = '1';
+            
+            // 强制刷新布局
+            setTimeout(function() {
+                const tables = document.querySelectorAll('table');
+                tables.forEach(table => {
+                    table.style.display = 'none';
+                    setTimeout(() => {
+                        table.style.display = 'table';
+                    }, 10);
+                });
+                
+                // 再次确保内容可见
+                document.body.style.display = 'block';
+                document.body.style.visibility = 'visible';
+                document.body.style.opacity = '1';
+            }, 100);
         });
     </script>
 </body>

pages/device-management.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-CN" class="iframe-content">
+<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -30,55 +30,938 @@
             color: var(--text-primary);
             margin: 0;
             padding: 0;
-            height: 100vh;
-            width: 100vw;
-            overflow: hidden;
+            min-height: 100vh;
+            padding-top: 70px; /* 确保内容不被系统导航栏遮挡 */
+        }
+        
+        .page-container {
+            padding: 20px;
+            position: relative;
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 1400px;
+            margin: 0 auto;
+            box-sizing: border-box;
+        }
+        
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            margin-bottom: 20px;
         }
         
-        /* 内容页面框架 */
-        #content-frame {
+        .table-container {
+    position: relative;
+    position: relative;
+            overflow-x: auto;
+            position: relative;
+        }
+        
+        table {
             width: 100%;
-            height: 100%;
-            border: none;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+        
+        th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
+            background-color: #f9fafb;
+            padding: 12px 16px;
+            text-align: left;
+            font-weight: 500;
+            color: #6b7280;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            position: relative;
+        }
+        
+        td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            padding: 12px 16px;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            max-width: 200px;
             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;
+            text-overflow: ellipsis;
+        }
+        
+        /* 固定最后一列（操作列）样式 */
+        .table-fixed-right {
+            position: relative;
+        }
+        
+        .table-fixed-right th:last-child,
+        .table-fixed-right td:last-child {
+            position: sticky;
+            right: 0;
+            z-index: 2;
+            background-color: white;
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .table-fixed-right th:last-child {
+            background-color: #f9fafb;
+        }
+        
+        /* 表格滚动控件 */
+        .table-scroll-controls {
+            display: none;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            pointer-events: none;
+            z-index: 3;
+        }
+        
+        .table-scroll-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.9);
+            color: #4CAF50;
+            border: 1px solid #e0e0e0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            pointer-events: auto;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            z-index: 4;
+        }
+        
+        .table-scroll-left {
+            left: 10px;
+        }
+        
+        .table-scroll-right {
+            right: 10px;
+        }
+        
+        .has-overflow .table-scroll-controls {
+            display: block;
+        }
+        
+        tr:hover {
+            background-color: #f9fafb;
+        }
+        
+        tr:hover td:last-child {
+            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-sm {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+        
+        .search-box {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .input {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            flex-grow: 1;
+        }
+        
+        .select {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            background-color: white;
+            min-width: 120px;
+        }
+        
+        .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;
+        }
+        
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .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;
+        }
+        
+        .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;
+        }
+        
+        .grid-2 {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        
+        /* 搜索条件样式 */
+        .filter-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #e5e7eb;
+        }
+        
+        .filter-group:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        
+        .filter-item {
+            display: flex;
+            align-items: center;
+            min-width: 180px;
+        }
+        
+        .filter-label {
+            color: #6b7280;
+            font-size: 13px;
+            min-width: 70px;
+        }
+        
+        .date-filter {
+            display: flex;
+            align-items: center;
+        }
+        
+        .date-filter input {
+            width: 140px;
+        }
+        
+        .filter-divider {
+            color: #9ca3af;
+            margin: 0 4px;
         }
     </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>
+    <div class="page-container">
+        <div class="page-header">
+            <h1 class="text-2xl font-bold">设备管理列表</h1>
+            
+            <div class="flex gap-2">
+                <button class="btn btn-primary" id="addDeviceBtn">
+                    <i class="iconfont icon-plus" style="margin-right: 4px;"></i>
+                    新增设备
+                </button>
+                <button class="btn btn-default" id="importBtn">
+                    <i class="iconfont icon-upload" style="margin-right: 4px;"></i>
+                    导入
+                </button>
+                <button class="btn btn-default" id="exportBtn">
+                    <i class="iconfont icon-download" style="margin-right: 4px;"></i>
+                    导出
+                </button>
+            </div>
+        </div>
+        
+        <div class="card p-6">
+            <div class="filter-group">
+                <div class="filter-item" style="min-width: 300px;">
+                    <span class="filter-label">设备编号:</span>
+                    <input type="text" class="input w-full" placeholder="请输入设备编号关键词">
+                </div>
+                
+                <div class="filter-item" style="min-width: 300px;">
+                    <span class="filter-label">设备名称:</span>
+                    <input type="text" class="input w-full" placeholder="请输入设备名称关键词">
+                </div>
+                
+                <div class="ml-auto">
+                    <button class="btn btn-primary">
+                        <i class="iconfont icon-search" style="margin-right: 4px;"></i>
+                        搜索
+                    </button>
+                    <button class="btn btn-default ml-2">
+                        <i class="iconfont icon-reload" style="margin-right: 4px;"></i>
+                        重置
+                    </button>
+                </div>
+            </div>
+            
+            <div class="filter-group">
+                <div class="filter-item">
+                    <span class="filter-label">设备类型:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="sensor">传感器</option>
+                        <option value="camera">摄像头</option>
+                        <option value="controller">控制器</option>
+                        <option value="weather">气象设备</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">所属农场:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="east">东区智慧农场</option>
+                        <option value="west">西区智慧农场</option>
+                        <option value="south">南区智慧农场</option>
+                        <option value="center">中心监测农场</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">所属地块:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="a-3">A区大棚3号</option>
+                        <option value="a-1">A区大棚1号</option>
+                        <option value="b-2">B区稻田2号</option>
+                        <option value="c-1">C区果园1号</option>
+                        <option value="m-1">监测区1号</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">设备状态:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="1">在线</option>
+                        <option value="0">离线</option>
+                        <option value="2">故障</option>
+                        <option value="3">维护中</option>
+                    </select>
+                </div>
+                
+
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="table-container">
+                <div class="table-scroll-controls">
+                    <button class="table-scroll-btn table-scroll-left">
+                        <i class="iconfont icon-left"></i>
+                    </button>
+                    <button class="table-scroll-btn table-scroll-right">
+                        <i class="iconfont icon-right"></i>
+                    </button>
+                </div>
+                <table class="table-fixed-right">
+                    <thead>
+                        <tr>
+                            <th class="min-w-[120px]">设备编号</th>
+                            <th class="min-w-[120px]">设备名称</th>
+                            <th class="min-w-[100px]">设备类型</th>
+                            <th class="min-w-[120px]">所属地块</th>
+                            <th class="min-w-[120px]">所属农场</th>
+                            <th class="min-w-[100px]">设备型号</th>
+                            <th class="min-w-[100px]">厂家</th>
+                            <th class="min-w-[100px]">安装日期</th>
+                            <th class="min-w-[80px]">状态</th>
+                            <th class="min-w-[150px]">最后活动时间</th>
+                            <th class="min-w-[150px]">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>DEV20230001</td>
+                            <td>温湿度传感器-A1</td>
+                            <td>传感器</td>
+                            <td>A区大棚3号</td>
+                            <td>东区智慧农场</td>
+                            <td>TS-100A</td>
+                            <td>智农科技</td>
+                            <td>2023-01-15</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-15 14:30</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230001">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230001">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                    <button class="btn btn-sm btn-default delete-btn" data-id="DEV20230001" style="color: #F44336;">
+                                        <i class="iconfont icon-delete"></i>
+                                        删除
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230002</td>
+                            <td>土壤湿度检测仪-B1</td>
+                            <td>传感器</td>
+                            <td>B区稻田2号</td>
+                            <td>西区智慧农场</td>
+                            <td>SM-200B</td>
+                            <td>农达科技</td>
+                            <td>2023-02-20</td>
+                            <td><span class="badge badge-warning">离线</span></td>
+                            <td>2023-10-10 09:15</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230002">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230002">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                    <button class="btn btn-sm btn-default delete-btn" data-id="DEV20230002" style="color: #F44336;">
+                                        <i class="iconfont icon-delete"></i>
+                                        删除
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230003</td>
+                            <td>气象站-C1</td>
+                            <td>气象设备</td>
+                            <td>监测区1号</td>
+                            <td>中心监测农场</td>
+                            <td>WS-500C</td>
+                            <td>科沃电子</td>
+                            <td>2023-03-10</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-16 10:25</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230003">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230003">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                    <button class="btn btn-sm btn-default delete-btn" data-id="DEV20230003" style="color: #F44336;">
+                                        <i class="iconfont icon-delete"></i>
+                                        删除
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230004</td>
+                            <td>智能灌溉控制器-D1</td>
+                            <td>控制器</td>
+                            <td>C区果园1号</td>
+                            <td>南区智慧农场</td>
+                            <td>IC-300D</td>
+                            <td>水利通</td>
+                            <td>2023-04-05</td>
+                            <td><span class="badge badge-danger">故障</span></td>
+                            <td>2023-10-12 18:40</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230004">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230004">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                    <button class="btn btn-sm btn-default delete-btn" data-id="DEV20230004" style="color: #F44336;">
+                                        <i class="iconfont icon-delete"></i>
+                                        删除
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>DEV20230005</td>
+                            <td>作物监控摄像头-E1</td>
+                            <td>摄像头</td>
+                            <td>A区大棚1号</td>
+                            <td>东区智慧农场</td>
+                            <td>CC-400E</td>
+                            <td>视界科技</td>
+                            <td>2023-05-20</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-10-16 11:05</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="DEV20230005">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="DEV20230005">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                    <button class="btn btn-sm btn-default delete-btn" data-id="DEV20230005" style="color: #F44336;">
+                                        <i class="iconfont icon-delete"></i>
+                                        删除
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+            <div class="p-4 border-t border-gray-200 flex justify-between items-center">
+                <div class="text-sm text-gray-500">显示 1 至 5，共 24 条记录</div>
+                <div class="pagination">
+                    <div class="pagination-item disabled">&lt;</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">&gt;</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 设备表单弹窗 -->
+        <div class="modal-overlay" id="deviceModal">
+            <div class="modal">
+                <div class="modal-header">
+                    <div class="modal-title">添加设备</div>
+                    <div class="modal-close" id="closeModal">&times;</div>
+                </div>
+                <div class="modal-body">
+                    <form id="deviceForm">
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">设备编号</label>
+                                <input type="text" class="form-input" id="deviceId" placeholder="输入设备编号">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">设备名称</label>
+                                <input type="text" class="form-input" id="deviceName" placeholder="输入设备名称">
+                            </div>
+                        </div>
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">设备类型</label>
+                                <select class="form-input" id="deviceType">
+                                    <option value="">请选择设备类型</option>
+                                    <option value="sensor">传感器</option>
+                                    <option value="camera">摄像头</option>
+                                    <option value="controller">控制器</option>
+                                    <option value="weather">气象设备</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">所属地块</label>
+                                <select class="form-input" id="devicePlot">
+                                    <option value="">请选择所属地块</option>
+                                    <option value="a-3">A区大棚3号</option>
+                                    <option value="a-1">A区大棚1号</option>
+                                    <option value="b-2">B区稻田2号</option>
+                                    <option value="c-1">C区果园1号</option>
+                                    <option value="m-1">监测区1号</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">所属农场</label>
+                                <select class="form-input" id="deviceFarm">
+                                    <option value="">请选择所属农场</option>
+                                    <option value="east">东区智慧农场</option>
+                                    <option value="west">西区智慧农场</option>
+                                    <option value="south">南区智慧农场</option>
+                                    <option value="center">中心监测农场</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">设备型号</label>
+                                <input type="text" class="form-input" id="deviceModel" placeholder="输入设备型号">
+                            </div>
+                        </div>
+                        <div class="grid-2">
+                            <div class="form-group">
+                                <label class="form-label">厂家</label>
+                                <input type="text" class="form-input" id="deviceManufacturer" placeholder="输入厂家名称">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">安装日期</label>
+                                <input type="date" class="form-input" id="installDate">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">设备描述</label>
+                            <textarea class="form-input" id="deviceDesc" 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>
+        
+        <!-- 删除确认弹窗 -->
+        <div class="modal-overlay" id="deleteModal">
+            <div class="modal" style="max-width: 400px;">
+                <div class="modal-header">
+                    <div class="modal-title">删除确认</div>
+                    <div class="modal-close" id="closeDeleteModal">&times;</div>
+                </div>
+                <div class="modal-body">
+                    <p class="mb-2">确定要删除该设备吗？</p>
+                    <p class="text-gray-500 text-sm">设备编号：<span id="deleteDeviceId"></span></p>
+                    <p class="text-gray-500 text-sm">设备名称：<span id="deleteDeviceName"></span></p>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-default" id="cancelDeleteBtn">取消</button>
+                    <button class="btn btn-danger" id="confirmDeleteBtn" style="background-color: #F44336; color: white;">确认删除</button>
+                </div>
+            </div>
+        </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';
+        // 添加设备按钮点击事件
+        document.getElementById('addDeviceBtn').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'flex';
+        });
+        
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector('.table-container');
+            const scrollLeftBtn = document.querySelector('.table-scroll-left');
+            const scrollRightBtn = document.querySelector('.table-scroll-right');
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add('has-overflow');
+                } else {
+                    tableContainer.classList.remove('has-overflow');
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener('resize', checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener('scroll', function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = '0.5';
+                } else {
+                    scrollLeftBtn.style.opacity = '1';
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = '0.5';
+                } else {
+                    scrollRightBtn.style.opacity = '1';
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event('scroll'));
+        }
+        
+        // 页面加载完成后初始化表格滚动
+        window.addEventListener('load', initTableScroll);
+        
+        // 关闭模态框
+        document.getElementById('closeModal').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 取消按钮点击事件
+        document.getElementById('cancelBtn').addEventListener('click', function() {
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 保存按钮点击事件
+        document.getElementById('saveBtn').addEventListener('click', function() {
+            alert('设备信息已保存');
+            document.getElementById('deviceModal').style.display = 'none';
+        });
+        
+        // 编辑按钮点击事件
+        const editBtns = document.querySelectorAll('.edit-btn');
+        editBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const deviceId = this.getAttribute('data-id');
+                document.getElementById('deviceModal').style.display = 'flex';
+                document.querySelector('.modal-title').textContent = '编辑设备';
+                
+                // 根据表格行数据填充表单
+                const row = this.closest('tr');
+                const cells = row.querySelectorAll('td');
+                
+                // 填充表单字段
+                document.getElementById('deviceId').value = cells[0].textContent;
+                document.getElementById('deviceName').value = cells[1].textContent;
+                
+                // 设备类型
+                const deviceTypeSelect = document.getElementById('deviceType');
+                Array.from(deviceTypeSelect.options).forEach(option => {
+                    if (option.text === cells[2].textContent) {
+                        option.selected = true;
+                    }
+                });
+                
+                // 所属地块
+                const devicePlotSelect = document.getElementById('devicePlot');
+                Array.from(devicePlotSelect.options).forEach(option => {
+                    if (option.text === cells[3].textContent) {
+                        option.selected = true;
+                    }
+                });
+                
+                // 所属农场
+                const deviceFarmSelect = document.getElementById('deviceFarm');
+                Array.from(deviceFarmSelect.options).forEach(option => {
+                    if (option.text === cells[4].textContent) {
+                        option.selected = true;
+                    }
+                });
+                
+                // 设备型号、厂家、安装日期
+                document.getElementById('deviceModel').value = cells[5].textContent;
+                document.getElementById('deviceManufacturer').value = cells[6].textContent;
+                document.getElementById('installDate').value = formatDateForInput(cells[7].textContent);
+            });
+        });
+        
+        // 日期格式化工具函数（将 "YYYY-MM-DD" 格式化为 date input 所需格式）
+        function formatDateForInput(dateString) {
+            // 假设输入格式为 "YYYY-MM-DD"
+            // HTML date input 也使用 "YYYY-MM-DD" 格式，所以可以直接返回
+            return dateString;
+        }
+        
+        // 查看按钮点击事件
+        const viewBtns = document.querySelectorAll('.view-btn');
+        viewBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const deviceId = this.getAttribute('data-id');
+                alert('查看设备详情：' + deviceId);
+                // 这里可以跳转到设备详情页面
+            });
+        });
+
+        // 删除按钮点击事件
+        const deleteBtns = document.querySelectorAll('.delete-btn');
+        deleteBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const deviceId = this.getAttribute('data-id');
+                const row = this.closest('tr');
+                const cells = row.querySelectorAll('td');
+                
+                // 显示删除确认弹窗
+                document.getElementById('deleteDeviceId').textContent = cells[0].textContent;
+                document.getElementById('deleteDeviceName').textContent = cells[1].textContent;
+                document.getElementById('deleteModal').style.display = 'flex';
+                
+                // 保存当前行引用，用于确认删除时使用
+                document.getElementById('confirmDeleteBtn').setAttribute('data-row', row.rowIndex);
+            });
+        });
+        
+        // 关闭删除确认弹窗
+        document.getElementById('closeDeleteModal').addEventListener('click', function() {
+            document.getElementById('deleteModal').style.display = 'none';
+        });
+        
+        // 取消删除
+        document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
+            document.getElementById('deleteModal').style.display = 'none';
+        });
+        
+        // 确认删除
+        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
+            const rowIndex = this.getAttribute('data-row');
+            const table = document.querySelector('tbody');
+            const rowToDelete = table.rows[rowIndex-1]; // -1 因为 rowIndex 是从 1 开始计数的
+            
+            if (rowToDelete) {
+                rowToDelete.remove();
+            }
+            
+            document.getElementById('deleteModal').style.display = 'none';
+            
+            // 显示删除成功提示
+            alert('设备已成功删除');
         });
     </script>
 </body>

pages/dict-management.html

@@ -72,12 +72,19 @@
                 </div>
                 
                 <div class="table-container">
-                    <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                    <table class="table-fixed-right table-fixed-right">
                         <thead>
                             <tr>
                                 <th>字典名称</th>
                                 <th>字典编码</th>
-                                <th>状态</th>
+                                <th class="min-w-[80px]">状态</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -163,14 +170,21 @@
                 </div>
                 
                 <div class="table-container">
-                    <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                    <table class="table-fixed-right table-fixed-right">
                         <thead>
                             <tr>
                                 <th>字典标签</th>
                                 <th>字典键值</th>
                                 <th>字典排序</th>
-                                <th>状态</th>
-                                <th>操作</th>
+                                <th class="min-w-[80px]">状态</th>
+                                <th class="min-w-[150px]">操作</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -354,7 +368,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 字典类型行点击事件
             const dictTypeRows = document.querySelectorAll('.dict-type-row');
             

pages/field-detail.html

@@ -135,15 +135,25 @@
         }
         
         .table-container {
+    position: relative;
+    position: relative;
             overflow-x: auto;
         }
         
         table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate;
+    border-spacing: 0;
         }
         
         th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
             background-color: #f9fafb;
             padding: 12px 16px;
             text-align: left;
@@ -153,12 +163,81 @@
         }
         
         td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
             padding: 12px 16px;
             border-bottom: 1px solid #e5e7eb;
         }
         
         tr:hover {
-            background-color: #f9fafb;
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }            background-color: #f9fafb;
         }
         
         .device-item, .person-item {
@@ -301,16 +380,92 @@
         }
 
         th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
             font-weight: 500;
             white-space: nowrap;
         }
 
         td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
             white-space: nowrap;
         }
 
         tbody tr:hover {
-            background-color: #f8fafc;
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }            background-color: #f8fafc;
         }
 
         .btn-danger {
@@ -502,7 +657,7 @@
                                         <th>种植面积(亩)</th>
                                         <th>种植时间</th>
                                         <th>预计收获时间</th>
-                                        <th>状态</th>
+                                        <th class="min-w-[80px]">状态</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -778,158 +933,214 @@
     </div>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // 获取URL参数
-            const urlParams = new URLSearchParams(window.location.search);
-            const fieldId = urlParams.get('id');
-            const activeTab = urlParams.get('tab');
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
             
-            // 切换Tab
-            const tabs = document.querySelectorAll('.tab');
-            const tabContents = document.querySelectorAll('.tab-content');
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
             
-            // 如果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');
-                    }
-                });
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
             }
             
-            // 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');
-                        }
-                    });
-                });
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
             });
             
-            // 编辑按钮事件
-            document.getElementById('editBtn').addEventListener('click', function() {
-                // 跳转到地块管理页的编辑模态框
-                window.location.href = `field-management-content.html?edit=${fieldId}`;
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
             });
             
-            // 设备绑定保存按钮
-            document.getElementById('saveDeviceBtn')?.addEventListener('click', function() {
-                alert('设备绑定关系保存成功');
-            });
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
             
-            // 人员绑定保存按钮
-            document.getElementById('savePersonBtn')?.addEventListener('click', function() {
-                alert('人员绑定关系保存成功');
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
             });
             
-            // 地图区域保存按钮
-            document.getElementById('saveMapBtn').addEventListener('click', function() {
-                alert('地块区域保存成功');
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();
+        
+        // 获取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');
+                }
             });
             
-            // 设备绑定/解绑按钮
-            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 = '解绑';
-                });
+            tabContents.forEach(content => {
+                content.classList.remove('active');
+                if (content.id === 'tab-' + activeTab) {
+                    content.classList.add('active');
+                }
             });
-            
-            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 = '绑定';
+        }
+        
+        // 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');
+                    }
                 });
             });
-            
-            // 人员绑定/解绑按钮
-            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 = '解绑';
-                });
+        });
+        
+        // 编辑按钮事件
+        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 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 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 mapTools = document.querySelectorAll('.map-tool');
-            mapTools.forEach(tool => {
-                tool.addEventListener('click', function() {
-                    mapTools.forEach(t => t.classList.remove('active'));
-                    this.classList.add('active');
-                });
+        });
+        
+        // 人员绑定/解绑按钮
+        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';
-                    });
+        // 绑定/未绑定切换功能
+        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);
-        });
+        // 初始化设备和人员的过滤标签
+        const deviceContent = document.getElementById('tab-device');
+        const personContent = document.getElementById('tab-person');
+        
+        if (deviceContent) initFilterTabs(deviceContent);
+        if (personContent) initFilterTabs(personContent);
+    });
     </script>
 </body>
 </html> 

pages/field-management-backup.html

@@ -0,0 +1,920 @@
+<!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;
+            min-height: 100vh;
+            padding-top: 15px;
+        }
+        
+        .page-container {
+            padding: 20px;
+            position: relative;
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 1400px;
+            margin: 0 auto;
+            box-sizing: border-box;
+        }
+        
+        /* 防止重复菜单 */
+        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,
+        [class*="round"],
+        [class*="circle"],
+        .help-btn,
+        .chat-btn,
+        body > .btn,
+        body > button,
+        body > div:not(.page-container):not(.modal) {
+            display: none !important;
+        }
+        
+        /* 页面标题和操作按钮容器 */
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            margin-bottom: 20px;
+        }
+        
+        .table-container {
+    position: relative;
+    position: relative;
+            overflow-x: auto;
+            position: relative;
+        }
+        
+        .table-scroll-container {
+            overflow-x: auto;
+            margin-left: 150px; /* 第一列宽度 */
+            position: relative;
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: separate;
+    border-spacing: 0;
+            table-layout: fixed;
+        }
+        
+        thead {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            background-color: #f9fafb;
+        }
+        
+        th, td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            padding: 12px 16px;
+            text-align: left;
+            white-space: nowrap;
+        }
+        
+        th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
+            background-color: #f9fafb;
+            font-weight: 500;
+            color: #6b7280;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        
+        td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        
+        tr:hover {
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }            background-color: #f9fafb;
+        }
+        
+        /* 固定第一列 */
+        .table-container .fixed-column {
+            position: absolute;
+            left: 0;
+            top: auto;
+            width: 150px;
+            background-color: white;
+            z-index: 5;
+            border-right: 1px solid #e5e7eb;
+        }
+        
+        .table-container .fixed-column-header {
+            position: sticky;
+            top: 0;
+            z-index: 15;
+            background-color: #f9fafb;
+        }
+        
+        /* 固定最后一列 */
+        .fixed-last-column {
+            position: absolute;
+            right: 0;
+            top: auto;
+            width: 150px;
+            background-color: white;
+            z-index: 5;
+            border-left: 1px solid #e5e7eb;
+        }
+        
+        .fixed-last-column-header {
+            position: sticky;
+            top: 0;
+            z-index: 15;
+            background-color: #f9fafb;
+        }
+        
+        /* 滚动控制 */
+        .horizontal-scroll-controls {
+            display: flex;
+            justify-content: center;
+            margin-top: 8px;
+            gap: 8px;
+        }
+        
+        .scroll-button {
+            background-color: #f3f4f6;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            padding: 4px 8px;
+            cursor: pointer;
+        }
+        
+        .scroll-button:hover {
+            background-color: #e5e7eb;
+        }
+        
+        .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;
+        }
+        
+        .search-box {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .input {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            flex-grow: 1;
+        }
+        
+        .select {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            background-color: white;
+            min-width: 120px;
+        }
+        
+        .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;
+        }
+        
+        /* 表单样式 */
+        .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;
+        }
+        
+        .grid-2 {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        
+        /* 筛选条件样式 */
+        .filter-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #e5e7eb;
+        }
+        
+        .filter-group:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        
+        .filter-item {
+            display: flex;
+            align-items: center;
+            min-width: 180px;
+        }
+        
+        .filter-label {
+            color: #6b7280;
+            font-size: 13px;
+            min-width: 70px;
+        }
+    </style>
+</head>
+<body>
+    <div class="page-container">
+        <div class="page-header">
+            <h1 class="text-2xl font-bold">地块管理</h1>
+            
+            <div class="flex gap-2">
+                <button class="btn btn-primary" id="addFieldBtn">
+                    <i class="iconfont icon-plus" style="margin-right: 4px;"></i>
+                    新增地块
+                </button>
+                <button class="btn btn-default" id="importBtn">
+                    <i class="iconfont icon-upload" style="margin-right: 4px;"></i>
+                    导入
+                </button>
+                <button class="btn btn-default" id="exportBtn">
+                    <i class="iconfont icon-download" style="margin-right: 4px;"></i>
+                    导出
+                </button>
+            </div>
+        </div>
+        
+        <div class="card p-6">
+            <div class="filter-group">
+                <div class="filter-item">
+                    <span class="filter-label">地块编号:</span>
+                    <input type="text" class="input" placeholder="请输入地块编号关键词">
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">地块名称:</span>
+                    <input type="text" class="input" placeholder="请输入地块名称关键词">
+                </div>
+                
+                <div class="ml-auto">
+                    <button class="btn btn-primary">
+                        <i class="iconfont icon-search" style="margin-right: 4px;"></i>
+                        搜索
+                    </button>
+                    <button class="btn btn-default ml-2">
+                        <i class="iconfont icon-reload" style="margin-right: 4px;"></i>
+                        重置
+                    </button>
+                </div>
+            </div>
+            
+            <div class="filter-group">
+                <div class="filter-item">
+                    <span class="filter-label">所属农场:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="east">东区智慧农场</option>
+                        <option value="west">西区智慧农场</option>
+                        <option value="south">南区智慧农场</option>
+                        <option value="center">中心监测农场</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">地块类型:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="greenhouse">大棚</option>
+                        <option value="field">露天农田</option>
+                        <option value="orchard">果园</option>
+                        <option value="paddy">水稻田</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">主要作物:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="rice">水稻</option>
+                        <option value="wheat">小麦</option>
+                        <option value="corn">玉米</option>
+                        <option value="vegetable">蔬菜</option>
+                        <option value="fruit">水果</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">状态:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="cultivating">种植中</option>
+                        <option value="fallow">休耕</option>
+                        <option value="preparing">准备中</option>
+                        <option value="harvested">已收获</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="table-container">
+                <!-- 固定第一列 -->
+                <table class="fixed-column">
+                    <thead>
+                        <tr>
+                            <th class="fixed-column-header">地块编号</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>FIELD20230001</td></tr>
+                        <tr><td>FIELD20230002</td></tr>
+                        <tr><td>FIELD20230003</td></tr>
+                        <tr><td>FIELD20230004</td></tr>
+                        <tr><td>FIELD20230005</td></tr>
+                    </tbody>
+                </table>
+                
+                <div class="table-scroll-container" id="tableScrollContainer">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th class="min-w-[120px]">地块名称</th>
+                                <th class="min-w-[120px]">所属农场</th>
+                                <th class="min-w-[100px]">地块类型</th>
+                                <th class="min-w-[120px]">主要作物</th>
+                                <th class="min-w-[90px]">面积(亩)</th>
+                                <th class="min-w-[150px]">地理位置</th>
+                                <th class="min-w-[100px]">开垦日期</th>
+                                <th class="min-w-[80px]">状态</th>
+                                <th class="min-w-[80px]">设备数量</th>
+                                <th class="min-w-[100px]">负责人</th>
+                                <th class="fixed-last-column-header">操作</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>A区大棚3号</td>
+                                <td>东区智慧农场</td>
+                                <td>大棚</td>
+                                <td>蔬菜(西红柿)</td>
+                                <td>3.5</td>
+                                <td>东经121.45，北纬31.22</td>
+                                <td>2023-01-15</td>
+                                <td><span class="badge badge-success">种植中</span></td>
+                                <td>5</td>
+                                <td>张大力</td>
+                                <td class="fixed-last-column">
+                                    <div class="flex gap-2">
+                                        <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230001">
+                                            <i class="iconfont icon-eye"></i>
+                                            查看
+                                        </button>
+                                        <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230001">
+                                            <i class="iconfont icon-edit"></i>
+                                            编辑
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>B区稻田2号</td>
+                                <td>西区智慧农场</td>
+                                <td>水稻田</td>
+                                <td>水稻</td>
+                                <td>15.2</td>
+                                <td>东经121.47，北纬31.24</td>
+                                <td>2023-02-20</td>
+                                <td><span class="badge badge-success">种植中</span></td>
+                                <td>8</td>
+                                <td>李耕田</td>
+                                <td class="fixed-last-column">
+                                    <div class="flex gap-2">
+                                        <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230002">
+                                            <i class="iconfont icon-eye"></i>
+                                            查看
+                                        </button>
+                                        <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230002">
+                                            <i class="iconfont icon-edit"></i>
+                                            编辑
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>C区果园1号</td>
+                                <td>南区智慧农场</td>
+                                <td>果园</td>
+                                <td>水果(葡萄)</td>
+                                <td>8.7</td>
+                                <td>东经121.42，北纬31.18</td>
+                                <td>2023-03-10</td>
+                                <td><span class="badge badge-warning">准备中</span></td>
+                                <td>6</td>
+                                <td>王果农</td>
+                                <td class="fixed-last-column">
+                                    <div class="flex gap-2">
+                                        <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230003">
+                                            <i class="iconfont icon-eye"></i>
+                                            查看
+                                        </button>
+                                        <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230003">
+                                            <i class="iconfont icon-edit"></i>
+                                            编辑
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>A区大棚1号</td>
+                                <td>东区智慧农场</td>
+                                <td>大棚</td>
+                                <td>蔬菜(黄瓜)</td>
+                                <td>2.8</td>
+                                <td>东经121.44，北纬31.21</td>
+                                <td>2023-04-05</td>
+                                <td><span class="badge badge-danger">休耕</span></td>
+                                <td>3</td>
+                                <td>张大力</td>
+                                <td class="fixed-last-column">
+                                    <div class="flex gap-2">
+                                        <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230004">
+                                            <i class="iconfont icon-eye"></i>
+                                            查看
+                                        </button>
+                                        <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230004">
+                                            <i class="iconfont icon-edit"></i>
+                                            编辑
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>监测区1号</td>
+                                <td>中心监测农场</td>
+                                <td>露天农田</td>
+                                <td>玉米</td>
+                                <td>10.5</td>
+                                <td>东经121.46，北纬31.23</td>
+                                <td>2023-05-20</td>
+                                <td><span class="badge badge-success">种植中</span></td>
+                                <td>10</td>
+                                <td>赵监测</td>
+                                <td class="fixed-last-column">
+                                    <div class="flex gap-2">
+                                        <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230005">
+                                            <i class="iconfont icon-eye"></i>
+                                            查看
+                                        </button>
+                                        <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230005">
+                                            <i class="iconfont icon-edit"></i>
+                                            编辑
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            
+            <!-- 水平滚动控制 -->
+            <div class="horizontal-scroll-controls p-2">
+                <button class="scroll-button" id="scrollLeftBtn">
+                    <i class="iconfont icon-left"></i> 左滑
+                </button>
+                <button class="scroll-button" id="scrollRightBtn">
+                    右滑 <i class="iconfont icon-right"></i>
+                </button>
+            </div>
+            
+            <div class="p-4 border-t border-gray-200 flex justify-between items-center">
+                <div class="text-sm text-gray-500">显示 1 至 5，共 24 条记录</div>
+                <div class="flex gap-1">
+                    <button class="btn btn-sm btn-default" disabled>&lt;</button>
+                    <button class="btn btn-sm btn-primary">1</button>
+                    <button class="btn btn-sm btn-default">2</button>
+                    <button class="btn btn-sm btn-default">3</button>
+                    <button class="btn btn-sm btn-default">4</button>
+                    <button class="btn btn-sm btn-default">5</button>
+                    <button class="btn btn-sm btn-default">&gt;</button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 地块表单弹窗 -->
+        <div class="modal" id="fieldModal" style="display: none;">
+            <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">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="fieldForm">
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">地块编号</label>
+                                    <input type="text" class="form-input" id="fieldId" placeholder="输入地块编号">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">地块名称</label>
+                                    <input type="text" class="form-input" id="fieldName" placeholder="输入地块名称">
+                                </div>
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">所属农场</label>
+                                    <select class="form-input" id="farmId">
+                                        <option value="">请选择所属农场</option>
+                                        <option value="east">东区智慧农场</option>
+                                        <option value="west">西区智慧农场</option>
+                                        <option value="south">南区智慧农场</option>
+                                        <option value="center">中心监测农场</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">地块类型</label>
+                                    <select class="form-input" id="fieldType">
+                                        <option value="">请选择地块类型</option>
+                                        <option value="greenhouse">大棚</option>
+                                        <option value="field">露天农田</option>
+                                        <option value="orchard">果园</option>
+                                        <option value="paddy">水稻田</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">主要作物</label>
+                                    <input type="text" class="form-input" id="mainCrop" placeholder="输入主要作物">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">面积(亩)</label>
+                                    <input type="number" step="0.1" class="form-input" id="area" placeholder="输入面积">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">地理位置</label>
+                                <input type="text" class="form-input" id="location" placeholder="输入地理位置坐标">
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">开垦日期</label>
+                                    <input type="date" class="form-input" id="startDate">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">状态</label>
+                                    <select class="form-input" id="status">
+                                        <option value="cultivating">种植中</option>
+                                        <option value="fallow">休耕</option>
+                                        <option value="preparing">准备中</option>
+                                        <option value="harvested">已收获</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">负责人</label>
+                                <input type="text" class="form-input" id="manager" placeholder="输入负责人姓名">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">备注</label>
+                                <textarea class="form-input" id="remarks" rows="3" placeholder="输入备注信息"></textarea>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" id="cancelBtn">取消</button>
+                        <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        // 表格水平滚动控制
+        document.getElementById('scrollLeftBtn').addEventListener('click', function() {
+            const scrollContainer = document.getElementById('tableScrollContainer');
+            scrollContainer.scrollBy({ left: -200, behavior: 'smooth' });
+        });
+        
+        document.getElementById('scrollRightBtn').addEventListener('click', function() {
+            const scrollContainer = document.getElementById('tableScrollContainer');
+            scrollContainer.scrollBy({ left: 200, behavior: 'smooth' });
+        });
+        
+        // 添加地块按钮点击事件
+        document.getElementById('addFieldBtn').addEventListener('click', function() {
+            document.getElementById('fieldModal').style.display = 'block';
+            setTimeout(() => {
+                document.getElementById('fieldModal').classList.add('show');
+            }, 10);
+        });
+        
+        // 关闭模态框
+        document.getElementById('closeModal').addEventListener('click', function() {
+            closeModal();
+        });
+        
+        // 取消按钮点击事件
+        document.getElementById('cancelBtn').addEventListener('click', function() {
+            closeModal();
+        });
+        
+        // 保存按钮点击事件
+        document.getElementById('saveBtn').addEventListener('click', function() {
+            alert('地块信息已保存');
+            closeModal();
+        });
+        
+        // 关闭模态框函数
+        function closeModal() {
+            document.getElementById('fieldModal').classList.remove('show');
+            setTimeout(() => {
+                document.getElementById('fieldModal').style.display = 'none';
+            }, 300);
+        }
+        
+        // 编辑按钮点击事件
+        const editBtns = document.querySelectorAll('.edit-btn');
+        editBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const fieldId = this.getAttribute('data-id');
+                document.querySelector('.modal-title').textContent = '编辑地块';
+                document.getElementById('fieldModal').style.display = 'block';
+                setTimeout(() => {
+                    document.getElementById('fieldModal').classList.add('show');
+                }, 10);
+                // 这里可以根据fieldId加载地块信息
+            });
+        });
+        
+        // 查看按钮点击事件
+        const viewBtns = document.querySelectorAll('.view-btn');
+        viewBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const fieldId = this.getAttribute('data-id');
+                window.location.href = `field-detail.html?id=${fieldId}`;
+            });
+        });
+        
+        // 表格行特效
+        const tableRows = document.querySelectorAll('tbody tr');
+        tableRows.forEach(row => {
+            row.addEventListener('mouseenter', function() {
+                const index = Array.from(this.parentNode.children).indexOf(this);
+                const fixedRows = document.querySelectorAll('.fixed-column tbody tr');
+                if (fixedRows[index]) {
+                    fixedRows[index].classList.add('bg-gray-100');
+                }
+            });
+            
+            row.addEventListener('mouseleave', function() {
+                const index = Array.from(this.parentNode.children).indexOf(this);
+                const fixedRows = document.querySelectorAll('.fixed-column tbody tr');
+                if (fixedRows[index]) {
+                    fixedRows[index].classList.remove('bg-gray-100');
+                }
+            });
+        });
+    </script>
+</body>
+</html> 

pages/field-management-content-backup.html

@@ -0,0 +1,1869 @@
+<!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 {
+            position: relative;
+            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;
+        }
+        
+        .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 {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            position: relative;
+            background: none !important;
+            border-radius: 0 !important;
+            -webkit-border-radius: 0 !important;
+            -moz-border-radius: 0 !important;
+        }
+        
+        /* 表头样式 - 确保内容完整显示 */
+        th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+            white-space: nowrap;
+            background-color: #f9fafb !important;
+            padding: 12px 16px;
+            text-align: left;
+            font-weight: 500;
+            color: #6b7280;
+            border-bottom: 1px solid #e5e7eb;
+            position: relative;
+            overflow: visible;
+            max-width: none;
+            text-overflow: clip;
+        }
+
+        /* 普通单元格应用省略号截断 */
+        td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: 12px 16px;
+            border-bottom: 1px solid #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 {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
+            text-decoration: none !important;
+            -webkit-appearance: none !important;
+            -moz-appearance: none !important;
+            appearance: none !important;
+        }
+
+        /* 确保表格行交替背景色正确 */
+        tbody tr:hover {
+    
+    tr:hover td:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 固定最后一列（操作列）样式 */
+    .table-fixed-right {
+        position: relative;
+    }
+    
+    .table-fixed-right th:last-child,
+    .table-fixed-right td:last-child {
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background-color: white;
+        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .table-fixed-right th:last-child {
+        background-color: #f9fafb;
+    }
+    
+    /* 表格滚动控件 */
+    .table-scroll-controls {
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        pointer-events: none;
+        z-index: 3;
+    }
+    
+    .table-scroll-btn {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #4CAF50;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: auto;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 4;
+    }
+    
+    .table-scroll-left {
+        left: 10px;
+    }
+    
+    .table-scroll-right {
+        right: 10px;
+    }
+    
+    .has-overflow .table-scroll-controls {
+        display: block;
+    }
+
+    tbody tr:hover {
+        background-color: #f8fafc !important;
+    }
+
+    tbody tr:hover td {
+        white-space: nowrap;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        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 {
+        position: relative;
+        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">
+                    <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="min-w-[120px]">地块编号</th>
+                                <th class="min-w-[120px]">地块名称</th>
+                                <th class="min-w-[120px]">所属农场</th>
+                                <th class="min-w-[100px]">所属区域</th>
+                                <th class="min-w-[100px]">地块类型</th>
+                                <th class="min-w-[90px]">面积(亩)</th>
+                                <th class="min-w-[120px]">种植作物</th>
+                                <th class="min-w-[100px]">土壤类型</th>
+                                <th class="min-w-[100px]">灌溉方式</th>
+                                <th class="min-w-[100px]">使用状态</th>
+                                <th class="min-w-[100px]">绑定设备</th>
+                                <th class="min-w-[100px]">绑定人员</th>
+                                <th class="min-w-[100px]">负责人</th>
+                                <th class="min-w-[120px]">创建时间</th>
+                                <th class="min-w-[120px]">上次更新</th>
+                                <th class="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="地块管理" data-id="FK20230001">
+                                            <i class="iconfont icon-eye"></i>管理
+                                        </button>
+                                        <button type="button" class="action-btn edit" title="编辑地块" data-id="FK20230001">
+                                            <i class="iconfont icon-edit"></i>编辑
+                                        </button>
+                                        <button type="button" class="action-btn delete" title="删除地块" data-id="FK20230001">
+                                            <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="地块管理" data-id="FK20230002">
+                                            <i class="iconfont icon-eye"></i>管理
+                                        </button>
+                                        <button type="button" class="action-btn edit" title="编辑地块" data-id="FK20230002">
+                                            <i class="iconfont icon-edit"></i>编辑
+                                        </button>
+                                        <button type="button" class="action-btn delete" title="删除地块" data-id="FK20230002">
+                                            <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="地块管理" data-id="FK20230003">
+                                            <i class="iconfont icon-eye"></i>管理
+                                        </button>
+                                        <button type="button" class="action-btn edit" title="编辑地块" data-id="FK20230003">
+                                            <i class="iconfont icon-edit"></i>编辑
+                                        </button>
+                                        <button type="button" class="action-btn delete" title="删除地块" data-id="FK20230003">
+                                            <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="地块管理" data-id="FK20230004">
+                                            <i class="iconfont icon-eye"></i>管理
+                                        </button>
+                                        <button type="button" class="action-btn edit" title="编辑地块" data-id="FK20230004">
+                                            <i class="iconfont icon-edit"></i>编辑
+                                        </button>
+                                        <button type="button" class="action-btn delete" title="删除地块" data-id="FK20230004">
+                                            <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>
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        // 页面跳转函数
+        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>

pages/field-management-content.html

@@ -1,1710 +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>
+<!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>

pages/field-management.html

@@ -4,31 +4,795 @@
     <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>
-        html, body {
+        :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: 100%;
+            min-height: 100vh;
+            padding-top: 15px;
+        }
+        
+        .page-container {
+            padding: 20px;
+            position: relative;
+            min-height: 100vh; 
+            width: 100%; 
+            max-width: 1400px;
+            margin: 0 auto;
+            box-sizing: border-box;
+        }
+        
+        /* 防止重复菜单 */
+        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,
+        [class*="round"],
+        [class*="circle"],
+        .help-btn,
+        .chat-btn,
+        body > .btn,
+        body > button,
+        body > div:not(.page-container):not(.modal) {
+            display: none !important;
+        }
+        
+        /* 页面标题和操作按钮容器 */
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            margin-bottom: 20px;
+        }
+        
+        .table-container {
+    position: relative;
+    position: relative;
+            overflow-x: auto;
+            position: relative;
+        }
+        
+        table {
             width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+        
+        th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
+            background-color: #f9fafb;
+            padding: 12px 16px;
+            text-align: left;
+            font-weight: 500;
+            color: #6b7280;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            position: relative;
+        }
+        
+        td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            padding: 12px 16px;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            max-width: 200px;
             overflow: hidden;
+            text-overflow: ellipsis;
         }
         
-        #content-frame {
-            width: 100%;
-            height: 100%;
-            border: none;
-            margin: 0;
-            padding: 0;
+        /* 固定最后一列（操作列）样式 */
+        .table-fixed-right {
             position: relative;
-            z-index: 1;
+        }
+        
+        .table-fixed-right th:last-child,
+        .table-fixed-right td:last-child {
+            position: sticky;
+            right: 0;
+            z-index: 2;
+            background-color: white;
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .table-fixed-right th:last-child {
+            background-color: #f9fafb;
+        }
+        
+        /* 表格滚动控件 */
+        .table-scroll-controls {
+            display: none;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            pointer-events: none;
+            z-index: 3;
+        }
+        
+        .table-scroll-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.9);
+            color: #4CAF50;
+            border: 1px solid #e0e0e0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            pointer-events: auto;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            z-index: 4;
+        }
+        
+        .table-scroll-left {
+            left: 10px;
+        }
+        
+        .table-scroll-right {
+            right: 10px;
+        }
+        
+        .has-overflow .table-scroll-controls {
+            display: block;
+        }
+        
+        tr:hover {
+            background-color: #f9fafb;
+        }
+        
+        tr:hover td:last-child {
+            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-sm {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+        
+        .search-box {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .input {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            flex-grow: 1;
+        }
+        
+        .select {
+            padding: 8px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            background-color: white;
+            min-width: 120px;
+        }
+        
+        .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;
+        }
+        
+        /* 表单样式 */
+        .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;
+        }
+        
+        .grid-2 {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        
+        /* 筛选条件样式 */
+        .filter-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px dashed #e5e7eb;
+        }
+        
+        .filter-group:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        
+        .filter-item {
+            display: flex;
+            align-items: center;
+            min-width: 180px;
+        }
+        
+        .filter-label {
+            color: #6b7280;
+            font-size: 13px;
+            min-width: 70px;
         }
     </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>
+    <div class="page-container">
+        <div class="page-header">
+            <h1 class="text-2xl font-bold">地块管理</h1>
+            
+            <div class="flex gap-2">
+                <button class="btn btn-primary" id="addFieldBtn">
+                    <i class="iconfont icon-plus" style="margin-right: 4px;"></i>
+                    新增地块
+                </button>
+                <button class="btn btn-default" id="importBtn">
+                    <i class="iconfont icon-upload" style="margin-right: 4px;"></i>
+                    导入
+                </button>
+                <button class="btn btn-default" id="exportBtn">
+                    <i class="iconfont icon-download" style="margin-right: 4px;"></i>
+                    导出
+                </button>
+            </div>
+        </div>
+        
+        <div class="card p-6">
+            <div class="filter-group">
+                <div class="filter-item">
+                    <span class="filter-label">地块编号:</span>
+                    <input type="text" class="input" placeholder="请输入地块编号关键词">
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">地块名称:</span>
+                    <input type="text" class="input" placeholder="请输入地块名称关键词">
+                </div>
+                
+                <div class="ml-auto">
+                    <button class="btn btn-primary">
+                        <i class="iconfont icon-search" style="margin-right: 4px;"></i>
+                        搜索
+                    </button>
+                    <button class="btn btn-default ml-2">
+                        <i class="iconfont icon-reload" style="margin-right: 4px;"></i>
+                        重置
+                    </button>
+                </div>
+            </div>
+            
+            <div class="filter-group">
+                <div class="filter-item">
+                    <span class="filter-label">所属农场:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="east">东区智慧农场</option>
+                        <option value="west">西区智慧农场</option>
+                        <option value="south">南区智慧农场</option>
+                        <option value="center">中心监测农场</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">地块类型:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="greenhouse">大棚</option>
+                        <option value="field">露天农田</option>
+                        <option value="orchard">果园</option>
+                        <option value="paddy">水稻田</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">主要作物:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="rice">水稻</option>
+                        <option value="wheat">小麦</option>
+                        <option value="corn">玉米</option>
+                        <option value="vegetable">蔬菜</option>
+                        <option value="fruit">水果</option>
+                    </select>
+                </div>
+                
+                <div class="filter-item">
+                    <span class="filter-label">状态:</span>
+                    <select class="select">
+                        <option value="">全部</option>
+                        <option value="cultivating">种植中</option>
+                        <option value="fallow">休耕</option>
+                        <option value="preparing">准备中</option>
+                        <option value="harvested">已收获</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="table-container">
+                <div class="table-scroll-controls">
+                    <button class="table-scroll-btn table-scroll-left">
+                        <i class="iconfont icon-left"></i>
+                    </button>
+                    <button class="table-scroll-btn table-scroll-right">
+                        <i class="iconfont icon-right"></i>
+                    </button>
+                </div>
+                <table class="table-fixed-right">
+                    <thead>
+                        <tr>
+                            <th class="min-w-[120px]">地块编号</th>
+                            <th class="min-w-[120px]">地块名称</th>
+                            <th class="min-w-[120px]">所属农场</th>
+                            <th class="min-w-[100px]">地块类型</th>
+                            <th class="min-w-[120px]">主要作物</th>
+                            <th class="min-w-[90px]">面积(亩)</th>
+                            <th class="min-w-[150px]">地理位置</th>
+                            <th class="min-w-[100px]">开垦日期</th>
+                            <th class="min-w-[80px]">状态</th>
+                            <th class="min-w-[80px]">设备数量</th>
+                            <th class="min-w-[80px]">负责人</th>
+                            <th class="min-w-[150px]">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>FIELD20230001</td>
+                            <td>A区大棚3号</td>
+                            <td>东区智慧农场</td>
+                            <td>大棚</td>
+                            <td>蔬菜(西红柿)</td>
+                            <td>3.5</td>
+                            <td>东经121.45，北纬31.22</td>
+                            <td>2023-01-15</td>
+                            <td><span class="badge badge-success">种植中</span></td>
+                            <td>5</td>
+                            <td>张大力</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230001">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230001">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>FIELD20230002</td>
+                            <td>B区稻田2号</td>
+                            <td>西区智慧农场</td>
+                            <td>水稻田</td>
+                            <td>水稻</td>
+                            <td>15.2</td>
+                            <td>东经121.47，北纬31.24</td>
+                            <td>2023-02-20</td>
+                            <td><span class="badge badge-success">种植中</span></td>
+                            <td>8</td>
+                            <td>李耕田</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230002">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230002">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>FIELD20230003</td>
+                            <td>C区果园1号</td>
+                            <td>南区智慧农场</td>
+                            <td>果园</td>
+                            <td>水果(葡萄)</td>
+                            <td>8.7</td>
+                            <td>东经121.42，北纬31.18</td>
+                            <td>2023-03-10</td>
+                            <td><span class="badge badge-warning">准备中</span></td>
+                            <td>6</td>
+                            <td>王果农</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230003">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230003">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>FIELD20230004</td>
+                            <td>A区大棚1号</td>
+                            <td>东区智慧农场</td>
+                            <td>大棚</td>
+                            <td>蔬菜(黄瓜)</td>
+                            <td>2.8</td>
+                            <td>东经121.44，北纬31.21</td>
+                            <td>2023-04-05</td>
+                            <td><span class="badge badge-danger">休耕</span></td>
+                            <td>3</td>
+                            <td>张大力</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230004">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230004">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>FIELD20230005</td>
+                            <td>监测区1号</td>
+                            <td>中心监测农场</td>
+                            <td>露天农田</td>
+                            <td>玉米</td>
+                            <td>10.5</td>
+                            <td>东经121.46，北纬31.23</td>
+                            <td>2023-05-20</td>
+                            <td><span class="badge badge-success">种植中</span></td>
+                            <td>10</td>
+                            <td>赵监测</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="FIELD20230005">
+                                        <i class="iconfont icon-eye"></i>
+                                        查看
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="FIELD20230005">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+            <div class="p-4 border-t border-gray-200 flex justify-between items-center">
+                <div class="text-sm text-gray-500">显示 1 至 5，共 24 条记录</div>
+                <div class="flex gap-1">
+                    <button class="btn btn-sm btn-default" disabled>&lt;</button>
+                    <button class="btn btn-sm btn-primary">1</button>
+                    <button class="btn btn-sm btn-default">2</button>
+                    <button class="btn btn-sm btn-default">3</button>
+                    <button class="btn btn-sm btn-default">4</button>
+                    <button class="btn btn-sm btn-default">5</button>
+                    <button class="btn btn-sm btn-default">&gt;</button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 地块表单弹窗 -->
+        <div class="modal" id="fieldModal" style="display: none;">
+            <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">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="fieldForm">
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">地块编号</label>
+                                    <input type="text" class="form-input" id="fieldId" placeholder="输入地块编号">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">地块名称</label>
+                                    <input type="text" class="form-input" id="fieldName" placeholder="输入地块名称">
+                                </div>
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">所属农场</label>
+                                    <select class="form-input" id="farmId">
+                                        <option value="">请选择所属农场</option>
+                                        <option value="east">东区智慧农场</option>
+                                        <option value="west">西区智慧农场</option>
+                                        <option value="south">南区智慧农场</option>
+                                        <option value="center">中心监测农场</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">地块类型</label>
+                                    <select class="form-input" id="fieldType">
+                                        <option value="">请选择地块类型</option>
+                                        <option value="greenhouse">大棚</option>
+                                        <option value="field">露天农田</option>
+                                        <option value="orchard">果园</option>
+                                        <option value="paddy">水稻田</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">主要作物</label>
+                                    <input type="text" class="form-input" id="mainCrop" placeholder="输入主要作物">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">面积(亩)</label>
+                                    <input type="number" step="0.1" class="form-input" id="area" placeholder="输入面积">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">地理位置</label>
+                                <input type="text" class="form-input" id="location" placeholder="输入地理位置坐标">
+                            </div>
+                            <div class="grid-2">
+                                <div class="form-group">
+                                    <label class="form-label">开垦日期</label>
+                                    <input type="date" class="form-input" id="startDate">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">状态</label>
+                                    <select class="form-input" id="status">
+                                        <option value="cultivating">种植中</option>
+                                        <option value="fallow">休耕</option>
+                                        <option value="preparing">准备中</option>
+                                        <option value="harvested">已收获</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">负责人</label>
+                                <input type="text" class="form-input" id="manager" placeholder="输入负责人姓名">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">备注</label>
+                                <textarea class="form-input" id="remarks" rows="3" placeholder="输入备注信息"></textarea>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" id="cancelBtn">取消</button>
+                        <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // 添加地块按钮点击事件
+        document.getElementById('addFieldBtn').addEventListener('click', function() {
+            document.getElementById('fieldModal').style.display = 'block';
+            setTimeout(() => {
+                document.getElementById('fieldModal').classList.add('show');
+            }, 10);
+        });
+        
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector('.table-container');
+            const scrollLeftBtn = document.querySelector('.table-scroll-left');
+            const scrollRightBtn = document.querySelector('.table-scroll-right');
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add('has-overflow');
+                } else {
+                    tableContainer.classList.remove('has-overflow');
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener('resize', checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener('scroll', function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = '0.5';
+                } else {
+                    scrollLeftBtn.style.opacity = '1';
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = '0.5';
+                } else {
+                    scrollRightBtn.style.opacity = '1';
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event('scroll'));
+        }
+        
+        // 页面加载完成后初始化表格滚动
+        window.addEventListener('load', initTableScroll);
+        
+        // 关闭模态框
+        document.getElementById('closeModal').addEventListener('click', function() {
+            closeModal();
+        });
+        
+        // 取消按钮点击事件
+        document.getElementById('cancelBtn').addEventListener('click', function() {
+            closeModal();
+        });
+        
+        // 保存按钮点击事件
+        document.getElementById('saveBtn').addEventListener('click', function() {
+            alert('地块信息已保存');
+            closeModal();
+        });
+        
+        // 关闭模态框函数
+        function closeModal() {
+            document.getElementById('fieldModal').classList.remove('show');
+            setTimeout(() => {
+                document.getElementById('fieldModal').style.display = 'none';
+            }, 300);
+        }
+        
+        // 编辑按钮点击事件
+        const editBtns = document.querySelectorAll('.edit-btn');
+        editBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const fieldId = this.getAttribute('data-id');
+                document.querySelector('.modal-title').textContent = '编辑地块';
+                document.getElementById('fieldModal').style.display = 'block';
+                setTimeout(() => {
+                    document.getElementById('fieldModal').classList.add('show');
+                }, 10);
+                // 这里可以根据fieldId加载地块信息
+            });
+        });
+        
+        // 查看按钮点击事件
+        const viewBtns = document.querySelectorAll('.view-btn');
+        viewBtns.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                const fieldId = this.getAttribute('data-id');
+                window.location.href = `field-detail.html?id=${fieldId}`;
+            });
+        });
+    </script>
 </body>
 </html> 

pages/login-log.html

@@ -83,18 +83,25 @@
         
         <div class="card">
             <div class="table-container">
-                <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                <table class="table-fixed-right table-fixed-right">
                     <thead>
                         <tr>
                             <th>序号</th>
-                            <th>用户名</th>
+                            <th class="min-w-[120px]">用户名</th>
                             <th>登录IP</th>
                             <th>登录地点</th>
                             <th>浏览器</th>
                             <th>操作系统</th>
                             <th>登录状态</th>
                             <th>登录时间</th>
-                            <th>操作</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -343,7 +350,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 日志详情弹窗
             const logModal = document.getElementById('logModal');
             const closeModal = document.getElementById('closeModal');

pages/machine-management-content.html

@@ -0,0 +1,1139 @@
+<!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: 70px;
+        }
+        
+        /* 防止重复菜单 - 修改选择器避免影响按钮和模态框 */
+        body > div:not(.page-container):not(.modal):not(#machineModal),
+        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;
+        }
+
+        /* 页面容器 */
+        .page-container {
+            padding: 20px;
+            max-width: 1600px;
+            margin: 0 auto;
+            margin-top: 60px;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* 页面标题和操作按钮容器 */
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            position: relative;
+            z-index: 5;
+        }
+
+        /* 卡片样式 */
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            overflow: hidden;
+        }
+
+        /* 表格样式 */
+        .table-container {
+    position: relative;
+    position: relative;
+            overflow-x: auto;
+            position: relative;
+            scrollbar-width: thin;
+            scrollbar-color: #e0e0e0 #f5f7f9;
+            padding-bottom: 8px;
+        }
+
+        .table-container::-webkit-scrollbar {
+            height: 8px;
+        }
+
+        .table-container::-webkit-scrollbar-track {
+            background: #f5f7f9;
+        }
+
+        .table-container::-webkit-scrollbar-thumb {
+            background-color: #e0e0e0;
+            border-radius: 4px;
+        }
+
+        .scroll-controls {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 8px;
+            gap: 8px;
+        }
+
+        .scroll-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            cursor: pointer;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+            transition: all 0.2s;
+        }
+
+        .scroll-btn:hover {
+            background-color: #f9fafb;
+            border-color: #d1d5db;
+        }
+
+        .scroll-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: separate;
+    border-spacing: 0;
+            table-layout: fixed;
+        }
+
+        th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
+            background-color: #f9fafb;
+            padding: 12px;
+            text-align: center;
+            font-weight: 500;
+            font-size: 14px;
+            color: #6b7280;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            min-width: 120px;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+            border-right: 1px solid #f0f0f0;
+        }
+
+        /* 稍微调整列宽 */
+        th:nth-child(1), td:nth-child(1) { min-width: 140px; width: 140px; } /* 农机编号 */
+        th:nth-child(2), td:nth-child(2) { min-width: 180px; width: 180px; } /* 农机名称 */
+        th:nth-child(3), td:nth-child(3) { min-width: 140px; width: 140px; } /* 所属农场 */
+        th:nth-child(4), td:nth-child(4) { min-width: 100px; width: 100px; } /* 所属区域 */
+        th:nth-child(5), td:nth-child(5) { min-width: 100px; width: 100px; } /* 类型 */
+        th:nth-child(6), td:nth-child(6) { min-width: 100px; width: 100px; } /* 厂家 */
+        th:nth-child(7), td:nth-child(7) { min-width: 100px; width: 100px; } /* 型号 */
+        th:nth-child(8), td:nth-child(8) { min-width: 100px; width: 100px; } /* 在线状态 */
+        th:nth-child(9), td:nth-child(9) { min-width: 100px; width: 100px; } /* 当前状态 */
+        th:nth-child(10), td:nth-child(10) { min-width: 140px; width: 140px; } /* 当前任务 */
+        th:nth-child(11), td:nth-child(11) { min-width: 140px; width: 140px; } /* 当前地块 */
+        th:nth-child(12), td:nth-child(12) { min-width: 100px; width: 100px; } /* 负责人 */
+        th:nth-child(13), td:nth-child(13) { min-width: 120px; width: 120px; } /* 启用时间 */
+        th:nth-child(14), td:nth-child(14) { min-width: 120px; width: 120px; } /* 生产日期 */
+        th:nth-child(15), td:nth-child(15) { min-width: 100px; width: 100px; } /* 保养状态 */
+        th:nth-child(16), td:nth-child(16) { min-width: 100px; width: 100px; } /* 定位状态 */
+        th:nth-child(17), td:nth-child(17) { min-width: 80px; width: 80px; } /* 报警次数 */
+        th:nth-child(18), td:nth-child(18) { min-width: 100px; width: 100px; } /* 操作 */
+
+        th:first-child {
+            position: sticky;
+            left: 0;
+            z-index: 20;
+            border-right: 1px solid #e5e7eb;
+            text-align: left;
+            background-color: #f1f5f9;
+        }
+        
+        th:last-child {
+            position: sticky;
+            right: 0;
+            z-index: 20;
+            border-left: 1px solid #e5e7eb;
+            text-align: center;
+            background-color: #f1f5f9;
+        }
+
+        td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+            padding: 12px;
+            border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            text-align: center;
+            border-right: 1px solid #f0f0f0;
+        }
+
+        td:first-child {
+            position: sticky;
+            left: 0;
+            background: white;
+            z-index: 5;
+            border-right: 1px solid #e5e7eb;
+            text-align: left;
+            font-weight: 500;
+        }
+        
+        td:last-child {
+            position: sticky;
+            right: 0;
+            background: white;
+            z-index: 5;
+            border-left: 1px solid #e5e7eb;
+            text-align: center;
+            min-width: 130px;
+            width: 130px;
+            box-shadow: -2px 0 4px rgba(0,0,0,0.05);
+        }
+
+        tr:hover td:first-child {
+            background-color: #f3f4f6;
+        }
+        
+        tr:hover td:last-child {
+            background-color: #f3f4f6;
+        }
+
+        /* 按钮样式 */
+        .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;
+            position: relative;
+            z-index: 10;
+        }
+
+        .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;
+        }
+
+        .btn-sm {
+            padding: 5px 10px;
+            font-size: 12px;
+            border-radius: 4px;
+            transition: all 0.2s;
+        }
+
+        .view-btn {
+            background-color: #e6f7ff;
+            color: #1890ff;
+            border: 1px solid #91d5ff;
+        }
+        
+        .view-btn:hover {
+            background-color: #bae7ff;
+        }
+        
+        .edit-btn {
+            background-color: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
+        }
+        
+        .edit-btn:hover {
+            background-color: #d9f7be;
+        }
+
+        /* 表单控件样式 */
+        .form-control {
+            display: block;
+            width: 100%;
+            padding: 8px 12px;
+            font-size: 14px;
+            line-height: 1.5;
+            color: #374151;
+            background-color: #fff;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        }
+
+        .form-control:focus {
+            border-color: #4CAF50;
+            outline: 0;
+            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+        }
+
+        /* 搜索框样式 */
+        .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;
+        }
+
+        /* 状态标签样式 */
+        .badge {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
+            min-width: 60px;
+        }
+
+        .badge-success {
+            background-color: #d1fae5;
+            color: #065f46;
+        }
+
+        .badge-warning {
+            background-color: #fef3c7;
+            color: #92400e;
+        }
+
+        .badge-danger {
+            background-color: #fee2e2;
+            color: #b91c1c;
+        }
+
+        .badge-info {
+            background-color: #e0f2fe;
+            color: #0369a1;
+        }
+
+        /* 表单组样式 */
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 4px;
+            font-size: 14px;
+            color: #4b5563;
+        }
+
+        /* 分页样式 */
+        .pagination {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .page-item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 32px;
+            height: 32px;
+            padding: 0 8px;
+            border-radius: 4px;
+            background-color: #fff;
+            border: 1px solid #d1d5db;
+            color: #374151;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .page-item:hover {
+            background-color: #f9fafb;
+        }
+
+        .page-item.active {
+            background-color: #4CAF50;
+            border-color: #4CAF50;
+            color: #fff;
+        }
+
+        .page-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="page-container">
+        <!-- 页面标题和操作按钮 -->
+        <div class="page-header">
+            <h1 class="text-2xl font-bold">农机管理</h1>
+            <div class="flex gap-2">
+                <button class="btn btn-primary" id="addMachineBtn">
+                    <i class="iconfont icon-plus 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 mb-6 p-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div class="relative">
+                    <input type="text" class="search-input w-full" id="searchInput" placeholder="搜索农机编号/名称">
+                    <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                </div>
+                <div>
+                    <select class="form-control" id="machineTypeFilter">
+                        <option value="">全部类型</option>
+                        <option value="tractor">拖拉机</option>
+                        <option value="harvester">收割机</option>
+                        <option value="seeder">播种机</option>
+                        <option value="sprayer">喷雾机</option>
+                        <option value="other">其他</option>
+                    </select>
+                </div>
+                <div>
+                    <select class="form-control" id="statusFilter">
+                        <option value="">全部状态</option>
+                        <option value="online">在线</option>
+                        <option value="offline">离线</option>
+                        <option value="maintenance">维护中</option>
+                        <option value="fault">故障</option>
+                    </select>
+                </div>
+                <div>
+                    <select class="form-control" id="farmFilter">
+                        <option value="">全部农场</option>
+                        <option value="farm1">智慧农场一号</option>
+                        <option value="farm2">智慧农场二号</option>
+                        <option value="farm3">智慧农场三号</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- 农机列表 -->
+        <div class="card">
+            <div class="scroll-controls">
+                <button type="button" class="scroll-btn" id="scrollLeftBtn" disabled>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M15 18l-6-6 6-6"/>
+                    </svg>
+                </button>
+                <button type="button" class="scroll-btn" id="scrollRightBtn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M9 18l6-6-6-6"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="table-container" id="tableContainer">
+                <table class="table-fixed-right table-fixed-right table-fixed-right">
+                    <thead>
+                        <tr>
+                            <th>农机编号</th>
+                            <th>农机名称</th>
+                            <th class="min-w-[120px]">所属农场</th>
+                            <th class="min-w-[100px]">所属区域</th>
+                            <th>类型</th>
+                            <th class="min-w-[100px]">厂家</th>
+                            <th>型号</th>
+                            <th>在线状态</th>
+                            <th>当前状态</th>
+                            <th>当前任务</th>
+                            <th>当前地块</th>
+                            <th class="min-w-[100px]">负责人</th>
+                            <th>启用时间</th>
+                            <th>生产日期</th>
+                            <th>保养状态</th>
+                            <th>定位状态</th>
+                            <th>报警次数</th>
+                            <th class="min-w-[150px]">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>M20230001</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/tractor.png" alt="拖拉机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">东方红-LX1000</div>
+                                        <div class="text-xs text-gray-500">拖拉机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>智慧农场一号</td>
+                            <td>东区</td>
+                            <td>拖拉机</td>
+                            <td>东方红</td>
+                            <td>LX1000</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td><span class="badge badge-info">作业中</span></td>
+                            <td>稻田耕种</td>
+                            <td>东区A-12</td>
+                            <td>张三</td>
+                            <td>2023-01-15</td>
+                            <td>2022-12-10</td>
+                            <td><span class="badge badge-success">正常</span></td>
+                            <td><span class="badge badge-success">良好</span></td>
+                            <td>0</td>
+                            <td>
+                                <div class="flex gap-2 justify-center">
+                                    <button class="btn btn-sm view-btn" data-id="M20230001">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm edit-btn" data-id="M20230001">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230002</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/harvester.png" alt="收割机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">雷沃-GE70</div>
+                                        <div class="text-xs text-gray-500">收割机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>智慧农场二号</td>
+                            <td>西区</td>
+                            <td>收割机</td>
+                            <td>雷沃</td>
+                            <td>GE70</td>
+                            <td><span class="badge badge-warning">离线</span></td>
+                            <td><span class="badge badge-warning">维护中</span></td>
+                            <td>-</td>
+                            <td>-</td>
+                            <td>李四</td>
+                            <td>2023-02-20</td>
+                            <td>2022-11-25</td>
+                            <td><span class="badge badge-warning">需保养</span></td>
+                            <td><span class="badge badge-warning">异常</span></td>
+                            <td>2</td>
+                            <td>
+                                <div class="flex gap-2 justify-center">
+                                    <button class="btn btn-sm view-btn" data-id="M20230002">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm edit-btn" data-id="M20230002">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230003</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/sprayer.png" alt="喷雾机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">科乐收-KS2000</div>
+                                        <div class="text-xs text-gray-500">喷雾机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>智慧农场一号</td>
+                            <td>南区</td>
+                            <td>喷雾机</td>
+                            <td>科乐收</td>
+                            <td>KS2000</td>
+                            <td><span class="badge badge-danger">离线</span></td>
+                            <td><span class="badge badge-danger">故障</span></td>
+                            <td>-</td>
+                            <td>-</td>
+                            <td>王五</td>
+                            <td>2023-03-10</td>
+                            <td>2023-01-05</td>
+                            <td><span class="badge badge-danger">待修复</span></td>
+                            <td><span class="badge badge-danger">无信号</span></td>
+                            <td>5</td>
+                            <td>
+                                <div class="flex gap-2 justify-center">
+                                    <button class="btn btn-sm view-btn" data-id="M20230003">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm edit-btn" data-id="M20230003">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230004</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/tractor.png" alt="拖拉机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">约翰迪尔-8R</div>
+                                        <div class="text-xs text-gray-500">拖拉机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>智慧农场三号</td>
+                            <td>北区</td>
+                            <td>拖拉机</td>
+                            <td>约翰迪尔</td>
+                            <td>8R</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td><span class="badge badge-success">待命</span></td>
+                            <td>-</td>
+                            <td>-</td>
+                            <td>赵六</td>
+                            <td>2023-04-05</td>
+                            <td>2023-02-15</td>
+                            <td><span class="badge badge-success">正常</span></td>
+                            <td><span class="badge badge-success">良好</span></td>
+                            <td>0</td>
+                            <td>
+                                <div class="flex gap-2 justify-center">
+                                    <button class="btn btn-sm view-btn" data-id="M20230004">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm edit-btn" data-id="M20230004">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230005</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/seeder.png" alt="播种机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">克拉斯-C600</div>
+                                        <div class="text-xs text-gray-500">播种机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>智慧农场二号</td>
+                            <td>中区</td>
+                            <td>播种机</td>
+                            <td>克拉斯</td>
+                            <td>C600</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td><span class="badge badge-info">作业中</span></td>
+                            <td>小麦播种</td>
+                            <td>中区B-08</td>
+                            <td>马七</td>
+                            <td>2023-05-20</td>
+                            <td>2023-03-10</td>
+                            <td><span class="badge badge-success">正常</span></td>
+                            <td><span class="badge badge-success">良好</span></td>
+                            <td>1</td>
+                            <td>
+                                <div class="flex gap-2 justify-center">
+                                    <button class="btn btn-sm view-btn" data-id="M20230005">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm edit-btn" data-id="M20230005">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 分页 -->
+            <div class="flex justify-between items-center p-4 border-t border-gray-200">
+                <div class="text-sm text-gray-600">
+                    共 <span class="text-primary font-medium">24</span> 条记录
+                </div>
+                <div class="pagination">
+                    <button class="page-item disabled">上一页</button>
+                    <button class="page-item active">1</button>
+                    <button class="page-item">2</button>
+                    <button class="page-item">3</button>
+                    <button class="page-item">下一页</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 添加/编辑农机模态框 -->
+    <div class="modal" id="machineModal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modalTitle">添加农机</h5>
+                    <button type="button" class="modal-close" id="closeModal">
+                        <i class="iconfont icon-close"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="machineForm">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="form-group">
+                                <label class="form-label" for="machineCode">农机编号</label>
+                                <input type="text" class="form-control" id="machineCode" placeholder="请输入农机编号">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineName">农机名称</label>
+                                <input type="text" class="form-control" id="machineName" placeholder="请输入农机名称">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineType">农机类型</label>
+                                <select class="form-control" id="machineType">
+                                    <option value="">请选择农机类型</option>
+                                    <option value="tractor">拖拉机</option>
+                                    <option value="harvester">收割机</option>
+                                    <option value="seeder">播种机</option>
+                                    <option value="sprayer">喷雾机</option>
+                                    <option value="other">其他</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineModel">农机型号</label>
+                                <input type="text" class="form-control" id="machineModel" placeholder="请输入农机型号">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineFarm">所属农场</label>
+                                <select class="form-control" id="machineFarm">
+                                    <option value="">请选择所属农场</option>
+                                    <option value="farm1">智慧农场一号</option>
+                                    <option value="farm2">智慧农场二号</option>
+                                    <option value="farm3">智慧农场三号</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineManager">负责人</label>
+                                <select class="form-control" id="machineManager">
+                                    <option value="">请选择负责人</option>
+                                    <option value="user1">张三</option>
+                                    <option value="user2">李四</option>
+                                    <option value="user3">王五</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineStatus">使用状态</label>
+                                <select class="form-control" id="machineStatus">
+                                    <option value="online">在线</option>
+                                    <option value="offline">离线</option>
+                                    <option value="maintenance">维护中</option>
+                                    <option value="fault">故障</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="purchaseDate">购买日期</label>
+                                <input type="date" class="form-control" id="purchaseDate">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="machineDesc">农机描述</label>
+                            <textarea class="form-control" id="machineDesc" rows="4" placeholder="请输入农机描述信息"></textarea>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" id="cancelBtn">取消</button>
+                    <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
+            // 获取元素
+            const addMachineBtn = document.getElementById('addMachineBtn');
+            const refreshBtn = document.getElementById('refreshBtn');
+            const machineModal = document.getElementById('machineModal');
+            const closeModal = document.getElementById('closeModal');
+            const cancelBtn = document.getElementById('cancelBtn');
+            const saveBtn = document.getElementById('saveBtn');
+            const modalTitle = document.getElementById('modalTitle');
+            const machineForm = document.getElementById('machineForm');
+            const editBtns = document.querySelectorAll('.edit-btn');
+            const viewBtns = document.querySelectorAll('.view-btn');
+            
+            // 表格滚动控制
+            const tableContainer = document.getElementById('tableContainer');
+            const scrollLeftBtn = document.getElementById('scrollLeftBtn');
+            const scrollRightBtn = document.getElementById('scrollRightBtn');
+            
+            // 滚动按钮事件
+            scrollLeftBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft -= 300;
+            });
+            
+            scrollRightBtn.addEventListener('click', function() {
+                tableContainer.scrollLeft += 300;
+            });
+            
+            // 监听滚动事件更新按钮状态
+            tableContainer.addEventListener('scroll', function() {
+                // 更新左右滚动按钮状态
+                scrollLeftBtn.disabled = tableContainer.scrollLeft <= 0;
+                scrollRightBtn.disabled = tableContainer.scrollLeft + tableContainer.clientWidth >= tableContainer.scrollWidth;
+            });
+            
+            // 初始化滚动按钮状态
+            function updateScrollButtons() {
+                scrollLeftBtn.disabled = tableContainer.scrollLeft <= 0;
+                scrollRightBtn.disabled = tableContainer.scrollLeft + tableContainer.clientWidth >= tableContainer.scrollWidth;
+            }
+            
+            // 页面加载和窗口大小变化时更新按钮状态
+            window.addEventListener('resize', updateScrollButtons);
+            updateScrollButtons();
+
+            // 打开添加农机模态框
+            addMachineBtn.addEventListener('click', function() {
+                modalTitle.textContent = '添加农机';
+                machineForm.reset();
+                machineModal.classList.add('show');
+            });
+
+            // 关闭模态框
+            function closeModalFunc() {
+                machineModal.classList.remove('show');
+            }
+
+            closeModal.addEventListener('click', closeModalFunc);
+            cancelBtn.addEventListener('click', closeModalFunc);
+
+            // 编辑按钮点击事件
+            editBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const machineId = this.getAttribute('data-id');
+                    modalTitle.textContent = '编辑农机';
+                    // 这里应该根据ID获取农机信息并填充表单
+                    // 模拟填充表单
+                    document.getElementById('machineCode').value = machineId;
+                    document.getElementById('machineName').value = this.closest('tr').querySelector('.font-medium').textContent;
+                    document.getElementById('machineType').value = this.closest('tr').cells[2].textContent.toLowerCase();
+                    document.getElementById('machineFarm').value = 'farm1';
+                    document.getElementById('machineManager').value = 'user1';
+                    document.getElementById('machineStatus').value = 'online';
+                    
+                    machineModal.classList.add('show');
+                });
+            });
+
+            // 查看按钮点击事件
+            viewBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const machineId = this.getAttribute('data-id');
+                    // 跳转到农机详情页
+                    window.location.href = `machine-detail.html?id=${machineId}`;
+                });
+            });
+
+            // 保存按钮点击事件
+            saveBtn.addEventListener('click', function() {
+                // 模拟保存操作
+                alert('保存成功！');
+                closeModalFunc();
+            });
+
+            // 刷新按钮点击事件
+            refreshBtn.addEventListener('click', function() {
+                // 模拟刷新操作
+                alert('数据已刷新！');
+            });
+        });
+    </script>
+</body>
+</html> 

pages/machine-management-content.html.bak

@@ -0,0 +1,752 @@
+<!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(#machineModal),
+        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;
+        }
+
+        /* 页面容器 */
+        .page-container {
+            padding: 20px;
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+
+        /* 页面标题和操作按钮容器 */
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        /* 卡片样式 */
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            overflow: hidden;
+        }
+
+        /* 表格样式 */
+        .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-icon {
+            margin-right: 4px;
+        }
+
+        .btn-sm {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+
+        /* 表单控件样式 */
+        .form-control {
+            display: block;
+            width: 100%;
+            padding: 8px 12px;
+            font-size: 14px;
+            line-height: 1.5;
+            color: #374151;
+            background-color: #fff;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        }
+
+        .form-control:focus {
+            border-color: #4CAF50;
+            outline: 0;
+            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+        }
+
+        /* 搜索框样式 */
+        .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;
+        }
+
+        /* 状态标签样式 */
+        .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;
+        }
+
+        .badge-info {
+            background-color: #e0f2fe;
+            color: #0369a1;
+        }
+
+        /* 表单组样式 */
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 4px;
+            font-size: 14px;
+            color: #4b5563;
+        }
+
+        /* 分页样式 */
+        .pagination {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .page-item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 32px;
+            height: 32px;
+            padding: 0 8px;
+            border-radius: 4px;
+            background-color: #fff;
+            border: 1px solid #d1d5db;
+            color: #374151;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .page-item:hover {
+            background-color: #f9fafb;
+        }
+
+        .page-item.active {
+            background-color: #4CAF50;
+            border-color: #4CAF50;
+            color: #fff;
+        }
+
+        .page-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="page-container">
+        <!-- 页面标题和操作按钮 -->
+        <div class="page-header">
+            <h1 class="text-2xl font-bold">农机管理</h1>
+            <div class="flex gap-2">
+                <button class="btn btn-primary" id="addMachineBtn">
+                    <i class="iconfont icon-plus 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 mb-6 p-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div class="relative">
+                    <input type="text" class="search-input w-full" id="searchInput" placeholder="搜索农机编号/名称">
+                    <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                </div>
+                <div>
+                    <select class="form-control" id="machineTypeFilter">
+                        <option value="">全部类型</option>
+                        <option value="tractor">拖拉机</option>
+                        <option value="harvester">收割机</option>
+                        <option value="seeder">播种机</option>
+                        <option value="sprayer">喷雾机</option>
+                        <option value="other">其他</option>
+                    </select>
+                </div>
+                <div>
+                    <select class="form-control" id="statusFilter">
+                        <option value="">全部状态</option>
+                        <option value="online">在线</option>
+                        <option value="offline">离线</option>
+                        <option value="maintenance">维护中</option>
+                        <option value="fault">故障</option>
+                    </select>
+                </div>
+                <div>
+                    <select class="form-control" id="farmFilter">
+                        <option value="">全部农场</option>
+                        <option value="farm1">智慧农场一号</option>
+                        <option value="farm2">智慧农场二号</option>
+                        <option value="farm3">智慧农场三号</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>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>M20230001</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/tractor.png" alt="拖拉机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">东方红-LX1000</div>
+                                        <div class="text-xs text-gray-500">拖拉机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>拖拉机</td>
+                            <td>智慧农场一号</td>
+                            <td>张三</td>
+                            <td><span class="badge badge-success">在线</span></td>
+                            <td>2023-08-15 10:30</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="M20230001">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="M20230001">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230002</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/harvester.png" alt="收割机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">雷沃-GE70</div>
+                                        <div class="text-xs text-gray-500">收割机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>收割机</td>
+                            <td>智慧农场二号</td>
+                            <td>李四</td>
+                            <td><span class="badge badge-warning">维护中</span></td>
+                            <td>2023-08-14 16:45</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="M20230002">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="M20230002">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>M20230003</td>
+                            <td>
+                                <div class="flex items-center">
+                                    <img src="../assets/images/sprayer.png" alt="喷雾机" class="w-10 h-10 mr-3 rounded-md object-cover">
+                                    <div>
+                                        <div class="font-medium">科乐收-KS2000</div>
+                                        <div class="text-xs text-gray-500">喷雾机</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>喷雾机</td>
+                            <td>智慧农场一号</td>
+                            <td>王五</td>
+                            <td><span class="badge badge-danger">离线</span></td>
+                            <td>2023-08-10 09:15</td>
+                            <td>
+                                <div class="flex gap-2">
+                                    <button class="btn btn-sm btn-default view-btn" data-id="M20230003">
+                                        <i class="iconfont icon-eye"></i>
+                                        管理
+                                    </button>
+                                    <button class="btn btn-sm btn-default edit-btn" data-id="M20230003">
+                                        <i class="iconfont icon-edit"></i>
+                                        编辑
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 分页 -->
+            <div class="flex justify-between items-center p-4 border-t border-gray-200">
+                <div class="text-sm text-gray-600">
+                    共 <span class="text-primary font-medium">24</span> 条记录
+                </div>
+                <div class="pagination">
+                    <button class="page-item disabled">上一页</button>
+                    <button class="page-item active">1</button>
+                    <button class="page-item">2</button>
+                    <button class="page-item">3</button>
+                    <button class="page-item">下一页</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 添加/编辑农机模态框 -->
+    <div class="modal" id="machineModal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modalTitle">添加农机</h5>
+                    <button type="button" class="modal-close" id="closeModal">
+                        <i class="iconfont icon-close"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="machineForm">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="form-group">
+                                <label class="form-label" for="machineCode">农机编号</label>
+                                <input type="text" class="form-control" id="machineCode" placeholder="请输入农机编号">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineName">农机名称</label>
+                                <input type="text" class="form-control" id="machineName" placeholder="请输入农机名称">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineType">农机类型</label>
+                                <select class="form-control" id="machineType">
+                                    <option value="">请选择农机类型</option>
+                                    <option value="tractor">拖拉机</option>
+                                    <option value="harvester">收割机</option>
+                                    <option value="seeder">播种机</option>
+                                    <option value="sprayer">喷雾机</option>
+                                    <option value="other">其他</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineModel">农机型号</label>
+                                <input type="text" class="form-control" id="machineModel" placeholder="请输入农机型号">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineFarm">所属农场</label>
+                                <select class="form-control" id="machineFarm">
+                                    <option value="">请选择所属农场</option>
+                                    <option value="farm1">智慧农场一号</option>
+                                    <option value="farm2">智慧农场二号</option>
+                                    <option value="farm3">智慧农场三号</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineManager">负责人</label>
+                                <select class="form-control" id="machineManager">
+                                    <option value="">请选择负责人</option>
+                                    <option value="user1">张三</option>
+                                    <option value="user2">李四</option>
+                                    <option value="user3">王五</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="machineStatus">使用状态</label>
+                                <select class="form-control" id="machineStatus">
+                                    <option value="online">在线</option>
+                                    <option value="offline">离线</option>
+                                    <option value="maintenance">维护中</option>
+                                    <option value="fault">故障</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="purchaseDate">购买日期</label>
+                                <input type="date" class="form-control" id="purchaseDate">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="machineDesc">农机描述</label>
+                            <textarea class="form-control" id="machineDesc" rows="4" placeholder="请输入农机描述信息"></textarea>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" id="cancelBtn">取消</button>
+                    <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 获取元素
+            const addMachineBtn = document.getElementById('addMachineBtn');
+            const refreshBtn = document.getElementById('refreshBtn');
+            const machineModal = document.getElementById('machineModal');
+            const closeModal = document.getElementById('closeModal');
+            const cancelBtn = document.getElementById('cancelBtn');
+            const saveBtn = document.getElementById('saveBtn');
+            const modalTitle = document.getElementById('modalTitle');
+            const machineForm = document.getElementById('machineForm');
+            const editBtns = document.querySelectorAll('.edit-btn');
+            const viewBtns = document.querySelectorAll('.view-btn');
+
+            // 打开添加农机模态框
+            addMachineBtn.addEventListener('click', function() {
+                modalTitle.textContent = '添加农机';
+                machineForm.reset();
+                machineModal.classList.add('show');
+            });
+
+            // 关闭模态框
+            function closeModalFunc() {
+                machineModal.classList.remove('show');
+            }
+
+            closeModal.addEventListener('click', closeModalFunc);
+            cancelBtn.addEventListener('click', closeModalFunc);
+
+            // 编辑按钮点击事件
+            editBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const machineId = this.getAttribute('data-id');
+                    modalTitle.textContent = '编辑农机';
+                    // 这里应该根据ID获取农机信息并填充表单
+                    // 模拟填充表单
+                    document.getElementById('machineCode').value = machineId;
+                    document.getElementById('machineName').value = this.closest('tr').querySelector('.font-medium').textContent;
+                    document.getElementById('machineType').value = this.closest('tr').cells[2].textContent.toLowerCase();
+                    document.getElementById('machineFarm').value = 'farm1';
+                    document.getElementById('machineManager').value = 'user1';
+                    document.getElementById('machineStatus').value = 'online';
+                    
+                    machineModal.classList.add('show');
+                });
+            });
+
+            // 查看按钮点击事件
+            viewBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const machineId = this.getAttribute('data-id');
+                    // 跳转到农机详情页
+                    window.location.href = `machine-detail.html?id=${machineId}`;
+                });
+            });
+
+            // 保存按钮点击事件
+            saveBtn.addEventListener('click', function() {
+                // 模拟保存操作
+                alert('保存成功！');
+                closeModalFunc();
+            });
+
+            // 刷新按钮点击事件
+            refreshBtn.addEventListener('click', function() {
+                // 模拟刷新操作
+                alert('数据已刷新！');
+            });
+        });
+    </script>
+</body>
+</html> 

pages/machine-management.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-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> 

pages/operation-log.html

@@ -107,7 +107,14 @@
         
         <div class="card">
             <div class="table-container">
-                <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                <table class="table-fixed-right table-fixed-right">
                     <thead>
                         <tr>
                             <th>序号</th>
@@ -119,7 +126,7 @@
                             <th>操作地点</th>
                             <th>操作状态</th>
                             <th>操作时间</th>
-                            <th>操作</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -392,7 +399,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 操作日志详情弹窗
             const logModal = document.getElementById('logModal');
             const closeModal = document.getElementById('closeModal');

pages/org-management.html

@@ -227,14 +227,21 @@
                 <div class="mb-6">
                     <h3 class="font-medium mb-3">部门成员</h3>
                     <div class="table-container">
-                        <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                        <table class="table-fixed-right table-fixed-right">
                             <thead>
                                 <tr>
-                                    <th>姓名</th>
+                                    <th class="min-w-[100px]">姓名</th>
                                     <th>职位</th>
-                                    <th>手机号</th>
-                                    <th>邮箱</th>
-                                    <th>状态</th>
+                                    <th class="min-w-[120px]">手机号</th>
+                                    <th class="min-w-[180px]">邮箱</th>
+                                    <th class="min-w-[80px]">状态</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -361,7 +368,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 组织树展开/折叠
             const treeNodeContents = document.querySelectorAll('.tree-node-content');
             

pages/role-management.html

@@ -66,15 +66,22 @@
         
         <div class="card">
             <div class="table-container">
-                <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                <table class="table-fixed-right table-fixed-right">
                     <thead>
                         <tr>
                             <th>角色名称</th>
                             <th>角色编码</th>
                             <th>描述</th>
-                            <th>创建时间</th>
-                            <th>状态</th>
-                            <th>操作</th>
+                            <th class="min-w-[150px]">创建时间</th>
+                            <th class="min-w-[80px]">状态</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -397,7 +404,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 角色表单弹窗
             const roleModal = document.getElementById('roleModal');
             const modalTitle = document.getElementById('modalTitle');

pages/task-management.html

@@ -66,16 +66,23 @@
         
         <div class="card">
             <div class="table-container">
-                <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                <table class="table-fixed-right table-fixed-right">
                     <thead>
                         <tr>
                             <th>任务名称</th>
                             <th>任务组</th>
                             <th>调用目标</th>
                             <th>执行表达式</th>
-                            <th>状态</th>
+                            <th class="min-w-[80px]">状态</th>
                             <th>下次执行时间</th>
-                            <th>操作</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -374,7 +381,14 @@
                 </div>
                 
                 <div class="table-container">
-                    <table>
+        <div class="table-scroll-controls">
+            <button class="table-scroll-btn table-scroll-left">
+                <i class="iconfont icon-left"></i>
+            </button>
+            <button class="table-scroll-btn table-scroll-right">
+                <i class="iconfont icon-right"></i>
+            </button>
+        </div>                    <table class="table-fixed-right table-fixed-right">
                         <thead>
                             <tr>
                                 <th>序号</th>
@@ -451,7 +465,61 @@
     </div>
     
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function() {
+        // 初始化表格滚动功能
+        function initTableScroll() {
+            const tableContainer = document.querySelector(".table-container");
+            if (!tableContainer) return;
+            
+            const scrollLeftBtn = document.querySelector(".table-scroll-left");
+            const scrollRightBtn = document.querySelector(".table-scroll-right");
+            
+            if (!scrollLeftBtn || !scrollRightBtn) return;
+            
+            // 检查表格是否需要水平滚动
+            function checkTableOverflow() {
+                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                    tableContainer.classList.add("has-overflow");
+                } else {
+                    tableContainer.classList.remove("has-overflow");
+                }
+            }
+            
+            // 左右滚动按钮点击事件
+            scrollLeftBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft -= 150;
+            });
+            
+            scrollRightBtn.addEventListener("click", function() {
+                tableContainer.scrollLeft += 150;
+            });
+            
+            // 初始检查和窗口大小变化时检查
+            checkTableOverflow();
+            window.addEventListener("resize", checkTableOverflow);
+            
+            // 滚动事件处理
+            tableContainer.addEventListener("scroll", function() {
+                // 根据滚动位置显示/隐藏滚动按钮
+                if (tableContainer.scrollLeft <= 10) {
+                    scrollLeftBtn.style.opacity = "0.5";
+                } else {
+                    scrollLeftBtn.style.opacity = "1";
+                }
+                
+                if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                    scrollRightBtn.style.opacity = "0.5";
+                } else {
+                    scrollRightBtn.style.opacity = "1";
+                }
+            });
+            
+            // 初始触发滚动事件，设置初始按钮状态
+            tableContainer.dispatchEvent(new Event("scroll"));
+        }
+        
+        // 初始化表格滚动
+        initTableScroll();        document.addEventListener('DOMContentLoaded', function() {
             // 任务表单弹窗
             const taskModal = document.getElementById('taskModal');
             const modalTitle = document.getElementById('modalTitle');

pages/user-management.html

@@ -25,32 +25,119 @@
         }
         
         .table-container {
+    position: relative;
+    position: relative;
             overflow-x: auto;
+            position: relative;
         }
         
         table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate;
+            border-spacing: 0;
         }
         
         th {
+    white-space: nowrap;
+    position: relative;
+    overflow: visible;
+    max-width: none;
+    text-overflow: clip;
+    white-space: nowrap;
+    position: relative;
             background-color: #f9fafb;
             padding: 12px 16px;
             text-align: left;
             font-weight: 500;
             color: #6b7280;
             border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            position: relative;
         }
         
         td {
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
             padding: 12px 16px;
             border-bottom: 1px solid #e5e7eb;
+            white-space: nowrap;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        /* 固定最后一列（操作列）样式 */
+        .table-fixed-right {
+            position: relative;
+        }
+        
+        .table-fixed-right th:last-child,
+        .table-fixed-right td:last-child {
+            position: sticky;
+            right: 0;
+            z-index: 2;
+            background-color: white;
+            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .table-fixed-right th:last-child {
+            background-color: #f9fafb;
+        }
+        
+        /* 表格滚动控件 */
+        .table-scroll-controls {
+            display: none;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            pointer-events: none;
+            z-index: 3;
+        }
+        
+        .table-scroll-btn {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.9);
+            color: #4CAF50;
+            border: 1px solid #e0e0e0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            pointer-events: auto;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            z-index: 4;
+        }
+        
+        .table-scroll-left {
+            left: 10px;
+        }
+        
+        .table-scroll-right {
+            right: 10px;
+        }
+        
+        .has-overflow .table-scroll-controls {
+            display: block;
         }
         
         tr:hover {
             background-color: #f9fafb;
         }
         
+        tr:hover td:last-child {
+            background-color: #f9fafb;
+        }
+        
         .btn {
             display: inline-flex;
             align-items: center;
@@ -293,18 +380,26 @@
         
         <div class="card">
             <div class="table-container">
-                <table>
+                <div class="table-scroll-controls">
+                    <button class="table-scroll-btn table-scroll-left">
+                        <i class="iconfont icon-left"></i>
+                    </button>
+                    <button class="table-scroll-btn table-scroll-right">
+                        <i class="iconfont icon-right"></i>
+                    </button>
+                </div>
+                <table class="table-fixed-right">
                     <thead>
                         <tr>
-                            <th>用户名</th>
-                            <th>姓名</th>
-                            <th>手机号</th>
-                            <th>邮箱</th>
-                            <th>角色</th>
-                            <th>部门</th>
-                            <th>状态</th>
-                            <th>创建时间</th>
-                            <th>操作</th>
+                            <th class="min-w-[120px]">用户名</th>
+                            <th class="min-w-[100px]">姓名</th>
+                            <th class="min-w-[120px]">手机号</th>
+                            <th class="min-w-[180px]">邮箱</th>
+                            <th class="min-w-[100px]">角色</th>
+                            <th class="min-w-[100px]">部门</th>
+                            <th class="min-w-[80px]">状态</th>
+                            <th class="min-w-[180px]">创建时间</th>
+                            <th class="min-w-[150px]">操作</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -529,6 +624,57 @@
             const editBtns = document.querySelectorAll('.edit-btn');
             const userForm = document.getElementById('userForm');
             
+            // 初始化表格滚动功能
+            function initTableScroll() {
+                const tableContainer = document.querySelector('.table-container');
+                const scrollLeftBtn = document.querySelector('.table-scroll-left');
+                const scrollRightBtn = document.querySelector('.table-scroll-right');
+                
+                // 检查表格是否需要水平滚动
+                function checkTableOverflow() {
+                    if (tableContainer.scrollWidth > tableContainer.clientWidth) {
+                        tableContainer.classList.add('has-overflow');
+                    } else {
+                        tableContainer.classList.remove('has-overflow');
+                    }
+                }
+                
+                // 左右滚动按钮点击事件
+                scrollLeftBtn.addEventListener('click', function() {
+                    tableContainer.scrollLeft -= 150;
+                });
+                
+                scrollRightBtn.addEventListener('click', function() {
+                    tableContainer.scrollLeft += 150;
+                });
+                
+                // 初始检查和窗口大小变化时检查
+                checkTableOverflow();
+                window.addEventListener('resize', checkTableOverflow);
+                
+                // 滚动事件处理
+                tableContainer.addEventListener('scroll', function() {
+                    // 根据滚动位置显示/隐藏滚动按钮
+                    if (tableContainer.scrollLeft <= 10) {
+                        scrollLeftBtn.style.opacity = '0.5';
+                    } else {
+                        scrollLeftBtn.style.opacity = '1';
+                    }
+                    
+                    if (tableContainer.scrollLeft >= tableContainer.scrollWidth - tableContainer.clientWidth - 10) {
+                        scrollRightBtn.style.opacity = '0.5';
+                    } else {
+                        scrollRightBtn.style.opacity = '1';
+                    }
+                });
+                
+                // 初始触发滚动事件，设置初始按钮状态
+                tableContainer.dispatchEvent(new Event('scroll'));
+            }
+            
+            // 初始化表格滚动
+            initTableScroll();
+            
             // 打开新增用户弹窗
             addUserBtn.addEventListener('click', function() {
                 modalTitle.textContent = '新增用户';

update-min-width.sh

@@ -0,0 +1,68 @@
+#!/bin/bash
+
+# 为所有表格添加列头最小宽度，确保内容完整显示
+# 作者: AI助手
+# 日期: 2024年5月
+
+# 查找所有包含表格的HTML文件
+files=$(grep -l "table-container" pages/*.html)
+
+for file in $files; do
+  echo "正在处理: $file"
+  
+  # 使用sed查找表头并添加最小宽度类
+  sed -i '' 's/<th>地块编号<\/th>/<th class="min-w-[120px]">地块编号<\/th>/g' "$file"
+  sed -i '' 's/<th>地块名称<\/th>/<th class="min-w-[120px]">地块名称<\/th>/g' "$file"
+  sed -i '' 's/<th>所属农场<\/th>/<th class="min-w-[120px]">所属农场<\/th>/g' "$file"
+  sed -i '' 's/<th>所属区域<\/th>/<th class="min-w-[100px]">所属区域<\/th>/g' "$file"
+  sed -i '' 's/<th>地块类型<\/th>/<th class="min-w-[100px]">地块类型<\/th>/g' "$file"
+  sed -i '' 's/<th>面积(亩)<\/th>/<th class="min-w-[90px]">面积(亩)<\/th>/g' "$file"
+  sed -i '' 's/<th>种植作物<\/th>/<th class="min-w-[120px]">种植作物<\/th>/g' "$file"
+  sed -i '' 's/<th>主要作物<\/th>/<th class="min-w-[120px]">主要作物<\/th>/g' "$file"
+  sed -i '' 's/<th>土壤类型<\/th>/<th class="min-w-[100px]">土壤类型<\/th>/g' "$file"
+  sed -i '' 's/<th>灌溉方式<\/th>/<th class="min-w-[100px]">灌溉方式<\/th>/g' "$file"
+  sed -i '' 's/<th>使用状态<\/th>/<th class="min-w-[100px]">使用状态<\/th>/g' "$file"
+  sed -i '' 's/<th>状态<\/th>/<th class="min-w-[80px]">状态<\/th>/g' "$file"
+  sed -i '' 's/<th>绑定设备<\/th>/<th class="min-w-[100px]">绑定设备<\/th>/g' "$file"
+  sed -i '' 's/<th>绑定人员<\/th>/<th class="min-w-[100px]">绑定人员<\/th>/g' "$file"
+  sed -i '' 's/<th>负责人<\/th>/<th class="min-w-[100px]">负责人<\/th>/g' "$file"
+  sed -i '' 's/<th>创建时间<\/th>/<th class="min-w-[150px]">创建时间<\/th>/g' "$file"
+  sed -i '' 's/<th>上次更新<\/th>/<th class="min-w-[150px]">上次更新<\/th>/g' "$file"
+  sed -i '' 's/<th>地理位置<\/th>/<th class="min-w-[150px]">地理位置<\/th>/g' "$file"
+  sed -i '' 's/<th>开垦日期<\/th>/<th class="min-w-[100px]">开垦日期<\/th>/g' "$file"
+  sed -i '' 's/<th>设备数量<\/th>/<th class="min-w-[80px]">设备数量<\/th>/g' "$file"
+  
+  # 设备管理相关
+  sed -i '' 's/<th>设备编号<\/th>/<th class="min-w-[120px]">设备编号<\/th>/g' "$file"
+  sed -i '' 's/<th>设备名称<\/th>/<th class="min-w-[120px]">设备名称<\/th>/g' "$file"
+  sed -i '' 's/<th>设备类型<\/th>/<th class="min-w-[100px]">设备类型<\/th>/g' "$file"
+  sed -i '' 's/<th>所属地块<\/th>/<th class="min-w-[120px]">所属地块<\/th>/g' "$file"
+  sed -i '' 's/<th>设备型号<\/th>/<th class="min-w-[100px]">设备型号<\/th>/g' "$file"
+  sed -i '' 's/<th>厂家<\/th>/<th class="min-w-[100px]">厂家<\/th>/g' "$file"
+  sed -i '' 's/<th>安装日期<\/th>/<th class="min-w-[100px]">安装日期<\/th>/g' "$file"
+  sed -i '' 's/<th>最后活动时间<\/th>/<th class="min-w-[150px]">最后活动时间<\/th>/g' "$file"
+  
+  # 用户管理相关
+  sed -i '' 's/<th>用户名<\/th>/<th class="min-w-[120px]">用户名<\/th>/g' "$file"
+  sed -i '' 's/<th>姓名<\/th>/<th class="min-w-[100px]">姓名<\/th>/g' "$file"
+  sed -i '' 's/<th>手机号<\/th>/<th class="min-w-[120px]">手机号<\/th>/g' "$file"
+  sed -i '' 's/<th>邮箱<\/th>/<th class="min-w-[180px]">邮箱<\/th>/g' "$file"
+  sed -i '' 's/<th>角色<\/th>/<th class="min-w-[100px]">角色<\/th>/g' "$file"
+  sed -i '' 's/<th>部门<\/th>/<th class="min-w-[100px]">部门<\/th>/g' "$file"
+  
+  # 操作相关
+  sed -i '' 's/<th>操作<\/th>/<th class="min-w-[150px]">操作<\/th>/g' "$file"
+  
+  echo "完成处理: $file"
+done
+
+# 移除表头可能存在的whitespace-nowrap类名，避免与CSS样式冲突
+files=$(grep -l "whitespace-nowrap" pages/*.html)
+
+for file in $files; do
+  echo "正在清理whitespace-nowrap: $file"
+  sed -i '' 's/class="whitespace-nowrap min-w-/class="min-w-/g' "$file"
+  echo "完成清理: $file"
+done
+
+echo "所有表格表头宽度优化完成！"