Hugging Face's logo

Spaces:
maomaobj
/
apple2
Running

App Files Community
maomaobj commited on
Commit
cffbae8
·
verified ·
1 Parent(s): bcbfd24

将“农产品供应链智能分析平台”修改为“农产品供应链智能分析” - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +353 -386
index.html CHANGED
@@ -3,453 +3,420 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>苹果园面积监测系统 - 山东省</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
 
 
 
 
 
11
 
12
- body {
13
- font-family: 'Noto Sans SC', sans-serif;
14
- background-color: #f5f7fa;
 
 
 
 
15
  }
16
 
17
- .map-container {
18
- background: linear-gradient(145deg, #e0e7ff, #ffffff);
19
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 
20
  }
21
 
22
- .data-card {
23
- backdrop-filter: blur(10px);
24
- background: rgba(255, 255, 255, 0.85);
25
- box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
26
- transition: all 0.3s ease;
 
 
27
  }
28
 
29
- .data-card:hover {
30
- transform: translateY(-5px);
31
- box-shadow: 0 12px 36px rgba(31, 38, 135, 0.2);
 
 
 
 
 
32
  }
33
 
34
- .control-panel {
35
- background: rgba(255, 255, 255, 0.9);
36
- box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
 
37
  }
38
 
39
- .timeline-slider {
40
- -webkit-appearance: none;
41
- height: 6px;
42
- background: linear-gradient(to right, #4ade80, #22c55e);
43
- border-radius: 10px;
44
  }
45
 
46
- .timeline-slider::-webkit-slider-thumb {
47
- -webkit-appearance: none;
48
- width: 20px;
49
- height: 20px;
50
- background: #fff;
51
- border: 3px solid #22c55e;
52
- border-radius: 50%;
53
- cursor: pointer;
54
  }
55
 
56
- .orchard-polygon {
57
- fill: #22c55e;
58
- opacity: 0.7;
59
- stroke: #166534;
60
- stroke-width: 0.5;
61
- transition: all 0.3s ease;
 
 
 
 
62
  }
63
 
64
- .orchard-polygon:hover {
65
- opacity: 0.9;
66
- stroke-width: 1.5;
67
- filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6));
68
  }
69
 
70
- .chart-container {
71
- min-height: 200px;
 
72
  }
73
 
74
- @media (max-width: 768px) {
75
- .dashboard-layout {
76
- flex-direction: column;
77
- }
78
-
79
- .map-container {
80
- height: 400px;
81
- }
 
 
 
 
82
  }
83
  </style>
84
  </head>
85
- <body class="bg-gray-50">
86
  <div class="container mx-auto px-4 py-6">
87
- <!-- Header -->
88
- <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
89
- <div>
90
- <h1 class="text-2xl md:text-3xl font-bold text-gray-800">苹果园面积监测系统</h1>
91
- <p class="text-gray-600">山东省苹果种植大数据分析平台</p>
92
- </div>
93
- <div class="mt-4 md:mt-0 flex items-center space-x-4">
94
- <div class="flex items-center">
95
- <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
96
- <span class="text-sm text-gray-600">实时数据更新</span>
97
- </div>
98
- <div class="text-sm text-gray-500">
99
- <i class="far fa-clock mr-1"></i>
100
- <span id="current-time">2024-06-15 14:30:25</span>
101
- </div>
102
- </div>
103
  </header>
104
 
105
- <!-- Dashboard Content -->
106
- <div class="dashboard-layout flex flex-col lg:flex-row gap-6">
107
- <!-- Left Control Panel -->
108
- <div class="control-panel w-full lg:w-64 p-4 rounded-xl">
109
- <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
110
- <i class="fas fa-sliders-h text-green-500 mr-2"></i>
111
- 控制面板
112
- </h2>
113
-
114
- <div class="space-y-6">
115
- <!-- Region Selector -->
116
- <div>
117
- <label class="block text-sm font-medium text-gray-700 mb-1">选择地区</label>
118
- <div class="relative">
119
- <select class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 rounded-lg">
120
- <option>山东省 > 烟台市 > 栖霞市</option>
121
- <option>山东省 > 烟台市 > 蓬莱区</option>
122
- <option>山东省 > 威海市 > 荣成市</option>
123
- <option>山东省 > 临沂市 > 沂水县</option>
124
- <option>山东省 > 青岛市 > 莱西市</option>
125
- </select>
126
  </div>
