rem

.gitignore

@@ -38,3 +38,5 @@ screenshot
 .eslintcache
 
 build
+
+config/proxy.js

config/config.js

@@ -2,6 +2,9 @@ import defaultSettings from './defaultSettings'; // https://umijs.org/config/
 
 import slash from 'slash2';
 import webpackPlugin from './plugin.config';
+import routes from './routes';
+import proxy from './proxy';
+
 const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
 // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
 
@@ -82,354 +85,7 @@ export default {
   },
   devtool: isAntDesignProPreview ? 'source-map' : false,
   // umi routes: https://umijs.org/zh/guide/router.html
-  routes: [
-    {
-      path: '/user',
-      component: '../layouts/UserLayout',
-      routes: [
-        {
-          name: 'login',
-          path: '/user/login',
-          component: './user/login',
-        },
-      ],
-    },
-    {
-      path: '/',
-      component: '../layouts/SecurityLayout',
-      routes: [
-        {
-          path: '/',
-          component: '../layouts/BasicLayout',
-          authority: ['admin', 'user'],
-          routes: [
-            {
-              path: '/',
-              redirect: '/welcome',
-            },
-            {
-              path: '/welcome',
-              name: '首页',
-              component: './Welcome',
-            },
-            {
-              path: '/building',
-              name: '项目管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/building/list',
-                  name: '项目列表',
-                  component: './building/list/index',
-                },
-                {
-                  path: '/building/list/add',
-                  name: '项目添加', // 项目添加
-                  hideInMenu: true,
-                  component: './building/list/add/index',
-                },
-                {
-                  path: '/building/type',
-                  name: '项目类型',
-                  component: './building/type/index',
-                },
-                {
-                  path: '/building/type/edi',
-                  name: '项目类型编辑',
-                  hideInMenu: true,
-                  component: './building/type/edi',
-                },
-              ],
-            },
-            {
-              path: '/customer',
-              name: '客户管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/customer/customerlist/list',
-                  name: '客户列表',
-                  component: './customer/customerlist/index',
-                },
-                {
-                  path: '/customer/customerlist/customerDetail',
-                  name: '客户编辑',
-                  hideInMenu: true,
-                  component: './customer/customerlist/customerDetail',
-                },
-                {
-                  path: '/customer/drift/list',
-                  name: '游客列表',
-                  component: './customer/drift/index',
-                },
-                {
-                  path: '/customer/report/list',
-                  name: '报备客户',
-                  component: './customer/report/index',
-                },
-                {
-                  path: '/customer/recommendCustomer/list',
-                  name: '推荐客户',
-                  component: './customer/recommendCustomer/index',
-                },
-                {
-                  path: '/customer/recommendCustomer/audit',
-                  name: '客户审核', 
-                  hideInMenu: true,
-                  component: './customer/recommendCustomer/audit',
-                },
-                {
-                  path: '/customer/independentList',
-                  name: '经纪人',
-                  component: './customer/independentList/index',
-                },
-              ],
-            },
-            {
-              path: '/integralMall',
-              name: '积分商城',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/integralMall/GoodsList',
-                  name: '商品列表',
-                  component: './integralMall/GoodsList',
-                },
-                {
-                  path: '/integralMall/achieve',
-                  name: '积分获取',
-                  component: './integralMall/achieve',
-                },
-                {
-                  path: '/integralMall/editGoods',
-                  name: '商品编辑',
-                  hideInMenu: true,
-                  component: './integralMall/editGoods',
-                },
-                {
-                  path: '/integralMall/exchangeRecords',
-                  name: '兑换记录',
-                  component: './integralMall/exchangeRecords',
-                },
-                {
-                  path: '/integralMall/writeOff',
-                  name: '商品核销',
-                  component: './integralMall/writeOff',
-                },
-                {
-                  path: '/integralMall/verifyList',
-                  name: '商品核销列表',
-                  hideInMenu: true,
-                  component: './integralMall/verifyList',
-                },
-              ],
-            },
-            {
-              path: '/channel',
-              name: '渠道管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/channel/channelList',
-                  name: '渠道管理',
-                  component: './channel/channelList',
-                },
-                {
-                  path: '/channel/addChannel',
-                  name: '添加渠道',
-                  hideInMenu: true,
-                  component: './channel/addChannel',
-                },
-                {
-                  path: '/channel/editChannel',
-                  name: '编辑渠道',
-                  hideInMenu: true,
-                  component: './channel/editChannel',
-                },
-                {
-                  path: '/channel/brokerList',
-                  name: '经纪人',
-                  component: './channel/brokerList',
-                },
-                {
-                  path: '/channel/recommendClients',
-                  name: '渠道推荐',
-                  hideInMenu: true,
-                  component: './channel/recommendClients',
-                },
-                {
-                  path: '/channel/InviteClients',
-                  name: '邀请客户',
-                  hideInMenu: true,
-                  component: './channel/InviteClients',
-                },
-              ],
-            },
-            {
-              path: '/news',
-              name: '资讯管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/news/type/NewsType',
-                  name: '资讯类型',
-                  component: './news/type/NewsType',
-                },
-                {
-                  path: '/news/type/editNews',
-                  name: '编辑资讯类型',
-                  hideInMenu: true,
-                  component: './news/type/editNews',
-                },
-                {
-                  path: '/news/list/NewsList',
-                  name: '资讯列表',
-                  component: './news/list/NewsList',
-                },
-                {
-                  path: '/news/list/editNewsList',
-                  name: '编辑资讯',
-                  hideInMenu: true,
-                  component: './news/list/editNewsList',
-                },
-              ],
-            },
-            {
-              path: '/activity',
-              name: '活动管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/activity/ActivityList',
-                  name: '活动列表',
-                  component: './activity/ActivityList',
-                },
-                {
-                  path: '/activity/editActivity',
-                  name: '编辑活动',
-                  hideInMenu: true,
-                  component: './activity/editActivity',
-                },
-                {
-                  path: '/activity/SignList',
-                  name: '报名列表',
-                  hideInMenu: true,
-                  component: './activity/SignList',
-                },
-              ],
-            },
-            {
-              path: '/staff',
-              name: '员工管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/staff/StaffList',
-                  name: '员工列表',
-                  component: './staff/list/StaffList',
-                },
-                {
-                  path: '/staff/editStaff',
-                  name: '编辑员工',
-                  hideInMenu: true,
-                  component: './staff/list/editStaff',
-                },
-
-                {
-                  path: '/staff/RoleList',
-                  name: '角色管理',
-                  component: './staff/list/RoleList',
-                },
-                {
-                  path: '/staff/editRole',
-                  name: '编辑角色',
-                  hideInMenu: true,
-                  component: './staff/list/editRole',
-                },
-                {
-                  path: '/staff/list/addRole',
-                  name: '添加角色',
-                  hideInMenu: true,
-                  component: './staff/list/addRole',
-                },  
-              ],
-            },
-            {
-              path: '/carouselFigure',
-              name: '轮播图管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/carouselFigure/carouselFigureList',
-                  name: '轮播图列表',
-                  component: './carouselFigure/carouselFigureList',
-                },
-                {
-                  path: '/carouselFigure/editCarousel',
-                  name: '轮播图编辑',
-                  hideInMenu: true,
-                  component: './carouselFigure/editCarousel',
-                },
-                {
-                  path: '/carouselFigure/advertisingList',
-                  name: '开屏广告',
-                  component: './carouselFigure/advertisingList',
-                },
-                {
-                  path: '/carouselFigure/editAdvertising',
-                  name: '开屏广告编辑',
-                  hideInMenu: true,
-                  component: './carouselFigure/editAdvertising',
-                },
-              ],
-            },
-            {
-              path: '/system',
-              name: '系统管理',
-              component: '../layouts/BlankLayout',
-              routes: [
-                {
-                  path: '/system/messageList',
-                  name: '客户留言',
-                  component: './system/messageList',
-                },
-                {
-                  path: '/system/report',
-                  name: '报表数据',
-                  component: './system/report',
-                },
-                {
-                  path: '/system/intention',
-                  name: '意向值',
-                  component: './system/intention',
-                },
-                {
-                  path: '/system/housingPolicy',
-                  name: '购房政策维护',
-                  component: './system/housingPolicy',
-                },
-                {
-                  path: '/system/editPolicy',
-                  name: '购房政策编辑',
-                  hideInMenu: true,
-                  component: './system/editPolicy',
-                },
-              ],
-            },
-            {
-              component: './404',
-            },
-          ],
-        },
-        {
-          component: './404',
-        },
-      ],
-    },
-    {
-      component: './404',
-    },
-  ],
+  routes,
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
     'primary-color': primaryColor,

