新需求

config/routes.js

@@ -557,6 +557,12 @@ export default [
                 name: '项目统计',
                 component: './statistical/building/index',
               },
+              {
+                path: '/statistical/building/detail',
+                name: '项目统计详情',
+                component: './statistical/building/detail',
+                hideInMenu: true,
+              },
               {
                 path: '/statistical/consultant/index',
                 name: '置业顾问KPI',

src/pages/statistical/building/component/StatsChartLine.jsx

@@ -0,0 +1,84 @@
+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 moment from 'moment';
+import echarts from 'echarts/lib/echarts';
+import EChart from '../../../../components/EchartsTest/EChart';
+import router from 'umi/router';
+
+class StatsChart extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    const { data = {}} = this.props
+    const options = {
+      title: {
+          text: this.props.title,
+      },
+      tooltip: {
+          trigger: 'axis'
+      },
+      legend: {
+          data: ['公客数', '私客数', '新增客户数', '访问人数']
+      },
+      grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+      },
+      toolbox: {
+          feature: {
+              saveAsImage: {}
+          }
+      },
+      xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {rotate: 45},
+          data: data.timeList || []
+      },
+      yAxis: {
+          type: 'value'
+      },
+      series: [
+          {
+              name: '公客数',
+              type: 'line',
+              stack: '总量',
+              data: data.gkList || []
+          },
+          {
+              name: '私客数',
+              type: 'line',
+              stack: '总量',
+              data: data.skList || []
+          },
+          {
+              name: '新增客户数',
+              type: 'line',
+              stack: '总量',
+              data: data.khList || []
+          },
+          {
+              name: '访问人数',
+              type: 'line',
+              stack: '总量',
+              data: data.uvList || []
+          }
+      ]
+  };
+  
+
+    return (
+    <>
+      <EChart options={options} style={{ width: '100%', height: '400px', }} />
+    </>
+    )
+  }
+}
+
+export default StatsChart

src/pages/statistical/building/detail.jsx

@@ -0,0 +1,180 @@
+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 moment from 'moment';
+import EChart from '../../../components/EchartsTest/EChart';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import StatsChartLine from './component/StatsChartLine';
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
+import router from 'umi/router';
+
+
+const { RangePicker } = DatePicker;
+const { Option } = Select
+
+let daterange = []
+let tableTitle = ['类型']
+
+class buildingDetailStats extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      barData: {},
+      tableData: [],
+      total: 0,
+      userType: 'all',
+      endDate: {},
+      startDate: {},
+      buildingId: props.location.query.buildingId,
+      buildingName: props.location.query.buildingName,
+    }
+  }
+
+  componentDidMount() {
+    this.getTimeBarDate(moment().subtract(7, 'day').toDate(),new Date())
+    this.getTimeTableData(moment().subtract(7, 'day').toDate(),new Date())
+    this.setState({...this.state, endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
+    
+  }
+
+  // 获取图表数据
+  getTimeBarDate = (startDate, endDate) => {
+    request({ ...apis.stats.timeBarList, params: { startDate, endDate, buildingId: this.state.buildingId } }).then((data) => {
+        this.setState({...this.state, barData: data})
+      })
+  }
+
+  //获取表格数据
+  getTimeTableData = (startDate, endDate,pageNum,pageSize,sortField,sortOrder) => {
+    request({ ...apis.stats.timeTableList, params: { startDate, endDate, buildingId: this.state.buildingId,pageNum,pageSize,sortField,sortOrder } }).then((data) => {
+        this.setState({...this.state, tableData: data.records, total: data.total})
+      })
+  }
+
+  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[0] = `${moment(dateStrings[0]).format('YYYY-MM-DDT00:00:00.000')}Z`
+    daterange[1] = `${moment(dateStrings[1]).format('YYYY-MM-DDT23:59:59.999')}Z`
+  }
+
+  //切换三个标签页
+  getDataOf = (days) => {
+    this.getTimeBarDate(moment().subtract(days, 'day').toDate(),new Date())
+    this.getTimeTableData(moment().subtract(days, 'day').toDate(),new Date())
+    this.setState({ ...this.state, endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
+  }
+
+  //点击查询
+  datalist = () => {
+    this.getTimeBarDate(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1])
+    this.getTimeTableData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1])
+    this.setState({ 
+      ...this.state,
+      endDate: daterange[1] === undefined ? new Date() : daterange[1],
+      startDate: daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],
+    })
+    
+  }
+
+  //排序
+  handleTableChange = (pagination, filters, sorter) => {
+    console.log(pagination, filters, sorter)
+    this.getTimeTableData(this.state.startDate,this.state.endDate,pagination.current,10,sorter.columnKey,sorter.order)
+  };
+
+  //导出
+  exportBuildingStats = () => {
+    request({ ...apis.stats.buildingExport, params: { startDate: this.state.startDate, endDate: this.state.endDate, buildingId: this.state.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()
+      }).catch(() => {
+
+      })
+  }
+
+  render() {
+    const columns = [
+        {
+          title: '日期',
+          dataIndex: 'createDate',
+          key: 'createDate',
+        },
+        {
+          title: '新增客户',
+          dataIndex: 'khNum',
+          key: 'kh_num',
+          sorter: true,
+        },
+        {
+          title: '公客',
+          dataIndex: 'gkNum',
+          key: 'gk_num',
+          sorter: true,
+        },
+        {
+          title: '私客',
+          dataIndex: 'skNum',
+          key: 'sk_num',
+          sorter: true,
+        },
+        {
+            title: '访问人数',
+            dataIndex: 'uvNum',
+            key: 'uv_num',
+            sorter: true,
+        },
+      ];
+
+    return (
+    <div>
+      <Radio.Group buttonStyle="solid" defaultValue="a">
+          <Radio.Button value="c" onClick={() => this.getDataOf(0)}>今日</Radio.Button>
+          <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')],
+          }}
+          onChange={(_dates, dateStrings) => this.onChangetime(_dates, dateStrings)}
+        />
+        <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={() => this.datalist()}>
+          查询
+        </Button>
+        <Button type="danger" onClick={() => router.go(-1)} style={{ marginBottom: '18px', marginLeft: '30px' }}>重置</Button>
+
+        <StatsChartLine title={this.state.buildingName} data={this.state.barData} />
+        <Row>
+            <Col span={22}>
+              <span>详细数据</span>
+            </Col>
+            <Col span={2}>
+              <Button type="primary" onClick={this.exportBuildingStats}>导出</Button>
+            </Col>
+        </Row>
+        
+        <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={{ total: this.state.total}} onChange={this.handleTableChange} scroll={{ y: 500 }}></Table>
+    </div>
+    )
+  }
+}
+
+export default buildingDetailStats