127
  </div>
128
-
129
- <!-- Data Type Selector -->
130
- <div>
131
- <label class="block text-sm font-medium text-gray-700 mb-1">数据类型</label>
132
- <div class="space-y-2">
133
- <div class="flex items-center">
134
- <input id="type-area" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500" checked>
135
- <label for="type-area" class="ml-2 block text-sm text-gray-700">种植面积</label>
136
- </div>
137
- <div class="flex items-center">
138
- <input id="type-yield" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500">
139
- <label for="type-yield" class="ml-2 block text-sm text-gray-700">预计产��</label>
140
- </div>
141
- <div class="flex items-center">
142
- <input id="type-health" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500">
143
- <label for="type-health" class="ml-2 block text-sm text-gray-700">生长健康度</label>
144
- </div>
 
 
 
145
  </div>
146
  </div>
147
-
148
- <!-- Time Range Selector -->
149
- <div>
150
- <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
151
- <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
152
- <span>2020</span>
153
- <span>2024</span>
 
 
 
 
 
 
154
  </div>
155
- <input type="range" min="2020" max="2024" value="2024" class="timeline-slider w-full">
156
- <div class="text-center mt-1">
157
- <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">当前: 2024年</span>
158
  </div>
159
- </div>
160
-
161
- <!-- Additional Filters -->
162
- <div>
163
- <label class="block text-sm font-medium text-gray-700 mb-2">高级筛选</label>
164
- <div class="space-y-3">
165
- <div>
166
- <label class="flex items-center">
167
- <input type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 rounded">
168
- <span class="ml-2 text-sm text-gray-700">仅显示有机种植</span>
169
- </label>
170
- </div>
171
- <div>
172
- <label class="flex items-center">
173
- <input type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 rounded">
174
- <span class="ml-2 text-sm text-gray-700">仅显示认证果园</span>
175
- </label>
176
- </div>
177
  </div>
178
  </div>
179
-
180
- <!-- Action Buttons -->
181
- <div class="pt-2 space-y-2">
182
- <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
183
- <i class="fas fa-sync-alt mr-2"></i>
184
- 更新数据
185
- </button>
186
- <button class="w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2 px-4 rounded-lg flex items-center justify-center">
187
- <i class="fas fa-download mr-2"></i>
188
- 导出报告
189
- </button>
190
- </div>
191
  </div>
192
  </div>
193
 
