fix

config/routes.js

@@ -616,6 +616,13 @@ export default [
                 component: './statistics/dataReport',
                 menuCode: '/statistics/dataReport',
               },
+              {
+                path: '/statistics/dataReport/newAdd',
+                name: '新增用户',
+                hideInMenu: true,
+                component: './statistics/dataReport/newAdd',
+                menuCode: '/statistics/dataReport',
+              },
               {
                 path: '/statistics/activity',
                 name: '活动统计',

src/pages/statistics/compents/TimeSelect.jsx

@@ -5,7 +5,7 @@ import moment from 'moment';
 
 const { RangePicker } = DatePicker;
 const TimeSelect = props => {
-  const { value, onChange=()=>{} } = props;
+  const { value, onChange=()=>{},buttonType='link' } = props;
 
   const [rangePickerValue, setRangePickerValue] = useState();
   const [type, setType] = useState('week');
@@ -53,9 +53,9 @@ const TimeSelect = props => {
   return (
     <div style={{ display: 'flex' }}>
       <div>
-        <Button type='link' style={type==='today'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('today')}>今日</Button>
-        <Button type='link' style={type==='week'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('week')}>最近一周</Button>
-        <Button type='link' style={type==='month'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('month')}>最近一月</Button>
+        <Button type={buttonType} style={type==='today'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('today')}>今日</Button>
+        <Button type={buttonType} style={type==='week'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('week')}>最近一周</Button>
+        <Button type={buttonType} style={type==='month'?undefined:{color:'rgba(0,0,0,0.65)'}} onClick={() => setType('month')}>最近一月</Button>
       </div>
       <RangePicker
         value={rangePickerValue}

src/pages/statistics/dataReport/components/Count.jsx

@@ -68,9 +68,9 @@ const Count = props => {
           </Card>
         </Col>
         <Col span={4}>
-          <Card>
+          <Card onClick={()=>router.push('/statistics/dataReport/newAdd')} style={{cursor:'pointer'}}>
             <Statistic
-              title="今日新增用户"
+              title={<u>今日新增用户</u>}
               value={data.todayAddPersonNum || 0}
               //   valueStyle={{ color: '#cf1322' }}
             />

src/pages/statistics/dataReport/components/IntentionalCustomers.jsx

@@ -0,0 +1,148 @@
+import React, { Component, useMemo, useState, useEffect } from 'react';
+import {
+  Form,
+  Icon,
+  Input,
+  Button,
+  DatePicker,
+  Select,
+  Card,
+  Row,
+  Col,
+  Pagination,
+  Alert,
+  Table,
+  Avatar,
+  Radio,
+  Modal,
+  Descriptions,
+} from 'antd';
+import BuildingSelect from '@/components/SelectButton/BuildSelect';
+import { func } from 'prop-types';
+import request from '@/utils/request';
+import apis from '@/services/apis';
+// const { Option } = Select;
+
+const Layout = prop =>
+prop.simple ? (
+    prop.children
+  ) : (
+    <Card title="意向客户" headStyle={{ textAlign: 'left' }}>
+      {prop.children}
+    </Card>
+  );
+
+const UserBehavior = props => {
+  const { simple = false } = props;
+  const [data, setData] = useState({ records: [] });
+  const [buildingId, setBuildingId] = useState();
+
+  useEffect(() => {
+    IntentionUsers({ pageNum: 1, pageSize: 5 });
+    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
+  }, []);
+  function IntentionUsers(params) {
+    request({
+      ...apis.indexEcharts.intentionUsers,
+      params: { ...params },
+    }).then(data => {
+      console.log(data, 'datadata');
+      setData(data);
+    });
+  }
+
+  // 分页
+  function onChange(pageNum) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    IntentionUsers({ pageNum: pageNum, pageSize: 5, buildingId });
+  }
+
+  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) {
+    console.log(e, '-----');
+    IntentionUsers({ pageNum: 1, pageSize: 5, buildingId: e });
+    setBuildingId(e);
+  }
+
+  //意向客户导出
+  function exportIntentionUsers() {
+    request({
+      ...apis.indexEcharts.exportIntentionUsers,
+      params: { buildingId },
+    }).then(data => {
+      if (!data) {
+        return;
+      }
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', '意向客户.xlsx');
+      document.body.append(link);
+      link.click();
+    });
+  }
+
+  return (
+    <Layout simple={simple}>
+      <div>
+        <Row>
+          <Col span={22}>
+            <BuildingSelect
+              value={buildingId}
+              // slot="action"
+              // value={buildingId}
+              onChange={e => handleBuildingChange(e)}
+            ></BuildingSelect>
+          </Col>
+          <Col span={2} style={{ textAlign: 'right' }}>
+            <Button type="primary" onClick={exportIntentionUsers}>
+              导出
+            </Button>
+          </Col>
+        </Row>
+        <Table
+          rowKey="IntentionalCustomers"
+          dataSource={data.records}
+          columns={columns}
+          style={{ marginTop: '15px' }}
+          pagination={{
+            total: data.total,
+            defaultPageSize: 5,
+            current: data.current || 1,
+            onChange: e => onChange(e),
+          }}
+          scroll={{ y: 500 }}
+        />
+      </div>
+    </Layout>
+  );
+};
+
+export default UserBehavior;

src/pages/statistics/dataReport/components/NewUsers.jsx

@@ -0,0 +1,109 @@
+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, Card } 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 NewUsers = props => {
+  const {
+    startDate = moment()
+      .subtract(7, 'day')
+      .format('YYYY-MM-DD'),
+    endDate = moment().format('YYYY-MM-DD'),
+    simple = false,
+  } = props;
+  const [data, setData] = useState({ records: [] });
+
+  useEffect(() => {
+    NewsUserCount(formatDate(startDate, endDate));
+  }, [startDate, endDate]);
+
+  function NewsUserCount(params) {
+    request({
+      ...apis.indexEcharts.changeNewUser,
+      params,
+    }).then(data => {
+      setData(data);
+    });
+  }
+
+  const dataZoom = props.dataZoom
+    ? [
+        {
+          type: 'inside',
+          start: 0,
+          end: 100,
+        },
+        {
+          type: 'slider',
+          start: 0,
+          end: 100,
+        },
+      ]
+    : undefined;
+  const dataset = data || [];
+  const options = {
+    color: ['#FF814C', '#F02B3E'],
+    tooltip: {
+      trigger: 'axis',
+    },
+    icon: 'rect',
+    legend: {
+      data: ['新用户数', '授权注册'],
+    },
+    toolbox: {},
+    xAxis: {
+      type: 'category',
+    },
+    yAxis: {},
+    dataZoom,
+    series: [
+      {
+        name: '新用户数',
+        type: 'line',
+        smooth: true,
+      },
+      {
+        name: '授权注册',
+        type: 'line',
+        smooth: true,
+      },
+    ],
+    dataset: {
+      dimensions: ['createTime', 'fromNum', 'registeredNum'],
+      source: dataset,
+    },
+  };
+
+  const piestyles = {
+    width: '100%',
+    // height: '400px',
+  };
+
+  const Layout = prop =>
+    simple ? (
+      prop.children
+    ) : (
+      <Card title="新增用户" headStyle={{ textAlign: 'left' }}>
+        {prop.children}
+      </Card>
+    );
+
+  return (
+    <Layout>
+      {' '}
+      <EChart options={options} style={piestyles} />
+    </Layout>
+  );
+};
+
+export default NewUsers;

src/pages/statistics/dataReport/components/UserActive.jsx

@@ -0,0 +1,110 @@
+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, Card, Icon, message } from 'antd';
+
+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: [] });
+  //柱图
+
+  useEffect(() => {
+    UserActive({ dateType: 'day' });
+  }, []);
+
+  function UserActive(params) {
+    request({
+      ...apis.indexEcharts.userActive,
+      params: { pageSize: 9999, ...params },
+    }).then(data => {
+      setData(data);
+    });
+  }
+
+  const dataset = data.selectActiveUserCount || [];
+  const options = {
+    tooltip: {},
+    xAxis: { type: 'category' },
+    yAxis: {},
+    series: {
+      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 (
+    <>
+      <Card
+        title="用户活跃"
+        headStyle={{ textAlign: 'left' }}
+        extra={
+          <Select
+            style={{ width: 100 }}
+            defaultValue='day'
+            onChange={onChange}
+            size={'small'}
+          >
+            <Option value="day">日活跃</Option>
+            <Option value="month">月活跃</Option>
+          </Select>
+        }
+      >
+        {/* <div >
+        <p><span style={{fontSize:'0.12rem',fontWeight:'600'}}>用户活跃数</span></p>
+
+          <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} />
+      </Card>
+    </>
+  );
+};
+
+export default UserSource;

src/pages/statistics/dataReport/components/UserBehavior.jsx

@@ -0,0 +1,149 @@
+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, Modal, Card } from 'antd';
+import BuildSelect from '@/components/SelectButton/BuildSelect'
+
+const { Option } = Select;
+
+
+const eventcolumns = [
+  {
+    title: '编号',
+    dataIndex: 'recordId',
+    key: 'recordId',
+    align: 'center',
+    width: '16%',
+  },
+  {
+    title: '访问时间',
+    dataIndex: 'visitTime',
+    key: 'visitTime',
+    align: 'center',
+    width: '18%',
+    render: (x, row) => (
+      <>
+        <span>{moment(row.visitTime).format('YYYY-MM-DD hh:mm:ss')}</span>
+      </>
+    ),
+  },
+  {
+    title: '离开时间',
+    dataIndex: 'leaveTime',
+    key: 'leaveTime',
+    align: 'center',
+    width: '18%',
+    render: (x, row) => (
+      <>
+        <span>{row.leaveTime && moment(row.leaveTime).format('YYYY-MM-DD hh:mm:ss')}</span>
+      </>
+    ),
+  },
+]
+
+
+
+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 UserBehaviorIndex = props => {
+    const { startDate = moment().subtract(7, 'day').format('YYYY-MM-DD'), endDate = moment().format('YYYY-MM-DD') } = props;
+  const [data, setData] = useState({ records: [] })
+  const [visibleData, setVisibleData] = useState({ visible: false, row: {} })
+  const [buildingId, setBuildingId] = useState('')
+
+  // 柱图
+  useEffect(() => {
+    const date = formatDate(startDate, endDate)
+    getUserBehaviorSummary({
+      ...date,
+      activity: props.activity,
+      event: props.event,
+      eventType: props.eventType,
+      buildingId: props.buildingId,
+    })
+    // getUserBehaviorProfile(formatDate(props.startDate, props.endDate))
+  }, [startDate, endDate, props.activity, props.event, props.eventType, props.buildingId])
+
+  const [recordList, setList] = useState([])
+  function getUserBehaviorSummary(params) {
+    request({
+      ...apis.indexEcharts.userBehavior.tsUserBehavior,
+      params,
+    }).then(data => {
+      setData(data || {})
+      // setList((data.data.records || []).filter(e => e.activity !== '客户'))
+    })
+  }
+
+
+  const seriesMaker = (data.selectUserBehavior || []).filter(e => e.activity !== '客户' && e.activity !== '首页').reduce((series, item) => {
+    let { date, activityCount, activity } = item
+    date = moment(date).format('YYYY-MM-DD')
+    if (!activityCount) activityCount = 0
+
+    // 使用对象, 可以去重
+    series[`${activity}`] = (series[`${activity}`] || []).concat([[date, activityCount]])
+
+    return series;
+  }, {})
+
+
+  const dataZoom = props.dataZoom ? [
+    {
+      type: 'inside',
+      start: 0,
+      end: 100,
+    },
+    {
+      type: 'slider',
+      start: 0,
+      end: 100,
+    },
+  ] : undefined
+
+
+  const options = {
+    title: {},
+    icon: 'rect',
+    legend: {
+      show: true,
+      zlevel: 10,
+      itemGap: 100,
+    },
+    color: ['#F12B3E', '#FE929C', '#647CE1', '#A2B9FF', '#FF844F', '#FFBB9D'],
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    dataZoom,
+    series: Object.keys(seriesMaker).map(x => ({
+      type: 'line',
+      smooth: true,
+      name: x,
+      data: seriesMaker[x],
+    })),
+  }
+
+
+
+
+  return (
+    <>
+       <Card title="用户行为" headStyle={{ textAlign: 'left' }}>
+
+        <EChart options={options}  />
+      </Card>
+      
+    </>
+  )
+}
+
+export default UserBehaviorIndex

src/pages/statistics/dataReport/components/userSource.jsx

@@ -0,0 +1,126 @@
+import React, { Component, useState, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts';
+import { Card } from 'antd';
+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';
+
+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 { startDate = moment().subtract(7, 'day').format('YYYY-MM-DD'), endDate = moment().format('YYYY-MM-DD') } = props;
+  const [xData, setxData] = useState([]);
+  const [fromData, setFromData] = useState([]);
+  const [registerData, setRegisterData] = useState([]);
+  //柱图
+  useEffect(() => {
+    userResource(formatDate(startDate, endDate));
+  }, []);
+
+  function userResource(params) {
+    request({
+      ...apis.indexEcharts.selectPersonFrom,
+      params,
+    }).then(data => {
+      console.log(data, '222222');
+      setxData(data.tdWxDicts.map(x => x.sceneAlias));
+      setFromData(data.tdWxDicts.map(x => x.fromData));
+      setRegisterData(data.tdWxDicts.map(x => x.registerSum));
+      // props.onSuccess(data)
+    });
+  }
+
+  const subtitle = '最近7天';
+  const baroptions = {
+    title: {},
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: { rotate: 45 },
+    },
+    legend: {
+      left: '20%',
+      data: ['所有用户', '注册用户'],
+    },
+
+    tooltip: {},
+
+    yAxis: {},
+    series: [
+      {
+        type: 'bar',
+        name: '所有用户',
+        datasetIndex: 0,
+        barWidth: 20,
+        data: fromData,
+        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,
+        data: registerData,
+        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',
+    //   dimensions: ['fromName', 'userCount', 'registered'],
+    //   source: source,
+    // },
+  };
+
+  const barstyle = {
+    width: '100%',
+    // height: '480px',
+    // minWidth: '400px'
+  };
+
+  return (
+    <>
+      <Card title="用户来源" headStyle={{ textAlign: 'left' }}>
+        {/* <p onClick={()=>router.push('/statistical/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> */}
+
+        <EChart options={baroptions} style={barstyle} />
+      </Card>
+    </>
+  );
+};
+
+export default UserSource;

src/pages/statistics/dataReport/index.jsx

@@ -7,10 +7,17 @@ import request from '@/utils/request';
 import apis from '@/services/apis';
 import Count from './components/Count';
 import SourceRole from './components/SourceRole';
+import UserSource from './components/UserSource';
+import UserBehavior from './components/UserBehavior';
+import UserActive from './components/UserActive';
+
 import UserSex from './components/UserSex';
 import UserConversion from './components/UserConversion';
+import NewUsers from './components/NewUsers';
+
 import BuildingStatistic from './BuildingStatistic';
 import CityNums from './CityNums';
+import IntentionalCustomers from './components/IntentionalCustomers';
 
 const DataReport = props => {
   const [data, setData] = useState([]);
@@ -20,25 +27,49 @@ const DataReport = props => {
       <div style={{ marginBottom: '20px' }}>
         <Count></Count>
       </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Row gutter={16} style={{ textAlign: 'center' }}>
+          <Col span={16}>
+            <UserSource></UserSource>
+          </Col>
+          <Col span={8}>
+            <SourceRole></SourceRole>
+          </Col>
+        </Row>
+      </div>
       <div style={{ marginBottom: '20px' }}>
         <CityNums></CityNums>
       </div>
+      <div style={{ marginBottom: '20px' }}>
+        <UserBehavior></UserBehavior>
+      </div>
       <div style={{ marginBottom: '20px' }}>
         <Row gutter={16} style={{ textAlign: 'center' }}>
-          <Col span={8}>
-            <SourceRole></SourceRole>
+          <Col span={16}>
+            <UserActive></UserActive>
           </Col>
           <Col span={8}>
             <UserSex></UserSex>
           </Col>
+        </Row>
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Row gutter={16} style={{ textAlign: 'center' }}>
+          <Col span={16}>
+            <NewUsers></NewUsers>
+          </Col>
           <Col span={8}>
             <UserConversion></UserConversion>
           </Col>
         </Row>
       </div>
-      <div style={{ marginBottom: '20px' }}>
-        <BuildingStatistic></BuildingStatistic>
+       <div style={{ marginBottom: '20px' }}>
+        <IntentionalCustomers></IntentionalCustomers>
       </div>
+      
+      {/* <div style={{ marginBottom: '20px' }}>
+        <BuildingStatistic></BuildingStatistic>
+      </div> */}
     </>
   );
 };

src/pages/statistics/dataReport/newAdd.jsx

@@ -0,0 +1,37 @@
+import React, { Component, useState, useEffect } from 'react';
+import { Card, Row, Col, Statistic, Icon } from 'antd';
+// import IndexEcharts from './components/indexEcharts';
+// import Swiper from './swiper/index';
+import router from 'umi/router';
+import request from '@/utils/request';
+import apis from '@/services/apis';
+import Count from './components/Count';
+import SourceRole from './components/SourceRole';
+import UserSource from './components/UserSource';
+import UserBehavior from './components/UserBehavior';
+import UserActive from './components/UserActive';
+
+import UserSex from './components/UserSex';
+import UserConversion from './components/UserConversion';
+import NewUsers from './components/NewUsers';
+
+import BuildingStatistic from './BuildingStatistic';
+import CityNums from './CityNums';
+import TimeSelect from '../compents/TimeSelect';
+import IntentionalCustomers from './components/IntentionalCustomers';
+const newAdd = props => {
+  const [data, setData] = useState([]);
+
+  const onTimeChange=()=>{
+
+  }
+
+  return (
+    <Card>
+      <TimeSelect onChange={onTimeChange}  ></TimeSelect>
+      <NewUsers simple={true}></NewUsers>
+      <IntentionalCustomers  simple={true}></IntentionalCustomers>
+    </Card>
+  );
+};
+export default newAdd;