许静 5 vuotta sitten
vanhempi
commit
e6be59811b

+ 2
- 0
.gitignore Näytä tiedosto

@@ -38,3 +38,5 @@ screenshot
38 38
 .eslintcache
39 39
 
40 40
 build
41
+
42
+config/proxy.js

+ 4
- 348
config/config.js Näytä tiedosto

@@ -2,6 +2,9 @@ import defaultSettings from './defaultSettings'; // https://umijs.org/config/
2 2
 
3 3
 import slash from 'slash2';
4 4
 import webpackPlugin from './plugin.config';
5
+import routes from './routes';
6
+import proxy from './proxy';
7
+
5 8
 const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
6 9
 // preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。
7 10
 
@@ -82,354 +85,7 @@ export default {
82 85
   },
83 86
   devtool: isAntDesignProPreview ? 'source-map' : false,
84 87
   // umi routes: https://umijs.org/zh/guide/router.html
85
-  routes: [
86
-    {
87
-      path: '/user',
88
-      component: '../layouts/UserLayout',
89
-      routes: [
90
-        {
91
-          name: 'login',
92
-          path: '/user/login',
93
-          component: './user/login',
94
-        },
95
-      ],
96
-    },
97
-    {
98
-      path: '/',
99
-      component: '../layouts/SecurityLayout',
100
-      routes: [
101
-        {
102
-          path: '/',
103
-          component: '../layouts/BasicLayout',
104
-          authority: ['admin', 'user'],
105
-          routes: [
106
-            {
107
-              path: '/',
108
-              redirect: '/welcome',
109
-            },
110
-            {
111
-              path: '/welcome',
112
-              name: '首页',
113
-              component: './Welcome',
114
-            },
115
-            {
116
-              path: '/building',
117
-              name: '项目管理',
118
-              component: '../layouts/BlankLayout',
119
-              routes: [
120
-                {
121
-                  path: '/building/list',
122
-                  name: '项目列表',
123
-                  component: './building/list/index',
124
-                },
125
-                {
126
-                  path: '/building/list/add',
127
-                  name: '项目添加', // 项目添加
128
-                  hideInMenu: true,
129
-                  component: './building/list/add/index',
130
-                },
131
-                {
132
-                  path: '/building/type',
133
-                  name: '项目类型',
134
-                  component: './building/type/index',
135
-                },
136
-                {
137
-                  path: '/building/type/edi',
138
-                  name: '项目类型编辑',
139
-                  hideInMenu: true,
140
-                  component: './building/type/edi',
141
-                },
142
-              ],
143
-            },
144
-            {
145
-              path: '/customer',
146
-              name: '客户管理',
147
-              component: '../layouts/BlankLayout',
148
-              routes: [
149
-                {
150
-                  path: '/customer/customerlist/list',
151
-                  name: '客户列表',
152
-                  component: './customer/customerlist/index',
153
-                },
154
-                {
155
-                  path: '/customer/customerlist/customerDetail',
156
-                  name: '客户编辑',
157
-                  hideInMenu: true,
158
-                  component: './customer/customerlist/customerDetail',
159
-                },
160
-                {
161
-                  path: '/customer/drift/list',
162
-                  name: '游客列表',
163
-                  component: './customer/drift/index',
164
-                },
165
-                {
166
-                  path: '/customer/report/list',
167
-                  name: '报备客户',
168
-                  component: './customer/report/index',
169
-                },
170
-                {
171
-                  path: '/customer/recommendCustomer/list',
172
-                  name: '推荐客户',
173
-                  component: './customer/recommendCustomer/index',
174
-                },
175
-                {
176
-                  path: '/customer/recommendCustomer/audit',
177
-                  name: '客户审核', 
178
-                  hideInMenu: true,
179
-                  component: './customer/recommendCustomer/audit',
180
-                },
181
-                {
182
-                  path: '/customer/independentList',
183
-                  name: '经纪人',
184
-                  component: './customer/independentList/index',
185
-                },
186
-              ],
187
-            },
188
-            {
189
-              path: '/integralMall',
190
-              name: '积分商城',
191
-              component: '../layouts/BlankLayout',
192
-              routes: [
193
-                {
194
-                  path: '/integralMall/GoodsList',
195
-                  name: '商品列表',
196
-                  component: './integralMall/GoodsList',
197
-                },
198
-                {
199
-                  path: '/integralMall/achieve',
200
-                  name: '积分获取',
201
-                  component: './integralMall/achieve',
202
-                },
203
-                {
204
-                  path: '/integralMall/editGoods',
205
-                  name: '商品编辑',
206
-                  hideInMenu: true,
207
-                  component: './integralMall/editGoods',
208
-                },
209
-                {
210
-                  path: '/integralMall/exchangeRecords',
211
-                  name: '兑换记录',
212
-                  component: './integralMall/exchangeRecords',
213
-                },
214
-                {
215
-                  path: '/integralMall/writeOff',
216
-                  name: '商品核销',
217
-                  component: './integralMall/writeOff',
218
-                },
219
-                {
220
-                  path: '/integralMall/verifyList',
221
-                  name: '商品核销列表',
222
-                  hideInMenu: true,
223
-                  component: './integralMall/verifyList',
224
-                },
225
-              ],
226
-            },
227
-            {
228
-              path: '/channel',
229
-              name: '渠道管理',
230
-              component: '../layouts/BlankLayout',
231
-              routes: [
232
-                {
233
-                  path: '/channel/channelList',
234
-                  name: '渠道管理',
235
-                  component: './channel/channelList',
236
-                },
237
-                {
238
-                  path: '/channel/addChannel',
239
-                  name: '添加渠道',
240
-                  hideInMenu: true,
241
-                  component: './channel/addChannel',
242
-                },
243
-                {
244
-                  path: '/channel/editChannel',
245
-                  name: '编辑渠道',
246
-                  hideInMenu: true,
247
-                  component: './channel/editChannel',
248
-                },
249
-                {
250
-                  path: '/channel/brokerList',
251
-                  name: '经纪人',
252
-                  component: './channel/brokerList',
253
-                },
254
-                {
255
-                  path: '/channel/recommendClients',
256
-                  name: '渠道推荐',
257
-                  hideInMenu: true,
258
-                  component: './channel/recommendClients',
259
-                },
260
-                {
261
-                  path: '/channel/InviteClients',
262
-                  name: '邀请客户',
263
-                  hideInMenu: true,
264
-                  component: './channel/InviteClients',
265
-                },
266
-              ],
267
-            },
268
-            {
269
-              path: '/news',
270
-              name: '资讯管理',
271
-              component: '../layouts/BlankLayout',
272
-              routes: [
273
-                {
274
-                  path: '/news/type/NewsType',
275
-                  name: '资讯类型',
276
-                  component: './news/type/NewsType',
277
-                },
278
-                {
279
-                  path: '/news/type/editNews',
280
-                  name: '编辑资讯类型',
281
-                  hideInMenu: true,
282
-                  component: './news/type/editNews',
283
-                },
284
-                {
285
-                  path: '/news/list/NewsList',
286
-                  name: '资讯列表',
287
-                  component: './news/list/NewsList',
288
-                },
289
-                {
290
-                  path: '/news/list/editNewsList',
291
-                  name: '编辑资讯',
292
-                  hideInMenu: true,
293
-                  component: './news/list/editNewsList',
294
-                },
295
-              ],
296
-            },
297
-            {
298
-              path: '/activity',
299
-              name: '活动管理',
300
-              component: '../layouts/BlankLayout',
301
-              routes: [
302
-                {
303
-                  path: '/activity/ActivityList',
304
-                  name: '活动列表',
305
-                  component: './activity/ActivityList',
306
-                },
307
-                {
308
-                  path: '/activity/editActivity',
309
-                  name: '编辑活动',
310
-                  hideInMenu: true,
311
-                  component: './activity/editActivity',
312
-                },
313
-                {
314
-                  path: '/activity/SignList',
315
-                  name: '报名列表',
316
-                  hideInMenu: true,
317
-                  component: './activity/SignList',
318
-                },
319
-              ],
320
-            },
321
-            {
322
-              path: '/staff',
323
-              name: '员工管理',
324
-              component: '../layouts/BlankLayout',
325
-              routes: [
326
-                {
327
-                  path: '/staff/StaffList',
328
-                  name: '员工列表',
329
-                  component: './staff/list/StaffList',
330
-                },
331
-                {
332
-                  path: '/staff/editStaff',
333
-                  name: '编辑员工',
334
-                  hideInMenu: true,
335
-                  component: './staff/list/editStaff',
336
-                },
337
-
338
-                {
339
-                  path: '/staff/RoleList',
340
-                  name: '角色管理',
341
-                  component: './staff/list/RoleList',
342
-                },
343
-                {
344
-                  path: '/staff/editRole',
345
-                  name: '编辑角色',
346
-                  hideInMenu: true,
347
-                  component: './staff/list/editRole',
348
-                },
349
-                {
350
-                  path: '/staff/list/addRole',
351
-                  name: '添加角色',
352
-                  hideInMenu: true,
353
-                  component: './staff/list/addRole',
354
-                },  
355
-              ],
356
-            },
357
-            {
358
-              path: '/carouselFigure',
359
-              name: '轮播图管理',
360
-              component: '../layouts/BlankLayout',
361
-              routes: [
362
-                {
363
-                  path: '/carouselFigure/carouselFigureList',
364
-                  name: '轮播图列表',
365
-                  component: './carouselFigure/carouselFigureList',
366
-                },
367
-                {
368
-                  path: '/carouselFigure/editCarousel',
369
-                  name: '轮播图编辑',
370
-                  hideInMenu: true,
371
-                  component: './carouselFigure/editCarousel',
372
-                },
373
-                {
374
-                  path: '/carouselFigure/advertisingList',
375
-                  name: '开屏广告',
376
-                  component: './carouselFigure/advertisingList',
377
-                },
378
-                {
379
-                  path: '/carouselFigure/editAdvertising',
380
-                  name: '开屏广告编辑',
381
-                  hideInMenu: true,
382
-                  component: './carouselFigure/editAdvertising',
383
-                },
384
-              ],
385
-            },
386
-            {
387
-              path: '/system',
388
-              name: '系统管理',
389
-              component: '../layouts/BlankLayout',
390
-              routes: [
391
-                {
392
-                  path: '/system/messageList',
393
-                  name: '客户留言',
394
-                  component: './system/messageList',
395
-                },
396
-                {
397
-                  path: '/system/report',
398
-                  name: '报表数据',
399
-                  component: './system/report',
400
-                },
401
-                {
402
-                  path: '/system/intention',
403
-                  name: '意向值',
404
-                  component: './system/intention',
405
-                },
406
-                {
407
-                  path: '/system/housingPolicy',
408
-                  name: '购房政策维护',
409
-                  component: './system/housingPolicy',
410
-                },
411
-                {
412
-                  path: '/system/editPolicy',
413
-                  name: '购房政策编辑',
414
-                  hideInMenu: true,
415
-                  component: './system/editPolicy',
416
-                },
417
-              ],
418
-            },
419
-            {
420
-              component: './404',
421
-            },
422
-          ],
423
-        },
424
-        {
425
-          component: './404',
426
-        },
427
-      ],
428
-    },
429
-    {
430
-      component: './404',
431
-    },
432
-  ],
88
+  routes,
433 89
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
434 90
   theme: {
435 91
     'primary-color': primaryColor,

+ 348
- 0
config/routes.js Näytä tiedosto

@@ -0,0 +1,348 @@
1
+export default [
2
+  {
3
+    path: '/user',
4
+    component: '../layouts/UserLayout',
5
+    routes: [
6
+      {
7
+        name: 'login',
8
+        path: '/user/login',
9
+        component: './user/login',
10
+      },
11
+    ],
12
+  },
13
+  {
14
+    path: '/',
15
+    component: '../layouts/SecurityLayout',
16
+    routes: [
17
+      {
18
+        path: '/',
19
+        component: '../layouts/BasicLayout',
20
+        authority: ['admin', 'user'],
21
+        routes: [
22
+          {
23
+            path: '/',
24
+            redirect: '/welcome',
25
+          },
26
+          {
27
+            path: '/welcome',
28
+            name: '首页',
29
+            component: './Welcome',
30
+          },
31
+          {
32
+            path: '/building',
33
+            name: '项目管理',
34
+            component: '../layouts/BlankLayout',
35
+            routes: [
36
+              {
37
+                path: '/building/list',
38
+                name: '项目列表',
39
+                component: './building/list/index',
40
+              },
41
+              {
42
+                path: '/building/list/add',
43
+                name: '项目添加', // 项目添加
44
+                hideInMenu: true,
45
+                component: './building/list/add/index',
46
+              },
47
+              {
48
+                path: '/building/type',
49
+                name: '项目类型',
50
+                component: './building/type/index',
51
+              },
52
+              {
53
+                path: '/building/type/edi',
54
+                name: '项目类型编辑',
55
+                hideInMenu: true,
56
+                component: './building/type/edi',
57
+              },
58
+            ],
59
+          },
60
+          {
61
+            path: '/customer',
62
+            name: '客户管理',
63
+            component: '../layouts/BlankLayout',
64
+            routes: [
65
+              {
66
+                path: '/customer/customerlist/list',
67
+                name: '客户列表',
68
+                component: './customer/customerlist/index',
69
+              },
70
+              {
71
+                path: '/customer/customerlist/customerDetail',
72
+                name: '客户编辑',
73
+                hideInMenu: true,
74
+                component: './customer/customerlist/customerDetail',
75
+              },
76
+              {
77
+                path: '/customer/drift/list',
78
+                name: '游客列表',
79
+                component: './customer/drift/index',
80
+              },
81
+              {
82
+                path: '/customer/report/list',
83
+                name: '报备客户',
84
+                component: './customer/report/index',
85
+              },
86
+              {
87
+                path: '/customer/recommendCustomer/list',
88
+                name: '推荐客户',
89
+                component: './customer/recommendCustomer/index',
90
+              },
91
+              {
92
+                path: '/customer/recommendCustomer/audit',
93
+                name: '客户审核', 
94
+                hideInMenu: true,
95
+                component: './customer/recommendCustomer/audit',
96
+              },
97
+              {
98
+                path: '/customer/independentList',
99
+                name: '经纪人',
100
+                component: './customer/independentList/index',
101
+              },
102
+            ],
103
+          },
104
+          {
105
+            path: '/integralMall',
106
+            name: '积分商城',
107
+            component: '../layouts/BlankLayout',
108
+            routes: [
109
+              {
110
+                path: '/integralMall/GoodsList',
111
+                name: '商品列表',
112
+                component: './integralMall/GoodsList',
113
+              },
114
+              {
115
+                path: '/integralMall/achieve',
116
+                name: '积分获取',
117
+                component: './integralMall/achieve',
118
+              },
119
+              {
120
+                path: '/integralMall/editGoods',
121
+                name: '商品编辑',
122
+                hideInMenu: true,
123
+                component: './integralMall/editGoods',
124
+              },
125
+              {
126
+                path: '/integralMall/exchangeRecords',
127
+                name: '兑换记录',
128
+                component: './integralMall/exchangeRecords',
129
+              },
130
+              {
131
+                path: '/integralMall/writeOff',
132
+                name: '商品核销',
133
+                component: './integralMall/writeOff',
134
+              },
135
+              {
136
+                path: '/integralMall/verifyList',
137
+                name: '商品核销列表',
138
+                hideInMenu: true,
139
+                component: './integralMall/verifyList',
140
+              },
141
+            ],
142
+          },
143
+          {
144
+            path: '/channel',
145
+            name: '渠道管理',
146
+            component: '../layouts/BlankLayout',
147
+            routes: [
148
+              {
149
+                path: '/channel/channelList',
150
+                name: '渠道管理',
151
+                component: './channel/channelList',
152
+              },
153
+              {
154
+                path: '/channel/addChannel',
155
+                name: '添加渠道',
156
+                hideInMenu: true,
157
+                component: './channel/addChannel',
158
+              },
159
+              {
160
+                path: '/channel/editChannel',
161
+                name: '编辑渠道',
162
+                hideInMenu: true,
163
+                component: './channel/editChannel',
164
+              },
165
+              {
166
+                path: '/channel/brokerList',
167
+                name: '经纪人',
168
+                component: './channel/brokerList',
169
+              },
170
+              {
171
+                path: '/channel/recommendClients',
172
+                name: '渠道推荐',
173
+                hideInMenu: true,
174
+                component: './channel/recommendClients',
175
+              },
176
+              {
177
+                path: '/channel/InviteClients',
178
+                name: '邀请客户',
179
+                hideInMenu: true,
180
+                component: './channel/InviteClients',
181
+              },
182
+            ],
183
+          },
184
+          {
185
+            path: '/news',
186
+            name: '资讯管理',
187
+            component: '../layouts/BlankLayout',
188
+            routes: [
189
+              {
190
+                path: '/news/type/NewsType',
191
+                name: '资讯类型',
192
+                component: './news/type/NewsType',
193
+              },
194
+              {
195
+                path: '/news/type/editNews',
196
+                name: '编辑资讯类型',
197
+                hideInMenu: true,
198
+                component: './news/type/editNews',
199
+              },
200
+              {
201
+                path: '/news/list/NewsList',
202
+                name: '资讯列表',
203
+                component: './news/list/NewsList',
204
+              },
205
+              {
206
+                path: '/news/list/editNewsList',
207
+                name: '编辑资讯',
208
+                hideInMenu: true,
209
+                component: './news/list/editNewsList',
210
+              },
211
+            ],
212
+          },
213
+          {
214
+            path: '/activity',
215
+            name: '活动管理',
216
+            component: '../layouts/BlankLayout',
217
+            routes: [
218
+              {
219
+                path: '/activity/ActivityList',
220
+                name: '活动列表',
221
+                component: './activity/ActivityList',
222
+              },
223
+              {
224
+                path: '/activity/editActivity',
225
+                name: '编辑活动',
226
+                hideInMenu: true,
227
+                component: './activity/editActivity',
228
+              },
229
+              {
230
+                path: '/activity/SignList',
231
+                name: '报名列表',
232
+                hideInMenu: true,
233
+                component: './activity/SignList',
234
+              },
235
+            ],
236
+          },
237
+          {
238
+            path: '/staff',
239
+            name: '员工管理',
240
+            component: '../layouts/BlankLayout',
241
+            routes: [
242
+              {
243
+                path: '/staff/StaffList',
244
+                name: '员工列表',
245
+                component: './staff/list/StaffList',
246
+              },
247
+              {
248
+                path: '/staff/editStaff',
249
+                name: '编辑员工',
250
+                hideInMenu: true,
251
+                component: './staff/list/editStaff',
252
+              },
253
+
254
+              {
255
+                path: '/staff/RoleList',
256
+                name: '角色管理',
257
+                component: './staff/list/RoleList',
258
+              },
259
+              {
260
+                path: '/staff/editRole',
261
+                name: '编辑角色',
262
+                hideInMenu: true,
263
+                component: './staff/list/editRole',
264
+              },
265
+              {
266
+                path: '/staff/list/addRole',
267
+                name: '添加角色',
268
+                hideInMenu: true,
269
+                component: './staff/list/addRole',
270
+              },  
271
+            ],
272
+          },
273
+          {
274
+            path: '/carouselFigure',
275
+            name: '轮播图管理',
276
+            component: '../layouts/BlankLayout',
277
+            routes: [
278
+              {
279
+                path: '/carouselFigure/carouselFigureList',
280
+                name: '轮播图列表',
281
+                component: './carouselFigure/carouselFigureList',
282
+              },
283
+              {
284
+                path: '/carouselFigure/editCarousel',
285
+                name: '轮播图编辑',
286
+                hideInMenu: true,
287
+                component: './carouselFigure/editCarousel',
288
+              },
289
+              {
290
+                path: '/carouselFigure/advertisingList',
291
+                name: '开屏广告',
292
+                component: './carouselFigure/advertisingList',
293
+              },
294
+              {
295
+                path: '/carouselFigure/editAdvertising',
296
+                name: '开屏广告编辑',
297
+                hideInMenu: true,
298
+                component: './carouselFigure/editAdvertising',
299
+              },
300
+            ],
301
+          },
302
+          {
303
+            path: '/system',
304
+            name: '系统管理',
305
+            component: '../layouts/BlankLayout',
306
+            routes: [
307
+              {
308
+                path: '/system/messageList',
309
+                name: '客户留言',
310
+                component: './system/messageList',
311
+              },
312
+              {
313
+                path: '/system/report',
314
+                name: '报表数据',
315
+                component: './system/report',
316
+              },
317
+              {
318
+                path: '/system/intention',
319
+                name: '意向值',
320
+                component: './system/intention',
321
+              },
322
+              {
323
+                path: '/system/housingPolicy',
324
+                name: '购房政策维护',
325
+                component: './system/housingPolicy',
326
+              },
327
+              {
328
+                path: '/system/editPolicy',
329
+                name: '购房政策编辑',
330
+                hideInMenu: true,
331
+                component: './system/editPolicy',
332
+              },
333
+            ],
334
+          },
335
+          {
336
+            component: './404',
337
+          },
338
+        ],
339
+      },
340
+      {
341
+        component: './404',
342
+      },
343
+    ],
344
+  },
345
+  {
346
+    component: './404',
347
+  },
348
+];

+ 9
- 1
src/components/EchartsTest/EChart.jsx Näytä tiedosto

@@ -5,11 +5,19 @@ import echarts from 'echarts/lib/echarts';
5 5
 // 引入柱状图
6 6
 import 'echarts/lib/chart/bar';
7 7
 import 'echarts/lib/chart/pie';
8
+import 'echarts/lib/chart/scatter';
9
+import 'echarts/lib/chart/effectScatter';
10
+import 'echarts/lib/chart/map';
8 11
 // 引入提示框和标题组件
9 12
 import 'echarts/lib/component/tooltip';
10 13
 import 'echarts/lib/component/legend';
11 14
 import 'echarts/lib/component/title';
15
+import 'echarts/lib/component/geo';
16
+import 'echarts/lib/component/visualMap';
12 17
 
18
+import { ChinaData } from './china';
19
+
20
+echarts.registerMap('china', ChinaData);
13 21
 
14 22
 class EchartsTest extends Component {
15 23
     chartRef = React.createRef();
@@ -33,7 +41,7 @@ class EchartsTest extends Component {
33 41
                 ...this.props.options || {},
34 42
             }
35 43
 
36
-            console.log(options)
44
+            console.log('----options--->', options)
37 45
 
38 46
             this.chart.setOption(options);
39 47
         }

+ 1
- 0
src/components/EchartsTest/china.js
File diff suppressed because it is too large
Näytä tiedosto


+ 5
- 2
src/pages/Welcome.jsx Näytä tiedosto

@@ -1,7 +1,9 @@
1 1
 import React from 'react';
2 2
 import { Card, Typography, Alert, Row, Col } from 'antd';
3 3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4
-import EchartsTest from '../components/EchartsTest'
4
+import EchartsTest from '../components/EchartsTest';
5
+import CityNums from './charts/CityNums';
6
+
5 7
 const option = {
6 8
   xAxis: {
7 9
     type: 'category',
@@ -15,6 +17,7 @@ const option = {
15 17
     type: 'line'
16 18
   }]
17 19
 };
20
+
18 21
 export default () => (
19 22
   <>
20 23
     <div style={{ display: 'flex' }}>
@@ -44,7 +47,7 @@ export default () => (
44 47
       </div>
45 48
     </div>
46 49
     <EchartsTest style={{width: 500, height:500}}></EchartsTest>
47
-
50
+    <CityNums></CityNums>
48 51
   </>
49 52
 );
50 53
 

+ 137
- 0
src/pages/charts/CityNums.jsx Näytä tiedosto

@@ -0,0 +1,137 @@
1
+import React, { useState, useEffect } from 'react';
2
+import Echart from '../../components/EchartsTest/EChart';
3
+import { fetch, apis } from '@/utils/request';
4
+
5
+const geoOptions = {
6
+  backgroundColor: '#fff',
7
+  title: {
8
+    text: '城市分布',
9
+    left: 20,
10
+    top: 20
11
+  },
12
+  tooltip : {
13
+      trigger: 'item',
14
+      formatter: (params) => {
15
+        return `${params.data.name}: ${params.data.value[2]}`
16
+      }
17
+  },
18
+  geo: {
19
+      map: 'china',
20
+      roam: true,
21
+      zoom: 1.2,
22
+      label: {
23
+        normal: {
24
+          show: true,
25
+          color: '#aaa',
26
+        },
27
+        emphasis: {
28
+          show: true
29
+        }
30
+      },
31
+      itemStyle: {
32
+          normal: {
33
+              areaColor: '#f3f3f3',
34
+              borderColor: '#ddd'
35
+          },
36
+          emphasis: {
37
+              areaColor: '#eee'
38
+          }
39
+      }
40
+  },
41
+}
42
+
43
+const getCityData = fetch(apis.indexEcharts.userCity)
44
+
45
+const mapDataRange = x => {
46
+  // 映射区间 [1, 100000] => [rangeStart, rangeEnd]
47
+  const min = 1
48
+  const max = 100000
49
+  const rangeStart = 16
50
+  const rangeEnd = 24
51
+
52
+  return rangeStart + (x - min) * (rangeEnd - rangeStart) / (max - min)
53
+}
54
+
55
+const CityNums = (props) => {
56
+  const [data, setData]= useState([])
57
+
58
+  useEffect(() => {
59
+    getCityData().then(response => {
60
+      const { selectCityUser = [] } = response || {}
61
+      const data = selectCityUser.map((item) => {
62
+        return {
63
+          name: item.name,
64
+          value: [item.lng - 0, item.lat - 0, item.cityCount]
65
+        }
66
+      })
67
+      setData(data)
68
+    })
69
+  }, [])
70
+
71
+  const options = {
72
+    ...geoOptions,
73
+    series: [
74
+      {
75
+        name: '人数',
76
+        type: 'scatter',
77
+        coordinateSystem: 'geo',
78
+        data,
79
+        symbolSize: 10,
80
+        label: {
81
+            normal: {
82
+                formatter: '{b}',
83
+                position: 'right',
84
+                show: false
85
+            },
86
+            emphasis: {
87
+                show: true
88
+            }
89
+        },
90
+        itemStyle: {
91
+            normal: {
92
+                color: '#DB3C4B'
93
+            }
94
+        }
95
+      },
96
+      {
97
+          name: '前三',
98
+          type: 'effectScatter',
99
+          coordinateSystem: 'geo',
100
+          data: data.sort(function (a, b) {
101
+              return b.value[2] - a.value[2];
102
+          }).slice(0, 3),
103
+          symbolSize: function (val) {
104
+              return mapDataRange(val[2]);
105
+          },
106
+          showEffectOn: 'render',
107
+          rippleEffect: {
108
+              brushType: 'stroke'
109
+          },
110
+          hoverAnimation: true,
111
+          label: {
112
+              normal: {
113
+                  formatter: '{b}',
114
+                  position: 'right',
115
+                  show: false
116
+              }
117
+          },
118
+          itemStyle: {
119
+              normal: {
120
+                  color: '#DB3C4B',
121
+                  shadowBlur: 10,
122
+                  shadowColor: '#333'
123
+              }
124
+          },
125
+          zlevel: 1
126
+      }
127
+    ],
128
+  }
129
+
130
+  return (
131
+    <div style={{ margin: '24px 0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
132
+      <Echart options={options} style={{ width: '100%', height: '600px' }} ></Echart>
133
+    </div>
134
+  )
135
+}
136
+
137
+export default CityNums;

+ 4
- 0
src/services/apis.js Näytä tiedosto

@@ -160,6 +160,10 @@ export default {
160 160
       method: 'GET',
161 161
       url: `${prefix}/selectUserResource`
162 162
     },
163
+    userCity: {
164
+      method:'get',
165
+      url: `${prefix}/selectCityUser`
166
+    },
163 167
 
164 168
   },
165 169
   activity: {

+ 3
- 1
src/utils/request.js Näytä tiedosto

@@ -33,7 +33,7 @@ const replaceURLParams = (url, params = {}) => {
33 33
 }
34 34
 
35 35
 request.interceptors.request.use((url, options) => {
36
-  const { urlData, headers = {}, logout = false, login = false, data, ...opts } = options
36
+  const { urlData, headers = {}, logout = false, login = false, action, data, ...opts } = options
37 37
   const apiURL = urlData ? replaceURLParams(url, urlData) : url
38 38
   const token = mixStr(window.localStorage.getItem('test-foobar'))
39 39
 
@@ -42,6 +42,7 @@ request.interceptors.request.use((url, options) => {
42 42
   }
43 43
 
44 44
   const authHeader = !login ? { Authorization: `Bearer ${token}` } : {}
45
+  const actionHeader = action ? { 'X-ACTION': action  }: {}
45 46
 
46 47
   return (
47 48
     {
@@ -50,6 +51,7 @@ request.interceptors.request.use((url, options) => {
50 51
         ...opts,
51 52
         headers: {
52 53
           ...authHeader,
54
+          ...actionHeader,
53 55
           ...headers,
54 56
         },
55 57
         data,