Merge branch 'master' of http://git.ycjcjy.com/zhiyuxing/estateagents-admin-manager

config/config.js

                 },
               ],
             },
-
-
             {
               path: '/indexEcharts',
               name: '首页报表',
               component: '../layouts/SecurityLayout',
+              hideInMenu: true,
               routes: [
                 {
                   path: '/indexEcharts/index',
                 
               ],
             },
-            
-
+          
             
             {
               component: './404',
 
   proxy: {
     '/api/': {
-      target: 'http://localhost:8080/',
+      target: 'http://192.168.0.84:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

src/components/EchartsTest/EChart.jsx

         }
 
         return (
-            <div ref={this.chartRef} style={style}></div>
+            <div onClick={this.props.onClick} ref={this.chartRef} style={style}></div>
         );
     }
 }

src/global.less

 .ant-card-body{
   padding: 0;
 }
+.antd-pro-pages-index-echarts-styles-pie,.antd-pro-pages-index-echarts-styles-bar{
+  padding: 0.1rem;
+  margin-bottom: 25px;
+}
 .ant-breadcrumb{
   font-size: 0.1rem;
   .anticon {

src/pages/Welcome.jsx

 import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import EchartsTest from '../components/EchartsTest';
-import CityNums from './charts/CityNums';
+import IndexEcharts from './indexEcharts/index';
+import router from 'umi/router';
 
 const option = {
   xAxis: {
 
 export default () => (
   <>
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex',marginBottom:'28px' }}>
       <div style={{
         textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
         boxShadow: '0px  0.11rem 14px -15px rgba(241,43,62,1)',
         <span style={{ fontSize: '24px', color: '#fff' }}>总注册用户 </span>
         <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>12</span>
       </div>
-      <div style={{
-        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
+      <div onClick={()=>router.push('/indexEcharts/newUsers')} style={{
+        textAlign: 'center', display: 'flex', justifyContent: 'center', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
         boxShadow: '0px  0.11rem 14px -15px rgba(107,130,230,1)',
         borderRadius: '12px', width: '32%',
       }}>
-        <span style={{ fontSize: '24px', color: '#fff' }}>最近7天新增 </span>
-        <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>91</span>
+        <span style={{ fontSize: '24px', color: '#fff',borderBottom:'1px solid #fff',margin:'30px 0' }}>最近7天新增 </span>
+        <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>91</span>
       </div>
     </div>
-    <EchartsTest style={{width: 500, height:500}}></EchartsTest>
-    <CityNums></CityNums>
+    <IndexEcharts style={{ width: '100%'}}></IndexEcharts>
+
+    {/* <EchartsTest style={{ width: 500, height: 500 }}></EchartsTest> */}
+
   </>
 );
 

src/pages/charts/CityNums.jsx

   }
 
   return (
-    <div style={{ margin: '24px 0', width: '100%', borderRadius: '8px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
+    <div style={{ margin: ' 0 0 20px  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>
   )

src/pages/indexEcharts/components/IntentionalCustomers.jsx

     },
   ];
 
-
   function handleBuildingChange (e) {
     IntentionUsers({ buildingId: e })
-
   }
   return (
     <>
       <div>
-        <h3>意向客户</h3>
+      <p style={{fontSize:'0.12rem',fontWeight:'600'}}>意向客户</p>
 
         <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>
 
-        <Table dataSource={data.records} columns={columns} pagination={false} scroll={{ y: 500 }} />
-
+        <Table dataSource={data.records} columns={columns} style={{marginTop:'15px'}} pagination={false} scroll={{ y: 500 }} />
 
       </div>
 
-
-
     </>
   )
 }

src/pages/indexEcharts/components/NewUsers.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
-// import UserSource from './mmm';
 
 import styles from '../styles.less'
 const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const NewUsers = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
 
 
     NewsUserCount(formatDate(props.startDate, props.endDate))
   }, [props.startDate, props.endDate])
 
-  // getNewsUserCount ({ commit }, payload) {
-  //   return new Promise((resolve, reject) => {
-  //     request({
-  //       ...apis.indexEcharts.newUser,
-  //       params: payload,
-  //     }).then((data) => {
-  //       resolve(data.selectNewsUserCount)
-  //     }).catch((err) => {
-  //       const message = err.message || err.msg
-  //       if (typeof message === 'string') {
-  //         reject(message)
-  //       }
-  //     })
-  //   })
-  // },
 
   function NewsUserCount (params) {
     request({
       end: 100
     },
   ] : undefined 
-  // //  show: false
   const dataset = (data.selectNewsUserCount) || []
   const options = {
 
         {
           name: "新用户数",
           type: "line",
+          smooth:true, 
         },
         {
           name: "授权注册",
           type: "line",
+          smooth:true, 
         }
       ],
       dataset: {
   }
 
 
-  // function onChange (value) {
-  //   UserActive({ dateType: value })
-  // }
-
-
   const piestyles = {
     width: '100%',
     height: '400px',
-
   }
 
-
   return (
     <>
       <div>
-
-
         <div >
-          <h3>新增用户</h3>
-
-
-          {/* <Select
-            showSearch
-            style={{ width: 100 }}
-            placeholder="日活跃"
-            optionFilterProp="children"
-            onChange={onChange}
-            
-          >
-            <Option value="day">日活跃</Option>
-            <Option value="month">月活跃</Option>
-
-          </Select>
-         */}
+          <p onClick={()=>router.push('/indexEcharts/newUsers')}><span style={{borderBottom:'1px solid #f02d40',fontSize:'0.12rem',fontWeight:'600'}}>新增用户</span> <span style={{fontSize:'0.09rem',color:'#888',marginLeft:'0.06rem'}}>最近七天</span></p>
        </div>
-
-
-        <EChart options={options} style={piestyles} />
+        <EChart options={options} style={piestyles} onClick={()=>router.push('/indexEcharts/newUsers')} />
       </div>
-
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserActive.jsx

   return { startDate, endDate }
 }
 const UserSource = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
   //柱图
 
     UserActive({ dateType: 'day' })
   }, [])
 
-  //  getUserActive({ commit }, payload) {
-  //   return new Promise((resolve, reject) => {
-  //     request({
-  //       ...apis.indexEcharts.userActive,
-  //       params: { pageSize: 9999, ...payload }
-  //     }).then((data) => {
-  //       resolve(data.selectActiveUserCount)
-  //     }).catch((err) => {
-  //       reject(err)
-  //     })
-  //   })
-  // },
 
 
   function UserActive (params) {
       ...apis.indexEcharts.userActive,
       params: { pageSize: 9999, ...params },
     }).then((data) => {
-      // console.log(data, '3333')
+  
       setData(data)
     })
   }
-  //  show: false
+
   const dataset = (data.selectActiveUserCount) || []
   const options = {
-    // legend: { },
-    // color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
+
     tooltip: {},
     xAxis: { type: 'category' },
     yAxis: {},
-    // orient: 'horizontal',
     series: {
-      // orient: 'horizontal',
       type: 'bar',
       name: '活跃用户',
       barWidth: 50,
 
 
         <div >
-          <h3>用户活跃数</h3>
-
+        <p><span style={{fontSize:'0.12rem',fontWeight:'600'}}>用户活跃数</span></p>
 
           <Select
             showSearch
             placeholder="日活跃"
             optionFilterProp="children"
             onChange={onChange}
-            
           >
             <Option value="day">日活跃</Option>
             <Option value="month">月活跃</Option>
         <EChart options={options} style={piestyles} />
       </div>
 
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserBehavior.jsx

 import React, { Component, useState, useEffect } from 'react';
-
 import EChart from '../../../components/EchartsTest/EChart';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
   return { startDate, endDate }
 }
 const UserBehavior = (props) => {
-// console.log(props,'11111111')
 
-const [data, setData] = useState({ records: [] })
+  const [data, setData] = useState({ records: [] })
   const [datas, setDatas] = useState({ records: [] })
- 
-  
+
+
   //柱图
 
   useEffect(() => {
       params
     }).then((data) => {
       setData(data || {})
-      // props.onReData(data)
-      // console.log(data || {}, '2134')
+
     })
   }
-  // showDetail (row) {
-  //   this.detailData = []
-  //   this.dialogVisible = true
-  //   this.getUserBehaviorProfile().then((data) => {
-  //     this.detailData = data
-  //   })
 
-  function getUserBehaviorProfile (row) {
+  function getUserBehaviorProfile(row) {
 
     setData([])
     request({
       ...apis.indexEcharts.userBehavior.profile,
-      params:{ event: row.event, personId: row.personId }
+      params: { event: row.event, personId: row.personId }
     }).then((data) => {
 
-      
-      setData(data )
-      // props.onReData(data)
-      // console.log(data , '22354234')
+      setData(data)
+
     })
 
+  }
 
+  const seriesMaker = (data.selectUserBehavior || []).reduce((series, item) => {
+    let { date, activityCount, activity } = item
+    date = moment(date).format('YYYY-MM-DD')
+    if (!activityCount) activityCount = 0
+
+    // 使用对象, 可以去重
+    series[`${activity}`] = (series[`${activity}`] || []).concat([[date, activityCount]])
+
+    return series;
+  }, {})
+
+
+  const dataZoom = props.dataZoom ? [
+    {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'slider',
+      start: 0,
+      end: 100
+    },
+  ] : undefined
+
+
+  const options = {
+    title: {},
+    icon: "rect",
+    legend: {
+      show: true, zlevel: 10,
+      itemGap: 100,
+    },
+    color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    dataZoom,
+    series: Object.keys(seriesMaker).map(x => {
+      return {
+        type: 'line',
+        smooth: true,
+        name: x,
+        data: seriesMaker[x],
+      }
+    }),
+  }
+  function handleBuildingChange(e) {
+    getUserBehaviorSummary({ buildingId: e })
   }
-  
-    const seriesMaker = (data.selectUserBehavior || []).reduce((series, item) => {
-      let { date, activityCount, activity } = item
-      date = moment(date).format('YYYY-MM-DD')
-      if (!activityCount) activityCount = 0
-
-      // 使用对象, 可以去重
-      series[`${activity}`] = (series[`${activity}`] || []).concat([[ date, activityCount ]])
-
-      return series;
-    }, {})
-
-
-   const dataZoom=props.dataZoom?[
-      {
-        type: 'inside',
-        start: 0,
-        end: 100
-      },
-      {
-        type: 'slider',
-        start: 0,
-        end: 100
-      },
-    ] : undefined 
-    
-  
-    const options = {
-    title:  {
-        text: '用户行为',
-        subtext: '最近7天',
-      },
-      icon: "rect",
-      legend: {
-         show: true, zlevel: 10 ,
-         itemGap:100,
-        //  data:[{
-        //   //  name:'',
-        //   icon: 'rect',
-        //  }]
-      },
-      color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
-      tooltip: {
-        trigger: 'axis'
-      },
-      xAxis: { type: 'category' },
-      yAxis: {},
-      dataZoom,
-      series: Object.keys(seriesMaker).map(x => {
-        return {
-          type: 'line',
-          name: x,
-          data: seriesMaker[x],
-        }
-      }),
-    }
-   function handleBuildingChange (e) {
-      getUserBehaviorSummary({ buildingId: e })
-    }
 
 
   const style = {
 
   }
 
-
-
   return (
     <>
       <div>
         {/* onSuccess={(e) => onTabledatas(e)} */}
-      <BuildSelect slot='action' onChange={(e=>handleBuildingChange(e))}></BuildSelect>
-      <EChart  options={options} style={style} />
+        <p onClick={() => router.push('/indexEcharts/userBehavior')}>
+          <span style={{ borderBottom: '1px solid #f02d40', color: '#333', fontSize: '0.12rem', fontWeight: '600' }}>用户行为</span>
+          {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}></span>}
+        </p>
+        <div style={{ float: 'right', marginTop: '-40px', marginBottom: '20px' }}>
+          {!props.BuildSelectHide && <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>}
+        </div>
+        <EChart onClick={() => router.push('/indexEcharts/userBehavior')} options={options} style={style} />
 
- 
       </div>
 
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserConversion.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
-// import UserSource from './mmm';
 
 import styles from '../styles.less'
 
-const formatDate = (start, end) => {
-  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
-  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
-  return { startDate, endDate }
-}
 
 const UserSource = (props) => {
 
   const [data, setData] = useState({ records: [] })
   const [theStatis, settheStatis] = useState({ records: [] })
- 
   const [theCurrent, settheCurrent] = useState({ records: [] })
-  const endDate = new Date()
-  const startDate = moment().subtract(7, 'day').toDate()
- 
-  // const theStatis = 'authorization_phone'
+
   useEffect(() => {
-    settheStatis('authorization_phone')
-    // UserConversionRate({ conversion: theStatis }).then(setDataset)
+    UserConversionRate({conversion: 'authorization_phone'})
   }, [])
 
-  // function UserConversionRate (params) {
-  //   console.log(params, '1111111')
-  //   request({
-  //     ...apis.indexEcharts.userConversion,
-  //     params,
-  //   }).then((data) => {
-
-  //     setData(data)
-  //     console.log(data, '000000')
-  //   }).then
-  // }
-  
- function UserConversionRate(_, payload) {
-    return new Promise((resolve, reject) => {
+ function UserConversionRate(params) {
       request({
         ...apis.indexEcharts.userConversion,
-        params: payload,
+        params,
       }).then((data) => {
-        resolve(data)
-      })
-    })
+        console.log(data,"data")
+        setData(data)
+      }) 
   }
-  // const dataset = (data.selectSexUser) || []
-  // console.log(dataset, '000000')
-  const statisTypes=[
-    { label: '授权手机', value: 'authorization_phone' },
-    { label: '项目收藏', value: 'building_save' },
-    { label: '项目转发', value: 'building_share' },
-    { label: '活动收藏', value: 'activity_save' },
-    { label: '活动转发', value: 'activity_share' },
-    { label: '资讯收藏', value: 'news_save' },
-    { label: '资讯转发', value: 'news_share' },
-    { label: '活动报名', value: 'activity_sign' },
 
-  ]
-// const theCurrent = []
+
  function setDataset(data) {      
+ 
     const { pvNum, ...other } = data['data_count']
 
     // 获取第一个值
       break
     }
 
-
     if (pvNum < num) {
       theCurrent = []
     } else {
       theCurrent = [
-        { name: getStatisName(), value: num },
+        { name: this.getStatisName(), value: num },
         { name: '其余', value: pvNum - num },
       ]
     }
   }
 
   function getStatisName() {
-    return statisTypes.filter(x => x.value === theStatis)[0].label
-  }
+     const statisTypes=[
+    { label: '授权手机', value: 'authorization_phone' },
+    { label: '项目收藏', value: 'building_save' },
+    { label: '项目转发', value: 'building_share' },
+    { label: '活动收藏', value: 'activity_save' },
+    { label: '活动转发', value: 'activity_share' },
+    { label: '资讯收藏', value: 'news_save' },
+    { label: '资讯转发', value: 'news_share' },
+    { label: '活动报名', value: 'activity_sign' },
 
-  // getStatisName() {
+  ]
+    return statisTypes.filter(x => x.value == theStatis)[0].label
+  }
  
   const options = {
     legend: {},
     series: {
       type: 'pie',
       name: '转化率',
-      radius: ['50%', '70%'],
-      data: theCurrent
+      radius: ['34%', '52%'],
+      data:[ { name: '授权手机', value: 6 },
+      { name: '其余', value: 5 },]
     }
     
-      
-    
-
   }
-  // statisTypes: [
-  //   { label: '授权手机', value: 'authorization_phone' },
-  //   { label: '项目收藏', value: 'building_save' },
-  //   { label: '项目转发', value: 'building_share' },
-  //   { label: '活动收藏', value: 'activity_save' },
-  //   { label: '活动转发', value: 'activity_share' },
-  //   { label: '资讯收藏', value: 'news_save' },
-  //   { label: '资讯转发', value: 'news_share' },
-  //   { label: '活动报名', value: 'activity_sign' },
-
-  // ],
-  function onChange (value) {
-
+  
+  function onChange (e) {
+    UserConversionRate({conversion: e})
+    
   }
 
   const piestyles = {
   return (
     <>
       <div>
-        <h3>转化率</h3>
+      <p style={{fontSize:'0.12rem',fontWeight:'600'}}>转化率</p>
 
         <Select
-          showSearch
           style={{ width: 200 }}
           placeholder="授权手机"
-          optionFilterProp="children"
           onChange={onChange}
-
         >
-          <Option value="authorization_phone">授权手机</Option>
-          <Option value="building_save">项目收藏</Option>
-          <Option value="building_share">项目转发</Option>
-          <Option value="activity_save">活动收藏</Option>
-          <Option value="activity_share">活动转发</Option>
-          <Option value="news_save">资讯收藏</Option>
-          <Option value="news_share">资讯转发</Option>
-          <Option value="activity_sign">活动报名</Option>
+          <Select.Option value="authorization_phone">授权手机</Select.Option>
+          <Select.Option value="building_save">项目收藏</Select.Option>
+          <Select.Option value="building_share">项目转发</Select.Option>
+          <Select.Option value="activity_save">活动收藏</Select.Option>
+          <Select.Option value="activity_share">活动转发</Select.Option>
+          <Select.Option value="news_save">资讯收藏</Select.Option>
+          <Select.Option value="news_share">资讯转发</Select.Option>
+          <Select.Option value="activity_sign">活动报名</Select.Option>
         </Select>
-        {/* <EChart options={options} style={piestyles} /> */}
-
-
+        <EChart options={options} style={piestyles} />
 
 
       </div>
 
 
-
-
-
     </>
   )
 }

src/pages/indexEcharts/components/UserSex.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
-// import UserSource from './mmm';
 
 import styles from '../styles.less'
 
   const endDate = new Date()
   const startDate = moment().subtract(7, 'day').toDate()
 
-
   useEffect(() => {
     UserSex(formatDate(startDate, endDate))
   }, [])
       ...apis.indexEcharts.userSex,
       params,
     }).then((data) => {
-
       setData(data)
-      // console.log(data, '000000')
     })
   }
 
-
   const dataset = (data.selectSexUser) || []
-  // console.log(dataset, '000000')
+ 
   const options = {
     title: {
       text: '性别比例'
     },
     legend: {},
-    color: ['#FF7E48', '#FFC1A4'],
+    color: ['#FF7E48', '#dcdcdc'],
     tooltip: {},
-    
-    // label: { //  饼图图形上的文本标签
-
-    //   normal: { // normal 是图形在默认状态下的样式
-    //     show: true,
-    //     position: 'center',
-    //     color: 'red',
-    //     fontSize: 18,
-    //     fontWeight: 'bold',
-    //     formatter: '12' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
-    //   }
-    // },
     series: {
       type: 'pie',
       name: '性别比例',
-      // radius: ['50%', '70%'],
-      center: ['50%', '65%'],
-
-        radius: ['40%', '60%'],
+      center: ['44%', '65%'],
+      radius: ['34%', '52%'],
       data:
         dataset,
-
-
-
-
     }
-    // series: {
-    //   ...this.defaultOpt.series,
-    //   data: this.dataset || [],
-
-    // },
   }
 
 
   const piestyles = {
     width: '100%',
     height: '400px',
+    minWidth:'350px'
 
   }
 

src/pages/indexEcharts/components/UserSource.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
-// import UserSource from './mmm';
 
 import styles from '../styles.less'
 
-
 const formatDate = (start, end) => {
   const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
   const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
 }
 
 const UserSource = (props) => {
-// console.log(props,'---------')
   const [data, setData] = useState({ records: [] })
   //柱图
-
   useEffect(() => {
-   userResource(formatDate(props.startDate, props.endDate))
+    userResource(formatDate(props.startDate, props.endDate))
   }, [props.startDate, props.endDate])
 
-  function userResource (params) {
+  function userResource(params) {
     request({
       ...apis.indexEcharts.userResource,
       params,
     }).then((data) => {
-      // console.log(data , '3333')
       setData(data)
       props.onSuccess(data)
     })
   }
 
-  function toEdit () {
-    router.push({
-      pathname: '/indexEcharts/userSource',
-      // query: {
-      //   a: 'b',
-      // },
-    });
-  }
-
   const dataset = data || {};
   const source = dataset.columnar || [];
-
-  // const source = this.dataset.columnar || [];
   const subtitle = '最近7天';
   const baroptions = {
-    title: {
-      text: '用户来源',
-      subtext: '最近7天',
-    },
-    // color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+    title: { },
     xAxis: { type: 'category' },
     legend: {
       left: '20%',
       data: ['所有用户', '注册用户']
-      // itemWidth: '24px',
-      // itemHeight:'24px',
     },
 
     tooltip: {},
           }
         }
 
-
-
       },
     ],
     dataset: {
       dimensions: ['fromName', 'userCount', 'registered'],
       source: source,
     },
-
   }
 