config/routes.js

@@ -0,0 +1,348 @@
+export default [
+  {
+    path: '/user',
+    component: '../layouts/UserLayout',
+    routes: [
+      {
+        name: 'login',
+        path: '/user/login',
+        component: './user/login',
+      },
+    ],
+  },
+  {
+    path: '/',
+    component: '../layouts/SecurityLayout',
+    routes: [
+      {
+        path: '/',
+        component: '../layouts/BasicLayout',
+        authority: ['admin', 'user'],
+        routes: [
+          {
+            path: '/',
+            redirect: '/welcome',
+          },
+          {
+            path: '/welcome',
+            name: '首页',
+            component: './Welcome',
+          },
+          {
+            path: '/building',
+            name: '项目管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/building/list',
+                name: '项目列表',
+                component: './building/list/index',
+              },
+              {
+                path: '/building/list/add',
+                name: '项目添加', // 项目添加
+                hideInMenu: true,
+                component: './building/list/add/index',
+              },
+              {
+                path: '/building/type',
+                name: '项目类型',
+                component: './building/type/index',
+              },
+              {
+                path: '/building/type/edi',
+                name: '项目类型编辑',
+                hideInMenu: true,
+                component: './building/type/edi',
+              },
+            ],
+          },
+          {
+            path: '/customer',
+            name: '客户管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/customer/customerlist/list',
+                name: '客户列表',
+                component: './customer/customerlist/index',
+              },
+              {
+                path: '/customer/customerlist/customerDetail',
+                name: '客户编辑',
+                hideInMenu: true,
+                component: './customer/customerlist/customerDetail',
+              },
+              {
+                path: '/customer/drift/list',
+                name: '游客列表',
+                component: './customer/drift/index',
+              },
+              {
+                path: '/customer/report/list',
+                name: '报备客户',
+                component: './customer/report/index',
+              },
+              {
+                path: '/customer/recommendCustomer/list',
+                name: '推荐客户',
+                component: './customer/recommendCustomer/index',
+              },
+              {
+                path: '/customer/recommendCustomer/audit',
+                name: '客户审核', 
+                hideInMenu: true,
+                component: './customer/recommendCustomer/audit',
+              },
+              {
+                path: '/customer/independentList',
+                name: '经纪人',
+                component: './customer/independentList/index',
+              },
+            ],
+          },
+          {
+            path: '/integralMall',
+            name: '积分商城',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/integralMall/GoodsList',
+                name: '商品列表',
+                component: './integralMall/GoodsList',
+              },
+              {
+                path: '/integralMall/achieve',
+                name: '积分获取',
+                component: './integralMall/achieve',
+              },
+              {
+                path: '/integralMall/editGoods',
+                name: '商品编辑',
+                hideInMenu: true,
+                component: './integralMall/editGoods',
+              },
+              {
+                path: '/integralMall/exchangeRecords',
+                name: '兑换记录',
+                component: './integralMall/exchangeRecords',
+              },
+              {
+                path: '/integralMall/writeOff',
+                name: '商品核销',
+                component: './integralMall/writeOff',
+              },
+              {
+                path: '/integralMall/verifyList',
+                name: '商品核销列表',
+                hideInMenu: true,
+                component: './integralMall/verifyList',
+              },
+            ],
+          },
+          {
+            path: '/channel',
+            name: '渠道管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/channel/channelList',
+                name: '渠道管理',
+                component: './channel/channelList',
+              },
+              {
+                path: '/channel/addChannel',
+                name: '添加渠道',
+                hideInMenu: true,
+                component: './channel/addChannel',
+              },
+              {
+                path: '/channel/editChannel',
+                name: '编辑渠道',
+                hideInMenu: true,
+                component: './channel/editChannel',
+              },
+              {
+                path: '/channel/brokerList',
+                name: '经纪人',
+                component: './channel/brokerList',
+              },
+              {
+                path: '/channel/recommendClients',
+                name: '渠道推荐',
+                hideInMenu: true,
+                component: './channel/recommendClients',
+              },
+              {
+                path: '/channel/InviteClients',
+                name: '邀请客户',
+                hideInMenu: true,
+                component: './channel/InviteClients',
+              },
+            ],
+          },
+          {
+            path: '/news',
+            name: '资讯管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/news/type/NewsType',
+                name: '资讯类型',
+                component: './news/type/NewsType',
+              },
+              {
+                path: '/news/type/editNews',
+                name: '编辑资讯类型',
+                hideInMenu: true,
+                component: './news/type/editNews',
+              },
+              {
+                path: '/news/list/NewsList',
+                name: '资讯列表',
+                component: './news/list/NewsList',
+              },
+              {
+                path: '/news/list/editNewsList',
+                name: '编辑资讯',
+                hideInMenu: true,
+                component: './news/list/editNewsList',
+              },
+            ],
+          },
+          {
+            path: '/activity',
+            name: '活动管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/activity/ActivityList',
+                name: '活动列表',
+                component: './activity/ActivityList',
+              },
+              {
+                path: '/activity/editActivity',
+                name: '编辑活动',
+                hideInMenu: true,
+                component: './activity/editActivity',
+              },
+              {
+                path: '/activity/SignList',
+                name: '报名列表',
+                hideInMenu: true,
+                component: './activity/SignList',
+              },
+            ],
+          },
+          {
+            path: '/staff',
+            name: '员工管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/staff/StaffList',
+                name: '员工列表',
+                component: './staff/list/StaffList',
+              },
+              {
+                path: '/staff/editStaff',
+                name: '编辑员工',
+                hideInMenu: true,
+                component: './staff/list/editStaff',
+              },
+
+              {
+                path: '/staff/RoleList',
+                name: '角色管理',
+                component: './staff/list/RoleList',
+              },
+              {
+                path: '/staff/editRole',
+                name: '编辑角色',
+                hideInMenu: true,
+                component: './staff/list/editRole',
+              },
+              {
+                path: '/staff/list/addRole',
+                name: '添加角色',
+                hideInMenu: true,
+                component: './staff/list/addRole',
+              },  
+            ],
+          },
+          {
+            path: '/carouselFigure',
+            name: '轮播图管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/carouselFigure/carouselFigureList',
+                name: '轮播图列表',
+                component: './carouselFigure/carouselFigureList',
+              },
+              {
+                path: '/carouselFigure/editCarousel',
+                name: '轮播图编辑',
+                hideInMenu: true,
+                component: './carouselFigure/editCarousel',
+              },
+              {
+                path: '/carouselFigure/advertisingList',
+                name: '开屏广告',
+                component: './carouselFigure/advertisingList',
+              },
+              {
+                path: '/carouselFigure/editAdvertising',
+                name: '开屏广告编辑',
+                hideInMenu: true,
+                component: './carouselFigure/editAdvertising',
+              },
+            ],
+          },
+          {
+            path: '/system',
+            name: '系统管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/system/messageList',
+                name: '客户留言',
+                component: './system/messageList',
+              },
+              {
+                path: '/system/report',
+                name: '报表数据',
+                component: './system/report',
+              },
+              {
+                path: '/system/intention',
+                name: '意向值',
+                component: './system/intention',
+              },
+              {
+                path: '/system/housingPolicy',
+                name: '购房政策维护',
+                component: './system/housingPolicy',
+              },
+              {
+                path: '/system/editPolicy',
+                name: '购房政策编辑',
+                hideInMenu: true,
+                component: './system/editPolicy',
+              },
+            ],
+          },
+          {
+            component: './404',
+          },
+        ],
+      },
+      {
+        component: './404',
+      },
+    ],
+  },
+  {
+    component: './404',
+  },
+];

