按钮权限

config/config.js

@@ -416,6 +416,39 @@ export default {
                 },
               ],
             },
+
+
+            {
+              path: '/indexEcharts',
+              name: '首页报表',
+              component: '../layouts/SecurityLayout',
+              routes: [
+                {
+                  path: '/indexEcharts/index',
+                  name: '报表',
+                  component: './indexEcharts/index',
+                },
+                {
+                  path: '/indexEcharts/userSource',
+                  name: '用户来源',
+                  component: './indexEcharts/userSource',
+                },
+                {
+                  path: '/indexEcharts/userBehavior',
+                  name: '用户行为',
+                  component: './indexEcharts/userBehavior',
+                },
+                {
+                  path: '/indexEcharts/newUsers',
+                  name: '新增用户',
+                  component: './indexEcharts/newUsers',
+                },
+                
+              ],
+            },
+            
+
+            
             {
               component: './404',
             },

src/components/EchartsTest/EChart.jsx

@@ -12,6 +12,8 @@ import 'echarts/lib/chart/map';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/legend';
 import 'echarts/lib/component/title';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/dataZoom';
 import 'echarts/lib/component/geo';
 import 'echarts/lib/component/visualMap';
 
@@ -41,7 +43,6 @@ class EchartsTest extends Component {
                 ...this.props.options || {},
             }
 
-            console.log('----options--->', options)
 
             this.chart.setOption(options);
         }

src/components/EchartsTest/index.jsx