-  function handleSelectChange (e) {
-    // eslint-disable-next-line no-console
-    // console.log(e)
-  }
-
-
-
-
 
   const barstyle = {
-    width: '1000px',
+    width: '100%',
     height: '480px',
-
+    minWidth: '400px'
   }
 
-
   return (
     <>
       <div>
-    
-        <EChart options={baroptions} style={barstyle} />
- 
-      </div>
+      <p onClick={()=>router.push('/indexEcharts/userSource')}><span style={{borderBottom:'1px solid #f02d40',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源</span> <span style={{fontSize:'0.09rem',color:'#888',marginLeft:'0.06rem'}}>最近七天</span></p>
 
+        <EChart onClick={() => router.push('/indexEcharts/userSource')} options={baroptions} style={barstyle} />
+
+      </div>
 
     </>
   )

src/pages/indexEcharts/components/UserSourcepie.jsx

 import moment from 'moment';
 import router from 'umi/router';
 import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
-// import UserSource from './mmm';
 
 import styles from '../styles.less'
 const formatDate = (start, end) => {
   return { startDate, endDate }
 }
 const UserSource = (props) => {
-  //  console.log(props,'999999999999')
   const [data, setData] = useState({ records: [] })
-  //柱图
+
 
   useEffect(() => {
     userResource(formatDate(props.startDate, props.endDate))
        ...apis.indexEcharts.userResource,
        params,
      }).then((data) => {
-      //  console.log(data , '3333')
        setData(data)
      })
    }
   function toEdit () {
     router.push({
       pathname: '/indexEcharts/userSource',
-      // query: {
-      //   a: 'b',
-      // },
     });
   }
 
   const dataset = data || {};
 
 
-
-
-
   const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
   const pieoptions = {
-    // xAxis: {},
     color: ['#6B82E6', '#F02D40', '#FF834E'],
     legend: {
-      // left: '70%',
       orient: 'vertical',
       x: 'left',
       data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
-      
     },
-    tooltip: {
-
-    },
-    // yAxis: {},
-
+    tooltip: {},
     series: [
       {
         type: 'pie',
-        // datasetIndex: 1,
-        center: ['50%', '65%'],
-
-        radius: ['40%', '60%'],
-       
-        // itemStyle: {
-        //   normal: {
-          
-        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-        //       offset: 0,
-        //       color: '#FFC4A8'
-        //     }, {
-        //       offset: 1,
-        //       color: '#FF7E49'
-        //     }]),
-        //   },
-  
-        // }
-     
+        center: ['44%', '65%'],
+        radius: ['34%', '52%'],
       },
-      // {
-        
-       
-       
-      //   itemStyle: {
-      //     normal: {
-          
-      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //         offset: 0,
-      //         color: '#214318'
-      //       }, {
-      //         offset: 1,
-      //         color: '#543E49'
-      //       }]),
-      //     },
-  
-      //   }
-     
-      // }
-      // {
-
-      //   itemStyle: {
-      //     normal: {
-          
-      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //         offset: 0,
-      //         color: '#FFC4A8'
-      //       }, {
-      //         offset: 1,
-      //         color: '#FF7E49'
-      //       }]),
-      //     }
-
-      // }
-
-
     ],
     dataset: {
       id: 'pie',
       source: [
-        {
-          form: '来源置业顾问', value: person_realty_consultant,
-        },
-        { form: '来源全民经纪人', value: person_estate_agent },
-        { form: '自主进入', value: person_null },
+        { '用户来源': '来源置业顾问', value: person_realty_consultant,},
+        { '用户来源': '来源全民经纪人', value: person_estate_agent },
+        { '用户来源': '自主进入', value: person_null },
       ]
     },
-
-
-
-
-
   }
-  function handleSelectChange (e) {
-    // eslint-disable-next-line no-console
-    // console.log(e)
-  }
-
-
-
-
-
+ 
 
   const piestyles = {
     width: '100%',
     height: '400px',
-
+    minWidth:'350px',
   }
 
 
     <>
       <div>
 
-
-
-
-
         <EChart options={pieoptions} style={piestyles} />
 
       </div>
 
-
-
-
-
     </>
   )
 }

