gebadi
/
aizhunongDom


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637
							<!DOCTYPE html>
<html lang="zh-CN" class="iframe-content">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计图表 - 爱智农</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7f9;
            color: #333;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        
        .dashboard-container {
            padding: 20px;
            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
        }
        
        .dashboard-header {
            margin-bottom: 24px;
            position: relative;
        }
        
        .dashboard-title {
            font-size: 24px;
            font-weight: bold;
            color: #1e293b;
            position: relative;
            display: inline-block;
        }
        
        .card {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
            position: relative;
            overflow: hidden;
            height: 100%;
            transition: all 0.3s ease;
        }
        
        .card:hover {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 16px;
            color: #1e293b;
            display: flex;
            align-items: center;
        }
        
        .card-title::before {
            content: "";
            display: block;
            width: 3px;
            height: 16px;
            background: #4CAF50;
            margin-right: 8px;
            border-radius: 2px;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .number-card {
            text-align: center;
            padding: 16px;
            transition: transform 0.2s;
        }
        
        .number-card:hover {
            transform: translateY(-5px);
        }
        
        .number-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #4CAF50;
        }
        
        .number-label {
            font-size: 14px;
            color: #64748b;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .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;
        }
        
        .tab-button {
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background-color: transparent;
        }
        
        .tab-button.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .tab-button:not(.active):hover {
            background-color: #f0fdf4;
        }
        
        .time-range-selector {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .time-range-button {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            background-color: #f1f5f9;
            color: #64748b;
            transition: all 0.2s;
        }
        
        .time-range-button.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .data-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .data-selector-item {
            display: flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            background-color: #f1f5f9;
            color: #64748b;
            transition: all 0.2s;
        }
        
        .data-selector-item.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .data-selector-item input[type="checkbox"] {
            margin-right: 6px;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .data-table th {
            background-color: #f8fafc;
            font-weight: 600;
            color: #475569;
        }
        
        .data-table tbody tr:hover {
            background-color: #f1f5f9;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <header class="dashboard-header flex justify-between items-center">
            <h1 class="dashboard-title">数据统计图表</h1>
            <div class="flex gap-3">
                <button class="btn btn-default">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    导出数据
                </button>
                <button class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    刷新数据
                </button>
            </div>
        </header>
        
        <div class="mb-6">
            <div class="flex gap-4 mb-6">
                <button class="tab-button active" data-tab="environment">环境数据</button>
                <button class="tab-button" data-tab="crop">作物数据</button>
                <button class="tab-button" data-tab="device">设备数据</button>
                <button class="tab-button" data-tab="yield">产量数据</button>
            </div>
        </div>
        
        <div class="tab-content" id="environment-tab">
            <div class="grid grid-cols-4 gap-4 mb-6">
                <div class="number-card card">
                    <div class="number-value">26.5°C</div>
                    <div class="number-label">平均气温</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">68%</div>
                    <div class="number-label">平均湿度</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">35mm</div>
                    <div class="number-label">月降水量</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">7.2</div>
                    <div class="number-label">土壤pH值</div>
                </div>
            </div>
            
            <div class="card mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="card-title">环境数据趋势</h3>
                    <div class="flex gap-2">
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部区域</option>
                            <option>东区</option>
                            <option>西区</option>
                            <option>南区</option>
                            <option>北区</option>
                        </select>
                    </div>
                </div>
                
                <div class="data-selector">
                    <label class="data-selector-item active">
                        <input type="checkbox" checked> 气温
                    </label>
                    <label class="data-selector-item active">
                        <input type="checkbox" checked> 湿度
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 降水量
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 光照强度
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 土壤湿度
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 土壤温度
                    </label>
                </div>
                
                <div class="time-range-selector">
                    <button class="time-range-button">今日</button>
                    <button class="time-range-button active">本周</button>
                    <button class="time-range-button">本月</button>
                    <button class="time-range-button">季度</button>
                    <button class="time-range-button">年度</button>
                    <div class="ml-auto flex gap-2">
                        <input type="date" class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm">
                        <span class="self-center">至</span>
                        <input type="date" class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm">
                    </div>
                </div>
                
                <div class="chart-container">
                    <canvas id="environmentChart"></canvas>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                <div class="card">
                    <h3 class="card-title">区域环境对比</h3>
                    <div id="environmentComparisonChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <h3 class="card-title">环境异常记录</h3>
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>区域</th>
                                    <th>异常类型</th>
                                    <th>数值</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023-08-15 14:30</td>
                                    <td>东区</td>
                                    <td>高温预警</td>
                                    <td>38.5°C</td>
                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">已处理</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-14 09:15</td>
                                    <td>南区</td>
                                    <td>湿度过低</td>
                                    <td>25%</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-12 16:45</td>
                                    <td>西区</td>
                                    <td>土壤pH异常</td>
                                    <td>8.9</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-10 11:20</td>
                                    <td>北区</td>
                                    <td>降水量过大</td>
                                    <td>85mm/h</td>
                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-content hidden" id="crop-tab">
            <div class="grid grid-cols-4 gap-4 mb-6">
                <div class="number-card card">
                    <div class="number-value">4</div>
                    <div class="number-label">主要作物种类</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">2,560</div>
                    <div class="number-label">总种植面积(亩)</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">85%</div>
                    <div class="number-label">作物健康率</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">1,850</div>
                    <div class="number-label">预计总产量(吨)</div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">作物分布</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>按面积</option>
                            <option>按产量</option>
                            <option>按价值</option>
                        </select>
                    </div>
                    <div id="cropDistributionChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">生长阶段分布</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部作物</option>
                            <option>水稻</option>
                            <option>小麦</option>
                            <option>玉米</option>
                        </select>
                    </div>
                    <div id="growthStageChart" class="chart-container"></div>
                </div>
            </div>
            
            <div class="card mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="card-title">作物生长趋势</h3>
                    <div class="flex gap-2">
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>水稻</option>
                            <option>小麦</option>
                            <option>玉米</option>
                            <option>大豆</option>
                        </select>
                    </div>
                </div>
                
                <div class="data-selector">
                    <label class="data-selector-item active">
                        <input type="checkbox" checked> 株高
                    </label>
                    <label class="data-selector-item active">
                        <input type="checkbox" checked> 叶面积指数
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 茎粗
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 叶绿素含量
                    </label>
                    <label class="data-selector-item">
                        <input type="checkbox"> 穗长
                    </label>
                </div>
                
                <div class="time-range-selector">
                    <button class="time-range-button">本周</button>
                    <button class="time-range-button active">本月</button>
                    <button class="time-range-button">季度</button>
                    <button class="time-range-button">全生长期</button>
                </div>
                
                <div class="chart-container">
                    <canvas id="cropGrowthChart"></canvas>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                <div class="card">
                    <h3 class="card-title">作物健康状况</h3>
                    <div id="cropHealthChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <h3 class="card-title">病虫害监测</h3>
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>发现时间</th>
                                    <th>区域</th>
                                    <th>作物</th>
                                    <th>病虫害类型</th>
                                    <th>影响面积</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023-08-12</td>
                                    <td>东区</td>
                                    <td>水稻</td>
                                    <td>稻飞虱</td>
                                    <td>15亩</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已处理</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-10</td>
                                    <td>南区</td>
                                    <td>玉米</td>
                                    <td>玉米螟</td>
                                    <td>8亩</td>
                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">处理中</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-08</td>
                                    <td>西区</td>
                                    <td>小麦</td>
                                    <td>白粉病</td>
                                    <td>5亩</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已处理</span></td>
                                </tr>
                                <tr>
                                    <td>2023-08-05</td>
                                    <td>北区</td>
                                    <td>大豆</td>
                                    <td>蚜虫</td>
                                    <td>3亩</td>
                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-content hidden" id="device-tab">
            <div class="grid grid-cols-4 gap-4 mb-6">
                <div class="number-card card">
                    <div class="number-value">42</div>
                    <div class="number-label">设备总数</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">36</div>
                    <div class="number-label">在线设备</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">6</div>
                    <div class="number-label">离线/故障设备</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">95%</div>
                    <div class="number-label">设备健康率</div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">设备类型分布</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部农场</option>
                            <option>东区智慧农场</option>
                            <option>西区智慧农场</option>
                            <option>南区智慧农场</option>
                            <option>中心监测农场</option>
                        </select>
                    </div>
                    <div id="deviceTypeChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">设备状态分布</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部类型</option>
                            <option>传感器</option>
                            <option>摄像头</option>
                            <option>控制器</option>
                            <option>气象设备</option>
                        </select>
                    </div>
                    <div id="deviceStatusChart" class="chart-container"></div>
                </div>
            </div>
            
            <div class="card mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="card-title">设备活动趋势</h3>
                    <div class="flex gap-2">
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部设备</option>
                            <option>传感器</option>
                            <option>摄像头</option>
                            <option>控制器</option>
                            <option>气象设备</option>
                        </select>
                    </div>
                </div>
                
                <div class="time-range-selector">
                    <button class="time-range-button">今日</button>
                    <button class="time-range-button active">本周</button>
                    <button class="time-range-button">本月</button>
                    <button class="time-range-button">季度</button>
                </div>
                
                <div class="chart-container">
                    <canvas id="deviceActivityChart"></canvas>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                <div class="card">
                    <h3 class="card-title">设备告警统计</h3>
                    <div id="deviceAlertChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <h3 class="card-title">最近告警记录</h3>
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>设备编号</th>
                                    <th>设备名称</th>
                                    <th>告警类型</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023-10-15 18:30</td>
                                    <td>DEV20230004</td>
                                    <td>智能灌溉控制器-D1</td>
                                    <td>设备故障</td>
                                    <td><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未处理</span></td>
                                </tr>
                                <tr>
                                    <td>2023-10-14 09:45</td>
                                    <td>DEV20230002</td>
                                    <td>土壤湿度检测仪-B1</td>
                                    <td>电量不足</td>
                                    <td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">处理中</span></td>
                                </tr>
                                <tr>
                                    <td>2023-10-12 14:20</td>
                                    <td>DEV20230007</td>
                                    <td>水质监测仪-E1</td>
                                    <td>数据异常</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
                                </tr>
                                <tr>
                                    <td>2023-10-10 11:05</td>
                                    <td>DEV20230009</td>
                                    <td>光照传感器-F2</td>
                                    <td>信号弱</td>
                                    <td><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已解决</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tab-content hidden" id="yield-tab">
            <div class="grid grid-cols-4 gap-4 mb-6">
                <div class="number-card card">
                    <div class="number-value">2,450</div>
                    <div class="number-label">总产量(吨)</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">1.2</div>
                    <div class="number-label">亩均产量(吨)</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">+8.5%</div>
                    <div class="number-label">同比增长</div>
                </div>
                
                <div class="number-card card">
                    <div class="number-value">¥368</div>
                    <div class="number-label">平均亩产值(万元)</div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">各作物产量占比</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>2023年</option>
                            <option>2022年</option>
                            <option>2021年</option>
                        </select>
                    </div>
                    <div id="yieldDistributionChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="card-title">各区域产量对比</h3>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部作物</option>
                            <option>水稻</option>
                            <option>小麦</option>
                            <option>玉米</option>
                            <option>大豆</option>
                        </select>
                    </div>
                    <div id="yieldByRegionChart" class="chart-container"></div>
                </div>
            </div>
            
            <div class="card mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="card-title">年度产量趋势</h3>
                    <div class="flex gap-2">
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>全部作物</option>
                            <option>水稻</option>
                            <option>小麦</option>
                            <option>玉米</option>
                            <option>大豆</option>
                        </select>
                    </div>
                </div>
                
                <div class="chart-container">
                    <canvas id="yieldTrendChart"></canvas>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                <div class="card">
                    <h3 class="card-title">产量与环境因素关系</h3>
                    <div id="yieldFactorsChart" class="chart-container"></div>
                </div>
                
                <div class="card">
                    <h3 class="card-title">产量质量分析</h3>
                    <div class="overflow-x-auto">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>作物类型</th>
                                    <th>优质率</th>
                                    <th>中等率</th>
                                    <th>一般率</th>
                                    <th>平均质量指数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>水稻</td>
                                    <td>85%</td>
                                    <td>12%</td>
                                    <td>3%</td>
                                    <td>92.5</td>
                                </tr>
                                <tr>
                                    <td>小麦</td>
                                    <td>78%</td>
                                    <td>18%</td>
                                    <td>4%</td>
                                    <td>88.6</td>
                                </tr>
                                <tr>
                                    <td>玉米</td>
                                    <td>82%</td>
                                    <td>15%</td>
                                    <td>3%</td>
                                    <td>90.2</td>
                                </tr>
                                <tr>
                                    <td>大豆</td>
                                    <td>75%</td>
                                    <td>20%</td>
                                    <td>5%</td>
                                    <td>86.8</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 切换标签页
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabName = this.dataset.tab;
                    
                    // 更新按钮状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新内容显示
                    tabContents.forEach(content => {
                        if (content.id === tabName + '-tab') {
                            content.classList.remove('hidden');
                        } else {
                            content.classList.add('hidden');
                        }
                    });
                    
                    // 重新渲染图表以适应大小
                    resizeAllCharts();
                });
            });
            
            // 时间范围选择器
            const timeRangeButtons = document.querySelectorAll('.time-range-button');
            timeRangeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    timeRangeButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    updateCharts();
                });
            });
            
            // 数据选择器
            const dataSelectors = document.querySelectorAll('.data-selector-item');
            dataSelectors.forEach(item => {
                item.addEventListener('click', function() {
                    const checkbox = this.querySelector('input[type="checkbox"]');
                    checkbox.checked = !checkbox.checked;
                    this.classList.toggle('active', checkbox.checked);
                    updateCharts();
                });
            });
            
            // 初始化环境数据图表
            const ctx = document.getElementById('environmentChart').getContext('2d');
            const environmentChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [
                        {
                            label: '气温 (°C)',
                            data: [22, 24, 26, 25, 23, 22, 21],
                            borderColor: '#FF9800',
                            backgroundColor: 'rgba(255, 152, 0, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '湿度 (%)',
                            data: [65, 60, 55, 58, 62, 68, 70],
                            borderColor: '#2196F3',
                            backgroundColor: 'rgba(33, 150, 243, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        tooltip: {
                            enabled: true
                        },
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
            
            // 区域环境对比图表
            const environmentComparisonChart = echarts.init(document.getElementById('environmentComparisonChart'));
            environmentComparisonChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['气温', '湿度', '土壤湿度', '光照']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['东区', '西区', '南区', '北区']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '气温',
                        type: 'bar',
                        data: [26.5, 25.8, 27.2, 24.9],
                        color: '#FF9800'
                    },
                    {
                        name: '湿度',
                        type: 'bar',
                        data: [68, 72, 65, 70],
                        color: '#2196F3'
                    },
                    {
                        name: '土壤湿度',
                        type: 'bar',
                        data: [35, 40, 32, 38],
                        color: '#4CAF50'
                    },
                    {
                        name: '光照',
                        type: 'bar',
                        data: [85, 80, 90, 75],
                        color: '#FFC107'
                    }
                ]
            });
            
            // 响应式调整图表大小
            function resizeAllCharts() {
                environmentComparisonChart.resize();
                environmentChart.resize();
                
                // 如果作物选项卡的图表已初始化，则调整其大小
                if (typeof cropDistributionChart !== 'undefined') {
                    cropDistributionChart.resize();
                    growthStageChart.resize();
                    cropHealthChart.resize();
                    if (cropGrowthChart) {
                        cropGrowthChart.resize();
                    }
                }
            }
            
            // 更新图表数据
            function updateCharts() {
                // 这里可以根据选择的时间范围和数据项更新图表
                console.log("更新图表数据");
            }
            
            window.addEventListener('resize', resizeAllCharts);
            
            // 初始化作物图表的变量
            let cropDistributionChart, growthStageChart, cropHealthChart, cropGrowthChart;
            
            // 当切换到作物选项卡时初始化图表
            document.querySelector('[data-tab="crop"]').addEventListener('click', function() {
                if (!cropDistributionChart) {
                    // 作物分布饼图
                    cropDistributionChart = echarts.init(document.getElementById('cropDistributionChart'));
                    cropDistributionChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c}亩 ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            data: ['水稻', '小麦', '玉米', '大豆']
                        },
                        series: [
                            {
                                name: '作物分布',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 1200, name: '水稻' },
                                    { value: 600, name: '小麦' },
                                    { value: 580, name: '玉米' },
                                    { value: 180, name: '大豆' }
                                ],
                                color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107']
                            }
                        ]
                    });
                    
                    // 生长阶段图表
                    growthStageChart = echarts.init(document.getElementById('growthStageChart'));
                    growthStageChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c}亩 ({d}%)'
                        },
                        legend: {
                            bottom: '0%',
                            left: 'center',
                            data: ['播种期', '幼苗期', '生长期', '成熟期', '收获期']
                        },
                        series: [
                            {
                                name: '生长阶段',
                                type: 'pie',
                                radius: '70%',
                                center: ['50%', '45%'],
                                data: [
                                    { value: 350, name: '播种期' },
                                    { value: 450, name: '幼苗期' },
                                    { value: 850, name: '生长期' },
                                    { value: 650, name: '成熟期' },
                                    { value: 260, name: '收获期' }
                                ],
                                color: ['#E3F2FD', '#90CAF9', '#42A5F5', '#1976D2', '#0D47A1'],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                    
                    // 作物健康状况图表
                    cropHealthChart = echarts.init(document.getElementById('cropHealthChart'));
                    cropHealthChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['健康', '轻度受损', '中度受损', '重度受损']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['水稻', '小麦', '玉米', '大豆']
                        },
                        series: [
                            {
                                name: '健康',
                                type: 'bar',
                                stack: 'total',
                                data: [1020, 510, 480, 160],
                                color: '#4CAF50'
                            },
                            {
                                name: '轻度受损',
                                type: 'bar',
                                stack: 'total',
                                data: [120, 60, 70, 15],
                                color: '#FFC107'
                            },
                            {
                                name: '中度受损',
                                type: 'bar',
                                stack: 'total',
                                data: [50, 25, 25, 5],
                                color: '#FF9800'
                            },
                            {
                                name: '重度受损',
                                type: 'bar',
                                stack: 'total',
                                data: [10, 5, 5, 0],
                                color: '#F44336'
                            }
                        ]
                    });
                    
                    // 作物生长趋势图表
                    const cropGrowthCtx = document.getElementById('cropGrowthChart').getContext('2d');
                    cropGrowthChart = new Chart(cropGrowthCtx, {
                        type: 'line',
                        data: {
                            labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周'],
                            datasets: [
                                {
                                    label: '株高 (cm)',
                                    data: [15, 25, 38, 52, 68, 85, 95, 100],
                                    borderColor: '#4CAF50',
                                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
                                    tension: 0.4,
                                    fill: true
                                },
                                {
                                    label: '叶面积指数',
                                    data: [0.8, 1.5, 2.3, 3.2, 4.1, 4.8, 5.2, 5.5],
                                    borderColor: '#2196F3',
                                    backgroundColor: 'rgba(33, 150, 243, 0.1)',
                                    tension: 0.4,
                                    fill: true
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            plugins: {
                                tooltip: {
                                    enabled: true
                                },
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: false
                                }
                            }
                        }
                    });
                }
                
                // 调整图表大小以适应容器
                setTimeout(() => {
                    cropDistributionChart.resize();
                    growthStageChart.resize();
                    cropHealthChart.resize();
                }, 0);
            });
            
            // 当切换到设备数据选项卡时初始化图表
            document.querySelector('[data-tab="device"]').addEventListener('click', function() {
                if (!deviceTypeChart) {
                    // 设备类型分布图
                    deviceTypeChart = echarts.init(document.getElementById('deviceTypeChart'));
                    deviceTypeChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            data: ['传感器', '摄像头', '控制器', '气象设备']
                        },
                        series: [
                            {
                                name: '设备类型',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 24, name: '传感器' },
                                    { value: 8, name: '摄像头' },
                                    { value: 6, name: '控制器' },
                                    { value: 4, name: '气象设备' }
                                ],
                                color: ['#2196F3', '#9C27B0', '#FF9800', '#4CAF50']
                            }
                        ]
                    });
                    
                    // 设备状态分布图
                    deviceStatusChart = echarts.init(document.getElementById('deviceStatusChart'));
                    deviceStatusChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            data: ['在线', '离线', '故障', '维护中']
                        },
                        series: [
                            {
                                name: '设备状态',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 36, name: '在线' },
                                    { value: 3, name: '离线' },
                                    { value: 2, name: '故障' },
                                    { value: 1, name: '维护中' }
                                ],
                                color: ['#4CAF50', '#FFC107', '#F44336', '#9E9E9E']
                            }
                        ]
                    });
                    
                    // 设备告警统计图
                    deviceAlertChart = echarts.init(document.getElementById('deviceAlertChart'));
                    deviceAlertChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['设备故障', '电量不足', '数据异常', '信号弱', '其他']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['传感器', '摄像头', '控制器', '气象设备']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '设备故障',
                                type: 'bar',
                                stack: 'total',
                                data: [2, 1, 3, 0],
                                color: '#F44336'
                            },
                            {
                                name: '电量不足',
                                type: 'bar',
                                stack: 'total',
                                data: [5, 2, 0, 1],
                                color: '#FF9800'
                            },
                            {
                                name: '数据异常',
                                type: 'bar',
                                stack: 'total',
                                data: [3, 0, 2, 2],
                                color: '#FFC107'
                            },
                            {
                                name: '信号弱',
                                type: 'bar',
                                stack: 'total',
                                data: [2, 3, 1, 1],
                                color: '#2196F3'
                            },
                            {
                                name: '其他',
                                type: 'bar',
                                stack: 'total',
                                data: [1, 0, 1, 0],
                                color: '#9E9E9E'
                            }
                        ]
                    });
                    
                    // 设备活动趋势图表
                    const deviceActivityCtx = document.getElementById('deviceActivityChart').getContext('2d');
                    deviceActivityChart = new Chart(deviceActivityCtx, {
                        type: 'line',
                        data: {
                            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            datasets: [
                                {
                                    label: '活动次数',
                                    data: [125, 132, 128, 142, 135, 92, 88],
                                    borderColor: '#4CAF50',
                                    backgroundColor: 'rgba(76, 175, 80, 0.1)',
                                    tension: 0.4,
                                    fill: true
                                },
                                {
                                    label: '数据上传量(KB)',
                                    data: [850, 920, 880, 950, 910, 720, 680],
                                    borderColor: '#2196F3',
                                    backgroundColor: 'rgba(33, 150, 243, 0.1)',
                                    tension: 0.4,
                                    fill: true
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            plugins: {
                                tooltip: {
                                    enabled: true
                                },
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: false
                                }
                            }
                        }
                    });
                }
                
                // 调整图表大小以适应容器
                setTimeout(() => {
                    deviceTypeChart.resize();
                    deviceStatusChart.resize();
                    deviceAlertChart.resize();
                }, 0);
            });
            
            // 当切换到产量数据选项卡时初始化图表
            document.querySelector('[data-tab="yield"]').addEventListener('click', function() {
                if (!yieldDistributionChart) {
                    // 产量分布饼图
                    yieldDistributionChart = echarts.init(document.getElementById('yieldDistributionChart'));
                    yieldDistributionChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c}吨 ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            data: ['水稻', '小麦', '玉米', '大豆']
                        },
                        series: [
                            {
                                name: '产量分布',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 1200, name: '水稻' },
                                    { value: 580, name: '小麦' },
                                    { value: 520, name: '玉米' },
                                    { value: 150, name: '大豆' }
                                ],
                                color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107']
                            }
                        ]
                    });
                    
                    // 区域产量对比图
                    yieldByRegionChart = echarts.init(document.getElementById('yieldByRegionChart'));
                    yieldByRegionChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['2021年', '2022年', '2023年']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['东区', '西区', '南区', '北区']
                        },
                        yAxis: {
                            type: 'value',
                            name: '产量(吨)'
                        },
                        series: [
                            {
                                name: '2021年',
                                type: 'bar',
                                data: [580, 480, 520, 420],
                                color: '#CDDC39'
                            },
                            {
                                name: '2022年',
                                type: 'bar',
                                data: [620, 520, 580, 450],
                                color: '#8BC34A'
                            },
                            {
                                name: '2023年',
                                type: 'bar',
                                data: [680, 560, 630, 480],
                                color: '#4CAF50'
                            }
                        ]
                    });
                    
                    // 产量与环境因素关系图
                    yieldFactorsChart = echarts.init(document.getElementById('yieldFactorsChart'));
                    yieldFactorsChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['产量', '温度', '降水量', '光照']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '产量',
                                position: 'left',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#4CAF50'
                                    }
                                }
                            },
                            {
                                type: 'value',
                                name: '环境因素',
                                position: 'right',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#FF9800'
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '产量',
                                type: 'line',
                                data: [0, 0, 0, 120, 180, 240, 320, 420, 580, 420, 180, 0],
                                color: '#4CAF50',
                                yAxisIndex: 0
                            },
                            {
                                name: '温度',
                                type: 'line',
                                data: [5, 8, 12, 18, 24, 28, 32, 30, 25, 18, 12, 6],
                                color: '#FF9800',
                                yAxisIndex: 1
                            },
                            {
                                name: '降水量',
                                type: 'line',
                                data: [20, 25, 35, 45, 80, 120, 150, 120, 90, 60, 30, 20],
                                color: '#2196F3',
                                yAxisIndex: 1
                            },
                            {
                                name: '光照',
                                type: 'line',
                                data: [40, 45, 55, 65, 80, 85, 90, 85, 75, 60, 50, 40],
                                color: '#FFC107',
                                yAxisIndex: 1
                            }
                        ]
                    });
                    
                    // 年度产量趋势图表
                    const yieldTrendCtx = document.getElementById('yieldTrendChart').getContext('2d');
                    yieldTrendChart = new Chart(yieldTrendCtx, {
                        type: 'bar',
                        data: {
                            labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
                            datasets: [
                                {
                                    label: '水稻',
                                    data: [980, 1020, 1080, 1120, 1150, 1200],
                                    backgroundColor: '#4CAF50'
                                },
                                {
                                    label: '小麦',
                                    data: [450, 480, 520, 550, 560, 580],
                                    backgroundColor: '#8BC34A'
                                },
                                {
                                    label: '玉米',
                                    data: [420, 440, 460, 480, 500, 520],
                                    backgroundColor: '#CDDC39'
                                },
                                {
                                    label: '大豆',
                                    data: [120, 130, 135, 140, 145, 150],
                                    backgroundColor: '#FFC107'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                tooltip: {
                                    enabled: true
                                },
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                x: {
                                    stacked: true,
                                },
                                y: {
                                    stacked: true,
                                    title: {
                                        display: true,
                                        text: '产量(吨)'
                                    }
                                }
                            }
                        }
                    });
                }
                
                // 调整图表大小以适应容器
                setTimeout(() => {
                    yieldDistributionChart.resize();
                    yieldByRegionChart.resize();
                    yieldFactorsChart.resize();
                }, 0);
            });
            
            // 初始化图表变量
            let deviceTypeChart, deviceStatusChart, deviceAlertChart, deviceActivityChart;
            let yieldDistributionChart, yieldByRegionChart, yieldFactorsChart, yieldTrendChart;
        });
    </script>
</body>
</html>