src/components/EchartsTest/EChart.jsx

@@ -5,11 +5,19 @@ import echarts from 'echarts/lib/echarts';
 // 引入柱状图
 import 'echarts/lib/chart/bar';
 import 'echarts/lib/chart/pie';
+import 'echarts/lib/chart/scatter';
+import 'echarts/lib/chart/effectScatter';
+import 'echarts/lib/chart/map';
 // 引入提示框和标题组件
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/legend';
 import 'echarts/lib/component/title';
+import 'echarts/lib/component/geo';
+import 'echarts/lib/component/visualMap';
 
+import { ChinaData } from './china';
+
+echarts.registerMap('china', ChinaData);
 
 class EchartsTest extends Component {
     chartRef = React.createRef();
@@ -33,7 +41,7 @@ class EchartsTest extends Component {
                 ...this.props.options || {},
             }
 
-            console.log(options)
+            console.log('----options--->', options)
 
             this.chart.setOption(options);
         }

src/pages/Welcome.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import EchartsTest from '../components/EchartsTest'
+import EchartsTest from '../components/EchartsTest';
+import CityNums from './charts/CityNums';
+
 const option = {
   xAxis: {
     type: 'category',
@@ -15,6 +17,7 @@ const option = {
     type: 'line'
   }]
 };