194
- <!-- Main Map Area -->
195
- <div class="flex-1">
196
- <div class="map-container rounded-xl overflow-hidden shadow-lg h-full">
197
- <!-- Map Header -->
198
- <div class="px-6 py-4 bg-white border-b border-gray-200 flex justify-between items-center">
199
- <h3 class="text-lg font-semibold text-gray-800 flex items-center">
200
- <i class="fas fa-map-marked-alt text-green-500 mr-2"></i>
201
- 山东省苹果种植分布图
202
- </h3>
203
- <div class="flex space-x-2">
204
- <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm flex items-center">
205
- <i class="fas fa-layer-group mr-1"></i>
206
- 图层
207
- </button>
208
- <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm flex items-center">
209
- <i class="fas fa-search mr-1"></i>
210
- 搜索
211
- </button>
212
- </div>
213
- </div>
214
-
215
- <!-- Map Visualization -->
216
- <div class="relative" style="height: 500px;">
217
- <!-- This would be replaced with an actual map library like Leaflet or Mapbox in production -->
218
- <svg id="map-svg" class="w-full h-full" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet">
219
- <!-- Simplified representation of Shandong Peninsula -->
220
- <path d="M100,100 L150,80 L200,90 L250,70 L300,100 L350,120 L400,150 L450,180 L500,200 L550,220 L600,230 L650,250 L700,270 L750,250 L700,200 L650,180 L600,150 L550,120 L500,100 L450,80 L400,70 L350,60 L300,50 L250,40 L200,30 L150,20 L100,30 Z"
221
- fill="#e0e7ff" stroke="#3b82f6" stroke-width="2"/>
222
-
223
- <!-- Sample orchard polygons - in a real app these would be actual GIS data -->
224
- <g id="orchards">
225
- <path class="orchard-polygon" d="M200,150 L220,140 L240,160 L230,180 L210,170 Z"/>
226
- <path class="orchard-polygon" d="M300,200 L320,190 L340,210 L330,230 L310,220 Z"/>
227
- <path class="orchard-polygon" d="M400,250 L420,240 L440,260 L430,280 L410,270 Z"/>
228
- <path class="orchard-polygon" d="M500,300 L520,290 L540,310 L530,330 L510,320 Z"/>
229
- <path class="orchard-polygon" d="M250,250 L270,240 L290,260 L280,280 L260,270 Z"/>
230
- <path class="orchard-polygon" d="M350,300 L370,290 L390,310 L380,330 L360,320 Z"/>
231
- <path class="orchard-polygon" d="M450,350 L470,340 L490,360 L480,380 L460,370 Z"/>
232
- <path class="orchard-polygon" d="M150,200 L170,190 L190,210 L180,230 L160,220 Z"/>
233
- <path class="orchard-polygon" d="M550,150 L570,140 L590,160 L580,180 L560,170 Z"/>
234
- <path class="orchard-polygon" d="M650,200 L670,190 L690,210 L680,230 L660,220 Z"/>
235
- </g>
236
-
237
- <!-- City markers -->
238
- <g id="city-markers">
239
- <g class="cursor-pointer" transform="translate(300, 150)">
240
- <circle cx="0" cy="0" r="8" fill="#ef4444" stroke="#fff" stroke-width="2"/>
241
- <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-red-600">烟台</text>
242
- </g>
243
- <g class="cursor-pointer" transform="translate(450, 100)">
244
- <circle cx="0" cy="0" r="8" fill="#3b82f6" stroke="#fff" stroke-width="2"/>
245
- <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-blue-600">威海</text>
246
- </g>
247
- <g class="cursor-pointer" transform="translate(200, 250)">
248
- <circle cx="0" cy="0" r="8" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
249
- <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-yellow-600">临沂</text>
250
- </g>
251
- </g>
252
- </svg>
253
 
254
- <!-- Map controls overlay -->
255
- <div class="absolute bottom-4 right-4 flex space-x-2">
256
- <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
257
- <i class="fas fa-plus text-gray-700"></i>
258
- </button>
259
- <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
260
- <i class="fas fa-minus text-gray-700"></i>
261
- </button>
262
- <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
263
- <i class="fas fa-crosshairs text-gray-700"></i>
264
- </button>
265
  </div>
266
  </div>
267
  </div>
268
  </div>
269
 
270
- <!-- Right Data Cards -->
271
- <div class="w-full lg:w-80 space-y-4">
272
- <!-- Total Area Card -->
273
- <div class="data-card p-5 rounded-xl">
274
- <div class="flex justify-between items-start mb-3">
275
- <h3 class="text-lg font-semibold text-gray-800">苹果种植总面积</h3>
276
- <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
277
- <i class="fas fa-tree mr-1"></i>
278
- 2024年
279
- </span>
280
- </div>
281
- <div class="text-3xl font-bold text-gray-900 mb-2">5,820 平方公里</div>
282
- <div class="flex items-center text-sm text-gray-600">
283
- <span class="text-green-500 mr-1">+2.3%</span>
284
- <span>较去年增长</span>
285
- </div>
286
- <div class="mt-4 pt-4 border-t border-gray-100">
287
- <div class="flex justify-between text-sm">
288
- <span class="text-gray-600">烟台市</span>
289
- <span class="font-medium">2,450 km²</span>
290
- </div>
291
- <div class="flex justify-between text-sm mt-1">
292
- <span class="text-gray-600">威海市</span>
293
- <span class="font-medium">1,280 km²</span>
294
- </div>
295
- <div class="flex justify-between text-sm mt-1">
296
- <span class="text-gray-600">临沂市</span>
297
- <span class="font-medium">980 km²</span>
298
- </div>
299
- </div>
300
  </div>
301
 