@@ -7,6 +7,8 @@ import 'echarts/lib/chart/bar';
 // 引入提示框和标题组件
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
+import 'echarts/lib/chart/line'
+
 class Chart extends Component {
 
   render() {

src/global.less

@@ -92,6 +92,9 @@ ol {
 .ant-row.ant-form-item .ant-form-item-label.ant-col-sm-3{
   min-width: 100px;
 }
+.ant-card-body{
+  padding: 0;
+}
 .ant-breadcrumb{
   font-size: 0.1rem;
   .anticon {

src/pages/channel/editChannel.jsx

@@ -57,7 +57,7 @@ const header = props => {
 
   return (
   <>
-        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
         <Form.Item label="渠道名称">
           {getFieldDecorator('channelName', {
             rules: [{ required: true, message: '请输入渠道名称' }],

src/pages/indexEcharts/components/IntentionalCustomers.jsx

@@ -0,0 +1,103 @@
+import React, { Component, useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
+import { func } from 'prop-types';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+// const { Option } = Select;
+
+const UserBehavior = (props) => {
+  const [data, setData] = useState({ records: [] })
+  useEffect(() => {
+    IntentionUsers()
+    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
+
+  }, [])
+  function IntentionUsers (params) {
+    request({
+      ...apis.indexEcharts.intentionUsers,
+      params: { pageSize: 9999, ...params }
+    }).then((data) => {
+      setData(data)
+      console.log(data || {}, '2134')
+    })
+  }
+
+  // getIntentionUsers({ commit }, payload) {
+  //   return new Promise((resolve, reject) => {
+  //     request({
+  //       ...apis.indexEcharts.intentionUsers,
+  //       params: { pageSize: 9999, ...payload }
+  //     }).then((data) => {
+  //       resolve(data.records)
+  //     }).catch((err) => {
+  //       reject(err)
+  //     })
+  //   })
+  // },
+  // const dataSource = [
+  //   {
+  //     key: '1',
+  //     name: '胡彦斌',
+  //     age: 32,
+  //     address: '西湖区湖底公园1号',
+  //   },
+  //   {
+  //     key: '2',
+  //     name: '胡彦祖',
+  //     age: 42,
+  //     address: '西湖区湖底公园1号',
+  //   },
+  // ];
+  
+  const columns = [
+    {
+      title: '用户姓名',
+      dataIndex: 'personName',
+      key: 'personName',
+      width: '25%',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      width: '25%',
+    },
+    {
+      title: '意向楼盘',
+      dataIndex: 'buildingName',
+      key: 'buildingName',
+      width: '25%',
+    },
+    {
+      title: '意向值',
+      dataIndex: 'intention',
+      key: 'intention',
+      width: '25%',
+    },
+  ];
+
+
+  function handleBuildingChange (e) {
+    IntentionUsers({ buildingId: e })
+
+  }
+  return (
+    <>
+      <div>
+        <h3>意向客户</h3>
+
+        <BuildSelect slot='action' onChange={(e => handleBuildingChange(e))}></BuildSelect>
+
+        <Table dataSource={data.records} columns={columns} pagination={false} scroll={{ y: 500 }} />
+
+
+      </div>
+
+
+
+    </>
+  )
+}
+
+export default UserBehavior;

src/pages/indexEcharts/components/NewUsers.jsx

@@ -0,0 +1,151 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+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 NewUsers = (props) => {
+  //  console.log(props,'999999999999')
+  const [data, setData] = useState({ records: [] })
+
+
+  useEffect(() => {
+    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({
+      ...apis.indexEcharts.newUser,
+      params,
+    }).then((data) => {
+      console.log(data, '3333')
+      setData(data)
+    })
+  }
+
+  const dataZoom=props.dataZoom?[
+    {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'slider',
+      start: 0,
+      end: 100
+    },
+  ] : undefined 
+  // //  show: false
+  const dataset = (data.selectNewsUserCount) || []
+  const options = {
+
+   
+      color: ["#FF814C", "#F02B3E"],
+      tooltip: {
+        trigger: "axis"
+      },
+      icon: "rect",
+      legend: {
+        data: ["新用户数", "授权注册"]
+      },
+      toolbox: {},
+      xAxis: {
+        type: "category",
+      },
+      yAxis: {},
+      dataZoom,
+      series: [
+        {
+          name: "新用户数",
+          type: "line",
+        },
+        {
+          name: "授权注册",
+          type: "line",
+        }
+      ],
+      dataset: {
+        dimensions: ['date', 'userCount', 'authorizationCount'],
+        source: 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>
+         */}
+       </div>
+
+
+        <EChart options={options} style={piestyles} />
+      </div>
+
+
+
+
+
+    </>
+  )
+}
+
+export default NewUsers;

src/pages/indexEcharts/components/UserActive.jsx

@@ -0,0 +1,131 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+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) => {
+  //  console.log(props,'999999999999')
+  const [data, setData] = useState({ records: [] })
+  //柱图
+
+  useEffect(() => {
+    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) {
+    request({
+      ...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,
+      data: dataset.map(x => ([x.date, !x.activityCount ? 0 : x.activityCount])),
+      itemStyle: {
+        normal: {
+          barBorderRadius: [50, 50, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#FD8A95'
+          }, {
+            offset: 1,
+            color: '#F13043'
+          }]),
+          shadowColor: 'rgba(0, 0, 0, 0.4)',
+
+        }
+      }
+    }
+
+  }
+
+
+  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>
+        
+       </div>
+
+
+        <EChart options={options} style={piestyles} />
+      </div>
+
+
+
+
+
+    </>
+  )
+}
+
+export default UserSource;

src/pages/indexEcharts/components/UserBehavior.jsx

@@ -0,0 +1,154 @@
+import React, { Component, useState, useEffect } from 'react';
+
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import moment from 'moment';
+import router from 'umi/router';
+import 'echarts/lib/component/dataZoom'
+import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
+
+const { Option } = Select;
+
+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 UserBehavior = (props) => {
+// console.log(props,'11111111')
+
+const [data, setData] = useState({ records: [] })
+  const [datas, setDatas] = useState({ records: [] })
+ 
+  
+  //柱图
+
+  useEffect(() => {
+    getUserBehaviorSummary(formatDate(props.startDate, props.endDate))
+    getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
+
+  }, [props.startDate, props.endDate])
+
+  function getUserBehaviorSummary(params) {
+
+
+    request({
+      ...apis.indexEcharts.userBehavior.summary,
+      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) {
+
+    setData([])
+    request({
+      ...apis.indexEcharts.userBehavior.profile,
+      params:{ event: row.event, personId: row.personId }
+    }).then((data) => {
+
+      
+      setData(data )
+      // props.onReData(data)
+      // console.log(data , '22354234')
+    })
+
+
+  }
+  
+    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 = {
+    width: '100%',
+    height: '400px',
+
+  }
+
+
+
+  return (
+    <>
+      <div>
+        {/* onSuccess={(e) => onTabledatas(e)} */}
+      <BuildSelect slot='action' onChange={(e=>handleBuildingChange(e))}></BuildSelect>
+      <EChart  options={options} style={style} />
+
+ 
+      </div>
+
+
+
+    </>
+  )
+}
+
+export default UserBehavior;

src/pages/indexEcharts/components/UserConversion.jsx

@@ -0,0 +1,173 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+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)
+  }, [])
+
+  // 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) => {
+      request({
+        ...apis.indexEcharts.userConversion,
+        params: payload,
+      }).then((data) => {
+        resolve(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']
+
+    // 获取第一个值
+    let num = 0
+    for (let v of Object.keys(other)) {
+      num = other[v]
+      break
+    }
+
+
+    if (pvNum < num) {
+      theCurrent = []
+    } else {
+      theCurrent = [
+        { name: getStatisName(), value: num },
+        { name: '其余', value: pvNum - num },
+      ]
+    }
+    
+    dataset[theStatis] = theCurrent
+  }
+
+  function getStatisName() {
+    return statisTypes.filter(x => x.value === theStatis)[0].label
+  }
+
+  // getStatisName() {
+ 
+  const options = {
+    legend: {},
+    color: ['#8B7FE2', '#DDDDDD'],
+    tooltip: {},
+    series: {
+      type: 'pie',
+      name: '转化率',
+      radius: ['50%', '70%'],
+      data: theCurrent
+    }
+    
+      
+    
+
+  }
+  // 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) {
+
+  }
+
+  const piestyles = {
+    width: '100%',
+    height: '400px',
+
+  }
+
+
+  return (
+    <>
+      <div>
+        <h3>转化率</h3>
+
+        <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>
+        {/* <EChart options={options} style={piestyles} /> */}
+
+
+
+
+      </div>
+
+
+
+
+
+    </>
+  )
+}
+
+export default UserSource;

src/pages/indexEcharts/components/UserSex.jsx

@@ -0,0 +1,113 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+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 endDate = new Date()
+  const startDate = moment().subtract(7, 'day').toDate()
+
+
+  useEffect(() => {
+    UserSex(formatDate(startDate, endDate))
+  }, [])
+
+  function UserSex (params) {
+    request({
+      ...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'],
+    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%'],
+      data:
+        dataset,
+
+
+
+
+    }
+    // series: {
+    //   ...this.defaultOpt.series,
+    //   data: this.dataset || [],
+
+    // },
+  }
+
+
+  const piestyles = {
+    width: '100%',
+    height: '400px',
+
+  }
+
+
+  return (
+    <>
+      <div>
+        {/* <h3>性别比例</h3> */}
+
+
+        <EChart options={options} style={piestyles} />
+
+
+
+
+      </div>
+
+
+
+
+
+    </>
+  )
+}
+
+export default UserSource;

src/pages/indexEcharts/components/UserSource.jsx

@@ -1,30 +1,39 @@
 import React, { Component, useState, useEffect } from 'react';
-
+import echarts from 'echarts/lib/echarts';
 import EChart from '../../../components/EchartsTest/EChart';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import router from 'umi/router';
-import {Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
+import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
 // import UserSource from './mmm';
 
+import styles from '../styles.less'
 
-const UserSource = (props) => {
 
+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) => {
+// console.log(props,'---------')
   const [data, setData] = useState({ records: [] })
   //柱图
 
   useEffect(() => {
-    userResource()
-  }, [])
+   userResource(formatDate(props.startDate, props.endDate))
+  }, [props.startDate, props.endDate])
 
-  function userResource () {
+  function userResource (params) {
     request({
       ...apis.indexEcharts.userResource,
-      params: { pageNum: 1, pageSize: 9999 }
+      params,
     }).then((data) => {
       // console.log(data , '3333')
       setData(data)
+      props.onSuccess(data)
     })
   }
 
@@ -43,19 +52,63 @@ const UserSource = (props) => {
   // const source = this.dataset.columnar || [];
   const subtitle = '最近7天';
   const baroptions = {
-    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+    title: {
+      text: '用户来源',
+      subtext: '最近7天',
+    },
+    // color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
     xAxis: { type: 'category' },
     legend: {
       left: '20%',
-      data: ['所有用户', '注册用户'],
+      data: ['所有用户', '注册用户']
+      // itemWidth: '24px',
+      // itemHeight:'24px',
     },
 
     tooltip: {},
 
     yAxis: {},
     series: [
-      { type: 'bar', name: '所有用户', datasetIndex: 0 },
-      { type: 'bar', name: '注册用户' },
+      {
+        type: 'bar', name: '所有用户', datasetIndex: 0,
+        barWidth: 20,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [20, 20, 0, 0],
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#FFC4A8'
+            }, {
+              offset: 1,
+              color: '#FF7E49'
+            }]),
+            shadowColor: 'rgba(0, 0, 0, 0.4)',
+
+          }
+        }
+      },
+      {
+        type: 'bar',
+        name: '注册用户',
+        barWidth: 20,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [20, 20, 0, 0],
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#FE939D'
+            }, {
+              offset: 1,
+              color: '#F0293C'
+            }]),
+            shadowColor: 'rgba(0, 0, 0, 0.4)',
+
+          }
+        }
+
+
+
+      },
     ],
     dataset: {
       id: 'bar',
@@ -64,92 +117,19 @@ const UserSource = (props) => {
     },
 
   }
-  const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
-  const pieoptions = {
-    // xAxis: {},
-    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
-    legend: {
-      // left: '70%',
-      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
-    },
-    tooltip: {},
-    // yAxis: {},
-
-    series: [
-      {
-        type: 'pie',
-        // datasetIndex: 1,
-        center: ['50%', '50%'],
-        radius: [0, '50%'],
-      },
-    ],
-    dataset: {
-      id: 'pie',
-      source: [
-        { form: '来源置业顾问', value: person_realty_consultant },
-        { form: '来源全民经纪人', value: person_estate_agent },
-        { form: '自主进入', value: person_null },
-      ]
-    },
-
-
-
-
 
-  }
   function handleSelectChange (e) {
     // eslint-disable-next-line no-console
-    console.log(e)
+    // console.log(e)
   }
 
-  //表格
-  const dataSource = [
-    {
-      name: '置业顾问',
-      status: '1',//显示停用
-    },
-    {
-      name: '置业经理',
-      status: '1',//停用
-    },
-  ];
-
-  const columns = [
-    // {
-    //   title: '商品图片',
-    //   dataIndex: 'img',
-    //   key: 'img',
-    //   align: 'center',
-  
-    //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
-    // },
-    {
-      title: '角色名称',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
-      render: text => <a>{text}</a>,
-    },
-  
-    {
-      title: '操作  ',
-      dataIndex: 'status',
-      key: 'status',
-      align: 'center',
-  
-      render: () => <>11</>
-       
-    },
-  ];
 
-  const style = {
-    width: '100%',
-    height: '400px',
 
-  }
-  const styles = {
-    width: '100%',
-    height: '400px',
+
+
+  const barstyle = {
+    width: '1000px',
+    height: '480px',
 
   }
 
@@ -157,21 +137,11 @@ const UserSource = (props) => {
   return (
     <>
       <div>
-        <h3>用户来源 <small>{subtitle}</small></h3>
-        <Row>
-          <Col span={16}>
-            <EChart options={baroptions} style={style} /></Col>
-          <Col span={8}>
-            <EChart options={pieoptions} style={styles} /></Col>
-        </Row>
+    
+        <EChart options={baroptions} style={barstyle} />
+ 
       </div>
-      <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
-        <Option value={0}>所有用户</Option>
-        <Option value={1}>注册用户</Option>
-      </Select>
-
 
-      <Table dataSource={dataSource} columns={columns} />
 
     </>
   )

src/pages/indexEcharts/components/UserSourcepie.jsx

@@ -0,0 +1,180 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+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) => {
+  //  console.log(props,'999999999999')
+  const [data, setData] = useState({ records: [] })
+  //柱图
+
+  useEffect(() => {
+    userResource(formatDate(props.startDate, props.endDate))
+   }, [props.startDate, props.endDate])
+ 
+   function userResource (params) {
+     request({
+       ...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: {},
+
+    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'
+        //     }]),
+        //   },
+  
+        // }
+     
+      },
+      // {
+        
+       
+       
+      //   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 },
+      ]
+    },
+
+
+
+
+
+  }
+  function handleSelectChange (e) {
+    // eslint-disable-next-line no-console
+    // console.log(e)
+  }
+
+
+
+
+
+
+  const piestyles = {
+    width: '100%',
+    height: '400px',
+
+  }
+
+
+  return (
+    <>
+      <div>
+
+
+
+
+
+        <EChart options={pieoptions} style={piestyles} />
+
+      </div>
+
+
+
+
+
+    </>
+  )
+}
+
+export default UserSource;

src/pages/indexEcharts/index.jsx

@@ -1,5 +1,5 @@
 
-import React, { useState, useEffect }  from 'react';
+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';
@@ -9,19 +9,61 @@ 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 UserActive from './components/UserActive';
+import UserSex from './components/UserSex';
+import NewUsers from './components/NewUsers'
+import UserConversion from './components/UserConversion'
+import IntentionalCustomers from './components/IntentionalCustomers'
+import styles from './styles.less'
+import moment from 'moment';
+const header = (props) => {
 
+  const endDate = new Date()
 
-const header = (props) => {
+  //为了观察数据先设30天
+  const startDate = moment().subtract(30, 'day').toDate()
 
+  function onTabledatas (e) {
 
+  }
   return (
 
     <>
-    {/* <div>2222</div> */}
-     <UserSource  ></UserSource>
+      {/* <div>2222</div> */}
+      <div style={{ display: 'flex' }}>
+        <div className={styles.bar}>
+          <UserSource endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
+        </div>
+        <div className={styles.pie}>
+          <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
+        </div>
+      </div>
+      <div className={styles.behavior}>
+        <UserBehavior endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
+      </div>
+      <div style={{ display: 'flex' }}>
+        <div className={styles.bar}>
+
+          <UserActive ></UserActive>
+        </div>
+        <div className={styles.pie}><UserSex></UserSex> </div>
+      </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 >
+
+      <div className={styles.customers}>
+        <IntentionalCustomers></IntentionalCustomers>
+      </div>
     </>
   )
 }
 
 
-export default  header
+export default header

src/pages/indexEcharts/newUsers.jsx

@@ -0,0 +1,122 @@
+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 { Row, Col, Menu, Dropdown } from 'antd';
+import NewUsers from './components/NewUsers'
+// 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';
+
+
+// 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 header = props => {
+
+  const [tableData, setTableData] = useState({ records: [] })
+
+  const [endDate, setEndDate] = useState({})
+  const [startDate, setStartDate] = useState({})
+  let daterange= []
+
+  useEffect(() => {
+
+    setEndDate(new Date())
+    setStartDate(moment().subtract(30, 'day').toDate())
+
+  }, [])
+
+  const { RangePicker } = DatePicker;
+
+  function onChangetime (dates, dateStrings) {
+
+    daterange[1]=dateStrings[1]
+    daterange[0]=dateStrings[0]
+
+  }
+
+  const handleSubmit = (e, props) => {
+
+    e.preventDefault();
+
+  }
+
+  const getDataOf = (days) => () => {
+
+ 
+    setEndDate(new Date())
+    setStartDate(moment().subtract(days, 'day').toDate())
+
+  }
+
+  function onChange (e) {
+
+    // console.log(`radio checked:${e.target.value}`);
+
+  }
+
+  function datalist () {
+
+    setEndDate(daterange[1])
+    setStartDate(daterange[0])
+
+  }
+
+  
+ 
+
+ 
+  function handleSelectChange (e) {
+
+    console.log(e)
+
+  }
+
+  const { Column, ColumnGroup } = Table;
+
+
+
+
+
+  
+  return (<>
+    <div style={{
+      backgroundColor: '#fff',
+      padding: '32PX 28px',
+      boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
+      borderRadius: '12px',
+      minHeight: '60vh'
+    }}>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
+        <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
+      </Radio.Group>
+      <RangePicker
+        style={{ paddingLeft: '30px' }}
+        ranges={{
+          Today: [moment(), moment()],
+          '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>
+      <div>
+        <NewUsers endDate={endDate} startDate={startDate}  dataZoom={true} ></NewUsers>
+        {/* */}
+      </div>
+    </div>
+  </>
+  )
+}
+
+export default header

src/pages/indexEcharts/styles.less

@@ -0,0 +1,39 @@
+.bar {
+  width: 1060px;
+  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;
+}
+
+.pie {
+  width: 509px;
+  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;
+  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;
+  padding: 40px;
+}
+
+.customers {
+  width: 1600px;
+  height: 718px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 12px 12px 0px 0px;
+  padding: 40px;
+}

src/pages/indexEcharts/userBehavior.jsx

@@ -0,0 +1,160 @@
+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 { 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';
+
+
+// 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 header = props => {
+
+  const [tableData, setTableData] = useState({ records: [] })
+
+  const [endDate, setEndDate] = useState({})
+  const [startDate, setStartDate] = useState({})
+  let daterange= []
+
+  useEffect(() => {
+
+    setEndDate(new Date())
+    setStartDate(moment().subtract(30, 'day').toDate())
+
+  }, [])
+
+  const { RangePicker } = DatePicker;
+
+  function onChangetime (dates, dateStrings) {
+
+    daterange[1]=dateStrings[1]
+    daterange[0]=dateStrings[0]
+
+  }
+
+  const handleSubmit = (e, props) => {
+
+    e.preventDefault();
+
+  }
+
+  const getDataOf = (days) => () => {
+
+ 
+    setEndDate(new Date())
+    setStartDate(moment().subtract(days, 'day').toDate())
+
+  }
+
+  function onChange (e) {
+
+    // console.log(`radio checked:${e.target.value}`);
+
+  }
+
+  function datalist () {
+
+    setEndDate(daterange[1])
+    setStartDate(daterange[0])
+
+  }
+
+  
+  function redata (e) {
+  
+
+    console.log('行为回调数据：' ,e)
+  }
+ 
+
+ 
+  function handleSelectChange (e) {
+
+    console.log(e)
+
+  }
+
+  const columns = [
+    {
+      title: '访问事件',
+      dataIndex: 'personName',
+      key: 'personName',
+      width: '20%',
+    },
+    {
+      title: '访问用户',
+      dataIndex: 'phone',
+      key: 'phone',
+      width: '20%',
+    },
+    {
+      title: '访问次数',
+      dataIndex: 'buildingName',
+      key: 'buildingName',
+      width: '20%',
+    },
+    {
+      title: '首次访问时间',
+      dataIndex: 'intention',
+      key: 'intention',
+      width: '20%',
+    },
+    {
+      title: '离开时间',
+      dataIndex: 'stion',
+      key: 'stion',
+    
+    },
+  ];
+
+  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'
+    }}>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
+        <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
+      </Radio.Group>
+      <RangePicker
+        style={{ paddingLeft: '30px' }}
+        ranges={{
+          Today: [moment(), moment()],
+          '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>
+      <div>
+        <UserBehavior endDate={endDate} startDate={startDate}  dataZoom={true}  onReData={(e) => redata(e)}></UserBehavior>
+        {/* */}
+      </div>
+
+      <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ y: 500 }} />
+    </div>
+  </>
+  )
+}
+// data.records
+export default header

src/pages/indexEcharts/userSource.jsx

@@ -1,75 +1,226 @@
-import dayjs from 'dayjs';
-import React from 'react';
-import {Radio, DatePicker,  Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
-
+import React, { Component, useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
 import UserSource from './components/UserSource.jsx';
+import UserSourcepie from './components/UserSourcepie.jsx';
 // 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';
+
+
+// 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 header = props => {
+
+  const [tableData, setTableData] = useState([])
+  const [userType, setuserType] = useState([])
+
+  const [endDate, setEndDate] = useState({})
+  const [startDate, setStartDate] = useState({})
+  let daterange = []
+
+  useEffect(() => {
+
+    setEndDate(new Date())
+    setStartDate(moment().subtract(7, 'day').toDate())
+    setuserType('all')
+  }, [])
+
   const { RangePicker } = DatePicker;
-  function onChange(dates, dateStrings) {
-    console.log('From: ', dates[0], ', to: ', dates[1]);
-    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
-  }
 
+  function onChangetime (dates, dateStrings) {
+
+    daterange[1] = dateStrings[1]
+    daterange[0] = dateStrings[0]
+
+  }
 
   const handleSubmit = (e, props) => {
+
     e.preventDefault();
-    // props.form.validateFields((err, values) => {
-    //   if (!err) {
-    //     getList({ pageNum: 1, pageSize: 10, ...values })
-    //   }
-    // });
+
   }
 
+  const getDataOf = (days) => () => {
 
-  function getDataOf(days){      
-    // const endDate = new Date()
-    // const startDate = dayjs().subtract(days, 'day').toDate()
 
-    // this.$refs.chart.getData({ startDate, endDate })
+    setEndDate(new Date())
+    setStartDate(moment().subtract(days, 'day').toDate())
+
   }
 
-  function onChange(e) {
-    console.log(`radio checked:${e.target.value}`);
+  function onChange (e) {
+
+    // console.log(`radio checked:${e.target.value}`);
+
+  }
+
+  function datalist () {
+
+    setEndDate(daterange[1])
+    setStartDate(daterange[0])
+
   }
 
+
+
+  // const userType = 'all'
+  let tableTitle = ['日期']
+  // const dataset = data || {}
+
+  // function tableData () {
+
+  //   const data = (dataset.data || []).reduce((acc, item, index) => {
+  //     const { date, fromName, count, registered } = item
+  //     const num = userType === 'registered' ? registered : count
+
+  //     tableTitle = tableTitle.indexOf(fromName) > -1 ? tableTitle : tableTitle.concat(fromName) // eslint-disable-line
+  //     acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }
+
+  //     return acc
+  //   }, {})
+
+  //   return Object.keys(data).map(x => ({ label: x, ...data[x] }))
+
+  // }
+
+  function onTabledatas (e) {
+    const data = (e.data || []).reduce((acc, item, index) => {
+      const { date, fromName, count, registered } = item
+      const num = userType === 'registered' ? registered : count
+
+      tableTitle = tableTitle.indexOf(fromName) > -1 ? tableTitle : tableTitle.concat(fromName) // eslint-disable-line
+      acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }
+
+      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 = [
+    {
+      title: '日期',
+      dataIndex: 'label',
+      key: 'label',
+      width: '20%',
+    },
+
+    // {
+    //   title: '名片分享',
+    //   dataIndex: '名片分享',
+    //   key: '名片分享',
+    //   width: '16%'
+
+    // },
+    // {
+    //   title: '好友分享',
+    //   dataIndex: '好友分享',
+    //   key: '好友分享',
+    //   width: '16%'
+    // },
+    // {
+    //   title: '小程序搜索',
+    //   dataIndex: '小程序搜索',
+    //   key: '小程序搜索',
+    //   width: '16%'
+    // },
+    // {
+    //   title: '线下扫码',
+    //   dataIndex: '线下扫码',
+    //   key: '线下扫码',
+    //   width: '16%'
+    // },
+    // {
+    //   title: '群分享',
+    //   dataIndex: '群分享',
+    //   key: '群分享',
+    //   width: '16%'
+    // },
+
+
+
+
+  ]
+
+  // const columns = [{}]
+
+  // console.log(tableData, '12222222222222')
+  function handleSelectChange (e) {
+
+    console.log(e)
+    setuserType(e)
+  }
+
+
+
+
   return (<>
-  {/* <el-button type="text" @click="() => getDataOf(7)">最近7天</el-button>
-      <el-button type="text" @click="() => getDataOf(30)">最近1月</el-button>
-      <el-date-picker
-        v-model="dateRange"
-        type="daterange"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        style="margin-left: 16px">
-      </el-date-picker>
-      <el-button type="primary" icon="el-icon-search" style="margin-left: 32px" @click="search">查询</el-button>
-    </div>
-    <user-source ref="chart" mode="all"></user-source> */}
-  <Radio.Group onChange={onChange} defaultValue="a">
+    <div style={{
+      backgroundColor: '#fff',
+      padding: '32PX 28px',
+      boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
+      borderRadius: '12px',
+      minHeight: '60vh'
+    }}>
+      <Radio.Group onChange={onChange} defaultValue="a">
         <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
         <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
       </Radio.Group>
       <RangePicker
-      ranges={{
-        Today: [moment(), moment()],
-        'This Month': [moment().startOf('month'), moment().endOf('month')],
-      }}
-      showTime
-      format="YYYY/MM/DD HH:mm:ss"
-      // onChange={onChange}
-    />
-     <Button type="primary" htmlType="submit" >
-            查询
+        style={{ paddingLeft: '30px' }}
+        ranges={{
+          Today: [moment(), moment()],
+          '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>
-  <div>
-    
+      <div>
+
+        <div style={{ display: 'flex' }}>
+          <div style={{
+            width: '1060px',
+            height: '560px',
+
+            paddingTop: '40px',
+            marginRight: ' 40px',
+          }}>
+            <UserSource endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
+          </div>
+          <div style={{
+            width: '509px',
+            height: '600px',
 
-    <UserSource ></UserSource>
-  </div>
+            paddingTop: '40px',
+
+          }}>
+            <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
+          </div>
+        </div>
+        <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
+          <Option value='all'>所有用户</Option>
+          <Option value='registered'>注册用户</Option>
+        </Select>
+
+        <Table dataSource={tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
+      </div>
+    </div>
   </>
   )
 }

src/pages/news/list/editNewsList.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker,message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../../style/GoodsList.less';
+import apis from '../../../services/apis';
 import moment from 'moment';
 import router from 'umi/router';
 import BuildSelect from '../../../components/SelectButton/BuildSelect'
@@ -9,8 +10,16 @@ import NewsTypeSelect from '../../../components/SelectButton/NewTypeSelect'
 import XForm, { FieldTypes } from '../../../components/XForm';
 import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
+import PosterBottom from '../../../assets/bottom.png'
+import ImageUploader from '../../../components/XForm/ImageUpload';
+import logo from '../../../assets/logo.png';
+import yinhao from '../../../assets/yinhao.png'
+import touxiang from '../../../assets/touxiang.jpg';
+import poster1 from '../../../assets/poster1.png';
+import poster2 from '../../../assets/poster2.png';
 
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+const { TextArea } = Input;
 /**
  *
  *
@@ -118,11 +127,165 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
   }
   
   const Poster = (props) => {
-   return <div>Poster</div>
+    const [inputValue, changeInput] = useState('')
+    const [textAreaValue, changeTextArea] = useState('')
+    const [imgValue, changeImg] = useState('')
+    const [posterId, setPosterId] = useState('')
+
+    if(newsId){
+      useEffect(() => {
+        request({ ...apis.activity.poster, params: {targetId: newsId,targetType: 'news'} }).then((data) => {
+          console.log(data,"2222")
+          if(data.length > 0){
+            setPosterId(data[0].posterId)
+            changeImg(data[0].posterImg)
+            changeTextArea(data[0].posterDescription)
+            changeInput(data[0].posterTitle)
+          }
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }, [])
+    }
+
+    const submitPoster  = () => {
+       if(newsId){
+        if(posterId){
+          request({ ...apis.activity.updatePoster, urlData: {id: posterId}, data: {targetId: newsId,targetType: 'news',posterImg: imgValue,posterTitle: inputValue,posterDescription: textAreaValue},}).then((data) => {
+            message.info("保存成功")
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+         }else{
+          request({ ...apis.activity.addPoster, data: {targetId: newsId,targetType: 'news',posterImg: imgValue,posterTitle: inputValue,posterDescription: textAreaValue},}).then((data) => {
+            setPosterId(data.posterId)
+            message.info("保存成功")
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+         }
+       }else{
+        message.warn("请先保存基本信息数据")
+       }
+    }
+
+    return <div>
+      <div style={{ display: 'flex' }}>
+        <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
+          <div style={{ width: '375px', height: '785px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
+              <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
+              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
+              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您阅读</span>
+              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
+            </div>
+            <p style={{
+              margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
+              display: '-webkit-box', lineClamp: '3', height: '60px',
+              WebkitLineClamp: '2',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            }}>{inputValue ? inputValue : '海报标题'}</p>
+
+            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
+            <p style={{
+              margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
+              display: '-webkit-box', lineClamp: '3', height: '76px',
+              WebkitLineClamp: '3',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
+            <img src={PosterBottom} style={{ width: '100%' }} alt="" />
+          </div>
+          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
+        </div>
+
+        <div >
+          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
+            <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
+          </div>
+          <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
+            <TextArea rows={5} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
+          </div>
+
+        </div>
+      </div>
+      <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
+      <Button onClick={() => router.go(-1)}>取消</Button>
+    </div>
+
   }
  
   const Share = (props) => {
-    return <div>Share</div>
+    const [inputValue, changeInput] = useState('')
+    const [imgValue, changeImg] = useState('')
+    const [shareContentId, setShareContentId] = useState('')
+    
+    if(newsId){
+      useEffect(() => {
+        request({ ...apis.activity.shareContent, params: {targetId: newsId,targetType: 'news'},}).then((data) => {
+          console.log(data,"2222")
+          if(data.length > 0){
+            setShareContentId(data[0].shareContentId)
+            changeImg(data[0].shareContentImg)
+            changeInput(data[0].shareContentTitle)
+          }
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }, [])
+    }
+
+    const submitShare = () => {
+      if(newsId){
+        if(shareContentId){
+          request({ ...apis.activity.updateShareContent, urlData: {id: shareContentId},data: {targetId: newsId,shareContentType: 'news',shareContentImg: imgValue,shareContentTitle: inputValue},}).then((data) => {
+            message.info("保存成功")
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+         }else{
+          request({ ...apis.activity.addShareContent, data: {targetId: newsId,shareContentType: 'news',shareContentImg: imgValue,shareContentTitle: inputValue},}).then((data) => {
+            setShareContentId(data.shareContentId)
+            message.info("保存成功")
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+         }
+       }else{
+        message.warn("请先保存基本信息数据")
+       }
+    }
+
+    return <div style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
+        <div>
+          <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
+          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
+          <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : poster2} alt="" />
+        </div>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
+        <Input placeholder="请输入海报标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
+      </div>
+      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
+      </div>
+      <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
+      <Button onClick={() => router.go(-1)}>取消</Button>
+    </div>
   }
 
   return (

src/pages/staff/list/addRole.jsx

@@ -152,11 +152,13 @@ const Poster = props => {
     }
   }
   const gridStyle1 = {
-    width: '17%',
+    width: '16%',
     textAlign: 'left',
+    height: '72px',
+    padding:'24px 10px'
   };
   const gridStyle2 = {
-    width: '80%',
+    width: '84%',
     textAlign: 'left',
     height: '72px',
   };
@@ -207,8 +209,8 @@ const Poster = props => {
   const { getFieldDecorator } = props.form;
   return (
     <>
-      <div >
-        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+      <div>
+        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
           <Form.Item label="角色名称">
             {getFieldDecorator('roleName', {
               rules: [{ required: true, message: '请输入角色名称' }],
@@ -218,13 +220,11 @@ const Poster = props => {
           {userMenus.map(item => (
             (item.parentCode === '-1') &&
             <Row >
-              <Col span={7}>
-
+              <Col span={6}>
               </Col>
-              <Col span={17}>
-
+              <Col span={18}>
 
-                <Card title={<Checkbox checked={dataMenuId.includes(item.menuId)} onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%', alignItems: 'center' }} >
+                <Card title={<Checkbox checked={dataMenuId.includes(item.menuId)} onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%', alignItems: 'center',margin:'10px 0', boxShadow:'3px 3px 10px  rgba(0,0,0,0.15)',borderRadius:'8px'}} >
                   {
                     userMenus.map(menu => (
 

src/pages/staff/list/style.less

@@ -21,6 +21,7 @@
   border-radius: 12px;
   margin-bottom: 40px;
   position: relative;
+  padding: 0.1rem;
   
 }
 

src/services/apis.js

@@ -26,7 +26,7 @@ export default {
     signout: {
       method: 'POST',
       url: `${prefix}/taUser/signout`,
-      logout: true
+      logout: true,
     },
   },
   building: {
@@ -190,12 +190,50 @@ export default {
   indexEcharts: {
     userResource: {
       method: 'GET',
-      url: `${prefix}/selectUserResource`
+      url: `${prefix}/selectUserResource`,
+      action: 'userStatistics',
+    },
+    userBehavior: {
+      summary: {
+        method: 'GET',
+        url: `${prefix}/selectUserBehavior`,
+        action: 'userBehaviorStatistics',
+      },
+      profile: {
+        method: 'GET',
+        url: `${prefix}/selectEventAll`,
+        action: 'behaviorIncident',
+      },
+    },
+    userActive: {
+      method: 'GET',
+      url: `${prefix}/selectActiveUserCount`,
+      action: 'selectActiveUserCount',
+    },
+    userSex: {
+      method: 'GET',
+      url: `${prefix}/selectSexUser`,
+      action: 'selectSexUser',
+    },
+    newUser: {
+      method: 'GET',
+      url: `${prefix}/selectNewsUserCount`,
+      action: 'selectNewsUserCount',
+    },
+    userConversion: {
+      method: 'GET',
+      url: `${prefix}/selectConversion`,
+      action: 'selectConversion',
+    },
+    intentionUsers: {
+      method: 'GET',
+      url: `${prefix}/selectIntentionUser`,
+      action: 'selectIntentionUser',
     },
     userCity: {
-      method:'get',
+      method: 'get',
       url: `${prefix}/selectCityUser`,
-      action: 'admin.selectCityUser.get'
+      action: 'admin.selectCityUser.get',
     },
 
   },
@@ -213,17 +251,17 @@ export default {
       cancel: {
         method: 'PUT',
         url: `${prefix}/buildingDynamic/cancel/:id`,
-        action: 'admin.buildingDynamic.cancel.dynamicId.put'
+        action: 'admin.buildingDynamic.cancel.dynamicId.put',
       },
       send: {
         url: `${prefix}/buildingDynamic/send/:id`,
         method: 'PUT',
-        action: 'admin.buildingDynamic.send.dynamicId.put'
+        action: 'admin.buildingDynamic.send.dynamicId.put',
       },
       finish: {
         url: `${prefix}/buildingDynamic/finish`,
         method: 'PUT',
-        action: 'admin.buildingDynamic.finish.put'
+        action: 'admin.buildingDynamic.finish.put',
       },
       details: {
         url: `${prefix}/buildingDynamic/Details`,
@@ -321,7 +359,7 @@ export default {
       url: `${prefix}/taPointsExchange/change`,
       method: 'PUT',
       action: 'admin.taPointsExchange.change.put',
-    }
+    },
   },
   carsuseFigure: {
     extendContent: {
@@ -348,7 +386,7 @@ export default {
       url: `${prefix}/extendContent`,
       method: 'POST',
       action: 'admin.extendContent.post',
-    }
+    },
   },
   system: {
     taPolicy: {
@@ -405,7 +443,7 @@ export default {
       url: `${prefix}/taBuildingReport/add`,
       method: 'POST',
       action: 'admin.taBuildingReport.add.post',
-    }
+    },
   },
   staff: {
     taUser: {
@@ -508,48 +546,4 @@ export default {
     action: 'admin.updateAuthMenu.post',
   },
  },
-  // indexEcharts:{
-  //   list:{
-  //     method:'get',
-  //     url: `${commPrefix}/indexStatistical`
-  //   },
-  //   userResource: {
-  //       method:'get',
-  //       url: `${commPrefix}/selectUserResource`
-  //   },
-  //   userConversion: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectConversion`
-  //   },
-  //   userActive: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectActiveUserCount`
-  //   },
-  //   newUser: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectNewsUserCount`
-  //   },
-  //   userBehavior: {
-  //     summary: {
-  //       method:'get',
-  //       url: `${commPrefix}/selectUserBehavior`
-  //     },
-  //     profile: {
-  //       method:'get',
-  //       url: `${commPrefix}/selectEventAll`
-  //     },
-  //   },
-  //   intentionUsers: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectIntentionUser`
-  //   },
-  //   userSex: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectSexUser`
-  //   },
-  //   userCity: {
-  //     method:'get',
-  //     url: `${commPrefix}/selectCityUser`
-  //   },
-  // },
 }