src/pages/statistical/building/index.jsx

@@ -72,12 +72,12 @@ class buildingStats extends React.Component {
 
   //点击查询
   datalist = () => {
-    this.getBarData(daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === '' ? new Date() : daterange[1])
-    this.getTableData(daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === '' ? new Date() : daterange[1],this.state.buildingId)
+    this.getBarData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1])
+    this.getTableData(daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],daterange[1] === undefined ? new Date() : daterange[1],this.state.buildingId)
     this.setState({ 
       ...this.state,
-      endDate: daterange[1] === '' ? new Date() : daterange[1],
-      startDate: daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],
+      endDate: daterange[1] === undefined ? new Date() : daterange[1],
+      startDate: daterange[0] === undefined ? moment().subtract(7, 'day').toDate() : daterange[0],
     })
     
   }
@@ -113,6 +113,17 @@ class buildingStats extends React.Component {
       })
   }
 
+  //去详情页面
+  toDetailPage = (record) => {
+    router.push({
+      pathname: '/statistical/building/detail',
+      query: {
+        buildingId: record.buildingId,
+        buildingName: record.buildingName
+      },
+    });
+  }
+
   render() {
     const columns = [
         {
@@ -153,7 +164,7 @@ class buildingStats extends React.Component {
         {
             title: '详情',
             render: (_, record) => (
-                    <Button type="link" style={{ color: 'red' }} >查看详情</Button>
+                    <Button type="link" style={{ color: 'red' }} onClick={() => this.toDetailPage(record)}>查看详情</Button>
                 ),
         },
       ];
@@ -191,11 +202,12 @@ class buildingStats extends React.Component {
                 <StatsChart title="项目访问人数排行" subtext="项目详情访问情况" data={this.state.barData.wgBarMap} />
             </Col>
             <Col span={12}>
-                <StatsChart title="项目访问次数排行" subtext="项目详情访问情况" data={this.state.barData.fwBarMap} />
+                <StatsChart title="项目访问次数排行" subtext="项目详情访问情况,与上方时间筛选无关" data={this.state.barData.fwBarMap} />
             </Col>
         </Row>
         <Row>
             <Col span={22}>
+              <span style={{marginRight: '10px'}} >详细数据</span>
               <BuildSelect slot='action' onChange={(e => this.handleBuildingChange(e))} value={this.state.buildingId}></BuildSelect>
             </Col>
             <Col span={2}>

src/services/apis.js

@@ -1596,6 +1596,16 @@ export default {
       method: 'GET',
       url: `${prefix}/stats/buildingExport`,
       action: 'admin.contract.list.get',
-    }
+    },
+    timeBarList: {
+      method: 'GET',
+      url: `${prefix}/stats/timeBarList`,
+      action: 'admin.contract.list.get',
+    },
+    timeTableList: {
+      method: 'GET',
+      url: `${prefix}/stats/timeTableList`,
+      action: 'admin.contract.list.get',
+    },
   }
 }