合并

src/pages/customer/recommendCustomer/index.jsx

@@ -86,7 +86,7 @@ function body(props) {
       ...apis.customer.customerRecommendRecommenderExport, 
       responseType: 'blob',
     }).then(response => {
-      // console.log('response: ', response)
+      console.log('exportRecommendCustomer: ', response.body())
       download(response)
     }).catch(error => {
 
@@ -213,7 +213,7 @@ function body(props) {
             </Button>
         </Form.Item>
       </Form>
-      <Button type="primary" onClick={() => exportRecommendCustomer()} className={Styles.SubmitButton} style={{ marginTop: '5px', marginBottom: '5px', display: 'none' }}>
+      <Button type="primary" onClick={() => exportRecommendCustomer()} className={Styles.SubmitButton} style={{ marginTop: '5px', marginBottom: '5px' }}>
         导出数据
       </Button>
       <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />

src/pages/indexEcharts/components/UserSex.jsx

@@ -42,7 +42,10 @@ const UserSource = (props) => {
     },
     legend: {},
     color: ['#FF7E48', '#dcdcdc'],
-    tooltip: {},
+    tooltip: {
+      trigger: 'item',
+      formatter: "{b}: ({d}%)"
+    },
     series: {
       type: 'pie',
       name: '性别比例',

src/pages/indexEcharts/components/UserSourcepie.jsx

@@ -19,18 +19,18 @@ const UserSource = (props) => {
 
   useEffect(() => {
     userResource(formatDate(props.startDate, props.endDate))
-   }, [props.startDate, props.endDate])
- 
-   function userResource (params) {
-     request({
-       ...apis.indexEcharts.userResource,
-       params,
-     }).then((data) => {
-       setData(data)
-     })
-   }
-
-  function toEdit () {
+  }, [props.startDate, props.endDate])
+
+  function userResource(params) {
+    request({
+      ...apis.indexEcharts.userResource,
+      params,
+    }).then((data) => {
+      setData(data)
+    })
+  }
+
+  function toEdit() {
     router.push({
       pathname: '/indexEcharts/userSource',
     });
@@ -47,7 +47,10 @@ const UserSource = (props) => {
       x: 'left',
       data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
     },
-    tooltip: {},
+    tooltip: {
+      // trigger: 'item',
+      // formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
     series: [
       {
         type: 'pie',
@@ -55,24 +58,24 @@ const UserSource = (props) => {
         radius: ['34%', '52%'],
       },
     ],
+
     dataset: {
       id: 'pie',
       source: [
-        { '用户来源': '来源置业顾问', value: person_realty_consultant,},
+        { '用户来源': '来源置业顾问', value: person_realty_consultant, },
         { '用户来源': '来源全民经纪人', value: person_estate_agent },
         { '用户来源': '自主进入', value: person_null },
       ]
     },
   }
- 
+
 
   const piestyles = {
     width: '100%',
     height: '400px',
-    minWidth:'350px',
+    minWidth: '350px',
   }
 
-
   return (
     <>
       <div>

src/pages/indexEcharts/userSource.jsx

@@ -9,64 +9,107 @@ 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 +117,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

src/utils/request.js

@@ -58,7 +58,7 @@ request.interceptors.request.use((url, options) => {
         requestType: data instanceof FormData ? 'form' : 'json',
         credentials: 'include', // 带 cookie
         interceptors: true,
-        getResponse: true
+        getResponse: true,
       },
     }
   );