src/pages/indexEcharts/index.jsx

 
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
-
-// import styles from '../../style/GoodsList.less';
 import router from 'umi/router';
-
 import request from '../../utils/request'
 import apis from '../../services/apis';
-// import Styles from './style.less';/
 import UserSource from './components/UserSource.jsx';
 import UserSourcepie from './components/UserSourcepie.jsx';
 import UserBehavior from './components/UserBehavior.jsx';
 import IntentionalCustomers from './components/IntentionalCustomers'
 import styles from './styles.less'
 import moment from 'moment';
-const header = (props) => {
+import CityNums from '../charts/CityNums';
+const indexEcharts = (props) => {
 
   const endDate = new Date()
 
   //为了观察数据先设30天
-  const startDate = moment().subtract(30, 'day').toDate()
+  const startDate = moment().subtract(7, 'day').toDate()
 
   function onTabledatas (e) {
 
   }
+  
   return (
 
     <>
-      {/* <div>2222</div> */}
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex',width:'100%' }}>
         <div className={styles.bar}>
-          <UserSource endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
+          <UserSource endDate={endDate}  startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
         </div>
         <div className={styles.pie}>
           <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
         </div>
       </div>
+      <div>
+      <CityNums></CityNums>
+      </div>
       <div className={styles.behavior}>
         <UserBehavior endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
       </div>
       <div style={{ display: 'flex' }}>
         <div className={styles.bar}>
           <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
-
         </div>
         <div className={styles.pie}><UserConversion></UserConversion> </div>
       </div >
 }
 
 
-export default header
+export default indexEcharts

src/pages/indexEcharts/newUsers.jsx

   useEffect(() => {
 
     setEndDate(new Date())
-    setStartDate(moment().subtract(30, 'day').toDate())
+    setStartDate(moment().subtract(7, 'day').toDate())
 
   }, [])
 
 
   function onChange (e) {
 
-    // console.log(`radio checked:${e.target.value}`);
 
   }
 
 
   }
 
-  
- 
-
  
   function handleSelectChange (e) {
 
 
   const { Column, ColumnGroup } = Table;
 
-
-
-
-
-  
   return (<>
     <div style={{
       backgroundColor: '#fff',
       borderRadius: '12px',
       minHeight: '60vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+      <Radio.Group onChange={onChange} buttonStyle="solid" defaultValue="a"  style={{marginBottom:'20px'}}>
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>

src/pages/indexEcharts/styles.less

 .bar {
-  width: 1060px;
+  width: 70%;
+  min-width: 400px;
   min-height: 560px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  padding: 40px;
-  margin-right: 40px;
-  margin-bottom: 40px;
+  margin-right: 30px;
 }
 
 .pie {
-  width: 509px;
+  width: 30%;
+  min-width: 370px;
   height: 560px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  padding: 40px;
-  margin-bottom: 40px;
+
 }
 
 .behavior {
-  width: 1600px;
+  width: 100%;
   height: 586px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
-  margin-bottom: 40px;
+  margin-bottom: 25px;
   padding: 40px;
 }
 
 .customers {
-  width: 1600px;
+  width: 100%;
   height: 718px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);

src/pages/indexEcharts/userBehavior.jsx

 import React, { Component, useState, useEffect } from 'react';
-import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
+import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table } from 'antd';
 import { Row, Col, Menu, Dropdown } from 'antd';
 import UserBehavior from './components/UserBehavior'
-// import XForm, { FieldTypes } from '../../components/XForm';
 import moment from 'moment';
-
 import EChart from '../../components/EchartsTest/EChart';
 import request from '../../utils/request';
 import apis from '../../services/apis';
-
+import BuildSelect from '../../components/SelectButton/BuildSelect'
 
 // const formatDate = (start, end) => {
 //   const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
 //   return { startDate, endDate }
 // }
 
-
 const header = props => {
 
   const [tableData, setTableData] = useState({ records: [] })
 
   const [endDate, setEndDate] = useState({})
   const [startDate, setStartDate] = useState({})
-  let daterange= []
+  let daterange = []
 
   useEffect(() => {
 
     setEndDate(new Date())
-    setStartDate(moment().subtract(30, 'day').toDate())
+    setStartDate(moment().subtract(7, 'day').toDate())
 
   }, [])
 
   const { RangePicker } = DatePicker;
 
-  function onChangetime (dates, dateStrings) {
-
-    daterange[1]=dateStrings[1]
-    daterange[0]=dateStrings[0]
-
-  }
-
-  const handleSubmit = (e, props) => {
+  function onChangetime(dates, dateStrings) {
 
-    e.preventDefault();
+    daterange[1] = dateStrings[1]
+    daterange[0] = dateStrings[0]
 
   }
 
   const getDataOf = (days) => () => {
 
- 
     setEndDate(new Date())
     setStartDate(moment().subtract(days, 'day').toDate())
 
   }
 
-  function onChange (e) {
-
-    // console.log(`radio checked:${e.target.value}`);
-
-  }
 
-  function datalist () {
+  function datalist() {
 
     setEndDate(daterange[1])
     setStartDate(daterange[0])
 
   }
 
-  
-  function redata (e) {
-  
+  function redata(e) {
 
-    console.log('行为回调数据：' ,e)
-  }
- 
-
- 
-  function handleSelectChange (e) {
-
-    console.log(e)
 
+    console.log('行为回调数据：', e)
+  }
+  function handleChange(value) {
+    console.log(`selected ${value}`);
   }
 
   const columns = [
       title: '离开时间',
       dataIndex: 'stion',
       key: 'stion',
-    
+
     },
   ];
 
-  const dataSource  = []
+  const dataSource = []
 
-
-
-  
   return (<>
     <div style={{
       backgroundColor: '#fff',
       padding: '32PX 28px',
       boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
       borderRadius: '12px',
-      minHeight: '60vh'
+      minHeight: '1000vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+    <div>
+    <Radio.Group buttonStyle="solid" defaultValue="a">
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>
           'This Month': [moment().startOf('month'), moment().endOf('month')],
         }}
         showTime
-        // format="YYYY/MM/DD HH:mm:ss"
         onChange={onChangetime}
       />
-      <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={datalist}>
+      <Button type="primary" htmlType="submit" style={{ marginLeft: '30px',float:'right' }} onClick={datalist}>
         搜索
-          </Button>
-      <div>
-        <UserBehavior endDate={endDate} startDate={startDate}  dataZoom={true}  onReData={(e) => redata(e)}></UserBehavior>
-        {/* */}
+      </Button>
+    </div>
+     
+      <div style={{ display: 'flex', margin: '24px 0' }}>
+      <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>
+        <Select placeholder="所有事件组" style={{ width: '14%',minWidth:'160px',marginRight:'2%' }} onChange={handleChange}>
+          <Option value="jack">Jack</Option>
+          <Option value="lucy">Lucy</Option>
+          <Option value="Yiminghe">yiminghe</Option>
+        </Select>
+        <Select placeholder="请选择事件" style={{ width: '14%',minWidth:'160px',marginRight:'2%' }} onChange={handleChange}>
+          <Option value="jack">Jack</Option>
+          <Option value="lucy">Lucy</Option>
+          <Option value="Yiminghe">yiminghe</Option>
+        </Select>
+        <Select placeholder="请选择属性" style={{ width: '14%',minWidth:'160px' }} onChange={handleChange}>
+          <Option value="jack">Jack</Option>
+          <Option value="lucy">Lucy</Option>
+          <Option value="Yiminghe">yiminghe</Option>
+        </Select>
+      </div>
+      
+      
+      <div style={{ margin: '24px 0' }}>
+        <UserBehavior BuildSelectHide={true} endDate={endDate} startDate={startDate} dataZoom={true} onReData={(e) => redata(e)}></UserBehavior>
       </div>
 
       <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} />
   </>
   )
 }
-// data.records
 export default header

src/pages/indexEcharts/userSource.jsx

       return acc
     }, {})
 
-    // tabledata
     setTableData(Object.keys(data).map(x => ({ label: x, ...data[x] })))
 
-    // console.log('回调数据11111111111111111111111111：' ,Object.keys(data).map(x => ({ label: x, ...data[x] })))
-    // console.log('回调数据1：' ,tableData[0])
   }
 
   const columns = [
 
   ]
 
-  // const columns = [{}]
-
-  // console.log(tableData, '12222222222222')
   function handleSelectChange (e) {
 
     console.log(e)
       borderRadius: '12px',
       minHeight: '60vh'
     }}>
-      <Radio.Group onChange={onChange} defaultValue="a">
+      <Radio.Group buttonStyle="solid" defaultValue="a">
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>

src/pages/staff/list/addRole.jsx

 import React, { useState, useEffect } from 'react';
-import { Checkbox, Input, Card, Form, Button,Row,Col } from 'antd';
+import { Checkbox, Input, Card, Form, Button, Row, Col, Spin } from 'antd';
 import { connect } from 'dva';
 import XForm, { FieldTypes } from '../../../components/XForm';
 import request from '../../../utils/request';
   const [dataMenuId, setDataMenuId] = useState([])
   const [dataButtonId, setDataButtonId] = useState([])
 
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     // 新增和编辑用一个页面
     if (props.location.query) {
   // 根据角色id查询当前的菜单及其按钮
   function buttonAndMenuList(params, ids) {
     request({ ...apis.role.buttonAndMenuList, urlData: { id: ids }, params: { ...params } }).then(data => {
+      setLoading(false)
       props.form.setFieldsValue({ roleName: data.roleName })
       console.log(data)
       setData(data)
 
       // 获取所有的权限Id
       if (data.sysMenuList) {
-        setDataMenuId(data.sysMenuList.map(item => item.menuId))
-        setDataButtonId((data.sysMenuList.map(item => item.sysButtonInMenu && item.sysButtonInMenu.map(btn => btn.btnId).join(',')).filter(f => f !== '').join(',').split(',')).map(a => parseInt(a)))
+        setDataMenuId(data.sysMenuList.map(item => item && item.menuId))
+        // setDataButtonId((data.sysMenuList.map(item => item.sysButtonInMenu && item.sysButtonInMenu.map(btn => btn.btnId).join(',')).filter(f => f !== '').join(',').split(',')).map(a => parseInt(a) ) )
+        setDataButtonId(data.sysButtonInMenu.map(item => item && item.btnId))
       }
   }).catch((err) => {
       console.log(err)
       
         const sumitMenu = userMenus.filter(item => dataMenuId.includes(item.menuId))
         const sumitBtn = buutonDate.filter(item => dataButtonId.includes(item.btnId))
-        // console.log('sumitMenu', sumitMenu)
-        // console.log('sumitBtn', sumitBtn)
-        // console.log('sumitMenu', sumitMenu)
-        // const sumitBut = data.sysMenuList[0].sysButtonInMenu.concat(but)
         updateAuthMenu({ sysMenu: sumitMenu, name: values.roleName, id: props.location.query.id, sysButton: sumitBtn })
       } else {
         updateAuthMenu({ sysMenu: menus, name: values.roleName, id: props.location.query.id, sysButton: but })
     });
   }
   const { getFieldDecorator } = props.form;
+  
   return (
     <>
       <div>
+      <Spin spinning={ loading } size="large">
         <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
           <Form.Item label="角色名称">
             {getFieldDecorator('roleName', {
           </Button>
           </Form.Item>
         </Form>
+        </Spin>
       </div>
     </>
   )