+
 export default () => (
   <>
     <div style={{ display: 'flex' }}>
@@ -44,7 +47,7 @@ export default () => (
       </div>
     </div>
     <EchartsTest style={{width: 500, height:500}}></EchartsTest>
-
+    <CityNums></CityNums>
   </>
 );
 

src/pages/charts/CityNums.jsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import Echart from '../../components/EchartsTest/EChart';
+import { fetch, apis } from '@/utils/request';
+
+const geoOptions = {
+  backgroundColor: '#fff',
+  title: {
+    text: '城市分布',
+    left: 20,
+    top: 20
+  },
+  tooltip : {
+      trigger: 'item',
+      formatter: (params) => {
+        return `${params.data.name}: ${params.data.value[2]}`
+      }
+  },
+  geo: {
+      map: 'china',
+      roam: true,
+      zoom: 1.2,
+      label: {
+        normal: {
+          show: true,
+          color: '#aaa',
+        },
+        emphasis: {
+          show: true
+        }
+      },
+      itemStyle: {
+          normal: {
+              areaColor: '#f3f3f3',
+              borderColor: '#ddd'
+          },
+          emphasis: {
+              areaColor: '#eee'
+          }
+      }
+  },
+}
+
+const getCityData = fetch(apis.indexEcharts.userCity)
+
+const mapDataRange = x => {
+  // 映射区间 [1, 100000] => [rangeStart, rangeEnd]
+  const min = 1
+  const max = 100000
+  const rangeStart = 16
+  const rangeEnd = 24
+
+  return rangeStart + (x - min) * (rangeEnd - rangeStart) / (max - min)
+}
+
+const CityNums = (props) => {
+  const [data, setData]= useState([])
+
+  useEffect(() => {
+    getCityData().then(response => {
+      const { selectCityUser = [] } = response || {}
+      const data = selectCityUser.map((item) => {
+        return {
+          name: item.name,
+          value: [item.lng - 0, item.lat - 0, item.cityCount]
+        }
+      })
+      setData(data)
+    })
+  }, [])
+
+  const options = {
+    ...geoOptions,
+    series: [
+      {
+        name: '人数',
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data,
+        symbolSize: 10,
+        label: {
+            normal: {
+                formatter: '{b}',
+                position: 'right',
+                show: false
+            },
+            emphasis: {
+                show: true
+            }
+        },
+        itemStyle: {
+            normal: {
+                color: '#DB3C4B'
+            }
+        }
+      },
+      {
+          name: '前三',
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          data: data.sort(function (a, b) {
+              return b.value[2] - a.value[2];
+          }).slice(0, 3),
+          symbolSize: function (val) {
+              return mapDataRange(val[2]);
+          },
+          showEffectOn: 'render',
+          rippleEffect: {
+              brushType: 'stroke'
+          },
+          hoverAnimation: true,
+          label: {
+              normal: {
+                  formatter: '{b}',
+                  position: 'right',
+                  show: false
+              }
+          },
+          itemStyle: {
+              normal: {
+                  color: '#DB3C4B',
+                  shadowBlur: 10,
+                  shadowColor: '#333'
+              }
+          },
+          zlevel: 1
+      }
+    ],
+  }
+
+  return (
+    <div style={{ margin: '24px 0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
+      <Echart options={options} style={{ width: '100%', height: '600px' }} ></Echart>
+    </div>
+  )
+}
+
+export default CityNums;

src/services/apis.js

@@ -160,6 +160,10 @@ export default {
       method: 'GET',
       url: `${prefix}/selectUserResource`
     },
+    userCity: {
+      method:'get',
+      url: `${prefix}/selectCityUser`
+    },
 
   },
   activity: {

src/utils/request.js

@@ -33,7 +33,7 @@ const replaceURLParams = (url, params = {}) => {
 }
 
 request.interceptors.request.use((url, options) => {
-  const { urlData, headers = {}, logout = false, login = false, data, ...opts } = options
+  const { urlData, headers = {}, logout = false, login = false, action, data, ...opts } = options
   const apiURL = urlData ? replaceURLParams(url, urlData) : url
   const token = mixStr(window.localStorage.getItem('test-foobar'))
 
@@ -42,6 +42,7 @@ request.interceptors.request.use((url, options) => {
   }
 
   const authHeader = !login ? { Authorization: `Bearer ${token}` } : {}
+  const actionHeader = action ? { 'X-ACTION': action  }: {}
 
   return (
     {
@@ -50,6 +51,7 @@ request.interceptors.request.use((url, options) => {
         ...opts,
         headers: {
           ...authHeader,
+          ...actionHeader,
           ...headers,
         },
         data,