统计-用户来源

src/pages/indexEcharts/userSource.jsx

@@ -9,64 +9,108 @@ import request from '../../utils/request';
 import apis from '../../services/apis';
 
 
+
+const { RangePicker } = DatePicker;
+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 }
 // }
 
+let daterange = []
+let tableTitle = ['日期']
+
+const columns = [
+  {
+    title: '日期',
+    dataIndex: 'label',
+    key: 'label',
+    width:'20%'
+  },
+  {
+    title: '名片分享',
+    dataIndex: '名片分享',
+    key: '名片分享',
+  },
+  {
+    title: '生成海报',
+    dataIndex: '生成海报',
+    key: '生成海报',
+  },
+  {
+    title: '小程序搜索',
+    dataIndex: '小程序搜索',
+    key: '小程序搜索',
+  },
+  {
+    title: '好友分享',
+    dataIndex: '好友分享',
+    key: '好友分享',
+
+  },
+
+
+]
+
+class Header extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      dataSoures: [],
+      tableData: [],
+      userType: 'all',
+      endDate: {},
+      startDate: {}
+    }
+  }
 
-const header = props => {
-
-  const [tableData, setTableData] = useState([])
-  const [userType, setuserType] = useState([])
-  const [endDate, setEndDate] = useState({})
-  const [startDate, setStartDate] = useState({})
-  let daterange = []
+  componentDidMount() {
+    this.setState({ endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
+  }
 
-  useEffect(() => {
-    setEndDate(new Date())
-    setStartDate(moment().subtract(7, 'day').toDate())
-    setuserType('all')
-  }, [])
 
-  const { RangePicker } = DatePicker;
 
-  function onChangetime(dates, dateStrings) {
+  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`
+    return { startDate: tempStartDate, endDate: tempEndDate }
+  }
 
+  onChangetime = (_dates, dateStrings) => {
     daterange[1] = dateStrings[1]
     daterange[0] = dateStrings[0]
-
   }
 
-  const handleSubmit = (e, props) => {
+  handleSubmit = (e, props) => {
 
     e.preventDefault();
 
   }
 
-  const getDataOf = (days) => () => {
-
-    setEndDate(new Date())
-    setStartDate(moment().subtract(days, 'day').toDate())
-
+  getDataOf = (days) => () => {
+    this.setState({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
   }
 
-  function datalist() {
-
-    setEndDate(daterange[1])
-    setStartDate(daterange[0])
+  datalist = () => {
 
+    this.setState({ endDate: daterange[1], startDate: daterange[0] })
   }
 
+  onSuccess = e => {
+    this.setState({ dataSoures: e }, () => {
+      this.onTabledatas(e)
+    })
+  }
 
-  let tableTitle = ['日期']
-
-
-  function onTabledatas(e) {
-    const data = (e.data || []).reduce((acc, item, index) => {
+  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 = userType === 'registered' ? registered : count
+      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 }
@@ -74,105 +118,75 @@ const header = props => {
       return acc
     }, {})
 
-    setTableData(Object.keys(data).map(x => ({ label: x, ...data[x] })))
+    this.setState({ tableData: Object.keys(data).map(x => ({ label: x, ...data[x] })) })
 
   }
 
-  const columns = [
-    {
-      title: '日期',
-      dataIndex: 'label',
-      key: 'label',
-      width:'20%'
-    },
-    {
-      title: '名片分享',
-      dataIndex: '名片分享',
-      key: '名片分享',
-    },
-    {
-      title: '生成海报',
-      dataIndex: '生成海报',
-      key: '生成海报',
-    },
-    {
-      title: '小程序搜索',
-      dataIndex: '小程序搜索',
-      key: '小程序搜索',
-    },
-    {
-      title: '好友分享',
-      dataIndex: '好友分享',
-      key: '好友分享',
-
-    },
-
-
-  ]
-
-  function handleSelectChange(e) {
-
-    console.log(e)
-    setuserType(e)
+  handleSelectChange = (e) => {
+    this.setState({ userType: e }, () => {
+      this.onTabledatas(this.state.dataSoures)
+    })
   }
 
 
-
-  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 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>
-      <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>
-
-        <div style={{ display: 'flex' }}>
-          <div style={{
-            width: '1060px',
-            height: '560px',
-            paddingTop: '40px',
-            marginRight: ' 40px',
-          }}>
-            <UserSource BuildSelectHide={true} endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
-          </div>
-          <div style={{
-            width: '509px',
-            height: '600px',
-            paddingTop: '40px',
-
-          }}>
-            <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
+  render() {
+    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 buttonStyle="solid" defaultValue="a">
+          <Radio.Button value="a" onClick={() => this.getDataOf(7)}>最近7天</Radio.Button>
+          <Radio.Button value="b" onClick={() => this.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={(_dates, dateStrings) => this.onChangetime(_dates, dateStrings)}
+        />
+        <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={() => this.datalist()}>
+          查询
+        </Button>
+        <div>
+  
+          <div style={{ display: 'flex' }}>
+            <div style={{
+              width: '1060px',
+              height: '560px',
+              paddingTop: '40px',
+              marginRight: ' 40px',
+            }}>
+              <UserSource BuildSelectHide={true} endDate={this.state.endDate} startDate={this.state.startDate} onSuccess={(e) => this.onSuccess(e)}></UserSource>
+            </div>
+            <div style={{
+              width: '509px',
+              height: '600px',
+              paddingTop: '40px',
+  
+            }}>
+              <UserSourcepie endDate={this.state.endDate} startDate={this.state.startDate}></UserSourcepie>
+            </div>
           </div>
+          <Select style={{ width: '180px' }} placeholder="所有用户" onChange={(e) => this.handleSelectChange(e)}>
+            <Option value='all'>所有用户</Option>
+            <Option value='registered'>注册用户</Option>
+          </Select>
+  
+          <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
         </div>
-        <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
-          <Option value='all'>所有用户</Option>
-          <Option value='registered'>注册用户</Option>
-        </Select>
-
-        <Table style={{marginTop:'20px'}} dataSource={tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
       </div>
-    </div>
-  </>
-  )
+    </>
+    )
+  }
 }
 
-export default header
+export default Header