gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146
							<!DOCTYPE html>
<html lang="zh-CN" class="iframe-content">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地块详情 - 爱智农</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
    <link rel="stylesheet" href="../assets/css/global.css">
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7f9;
            color: #333;
        }
        
        .page-container {
            padding: 20px;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #388E3C;
        }
        
        .btn-default {
            background-color: white;
            border: 1px solid #d1d5db;
            color: #374151;
        }
        
        .btn-default:hover {
            background-color: #f9fafb;
        }
        
        .btn-danger {
            background-color: #ef4444;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #dc2626;
        }
        
        .btn-icon {
            margin-right: 4px;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .tab:hover {
            color: #4CAF50;
        }
        
        .tab.active {
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
        }
        
        .tab-content {
            display: none;
            padding: 20px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .info-group {
            margin-bottom: 20px;
        }
        
        .info-label {
            color: #6b7280;
            margin-bottom: 4px;
        }
        
        .info-value {
            font-weight: 500;
        }
        
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .badge-warning {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .badge-danger {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        
        .table-container {
    position: relative;
    position: relative;
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: separate;
    border-spacing: 0;
        }
        
        th {
    white-space: nowrap;
    position: relative;
    overflow: visible;
    max-width: none;
    text-overflow: clip;
    white-space: nowrap;
    position: relative;
            background-color: #f9fafb;
            padding: 12px 16px;
            text-align: left;
            font-weight: 500;
            color: #6b7280;
            border-bottom: 1px solid #e5e7eb;
        }
        
        td {
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        tr:hover {
    
    tr:hover td:last-child {
        background-color: #f9fafb;
    }
    
    /* 固定最后一列（操作列）样式 */
    .table-fixed-right {
        position: relative;
    }
    
    .table-fixed-right th:last-child,
    .table-fixed-right td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: white;
        box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
    }
    
    .table-fixed-right th:last-child {
        background-color: #f9fafb;
    }
    
    /* 表格滚动控件 */
    .table-scroll-controls {
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        pointer-events: none;
        z-index: 3;
    }
    
    .table-scroll-btn {
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        color: #4CAF50;
        border: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 4;
    }
    
    .table-scroll-left {
        left: 10px;
    }
    
    .table-scroll-right {
        right: 10px;
    }
    
    .has-overflow .table-scroll-controls {
        display: block;
    }            background-color: #f9fafb;
        }
        
        .device-item, .person-item {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .device-item-bound, .person-item-bound {
            background-color: #f0fdf4;
            border-color: #4CAF50;
        }
        
        .map-container {
            height: 500px;
            width: 100%;
            position: relative;
            background-color: #eee;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .map-toolbar {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 10px;
            z-index: 10;
        }
        
        .map-tool {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 8px;
            transition: all 0.2s;
        }
        
        .map-tool:hover {
            background-color: #f3f4f6;
        }
        
        .map-tool.active {
            background-color: #e8f5e9;
            color: #4CAF50;
        }
        
        .map-tool i {
            margin-right: 8px;
            font-size: 18px;
        }

        .detail-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            padding: 24px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .detail-label {
            font-size: 13px;
            color: #64748b;
        }

        .detail-value {
            font-size: 14px;
            color: #1e293b;
            font-weight: 500;
        }

        .count-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: #475569;
            padding: 2px 4px;
        }
        
        .count-badge i {
            color: #64748b;
            font-size: 13px;
        }

        .btn-sm {
            padding: 4px 12px;
            font-size: 13px;
        }

        .btn-default.active {
            background-color: #f0fdf4;
            border-color: #4ade80;
            color: #16a34a;
        }

        .search-input {
            min-width: 280px;
            padding: 8px 12px;
            padding-right: 36px;
            border: 2px solid #e5e7eb;
            border-radius: 6px;
            transition: all 0.2s;
        }

        .search-input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .search-input::placeholder {
            color: #9ca3af;
        }

        table {
            border-collapse: separate;
            border-spacing: 0;
        }

        th {
    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 {
    
    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 {
            background-color: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        .btn-danger:hover {
            background-color: #fecaca;
        }

        .filter-tabs {
            display: flex;
            gap: 1px;
            padding: 2px;
            background: #f3f4f6;
            border-radius: 8px;
        }

        .filter-tab {
            padding: 6px 16px;
            font-size: 14px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: transparent;
            border: none;
            color: #6b7280;
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .filter-tab:hover {
            color: #4b5563;
        }

        .filter-tab.active {
            background: white;
            color: #4CAF50;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .filter-badge {
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 10px;
            font-weight: 500;
            background: #f3f4f6;
        }

        .filter-tab.active .filter-badge {
            background: #ecfdf5;
            color: #059669;
        }

        .filter-tab:not(.active) .filter-badge {
            background: #f3f4f6;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="flex justify-between items-center mb-6">
            <div class="flex items-center">
                <a href="field-management.html" class="mr-2">
                    <i class="iconfont icon-left"></i>
                </a>
                <h1 class="text-2xl font-bold">地块详情</h1>
            </div>
            
            <div class="flex gap-2">
                <button class="btn btn-default" id="editBtn">
                    <i class="iconfont icon-edit btn-icon"></i>
                    编辑
                </button>
                <button class="btn btn-default" id="refreshBtn">
                    <i class="iconfont icon-reload btn-icon"></i>
                    刷新
                </button>
            </div>
        </div>
        
        <div class="card">
            <div class="tabs">
                <div class="tab active" data-tab="info">基本信息</div>
                <div class="tab" data-tab="device">设备绑定</div>
                <div class="tab" data-tab="person">人员绑定</div>
                <div class="tab" data-tab="map">区域绘制</div>
            </div>
            
            <!-- 基本信息 -->
            <div class="tab-content active" id="tab-info">
                <div class="grid grid-cols-1 gap-4">
                    <!-- 基础信息展示 -->
                    <div class="detail-card">
                        <div class="detail-grid">
                            <div class="detail-item">
                                <div class="detail-label">地块编号</div>
                                <div class="detail-value" id="fieldId">FK20230001</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">地块名称</div>
                                <div class="detail-value" id="fieldName">东区水稻田A</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">所属农场</div>
                                <div class="detail-value">智慧农场一号</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">所属区域</div>
                                <div class="detail-value" id="fieldArea">东区</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">地块类型</div>
                                <div class="detail-value" id="fieldType">水田</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">面积(亩)</div>
                                <div class="detail-value" id="fieldSize">120</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">种植作物</div>
                                <div class="detail-value">水稻</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">土壤类型</div>
                                <div class="detail-value">黏土</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">灌溉方式</div>
                                <div class="detail-value">喷灌</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">使用状态</div>
                                <div class="detail-value">
                                    <span class="badge badge-success">
                                        <i class="iconfont icon-check-circle badge-icon"></i>使用中
                                    </span>
                                </div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">绑定设备</div>
                                <div class="detail-value">
                                    <span class="count-badge">
                                        <i class="iconfont icon-device"></i>3
                                    </span>
                                </div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">绑定人员</div>
                                <div class="detail-value">
                                    <span class="count-badge">
                                        <i class="iconfont icon-user"></i>2
                                    </span>
                                </div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">负责人</div>
                                <div class="detail-value">张三</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">创建时间</div>
                                <div class="detail-value" id="createTime">2023-05-15</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">上次更新</div>
                                <div class="detail-value">2023-06-20</div>
                            </div>
                            <div class="detail-item col-span-4">
                                <div class="detail-label">地块描述</div>
                                <div class="detail-value" id="fieldDesc" style="white-space: pre-line; line-height: 1.5;">
                                    这是一块位于东区的水稻田，土壤肥沃，水源充足，适合种植水稻。年产量约为10000公斤，是农场的主要粮食生产区域。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="info-group">
                        <div class="info-label">作物信息</div>
                        <div class="table-container mt-2">
                            <table>
                                <thead>
                                    <tr>
                                        <th>作物名称</th>
                                        <th>种植面积(亩)</th>
                                        <th>种植时间</th>
                                        <th>预计收获时间</th>
                                        <th class="min-w-[80px]">状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>水稻(早稻)</td>
                                        <td>120</td>
                                        <td>2023-02-15</td>
                                        <td>2023-06-20</td>
                                        <td><span class="badge badge-success">生长中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 设备绑定 -->
            <div class="tab-content" id="tab-device">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center gap-4">
                        <h3 class="text-lg font-medium">设备列表</h3>
                        <div class="filter-tabs">
                            <button class="filter-tab active" data-filter="bound" data-target="device-bound-list">
                                已绑定
                                <span class="filter-badge">3</span>
                            </button>
                            <button class="filter-tab" data-filter="unbound" data-target="device-unbound-list">
                                未绑定
                                <span class="filter-badge">8</span>
                            </button>
                        </div>
                    </div>
                    <div class="relative">
                        <input type="text" class="search-input" placeholder="搜索设备编号/名称">
                        <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                
                <div id="device-bound-list" class="bg-white rounded-lg overflow-hidden">
                    <table class="min-w-full">
                        <!-- 已绑定设备表格内容 -->
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备编号</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备名称</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备类型</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">绑定时间</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-t border-gray-100">
                                <td class="px-4 py-3 text-sm">DEV001</td>
                                <td class="px-4 py-3 text-sm">土壤湿度传感器</td>
                                <td class="px-4 py-3 text-sm">传感器</td>
                                <td class="px-4 py-3 text-sm">
                                    <span class="badge badge-success">在线</span>
                                </td>
                                <td class="px-4 py-3 text-sm">2023-05-15 10:30</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="btn btn-sm btn-danger">解绑</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div id="device-unbound-list" class="bg-white rounded-lg overflow-hidden" style="display: none;">
                    <table class="min-w-full">
                        <!-- 未绑定设备表格内容 -->
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备编号</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备名称</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">设备类型</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-t border-gray-100">
                                <td class="px-4 py-3 text-sm">DEV004</td>
                                <td class="px-4 py-3 text-sm">气象站</td>
                                <td class="px-4 py-3 text-sm">监测设备</td>
                                <td class="px-4 py-3 text-sm">
                                    <span class="badge badge-success">在线</span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="btn btn-sm btn-primary">绑定</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="flex justify-between items-center mt-4">
                    <div class="text-sm text-gray-600">
                        共 <span class="text-primary font-medium">11</span> 条记录
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="btn btn-default btn-sm" disabled>上一页</button>
                        <button class="btn btn-default btn-sm bg-primary text-white">1</button>
                        <button class="btn btn-default btn-sm">2</button>
                        <button class="btn btn-default btn-sm">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 人员绑定 -->
            <div class="tab-content" id="tab-person">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center gap-4">
                        <h3 class="text-lg font-medium">人员列表</h3>
                        <div class="filter-tabs">
                            <button class="filter-tab active" data-filter="bound" data-target="person-bound-list">
                                已绑定
                                <span class="filter-badge">2</span>
                            </button>
                            <button class="filter-tab" data-filter="unbound" data-target="person-unbound-list">
                                未绑定
                                <span class="filter-badge">6</span>
                            </button>
                        </div>
                    </div>
                    <div class="relative">
                        <input type="text" class="search-input" placeholder="搜索姓名/职位">
                        <i class="iconfont icon-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                
                <div id="person-bound-list" class="bg-white rounded-lg overflow-hidden">
                    <table class="min-w-full">
                        <!-- 已绑定人员表格内容 -->
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">工号</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">姓名</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">职位</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">联系方式</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">绑定时间</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-t border-gray-100">
                                <td class="px-4 py-3 text-sm">EMP001</td>
                                <td class="px-4 py-3 text-sm">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
                                            <i class="iconfont icon-user text-green-600"></i>
                                        </div>
                                        <span>张三</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm">农场技术员</td>
                                <td class="px-4 py-3 text-sm">13800138000</td>
                                <td class="px-4 py-3 text-sm">2023-05-15 10:30</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="btn btn-sm btn-danger">解绑</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div id="person-unbound-list" class="bg-white rounded-lg overflow-hidden" style="display: none;">
                    <table class="min-w-full">
                        <!-- 未绑定人员表格内容 -->
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">工号</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">姓名</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">职位</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">联系方式</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-t border-gray-100">
                                <td class="px-4 py-3 text-sm">EMP004</td>
                                <td class="px-4 py-3 text-sm">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                            <i class="iconfont icon-user text-gray-600"></i>
                                        </div>
                                        <span>李四</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm">农场工人</td>
                                <td class="px-4 py-3 text-sm">13900139000</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="btn btn-sm btn-primary">绑定</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="flex justify-between items-center mt-4">
                    <div class="text-sm text-gray-600">
                        共 <span class="text-primary font-medium">8</span> 条记录
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="btn btn-default btn-sm" disabled>上一页</button>
                        <button class="btn btn-default btn-sm bg-primary text-white">1</button>
                        <button class="btn btn-default btn-sm">2</button>
                        <button class="btn btn-default btn-sm">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 区域绘制 -->
            <div class="tab-content" id="tab-map">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">地块区域绘制</h3>
                    <button class="btn btn-primary" id="saveMapBtn">
                        <i class="iconfont icon-save btn-icon"></i>
                        保存绘制区域
                    </button>
                </div>
                
                <div class="map-container">
                    <!-- 地图工具栏 -->
                    <div class="map-toolbar">
                        <div class="map-tool active">
                            <i class="iconfont icon-select"></i>
                            <span>选择</span>
                        </div>
                        <div class="map-tool">
                            <i class="iconfont icon-edit"></i>
                            <span>绘制区域</span>
                        </div>
                        <div class="map-tool">
                            <i class="iconfont icon-edit-square"></i>
                            <span>编辑节点</span>
                        </div>
                        <div class="map-tool">
                            <i class="iconfont icon-delete"></i>
                            <span>删除</span>
                        </div>
                        <div class="map-tool">
                            <i class="iconfont icon-undo"></i>
                            <span>撤销</span>
                        </div>
                        <div class="map-tool">
                            <i class="iconfont icon-redo"></i>
                            <span>重做</span>
                        </div>
                    </div>
                    
                    <!-- 地图区域 (实际项目中这里会使用高德地图、百度地图等API) -->
                    <div class="w-full h-full flex items-center justify-center text-gray-400">
                        <div class="text-center">
                            <i class="iconfont icon-map text-6xl"></i>
                            <div class="mt-2">地图加载中...</div>
                            <div class="mt-2 text-sm">实际项目中这里将集成高德地图、百度地图等API</div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4">
                    <div class="font-medium mb-2">地块坐标信息</div>
                    <div class="p-3 bg-gray-50 rounded-md text-sm font-mono">
                        {"type":"Polygon","coordinates":[[[120.12345,30.12345],[120.23456,30.12345],[120.23456,30.23456],[120.12345,30.23456],[120.12345,30.12345]]]}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // 初始化表格滚动功能
        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();
        
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const fieldId = urlParams.get('id');
        const activeTab = urlParams.get('tab');
        
        // 切换Tab
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        
        // 如果URL中有指定的tab，则激活它
        if (activeTab) {
            tabs.forEach(tab => {
                tab.classList.remove('active');
                if (tab.getAttribute('data-tab') === activeTab) {
                    tab.classList.add('active');
                }
            });
            
            tabContents.forEach(content => {
                content.classList.remove('active');
                if (content.id === 'tab-' + activeTab) {
                    content.classList.add('active');
                }
            });
        }
        
        // Tab点击事件
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 更新URL参数但不刷新页面
                const url = new URL(window.location);
                url.searchParams.set('tab', tabId);
                window.history.pushState({}, '', url);
                
                // 切换激活状态
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 显示对应内容
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    if (content.id === 'tab-' + tabId) {
                        content.classList.add('active');
                    }
                });
            });
        });
        
        // 编辑按钮事件
        document.getElementById('editBtn')?.addEventListener('click', function() {
            // 跳转到地块管理页的编辑模态框
            window.location.href = `field-management-content.html?edit=${fieldId}`;
        });
        
        // 设备绑定保存按钮
        document.getElementById('saveDeviceBtn')?.addEventListener('click', function() {
            alert('设备绑定关系保存成功');
        });
        
        // 人员绑定保存按钮
        document.getElementById('savePersonBtn')?.addEventListener('click', function() {
            alert('人员绑定关系保存成功');
        });
        
        // 地图区域保存按钮
        document.getElementById('saveMapBtn')?.addEventListener('click', function() {
            alert('地块区域保存成功');
        });
        
        // 设备绑定/解绑按钮
        const deviceBindBtns = document.querySelectorAll('#tab-device .btn-primary');
        deviceBindBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const deviceItem = this.closest('.device-item');
                deviceItem.classList.add('device-item-bound');
                this.className = 'btn btn-sm btn-danger';
                this.textContent = '解绑';
            });
        });
        
        const deviceUnbindBtns = document.querySelectorAll('#tab-device .btn-danger');
        deviceUnbindBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const deviceItem = this.closest('.device-item');
                deviceItem.classList.remove('device-item-bound');
                this.className = 'btn btn-sm btn-primary';
                this.textContent = '绑定';
            });
        });
        
        // 人员绑定/解绑按钮
        const personBindBtns = document.querySelectorAll('#tab-person .btn-primary');
        personBindBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const personItem = this.closest('.person-item');
                personItem.classList.add('person-item-bound');
                this.className = 'btn btn-sm btn-danger';
                this.textContent = '解绑';
            });
        });
        
        const personUnbindBtns = document.querySelectorAll('#tab-person .btn-danger');
        personUnbindBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const personItem = this.closest('.person-item');
                personItem.classList.remove('person-item-bound');
                this.className = 'btn btn-sm btn-primary';
                this.textContent = '绑定';
            });
        });
        
        // 地图工具点击事件
        const mapTools = document.querySelectorAll('.map-tool');
        mapTools.forEach(tool => {
            tool.addEventListener('click', function() {
                mapTools.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 绑定/未绑定切换功能
        function initFilterTabs(container) {
            const tabs = container.querySelectorAll('.filter-tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有tab的active状态
                    tabs.forEach(t => t.classList.remove('active'));
                    // 添加当前tab的active状态
                    this.classList.add('active');
                    
                    // 获取目标列表
                    const targetId = this.getAttribute('data-target');
                    const lists = container.closest('.tab-content').querySelectorAll('[id$="-list"]');
                    
                    // 隐藏所有列表
                    lists.forEach(list => list.style.display = 'none');
                    
                    // 显示目标列表
                    document.getElementById(targetId).style.display = 'block';
                });
            });
        }

        // 初始化设备和人员的过滤标签
        const deviceContent = document.getElementById('tab-device');
        const personContent = document.getElementById('tab-person');
        
        if (deviceContent) initFilterTabs(deviceContent);
        if (personContent) initFilterTabs(personContent);
    });
    </script>
</body>
</html>