302
- <!-- City Ranking Card -->
303
- <div class="data-card p-5 rounded-xl">
304
- <h3 class="text-lg font-semibold text-gray-800 mb-4">各市面积排名</h3>
305
- <div class="chart-container">
306
- <!-- This would be replaced with a real chart library like Chart.js in production -->
307
- <div class="space-y-3">
308
- <div>
309
- <div class="flex justify-between mb-1">
310
- <span class="text-sm font-medium text-gray-700">烟台市</span>
311
- <span class="text-sm text-gray-500">42.1%</span>
312
- </div>
313
- <div class="w-full bg-gray-200 rounded-full h-2.5">
314
- <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
315
- </div>
316
- </div>
317
- <div>
318
- <div class="flex justify-between mb-1">
319
- <span class="text-sm font-medium text-gray-700">威海市</span>
320
- <span class="text-sm text-gray-500">22.0%</span>
321
- </div>
322
- <div class="w-full bg-gray-200 rounded-full h-2.5">
323
- <div class="bg-green-400 h-2.5 rounded-full" style="width: 45%"></div>
324
- </div>
325
- </div>
326
- <div>
327
- <div class="flex justify-between mb-1">
328
- <span class="text-sm font-medium text-gray-700">临沂市</span>
329
- <span class="text-sm text-gray-500">16.8%</span>
330
- </div>
331
- <div class="w-full bg-gray-200 rounded-full h-2.5">
332
- <div class="bg-green-300 h-2.5 rounded-full" style="width: 35%"></div>
333
- </div>
334
- </div>
335
- <div>
336
- <div class="flex justify-between mb-1">
337
- <span class="text-sm font-medium text-gray-700">青岛市</span>
338
- <span class="text-sm text-gray-500">8.2%</span>
339
- </div>
340
- <div class="w-full bg-gray-200 rounded-full h-2.5">
341
- <div class="bg-green-200 h-2.5 rounded-full" style="width: 20%"></div>
342
- </div>
343
- </div>
344
- <div>
345
- <div class="flex justify-between mb-1">
346
- <span class="text-sm font-medium text-gray-700">其他</span>
347
- <span class="text-sm text-gray-500">10.9%</span>
348
- </div>
349
- <div class="w-full bg-gray-200 rounded-full h-2.5">
350
- <div class="bg-green-100 h-2.5 rounded-full" style="width: 15%"></div>
351
- </div>
352
- </div>
353
- </div>
354
- </div>
355
  </div>
356
 
357
- <!-- Trend Card -->
358
- <div class="data-card p-5 rounded-xl">
359
- <h3 class="text-lg font-semibold text-gray-800 mb-4">面积年度变化趋势 (2020-2024)</h3>
360
- <div class="chart-container">
361
- <!-- Simplified trend line visualization -->
362
- <div class="relative h-40">
363
- <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
364
- <div class="absolute left-0 top-0 bottom-0 w-px bg-gray-200"></div>
365
-
366
- <!-- Year markers -->
367
- <div class="absolute bottom-0 left-0 text-xs text-gray-500">2020</div>
368
- <div class="absolute bottom-0 left-1/4 text-xs text-gray-500">2021</div>
369
- <div class="absolute bottom-0 left-2/4 text-xs text-gray-500">2022</div>
370
- <div class="absolute bottom-0 left-3/4 text-xs text-gray-500">2023</div>
371
- <div class="absolute bottom-0 right-0 text-xs text-gray-500">2024</div>
372
-
373
- <!-- Trend line -->
374
- <svg class="w-full h-full" viewBox="0 0 100 40" preserveAspectRatio="none">
375
- <path d="M0,30 L25,28 L50,26 L75,24 L100,22"
376
- fill="none"
377
- stroke="#22c55e"
378
- stroke-width="2"
379
- stroke-linecap="round"
380
- stroke-linejoin="round"/>
381
-
382
- <!-- Data points -->
383
- <circle cx="0" cy="30" r="3" fill="#22c55e"/>
384
- <circle cx="25" cy="28" r="3" fill="#22c55e"/>
385
- <circle cx="50" cy="26" r="3" fill="#22c55e"/>
386
- <circle cx="75" cy="24" r="3" fill="#22c55e"/>
387
- <circle cx="100" cy="22" r="3" fill="#22c55e"/>
388
- </svg>
389
-
390
- <!-- Value markers -->
391
- <div class="absolute top-0 left-0 text-xs text-gray-600">5,420</div>
392
- <div class="absolute top-6 left-1/4 text-xs text-gray-600">5,520</div>
393
- <div class="absolute top-12 left-2/4 text-xs text-gray-600">5,620</div>
394
- <div class="absolute top-18 left-3/4 text-xs text-gray-600">5,690</div>
395
- <div class="absolute top-24 right-0 text-xs text-gray-600">5,820</div>
396
- </div>
397
- </div>
398
  </div>
