Hugging Face's logo

Spaces:
maomaobj
/
nongye11
Running

App Files Community
maomaobj commited on
Commit
dde95be
·
verified ·
1 Parent(s): d7398ce

设计一个“技能人才数据统计分析页面”，用于政务后台管理。页面风格简洁大方、政务化，主色调为绿色+灰白，内容清晰易读，适配PC大屏。 页面用于展示技能人才的统计信息，支持管理员查看按“年龄段”、“技能类型”、“所属地区”等维度的统计报表与图表分析。 页面布局如下： 1. 页面顶部（深蓝色横栏）： - 页面标题：“技能人才数据统计” - 页面右上角显示管理员头像和“退出登录”按钮 2. 筛选与条件栏（灰色背景）： - 设置下拉筛选条件，字段包括： - 技能类型（农机操作、果树修剪、茶艺、电商等） - 地区（全国、省、市三级联动） - 年龄段（18-25、26-35、36-45、46以上） - 时间范围（支持选择年/月范围） - 一个蓝色按钮【查询统计】 3. 数据看板区（白色卡片）： - 显示四个核心数字指标（大字卡片风格）： - 技能人才总数：25,348人 - 本年新增：4,212人 - 参与培训人数：16,120人 - 获得认证证书人数：13,765人 4. 可视化图表区（浅灰背景）： - 使用图表展示统计信息： - 条形图：不同技能类型对应人数（农机：8,421人，茶艺：3,274人等） - 饼图：人才年龄结构占比（18-25岁：15%，26-35岁：35%，等） - 热力地图：中国地图分省展示技能人才分布（人数越多颜色越深） - 折线图：过去12个月人才增长趋势 5. 报表导出功能： - 页面右上角提供【导出Excel】【生成PDF报表】按钮 - 支持下载当前筛选条件下的全部统计数据和图表 6. 底部说明区： - 提示说明：数据来源、更新时间（如：数据截至2025年6月30日） - 联系方式：统计口业务负责人邮箱、电话等 设计要求： - 各模块色块清晰分隔 - 图表色彩合理（蓝、橙、绿为主） - 信息密度适中，支持鼠标悬停显示详细数据 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +561 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nongye11
3
- emoji: 📚
4
  colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nongye11
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,561 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1b5936',
16
+ secondary: '#2c9b5e',
17
+ light: '#e6f4ea',
18
+ dark: '#1a3a27',
19
+ neutral: '#f1f5f9'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Noto Sans SC', sans-serif;
30
+ background-color: #f9fbfa;
31
+ color: #333;
32
+ }
33
+
34
+ .chart-container {
35
+ background: white;
36
+ border-radius: 8px;
37
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .chart-container:hover {
42
+ box-shadow: 0 6px 12px rgba(0,0,0,0.1);
43
+ transform: translateY(-2px);
44
+ }
45
+
46
+ .stat-card {
47
+ transition: transform 0.3s ease;
48
+ }
49
+
50
+ .stat-card:hover {
51
+ transform: scale(1.03);
52
+ }
53
+
54
+ #map-container {
55
+ height: 100%;
56
+ min-height: 300px;
57
+ }
58
+
59
+ .map-point {
60
+ position: absolute;
61
+ width: 12px;
62
+ height: 12px;
63
+ background: #2c9b5e;
64
+ border: 2px solid white;
65
+ border-radius: 50%;
66
+ box-shadow: 0 0 5px rgba(0,0,0,0.2);
67
+ transform: translate(-50%, -50%);
68
+ }
69
+
70
+ .map-point:hover {
71
+ transform: translate(-50%, -50%) scale(1.5);
72
+ z-index: 10;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-neutral-100">
77
+ <!-- 顶部导航栏 -->
78
+ <header class="bg-primary text-white shadow-md">
79
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
80
+ <h1 class="text-xl font-bold flex items-center">
81
+ <i class="fas fa-chart-line mr-2"></i>技能人才数据统计
82
+ </h1>
83
+ <div class="flex items-center">
84
+ <button class="bg-secondary hover:bg-green-700 text-white px-4 py-2 rounded mr-4 flex items-center">
85
+ <i class="fas fa-file-excel mr-2"></i>导出Excel
86
+ </button>
87
+ <button class="bg-secondary hover:bg-green-700 text-white px-4 py-2 rounded mr-4 flex items-center">
88
+ <i class="fas fa-file-pdf mr-2"></i>生成PDF报表
89
+ </button>
90
+ <div class="relative group">
91
+ <div class="flex items-center cursor-pointer">
92
+ <img src="https://randomuser.me/api/portraits/men/41.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="管理员">
93
+ <span class="ml-2">张主任</span>
94
+ <i class="fas fa-chevron-down ml-2 text-sm"></i>
95
+ </div>
96
+ <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-10">
97
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 flex items-center">
98
+ <i class="fas fa-user mr-2 text-sm"></i>个人中心
99
+ </a>
100
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 flex items-center">
101
+ <i class="fas fa-cog mr-2 text-sm"></i>系统设置
102
+ </a>
103
+ <div class="border-t border-gray-200 my-1"></div>
104
+ <a href="#" class="block px-4 py-2 text-red-500 hover:bg-gray-100 flex items-center">
105
+ <i class="fas fa-sign-out-alt mr-2"></i>退出登录
106
+ </a>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </header>
112
+
113
+ <!-- 筛选区域 -->
114
+ <div class="bg-gray-100 py-4 shadow-inner">
115
+ <div class="container mx-auto px-4">
116
+ <div class="flex flex-wrap items-center gap-4">
117
+ <div class="flex-1">
118
+ <label class="block text-sm font-medium text-gray-700 mb-1">技能类型</label>
119
+ <div class="relative">
120
+ <select class="w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary">
121
+ <option>全部类型</option>
122
+ <option selected>农机操作</option>
123
+ <option>果树修剪</option>
124
+ <option>茶艺</option>
125
+ <option>电商</option>
126
+ <option>烹饪</option>
127
+ <option>家政服务</option>
128
+ </select>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="flex-1">
133
+ <label class="block text-sm font-medium text-gray-700 mb-1">地区</label>
134
+ <div class="grid grid-cols-3 gap-2">
135
+ <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary">
136
+ <option>全国</option>
137
+ <option>东部</option>
138
+ <option>西部</option>
139
+ </select>
140
+ <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary">
141
+ <option>全部省份</option>
142
+ <option>江苏省</option>
143
+ </select>
144
+ <select class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary">
145
+ <option>全部城市</option>
146
+ <option>南京市</option>
147
+ </select>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="flex-1">
152
+ <label class="block text-sm font-medium text-gray-700 mb-1">年龄段</label>
153
+ <select class="w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary">
154
+ <option>全部</option>
155
+ <option>18-25岁</option>
156
+ <option selected>26-35岁</option>
157
+ <option>36-45岁</option>
158
+ <option>46岁以上</option>
159
+ </select>
160
+ </div>
161
+
162
+ <div class="flex-1">
163
+ <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
164
+ <div class="grid grid-cols-2 gap-2">
165
+ <input type="month" class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary" value="2025-01">
166
+ <input type="month" class="bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary-light focus:border-primary" value="2025-06">
167
+ </div>
168
+ </div>
169
+
170
+ <div class="self-end">
171
+ <button class="bg-primary hover:bg-dark text-white px-6 py-2.5 rounded-md flex items-center font-medium">
172
+ <i class="fas fa-search mr-2"></i>查询统计
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- 数据看板区 -->
180
+ <div class="container mx-auto px-4 py-6">
181
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
182
+ <i class="fas fa-tachometer-alt mr-2 text-primary"></i>核心数据指标
183
+ </h2>
184
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
185
+ <!-- 卡片 1 -->
186
+ <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-primary overflow-hidden">
187
+ <div class="p-5">
188
+ <div class="flex justify-between items-center">
189
+ <div>
190
+ <p class="text-gray-500 text-sm">技能人才总数</p>
191
+ <p class="text-3xl font-bold mt-1 text-gray-800">25,348</p>
192
+ <p class="text-green-600 text-sm mt-2 flex items-center">
193
+ <i class="fas fa-arrow-up mr-1"></i>较上月增长 5.2%
194
+ </p>
195
+ </div>
196
+ <div class="bg-primary-light bg-opacity-20 p-3 rounded-full">
197
+ <i class="fas fa-users text-primary text-2xl"></i>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500">
202
+ <i class="fas fa-info-circle mr-1"></i>涵盖所有技能类型人才
203
+ </div>
204
+ </div>
205
+
206
+ <!-- 卡片 2 -->
207
+ <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-green-500 overflow-hidden">
208
+ <div class="p-5">
209
+ <div class="flex justify-between items-center">
210
+ <div>
211
+ <p class="text-gray-500 text-sm">本年新增</p>
212
+ <p class="text-3xl font-bold mt-1 text-gray-800">4,212</p>
213
+ <p class="text-green-600 text-sm mt-2 flex items-center">
214
+ <i class="fas fa-arrow-up mr-1"></i>较去年同期增长 12.6%
215
+ </p>
216
+ </div>
217
+ <div class="bg-green-100 p-3 rounded-full">
218
+ <i class="fas fa-user-plus text-green-600 text-2xl"></i>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500">
223
+ <i class="fas fa-info-circle mr-1"></i>统计时间：2025年1月-6月
224
+ </div>
225
+ </div>
226
+
227
+ <!-- 卡片 3 -->
228
+ <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-blue-500 overflow-hidden">
229
+ <div class="p-5">
230
+ <div class="flex justify-between items-center">
231
+ <div>
232
+ <p class="text-gray-500 text-sm">参与培训人数</p>
233
+ <p class="text-3xl font-bold mt-1 text-gray-800">16,120</p>
234
+ <p class="text-green-600 text-sm mt-2 flex items-center">
235
+ <i class="fas fa-arrow-up mr-1"></i>培训完成率 87.4%
236
+ </p>
237
+ </div>
238
+ <div class="bg-blue-100 p-3 rounded-full">
239
+ <i class="fas fa-graduation-cap text-blue-500 text-2xl"></i>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500">
244
+ <i class="fas fa-info-circle mr-1"></i>2025年度培训计划
245
+ </div>
246
+ </div>
247
+
248
+ <!-- 卡片 4 -->
249
+ <div class="stat-card bg-white rounded-xl shadow-md border-l-4 border-yellow-500 overflow-hidden">
250
+ <div class="p-5">
251
+ <div class="flex justify-between items-center">
252
+ <div>
253
+ <p class="text-gray-500 text-sm">获得认证证书人数</p>
254
+ <p class="text-3xl font-bold mt-1 text-gray-800">13,765</p>
255
+ <p class="text-gray-600 text-sm mt-2 flex items-center">
256
+ <i class="fas fa-certificate mr-1 text-yellow-500"></i>认证通过率 85.3%
257
+ </p>
258
+ </div>
259
+ <div class="bg-yellow-100 p-3 rounded-full">
260
+ <i class="fas fa-award text-yellow-500 text-2xl"></i>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="bg-gray-50 px-5 py-2 text-xs text-gray-500">
265
+ <i class="fas fa-info-circle mr-1"></i>国家认可的职业资格证书
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- 图表化展示区域 -->
272
+ <div class="py-5 bg-gray-50">
273
+ <div class="container mx-auto px-4">
274
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
275
+ <i class="fas fa-chart-pie mr-2 text-primary"></i>数据可视化分析
276
+ </h2>
277
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
278
+ <!-- 技能类型分布柱状图 -->
279
+ <div class="chart-container p-4">
280
+ <div class="text-lg font-medium text-gray-700 mb-3 flex items-center">
281
+ <i class="fas fa-chart-bar mr-2 text-primary"></i>技能人才类型分布
282
+ </div>
283
+ <div class="h-72">
284
+ <canvas id="skillsChart"></canvas>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- 年龄结构饼图 -->
289
+ <div class="chart-container p-4">
290
+ <div class="text-lg font-medium text-gray-700 mb-3 flex items-center">
291
+ <i class="fas fa-chart-pie mr-2 text-primary"></i>人才年龄结构
292
+ </div>
293
+ <div class="h-72">
294
+ <canvas id="ageChart"></canvas>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
300
+ <!-- 人才分布地图 -->
301
+ <div class="chart-container p-4">
302
+ <div class="text-lg font-medium text-gray-700 mb-3 flex items-center">
303
+ <i class="fas fa-map-marked-alt mr-2 text-primary"></i>技能人才地域分布
304
+ </div>
305
+ <div class="h-72 relative" id="map-container">
306
+ <div class="map-point" style="top: 30%; left: 25%;" data-region="江苏" data-count="5840">
307
+ <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs opacity-0 transition-opacity pointer-events-none">
308
+ <div>江苏省</div>
309
+ <div>5840人</div>
310
+ </div>
311
+ </div>
312
+ <div class="map-point" style="top: 35%; left: 30%;" data-region="浙江" data-count="4120">
313
+ <div class="map-tooltip">浙江省: 4120人</div>
314
+ </div>
315
+ <div class="map-point" style="top: 40%; left: 20%;" data-region="安徽" data-count="3200">
316
+ <div class="map-tooltip">安徽省: 3200人</div>
317
+ </div>
318
+ <div class="map-point" style="top: 27%; left: 50%;" data-region="山东" data-count="3800">
319
+ <div class="map-tooltip">山东省: 3800人</div>
320
+ </div>
321
+ <div class="map-point" style="top: 55%; left: 35%;" data-region="广东" data-count="5200">
322
+ <div class="map-tooltip">广东省: 5200人</div>
323
+ </div>
324
+ <div class="map-point" style="top: 50%; left: 45%;" data-region="湖南" data-count="2800">
325
+ <div class="map-tooltip">湖南省: 2800人</div>
326
+ </div>
327
+ <div class="map-point" style="top: 45%; left: 40%;" data-region="湖北" data-count="2650">
328
+ <div class="map-tooltip">湖北省: 2650人</div>
329
+ </div>
330
+ <div class="map-point" style="top: 32%; left: 60%;" data-region="辽宁" data-count="2380">
331
+ <div class="map-tooltip">辽宁省: 2380人</div>
332
+ </div>
333
+ <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cGF0aCBkPSJNNTAsMTAwTDEwMCwxNTBMMTUwLDEyMEwyMDAsMTYwTDI1MCwxMzBMMzAwLDE4MEwzNTAsMTUwTDQwMCwyMDAiIHN0cm9rZT0iIzhjOGM4YyIgZmlsbD0ibm9uZSIvPjwvZz48cGF0aCBkPSJNNTAsNTAwTDEwMCwzNTBMMTUwLDM1MEwyMDAsMzAwTDI1MCwzNTBMMzAwLDMwMEwzNTAsMjUwTDQwMCwzMDAiIHN0cm9rZT0iIzhjOGM4YyIgZmlsbD0iI2YxZjVmOSIvPjwvc3ZnPg==" alt="中国地图" class="w-full h-full object-contain filter brightness(97%)">
334
+ </div>
335
+ </div>
336
+
337
+ <!-- 增长趋势折线图 -->
338
+ <div class="chart-container p-4">
339
+ <div class="text-lg font-medium text-gray-700 mb-3 flex items-center">
340
+ <i class="fas fa-chart-line mr-2 text-primary"></i>人才增长趋势 (近12个月)
341
+ </div>
342
+ <div class="h-72">
343
+ <canvas id="growthChart"></canvas>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- 底部信息 -->
351
+ <footer class="bg-gray-100 py-4 border-t border-gray-200">
352
+ <div class="container mx-auto px-4">
353
+ <div class="flex flex-col md:flex-row justify-between">
354
+ <div class="mb-3 md:mb-0">
355
+ <p class="text-sm text-gray-600">
356
+ <i class="fas fa-database mr-1 text-gray-500"></i>数据来源：国家职业技能人才信息系统
357
+ </p>
358
+ <p class="text-sm text-gray-600 mt-1">
359
+ <i class="fas fa-sync-alt mr-1 text-gray-500"></i>最后更新时间：2025年6月30日 15:42
360
+ </p>
361
+ </div>
362
+ <div>
363
+ <p class="text-sm text-gray-600 flex items-center">
364
+ <i class="fas fa-envelope mr-1 text-gray-500"></i>业务支持邮箱：rencai@stats.gov.cn
365
+ </p>
366
+ <p class="text-sm text-gray-600 mt-1 flex items-center">
367
+ <i class="fas fa-phone-alt mr-1 text-gray-500"></i>联系电话：010-12345678
368
+ </p>
369
+ </div>
370
+ </div>
371
+ <div class="mt-4 pt-3 border-t border-gray-200 text-center text-xs text-gray-500">
372
+ © 2025 人力资源和社会保障部职业技能人才数据中心版权所有
373
+ </div>
374
+ </div>
375
+ </footer>
376
+
377
+ <script>
378
+ // 初始化区域地图提示点
379
+ document.querySelectorAll('.map-point').forEach(point => {
380
+ const tooltip = point.querySelector('.map-tooltip');
381
+
382
+ point.addEventListener('mouseenter', () => {
383
+ point.style.zIndex = '100';
384
+ if (tooltip) tooltip.classList.remove('opacity-0');
385
+ });
386
+
387
+ point.addEventListener('mouseleave', () => {
388
+ point.style.zIndex = '1';
389
+ if (tooltip) tooltip.classList.add('opacity-0');
390
+ });
391
+ });
392
+
393
+ // 设置地图点的不同大小
394
+ document.querySelectorAll('.map-point').forEach(point => {
395
+ const count = parseInt(point.getAttribute('data-count'));
396
+ const size = 8 + Math.sqrt(count) * 0.3; // 根据人数设置点的不同大小
397
+ point.style.width = `${size}px`;
398
+ point.style.height = `${size}px`;
399
+ });
400
+
401
+ // 图表初始化 - 技能分布图表（柱状图）
402
+ const skillsCtx = document.getElementById('skillsChart').getContext('2d');
403
+ const skillsChart = new Chart(skillsCtx, {
404
+ type: 'bar',
405
+ data: {
406
+ labels: ['农机操作', '果树修剪', '茶艺', '电商', '烹饪', '家政服务', '美容美发'],
407
+ datasets: [{
408
+ label: '人才数量 (人)',
409
+ data: [6421, 3875, 3274, 4521, 2852, 3170, 2235],
410
+ backgroundColor: [
411
+ 'rgba(43, 155, 94, 0.7)',
412
+ 'rgba(66, 133, 244, 0.7)',
413
+ 'rgba(242, 169, 0, 0.7)',
414
+ 'rgba(219, 68, 55, 0.7)',
415
+ 'rgba(101, 31, 255, 0.7)',
416
+ 'rgba(15, 157, 88, 0.7)',
417
+ 'rgba(194, 24, 91, 0.7)'
418
+ ],
419
+ borderColor: [
420
+ 'rgb(43, 155, 94)',
421
+ 'rgb(66, 133, 244)',
422
+ 'rgb(242, 169, 0)',
423
+ 'rgb(219, 68, 55)',
424
+ 'rgb(101, 31, 255)',
425
+ 'rgb(15, 157, 88)',
426
+ 'rgb(194, 24, 91)'
427
+ ],
428
+ borderWidth: 1
429
+ }]
430
+ },
431
+ options: {
432
+ responsive: true,
433
+ maintainAspectRatio: false,
434
+ plugins: {
435
+ tooltip: {
436
+ callbacks: {
437
+ label: function(context) {
438
+ return `${context.label}: ${context.raw.toLocaleString()}人`;
439
+ }
440
+ }
441
+ },
442
+ legend: {
443
+ display: false
444
+ }
445
+ },
446
+ scales: {
447
+ y: {
448
+ beginAtZero: true,
449
+ ticks: {
450
+ callback: function(value) {
451
+ return value.toLocaleString();
452
+ }
453
+ }
454
+ }
455
+ }
456
+ }
457
+ });
458
+
459
+ // 图表初始化 - 年龄结构（饼图）
460
+ const ageCtx = document.getElementById('ageChart').getContext('2d');
461
+ const ageChart = new Chart(ageCtx, {
462
+ type: 'doughnut',
463
+ data: {
464
+ labels: ['18-25岁', '26-35岁', '36-45岁', '46岁以上'],
465
+ datasets: [{
466
+ data: [15, 35, 28, 22],
467
+ backgroundColor: [
468
+ 'rgba(43, 155, 94, 0.8)',
469
+ 'rgba(66, 133, 244, 0.8)',
470
+ 'rgba(242, 169, 0, 0.8)',
471
+ 'rgba(219, 68, 55, 0.8)'
472
+ ],
473
+ borderColor: [
474
+ 'rgba(43, 155, 94, 1)',
475
+ 'rgba(66, 133, 244, 1)',
476
+ 'rgba(242, 169, 0, 1)',
477
+ 'rgba(219, 68, 55, 1)'
478
+ ],
479
+ borderWidth: 1
480
+ }]
481
+ },
482
+ options: {
483
+ responsive: true,
484
+ maintainAspectRatio: false,
485
+ plugins: {
486
+ legend: {
487
+ position: 'right',
488
+ },
489
+ tooltip: {
490
+ callbacks: {
491
+ label: function(context) {
492
+ const label = context.label || '';
493
+ const value = context.raw || 0;
494
+ const sum = context.dataset.data.reduce((a, b) => a + b, 0);
495
+ const percentage = Math.round(value / sum * 100);
496
+ return `${label}: ${value}% (${Math.round((value/100)*25348).toLocaleString()}人)`;
497
+ }
498
+ }
499
+ }
500
+ }
501
+ }
502
+ });
503
+
504
+ // 图表初始化 - 增长趋势（折线图）
505
+ const growthCtx = document.getElementById('growthChart').getContext('2d');
506
+ const growthChart = new Chart(growthCtx, {
507
+ type: 'line',
508
+ data: {
509
+ labels: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
510
+ datasets: [{
511
+ label: '新增人数',
512
+ data: [620, 580, 650, 710, 685, 720, 810, 880, 790, 820, 840, 880],
513
+ fill: false,
514
+ borderColor: 'rgb(43, 155, 94)',
515
+ backgroundColor: 'rgba(43, 155, 94, 0.2)',
516
+ tension: 0.3,
517
+ borderWidth: 3,
518
+ pointBackgroundColor: 'white',
519
+ pointBorderColor: 'rgb(43, 155, 94)',
520
+ pointRadius: 5,
521
+ pointHoverRadius: 7
522
+ }]
523
+ },
524
+ options: {
525
+ responsive: true,
526
+ maintainAspectRatio: false,
527
+ plugins: {
528
+ tooltip: {
529
+ callbacks: {
530
+ label: function(context) {
531
+ return `新增人数: ${context.raw}人`;
532
+ }
533
+ }
534
+ }
535
+ },
536
+ scales: {
537
+ y: {
538
+ beginAtZero: false,
539
+ min: 500,
540
+ ticks: {
541
+ callback: function(value) {
542
+ return value.toLocaleString();
543
+ }
544
+ }
545
+ }
546
+ }
547
+ }
548
+ });
549
+
550
+ // 设置筛选条件按钮点击效果
551
+ document.querySelectorAll('select, input').forEach(elem => {
552
+ elem.addEventListener('change', () => {
553
+ document.querySelector('.bg-primary').classList.add('animate-pulse');
554
+ setTimeout(() => {
555
+ document.querySelector('.bg-primary').classList.remove('animate-pulse');
556
+ }, 500);
557
+ });
558
+ });
559
+ </script>
560
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/nongye11" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
561
+ </html>