用户来源新需求

src/pages/indexEcharts/components/UserSource.jsx

@@ -16,7 +16,9 @@ const formatDate = (start, end) => {
 }
 
 const UserSource = (props) => {
-  const [data, setData] = useState({ records: [] })
+  const [xData, setxData] = useState([])
+  const [fromData, setFromData] = useState([])
+  const [registerData, setRegisterData] = useState([])
   //柱图
   useEffect(() => {
     userResource(formatDate(props.startDate, props.endDate))
@@ -24,21 +26,23 @@ const UserSource = (props) => {
 
   function userResource(params) {
     request({
-      ...apis.indexEcharts.userResource,
+      ...apis.indexEcharts.selectPersonFrom,
       params,
     }).then((data) => {
-      setData(data)
-      console.log(data,"datadatadatadatavvvdatadatav")
+      setxData(data.map(x =>  x.sceneAlias))
+      setFromData(data.map(x => x.fromData))
+      setRegisterData(data.map(x => x.registerSum))
       props.onSuccess(data)
     })
   }
 
-  const dataset = data || {};
-  const source = dataset.columnar || [];
   const subtitle = '最近7天';
   const baroptions = {
     title: { },
-    xAxis: { type: 'category' },
+    xAxis: { 
+              type: 'category',
+              data: xData
+            },
     legend: {
       left: '20%',
       data: ['所有用户', '注册用户']
@@ -51,6 +55,7 @@ const UserSource = (props) => {
       {
         type: 'bar', name: '所有用户', datasetIndex: 0,
         barWidth: 20,
+        data: fromData,
         itemStyle: {
           normal: {
             barBorderRadius: [20, 20, 0, 0],
@@ -70,6 +75,7 @@ const UserSource = (props) => {
         type: 'bar',
         name: '注册用户',
         barWidth: 20,
+        data: registerData,
         itemStyle: {
           normal: {
             barBorderRadius: [20, 20, 0, 0],
@@ -87,11 +93,11 @@ const UserSource = (props) => {
 
       },
     ],
-    dataset: {
-      id: 'bar',
-      dimensions: ['fromName', 'userCount', 'registered'],
-      source: source,
-    },
+    // dataset: {
+    //   id: 'bar',
+    //   dimensions: ['fromName', 'userCount', 'registered'],
+    //   source: source,
+    // },
   }
 
 
@@ -104,7 +110,7 @@ const UserSource = (props) => {
   return (
     <>
       <div>
-      <p onClick={()=>router.push('/indexEcharts/userSource')}><span style={{borderBottom:'1px solid #f02d40',cursor: 'pointer',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源</span> {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}</p>
+      <p onClick={()=>router.push('/indexEcharts/userSource')}><span style={{borderBottom:'1px solid #f02d40',cursor: 'pointer',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源1</span> {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}</p>
 
         <EChart options={baroptions} style={barstyle} />
 

src/pages/indexEcharts/components/UserSourceDetail.jsx

@@ -0,0 +1,139 @@
+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 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 UserSourceDetail = (props) => {
+  const [xData, setxData] = useState([])
+  const [fromData, setFromData] = useState([])
+  const [registerData, setRegisterData] = useState([])
+  //柱图
+  useEffect(() => {
+    userResource(formatDate(props.startDate, props.endDate))
+  }, [props.startDate, props.endDate])
+
+  function userResource(params) {
+    request({
+      ...apis.indexEcharts.selectPersonFromGroupByDay,
+      params,
+    }).then((data) => {
+      setxData(data.map(x =>  x.createTime))
+      setFromData(data.map(x => x.fromNum))
+      setRegisterData(data.map(x => x.registeredNum))
+      props.onSuccess(data)
+    })
+  }
+
+  const subtitle = '最近7天';
+  const baroptions = {
+    title: {
+    },
+    tooltip: {
+        trigger: 'axis'
+    },
+    legend: {
+        data: ['新用户数', '授权注册']
+    },
+    toolbox: {
+        show: true,
+        feature: {
+            dataZoom: {
+                yAxisIndex: 'none'
+            },
+            dataView: {readOnly: false},
+            magicType: {type: ['line', 'bar']},
+            restore: {},
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: xData
+    },
+    yAxis: {
+        type: 'value',
+        axisLabel: {
+            formatter: '{value} °C'
+        }
+    },
+    series: [
+        {
+            name: '新用户数',
+            type: 'line',
+            data: fromData,
+            markPoint: {
+                data: [
+                    {type: 'max', name: '最大值'},
+                    {type: 'min', name: '最小值'}
+                ]
+            },
+            markLine: {
+                data: [
+                    {type: 'average', name: '平均值'}
+                ]
+            }
+        },
+        {
+            name: '授权注册',
+            type: 'line',
+            data: registerData,
+            markPoint: {
+                data: [
+                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
+                ]
+            },
+            markLine: {
+                data: [
+                    {type: 'average', name: '平均值'},
+                    [{
+                        symbol: 'none',
+                        x: '90%',
+                        yAxis: 'max'
+                    }, {
+                        symbol: 'circle',
+                        label: {
+                            position: 'start',
+                            formatter: '最大值'
+                        },
+                        type: 'max',
+                        name: '最高点'
+                    }]
+                ]
+            }
+        }
+    ]
+}
+
+  const barstyle = {
+    width: '100%',
+    height: '480px',
+    minWidth: '400px'
+  }
+
+  return (
+    <>
+      <div>
+      <p onClick={()=>router.push('/indexEcharts/userSource')}><span style={{borderBottom:'1px solid #f02d40',cursor: 'pointer',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源1</span> {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}</p>
+
+        <EChart options={baroptions} style={barstyle} />
+
+      </div>
+
+    </>
+  )
+}
+
+export default UserSourceDetail;

src/pages/indexEcharts/userSource.jsx

@@ -1,6 +1,6 @@
 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 UserSourceDetail from './components/UserSourceDetail.jsx';
 import UserSourcepie from './components/UserSourcepie.jsx';
 // import XForm, { FieldTypes } from '../../components/XForm';
 import moment from 'moment';
@@ -21,38 +21,43 @@ const { Option } = Select
 // }
 
 let daterange = []
-let tableTitle = ['日期']
-
-const columns = [
-  {
-    title: '日期',
-    dataIndex: 'label',
-    key: 'label',
-    width:'20%'
-  },
-  {
-    title: '名片分享',
-    dataIndex: '名片分享',
-    key: '名片分享',
-  },
-  {
-    title: '生成海报',
-    dataIndex: '生成海报',
-    key: '生成海报',
-  },
+// let tableTitle = ['类型']
+
+// const columns = [
+//   {
+//     title: '日期',
+//     dataIndex: 'label',
+//     key: 'label',
+//     width:'20%'
+//   },
+//   {
+//     title: '名片分享',
+//     dataIndex: '名片分享',
+//     key: '名片分享',
+//   },
+//   {
+//     title: '生成海报',
+//     dataIndex: '生成海报',
+//     key: '生成海报',
+//   },
+//   {
+//     title: '小程序搜索',
+//     dataIndex: '小程序搜索',
+//     key: '小程序搜索',
+//   },
+//   {
+//     title: '好友分享',
+//     dataIndex: '好友分享',
+//     key: '好友分享',
+//   },
+// ]
+
+let columns = [
   {
-    title: '小程序搜索',
-    dataIndex: '小程序搜索',
-    key: '小程序搜索',
-  },
-  {
-    title: '好友分享',
-    dataIndex: '好友分享',
-    key: '好友分享',
-
-  },
-
-
+    title: '类型',
+    dataIndex: 'value',
+    key: 'value',
+  }
 ]
 
 class Header extends React.Component {
@@ -72,8 +77,6 @@ class Header extends React.Component {
     this.setState({ endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
   }
 
-
-
   formatDate = (start, end) => {
     const tempStartDate = `${moment(start).format('YYYY-MM-DDT00:00:00.000')}Z`
     const tempEndDate = `${moment(end).format('YYYY-MM-DDT23:59:59.999')}Z`
@@ -111,17 +114,41 @@ class Header extends React.Component {
 
   onTabledatas = (e) => {
     console.log('this.state.userType: ', this.state.userType)
-    const data = (e.data || []).reduce((acc, item) => {
-      const { date, fromName, count, registered } = item
-      const num = this.state.userType === 'registered' ? registered : count
-
-      tableTitle = tableTitle.indexOf(fromName) > -1 ? tableTitle : tableTitle.concat(fromName) // eslint-disable-line
-      acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }
+    // const data = (e || []).reduce((acc, item) => {
+    //   const { date, fromName, count, registered } = item
+    //   const num = this.state.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
+    // }, {})
+
+    const data = (e || []).reduce((acc, item) => {
+      const { fromNum, registeredNum, createTime } = item || {}
+      const title = createTime.replace(/-/, '年').replace(/-/, '月')
+
+      columns = columns.filter(x => x.key != createTime).concat({
+        title,
+        dataIndex: createTime,
+        key: createTime,
+      })
+
+      acc[0] = {
+        ...acc[0],
+        [`${createTime}`]: fromNum,
+      }
+      acc[1] = {
+        ...acc[1],
+        [`${createTime}`]: registeredNum,
+      }
 
       return acc
-    }, {})
+    }, [{key: 'fromNum', value: '新增用户'}, {key: 'registeredNum', value: '授权注册'}])
+
+    console.log(columns, data)
 
-    this.setState({ tableData: Object.keys(data).map(x => ({ label: x, ...data[x] })) })
+    this.setState({ tableData: data })
 
   }
 
@@ -169,7 +196,7 @@ class Header extends React.Component {
               paddingTop: '40px',
               marginRight: ' 40px',
             }}>
-              <UserSource BuildSelectHide={true} endDate={this.state.endDate} startDate={this.state.startDate} onSuccess={(e) => this.onSuccess(e)}></UserSource>
+              <UserSourceDetail BuildSelectHide={true} endDate={this.state.endDate} startDate={this.state.startDate} onSuccess={(e) => this.onSuccess(e)}></UserSourceDetail>
             </div>
             <div style={{
               width: '509px',
@@ -180,10 +207,10 @@ class Header extends React.Component {
               <UserSourcepie endDate={this.state.endDate} startDate={this.state.startDate}></UserSourcepie>
             </div>
           </div>
-          <Select style={{ width: '180px' }} placeholder="所有用户" onChange={(e) => this.handleSelectChange(e)}>
+          {/* <Select style={{ width: '180px' }} placeholder="所有用户" onChange={(e) => this.handleSelectChange(e)}>
             <Option value='all'>所有用户</Option>
             <Option value='registered'>注册用户</Option>
-          </Select>
+          </Select> */}
   
           <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
         </div>

src/services/apis.js

@@ -320,6 +320,16 @@ export default {
       url: `${prefix}/selectUserResource`,
       action: 'userStatistics',
     },
+    selectPersonFrom: {
+      method: 'GET',
+      url: `${prefix}/selectPersonFrom`,
+      action: 'userStatistics',
+    },
+    selectPersonFromGroupByDay: {
+      method: 'GET',
+      url: `${prefix}/selectPersonFromGroupByDay`,
+      action: 'userStatistics',
+    },
     list:{
       method:'Get',
       url: `${prefix}/indexStatistical`,