399
  </div>
400
  </div>
401
-
402
- <!-- Footer -->
403
- <footer class="mt-8 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
404
- <p>山东省农业大数据中心 © 2024 苹果产业监测系统 v2.1.5</p>
405
- <p class="mt-1">数据更新于: 2024-06-15 14:00:00</p>
406
- </footer>
407
  </div>
408
 
409
  <script>
410
- // Update current time
411
- function updateCurrentTime() {
412
- const now = new Date();
413
- const formattedTime = now.toLocaleString('zh-CN', {
414
- year: 'numeric',
415
- month: '2-digit',
416
- day: '2-digit',
417
- hour: '2-digit',
418
- minute: '2-digit',
419
- second: '2-digit',
420
- hour12: false
421
- }).replace(/\//g, '-');
422
-
423
- document.getElementById('current-time').textContent = formattedTime;
424
- }
425
-
426
- // Update time immediately and then every second
427
- updateCurrentTime();
428
- setInterval(updateCurrentTime, 1000);
429
 
430
- // Add hover effects to orchard polygons
431
- document.querySelectorAll('.orchard-polygon').forEach(polygon => {
432
- polygon.addEventListener('mouseenter', function() {
433
- this.style.filter = 'drop-shadow(0 0 8px rgba(74, 222, 128, 0.6))';
434
- this.style.opacity = '0.9';
435
- this.style.strokeWidth = '1.5';
436
- });
437
-
438
- polygon.addEventListener('mouseleave', function() {
439
- this.style.filter = 'none';
440
- this.style.opacity = '0.7';
441
- this.style.strokeWidth = '0.5';
442
  });
443
  });
444
 
445
- // Simple animation for data cards on load
 
 
 
 
 
446
  document.addEventListener('DOMContentLoaded', function() {
447
- const cards = document.querySelectorAll('.data-card');
448
- cards.forEach((card, index) => {
449
- setTimeout(() => {
450
- card.style.opacity = '1';
451
- card.style.transform = 'translateY(0)';
452
- }, index * 100);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
453
  });
454
  });
455
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>农产品供应链智能分析</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
12
  <style>
13
+ .map-container {
14
+ background-image: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
15
+ position: relative;
16
+ border-radius: 12px;
17
+ overflow: hidden;
18
+ }
19
 
20
+ .flow-line {
21
+ position: absolute;
22
+ background: linear-gradient(to right, #3b82f6, #10b981);
23
+ height: 3px;
24
+ transform-origin: left center;
25
+ animation: flow 3s infinite ease-in-out;
26
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
27
  }
28
 
29
+ @keyframes flow {
30
+ 0% { opacity: 0.3; }
31
+ 50% { opacity: 1; }
32
+ 100% { opacity: 0.3; }
33
  }
34
 
35
+ .city-dot {
36
+ position: absolute;
37
+ width: 12px;
38
+ height: 12px;
39
+ border-radius: 50%;
40
+ background-color: #3b82f6;
41
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
42
  }
43
 
44
+ .info-popup {
45
+ position: absolute;
46
+ background-color: white;
47
+ border-radius: 8px;
48
+ padding: 12px;
49
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
50
+ z-index: 10;
51
+ min-width: 150px;
52
  }
53
 
54
+ .chart-container {
55
+ background-color: white;
56
+ border-radius: 12px;
57
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
58
  }
59
 
60
+ .select-container {
61
+ background-color: white;
62
+ border-radius: 8px;
63
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 
64
  }
65
 
66
+ .dropdown {
67
+ position: relative;
68
+ display: inline-block;
69
+ width: 100%;
 
 
 
 
70
  }
71
 
72
+ .dropdown-content {
73
+ display: none;
74
+ position: absolute;
75
+ background-color: white;
76
+ width: 100%;
77
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
78
+ z-index: 1;
79
+ border-radius: 8px;
80
+ max-height: 300px;
81
+ overflow-y: auto;
82
  }
83
 
84
+ .dropdown:hover .dropdown-content {
85
+ display: block;
 
 
86
  }
87
 
88
+ .multi-select-item {
89
+ padding: 8px 12px;
90
+ cursor: pointer;
91
  }
92
 
93
+ .multi-select-item:hover {
94
+ background-color: #f0f9ff;
95
+ }
96
+
97
+ .multi-select-item.selected {
98
+ background-color: #3b82f6;
99
+ color: white;
100
+ }
101
+
102
+ #sankey-chart, #bar-chart, #line-chart {
103
+ width: 100%;
104
+ height: 100%;
105
  }
106
  </style>
107
  </head>
108
+ <body class="bg-gray-50 font-sans">
109
  <div class="container mx-auto px-4 py-6">
110
+ <header class="mb-6">
111
+ <h1 class="text-2xl font-bold text-gray-800">农产品供应链智能分析</h1>
112
+ <p class="text-gray-600">烟台苹果流通数据分析</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  </header>
114
 
115
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
116
+ <!-- 左侧控制面板 -->
117
+ <div class="lg:col-span-3 space-y-4">
118
+ <div class="select-container p-4">
119
+ <h3 class="font-medium text-gray-700 mb-2">产区选择</h3>
120
+ <div class="dropdown">
121
+ <button class="w-full px-4 py-2 text-left border border-gray-200 rounded-lg bg-white flex justify-between items-center">
122
+ <span>烟台市</span>
123
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
124
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
125
+ </svg>
126
+ </button>
127
+ <div class="dropdown-content mt-1">
128
+ <div class="p-2 hover:bg-blue-50 cursor-pointer">烟台市</div>
129
+ <div class="p-2 hover:bg-blue-50 cursor-pointer">威海市</div>
130
+ <div class="p-2 hover:bg-blue-50 cursor-pointer">青岛市</div>
 
 
 
 
 
131
  </div>
132
  </div>
133
+ </div>
134
+
135
+ <div class="select-container p-4">
136
+ <h3 class="font-medium text-gray-700 mb-2">销区选择</h3>
137
+ <div class="dropdown">
138
+ <button class="w-full px-4 py-2 text-left border border-gray-200 rounded-lg bg-white flex justify-between items-center">
139
+ <span>已选择 4 个城市</span>
140
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
141
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
142
+ </svg>
143
+ </button>
144
+ <div class="dropdown-content mt-1 p-2">
145
+ <div class="multi-select-item selected">北京市</div>
146
+ <div class="multi-select-item selected">上海市</div>
147
+ <div class="multi-select-item selected">广州市</div>
148
+ <div class="multi-select-item selected">成都市</div>
149
+ <div class="multi-select-item">深圳市</div>
150
+ <div class="multi-select-item">杭州市</div>
151
+ <div class="multi-select-item">武汉市</div>
152
+ <div class="multi-select-item">南京市</div>
153
  </div>
154
  </div>
155
+ </div>
156
+
157
+ <div class="select-container p-4">
158
+ <h3 class="font-medium text-gray-700 mb-2">时间范围</h3>
159
+ <input type="text" id="date-range" class="w-full px-4 py-2 border border-gray-200 rounded-lg bg-white" placeholder="选择日期范围" readonly>
160
+ </div>
161
+
162
+ <div class="select-container p-4">
163
+ <h3 class="font-medium text-gray-700 mb-2">数据概览</h3>
164
+ <div class="space-y-3">
165
+ <div class="flex justify-between items-center">
166
+ <span class="text-gray-600">总流通量</span>
167
+ <span class="font-medium">12.8 万吨</span>
168
  </div>
169
+ <div class="flex justify-between items-center">
170
+ <span class="text-gray-600">平均价格</span>
171
+ <span class="font-medium">¥6.5/公斤</span>
172
  </div>
173
+ <div class="flex justify-between items-center">
174
+ <span class="text-gray-600">流通效率</span>
175
+ <span class="font-medium">92.4%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
176
  </div>
177
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
  </div>
180
 
181
+ <!-- 中间地图区域 -->
182
+ <div class="lg:col-span-6">
183
+ <div class="map-container h-full p-4">
184
+ <div class="relative h-full w-full" id="china-map">
185
+ <!-- 这里放置中国地图和流动线条 -->
186
+ <div class="city-dot" style="top: 30%; left: 40%;" data-city="烟台"></div>
187
+ <div class="city-dot" style="top: 25%; left: 50%;" data-city="北京"></div>
188
+ <div class="city-dot" style="top: 40%; left: 60%;" data-city="上海"></div>
189
+ <div class="city-dot" style="top: 60%; left: 55%;" data-city="广州"></div>
190
+ <div class="city-dot" style="top: 50%; left: 40%;" data-city="成都"></div>
191
+
192
+ <div class="flow-line" style="width: 150px; top: 32%; left: 42%; transform: rotate(15deg);"></div>
193
+ <div class="flow-line" style="width: 200px; top: 35%; left: 42%; transform: rotate(25deg);"></div>
194
+ <div class="flow-line" style="width: 180px; top: 40%; left: 42%; transform: rotate(35deg);"></div>
195
+ <div class="flow-line" style="width: 220px; top: 45%; left: 42%; transform: rotate(45deg);"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
 
197
+ <div class="info-popup" style="top: 42%; left: 62%;">
198
+ <div class="font-medium text-gray-800">上海市</div>
199
+ <div class="text-blue-600">流入总量: 2.5万吨</div>
200
+ <div class="text-sm text-gray-500">同比增长: +12.3%</div>
 
 
 
 
 
 
 
201
  </div>
202
  </div>
203
  </div>
204
  </div>
205
 
206
+ <!-- 右侧数据可视化 -->
207
+ <div class="lg:col-span-3 space-y-4">
208
+ <div class="chart-container p-4 h-64">
209
+ <h3 class="font-medium text-gray-700 mb-2">烟台苹果-主要流向分析</h3>
210
+ <div id="sankey-chart"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  </div>
212
 
213
+ <div class="chart-container p-4 h-64">
214
+ <h3 class="font-medium text-gray-700 mb-2">TOP 10 销往城市</h3>
215
+ <div id="bar-chart"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
 
218
+ <div class="chart-container p-4 h-64">
219
+ <h3 class="font-medium text-gray-700 mb-2">价格关联性分析</h3>
220
+ <div id="line-chart"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
  </div>
222
  </div>
223
  </div>
 
 
 
 
 
 
224
  </div>
225
 
226
  <script>
227
+ // 初始化日期选择器
228
+ flatpickr("#date-range", {
229
+ mode: "range",
230
+ defaultDate: ["2024-01-01", "2024-12-31"],
231
+ locale: "zh"
232
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
233
 
234
+ // 多选功能
235
+ document.querySelectorAll('.multi-select-item').forEach(item => {
236
+ item.addEventListener('click', function() {
237
+ this.classList.toggle('selected');
238
+ updateSelectedCount();
 
 
 
 
 
 
 
239
  });
240
  });
241
 
242
+ function updateSelectedCount() {
243
+ const selectedCount = document.querySelectorAll('.multi-select-item.selected').length;
244
+ document.querySelector('.dropdown button span').textContent = `已选择 ${selectedCount} 个城市`;
245
+ }
246
+
247
+ // 初始化图表
248
  document.addEventListener('DOMContentLoaded', function() {
249
+ // Sankey 图
250
+ const sankeyChart = echarts.init(document.getElementById('sankey-chart'));
251
+ const sankeyOption = {
252
+ series: [{
253
+ type: 'sankey',
254
+ layout: 'none',
255
+ data: [
256
+ {name: '烟台市'},
257
+ {name: '北京市'},
258
+ {name: '上海市'},
259
+ {name: '广州市'},
260
+ {name: '成都市'}
261
+ ],
262
+ links: [
263
+ {source: '烟台市', target: '北京市', value: 4.2},
264
+ {source: '烟台市', target: '上海市', value: 2.5},
265
+ {source: '烟台市', target: '广州市', value: 3.1},
266
+ {source: '烟台市', target: '成都市', value: 1.8}
267
+ ],
268
+ label: {
269
+ color: '#4b5563'
270
+ },
271
+ itemStyle: {
272
+ color: '#3b82f6'
273
+ },
274
+ lineStyle: {
275
+ color: 'source',
276
+ opacity: 0.6
277
+ }
278
+ }]
279
+ };
280
+ sankeyChart.setOption(sankeyOption);
281
+
282
+ // 柱状图
283
+ const barChart = echarts.init(document.getElementById('bar-chart'));
284
+ const barOption = {
285
+ tooltip: {
286
+ trigger: 'axis',
287
+ axisPointer: {
288
+ type: 'shadow'
289
+ }
290
+ },
291
+ grid: {
292
+ left: '3%',
293
+ right: '4%',
294
+ bottom: '3%',
295
+ containLabel: true
296
+ },
297
+ xAxis: {
298
+ type: 'value',
299
+ axisLine: {
300
+ lineStyle: {
301
+ color: '#9ca3af'
302
+ }
303
+ },
304
+ axisLabel: {
305
+ color: '#6b7280'
306
+ }
307
+ },
308
+ yAxis: {
309
+ type: 'category',
310
+ data: ['北京市', '上海市', '广州市', '成都市', '深圳市', '杭州市', '武汉市', '南京市', '重庆市', '天津市'],
311
+ axisLine: {
312
+ lineStyle: {
313
+ color: '#9ca3af'
314
+ }
315
+ },
316
+ axisLabel: {
317
+ color: '#6b7280'
318
+ }
319
+ },
320
+ series: [{
321
+ name: '流通量(万吨)',
322
+ type: 'bar',
323
+ data: [4.2, 2.5, 3.1, 1.8, 1.2, 0.9, 0.7, 0.6, 0.5, 0.4],
324
+ itemStyle: {
325
+ color: function(params) {
326
+ const colorList = ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe'];
327
+ return colorList[params.dataIndex % colorList.length];
328
+ }
329
+ }
330
+ }]
331
+ };
332
+ barChart.setOption(barOption);
333
+
334
+ // 折线图
335
+ const lineChart = echarts.init(document.getElementById('line-chart'));
336
+ const lineOption = {
337
+ tooltip: {
338
+ trigger: 'axis'
339
+ },
340
+ legend: {
341
+ data: ['烟台市(产地)', '北京市', '上海市'],
342
+ textStyle: {
343
+ color: '#4b5563'
344
+ }
345
+ },
346
+ grid: {
347
+ left: '3%',
348
+ right: '4%',
349
+ bottom: '3%',
350
+ containLabel: true
351
+ },
352
+ xAxis: {
353
+ type: 'category',
354
+ boundaryGap: false,
355
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
356
+ axisLine: {
357
+ lineStyle: {
358
+ color: '#9ca3af'
359
+ }
360
+ },
361
+ axisLabel: {
362
+ color: '#6b7280'
363
+ }
364
+ },
365
+ yAxis: {
366
+ type: 'value',
367
+ axisLine: {
368
+ lineStyle: {
369
+ color: '#9ca3af'
370
+ }
371
+ },
372
+ axisLabel: {
373
+ color: '#6b7280',
374
+ formatter: '{value} ¥'
375
+ }
376
+ },
377
+ series: [
378
+ {
379
+ name: '烟台市(产地)',
380
+ type: 'line',
381
+ data: [5.2, 5.5, 5.8, 6.2, 6.5, 6.3, 6.0, 5.8, 5.5, 5.2, 5.0, 4.8],
382
+ itemStyle: {
383
+ color: '#3b82f6'
384
+ },
385
+ lineStyle: {
386
+ width: 3
387
+ }
388
+ },
389
+ {
390
+ name: '北京市',
391
+ type: 'line',
392
+ data: [6.5, 6.8, 7.0, 7.2, 7.5, 7.3, 7.0, 6.8, 6.5, 6.2, 6.0, 5.8],
393
+ itemStyle: {
394
+ color: '#10b981'
395
+ },
396
+ lineStyle: {
397
+ width: 3
398
+ }
399
+ },
400
+ {
401
+ name: '上海市',
402
+ type: 'line',
403
+ data: [6.8, 7.0, 7.2, 7.5, 7.8, 7.5, 7.2, 7.0, 6.8, 6.5, 6.2, 6.0],
404
+ itemStyle: {
405
+ color: '#f59e0b'
406
+ },
407
+ lineStyle: {
408
+ width: 3
409
+ }
410
+ }
411
+ ]
412
+ };
413
+ lineChart.setOption(lineOption);
414
+
415
+ // 响应式调整图表大小
416
+ window.addEventListener('resize', function() {
417
+ sankeyChart.resize();
418
+ barChart.resize();
419
+ lineChart.resize();
420
  });
421
  });
422
  </script>