feats

config/routes.js

                     path: '/report/post',
                     name: '科普统计',
                     menuCode: 'report.post',
-                    component: '../layouts/BlankLayout',
+                    component: './Statistic/PostData',
                   },
                   {
                     path: '/report/student',
                     name: '阅读统计',
                     menuCode: 'report.student',
-                    component: '../layouts/BlankLayout',
+                    component: './Statistic/StudentData',
                   },
                 ],
               },

src/components/ECharts/echarts.js

 // 引入柱状图图表，图表后缀都为 Chart
 import {
   LineChart,
-  BarChart
 } from 'echarts/charts';
 // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
 import {
 
 // 注册必须的组件
 echarts.use(
-  [CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, BarChart, LineChart]
+  [CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, LineChart]
 );
 
 export default echarts;

src/pages/Statistic/PostData.jsx

+import React, { useEffect, useMemo, useRef } from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { queryTable } from '@/utils/request';
+
+const PostData = (props) => {
+  const tableRef = useRef()
+
+  const changeQueryParam = (params) => {
+    const dt = params.date
+    const startDate = dt ? dt[0] : undefined
+    const endDate = dt ? dt[1] : undefined
+
+    return {
+      ...params,
+      startDate: startDate ? moment(startDate).format('YYYY-MM-DD') : undefined,
+      endDate: endDate ? moment(endDate).format('YYYY-MM-DD') : undefined,
+      date: undefined,
+    }
+  }
+
+  const typeDict = useMemo(() => {
+    return (props.typeList || []).reduce((acc, item) => {
+      return {
+        ...acc,
+        [item.typeId]: { text: item.name },
+      };
+    }, {});
+  }, [props.typeList]);
+
+  const columns = [
+    {
+      title: '日期',
+      key: 'date',
+      hideInTable: true,
+      valueType: 'dateRange',
+    },
+    {
+      title: '名称',
+      key: 'name',
+      hideInTable: true,
+    },
+    {
+      title: '排名',
+      key: 'topN',
+      hideInSearch: true,
+      render: (_, $, index) => index + 1,
+    },
+    {
+      title: '科普知识',
+      key: 'postId',
+      dataIndex: 'postId',
+      hideInSearch: true,
+      render: (_, row) => (
+        <div>
+          <h3>{row.name}</h3>
+          <p>
+            <small>{`作者: ${row.author}`}</small>
+          </p>
+          <p>
+            <small>{row.isVideo ? '视频' : '图文'}</small>
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: '分类',
+      key: 'typeId',
+      dataIndex: 'typeId',
+      valueType: 'select',
+      valueEnum: typeDict,
+    },
+    {
+      title: '阅读人数',
+      key: 'uv',
+      dataIndex: 'uv',
+      hideInSearch: true,
+      sorter: true,
+    },
+    {
+      title: '浏览量',
+      key: 'pv',
+      dataIndex: 'pv',
+      hideInSearch: true,
+      sorter: true,
+    },
+    {
+      title: '收藏量',
+      key: 'savedNum',
+      dataIndex: 'savedNum',
+      hideInSearch: true,
+      sorter: true,
+    },
+  ];
+
+  useEffect(() => {
+    if (!props.typeList || !props.typeList.length) {
+      props.dispatch({
+        type: 'post/getTypeList',
+        payload: { pageSize: 999 },
+      });
+    }
+  }, [props]);
+
+  return (
+    <PageContainer>
+      <ProTable
+        actionRef={tableRef}
+        columns={columns}
+        request={queryTable('/statis/post-data')}
+        rowKey="postId"
+        search={{
+          labelWidth: '4em',
+        }}
+        options={false}
+        beforeSearchSubmit={changeQueryParam}
+      />
+    </PageContainer>
+  );
+};
+
+export default connect((s) => ({
+  typeList: s.post.typeList,
+}))(PostData);

src/pages/Statistic/StudentData.jsx

+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { connect } from 'umi';
+import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import request, { queryTable } from '@/utils/request';
+
+const StudentData = (props) => {
+  const tableRef = useRef()
+  const [schoolDict, setSchoolDict] = useState({})
+
+  const columns = useMemo(() => [
+    {
+      title: '排名',
+      key: 'topN',
+      hideInSearch: true,
+      render: (_, $, index) => index + 1,
+    },
+    {
+      title: '学校',
+      key: 'schoolId',
+      dataIndex: 'schoolId',
+      valueType: 'select',
+      valueEnum: schoolDict,
+    },
+    {
+      title: '名称',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '手机号',
+      key: 'phone',
+      dataIndex: 'phone',
+      hideInSearch: true,
+    },
+    {
+      title: '收藏文章数',
+      key: 'savedNum',
+      dataIndex: 'savedNum',
+      hideInSearch: true,
+      sorter: true,
+    },
+    {
+      title: '阅读文章数',
+      key: 'readedNum',
+      dataIndex: 'readedNum',
+      hideInSearch: true,
+      sorter: true,
+    },
+    {
+      title: '总积分',
+      key: 'pointNum',
+      dataIndex: 'pointNum',
+      hideInSearch: true,
+      sorter: true,
+    },
+    {
+      title: '学分',
+      key: 'creditNum',
+      dataIndex: 'creditNum',
+      hideInSearch: true,
+      sorter: true,
+    },
+  ], [schoolDict])
+
+  useEffect(() => {
+    request('/school', { params: { pageSize: 500 } }).then(res => {
+      const records = res.records || []
+      const dict = records.reduce((acc, item) => {
+        return {
+          ...acc,
+          [item.schoolId]: { text: item.name },
+        };
+      }, {})
+      setSchoolDict(dict)
+    }).catch((e) => {
+      // eslint-disable-next-line
+      console.error(e.message)
+    })
+
+  // eslint-disable-next-line
+  }, [])
+
+  return (
+    <PageContainer>
+      <ProTable
+        actionRef={tableRef}
+        columns={columns}
+        request={queryTable('/statis/student-data')}
+        rowKey="personId"
+        search={{
+          labelWidth: '4em',
+        }}
+        options={false}
+      />
+    </PageContainer>
+  );
+};
+
+export default connect((s) => ({
+  user: s.user.currentUser,
+}))(StudentData);

src/pages/Welcome/components/LineCard.jsx

 import React, { useEffect, useRef, useState } from 'react'
 import moment from 'moment';
-import { Card, DatePicker } from 'antd';
+import { Button, Card, DatePicker, Space } from 'antd';
 import ECharts from '@/components/ECharts'
 import echarts from '@/components/ECharts/echarts'
 import { assignOption } from '@/components/ECharts/utils'
   }
 }
 
-const Condition = (props) => (
-  <DatePicker.RangePicker value={props.value} onChange={props.onChange}/>
-)
+const Condition = (props) => {
+  const [dtRange, setDtRange] = useState()
+
+  const handleWeek = () => {
+    setDtRange([
+      moment().startOf('week'),
+      moment(),
+    ])
+  }
+
+  const handleMonth = () => {
+    setDtRange([
+      moment().startOf('month'),
+      moment(),
+    ])
+  }
+
+  const handleChange = (vals) => {
+    setDtRange(vals)
+  }
+
+  useEffect(() => {
+    props.onChange(dtRange)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dtRange])
+  
+  useEffect(() => {
+    // 默认本周
+    handleWeek()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+
+  return (
+    <Space>
+      <Button onClick={handleMonth}>本月</Button>
+      <Button onClick={handleWeek}>本周</Button>
+      <DatePicker.RangePicker value={dtRange} onChange={handleChange}/>
+    </Space>
+  )
+}
 
 export default (props) => {
   const chartRef = useRef()
   const [loading, setLoading] = useState(false)
   const [data, setData] = useState([])
   const [option, setOption] = useState(lineOption)
-  const [dtRange, setDtRange] = useState([    
-    moment().subtract(30, 'days'),
-    moment(),
-  ])
+  const [dtRange, setDtRange] = useState()
   const [params, setParams] = useState()
 
   useEffect(() => {
-    setParams({
-      startDate: dtRange[0].format('YYYY-MM-DD'),      
-      endDate: dtRange[1].format('YYYY-MM-DD')
-    })
+    console.log('-------->', dtRange)
+    if (dtRange) {
+      setParams({
+        startDate: dtRange[0].format('YYYY-MM-DD'),      
+        endDate: dtRange[1].format('YYYY-MM-DD')
+      })
+    }
   }, [dtRange])
   
   useEffect(() => {

src/utils/request.js

 // 专门为 ProTable 定制的 request
 // https://procomponents.ant.design/components/table#request
 export const queryTable = (url) => {
-  return (params) => {
+  return (params, sort) => {
+    const sortKey = Object.keys(sort || {})[0]
+    const sortVal = sortKey ? sort[sortKey] : undefined
+    const asc = sortVal === 'ascend' ? { asc: sortKey } : {}
+    const desc = sortVal === 'descend' ? { desc: sortKey } : {}
+
     return new Promise((resolve) => {
       const { current, pageSize, ...leftParams } = params;
+
       const options = {
         params: {
           pageNum: current,
           pageSize,
+          ...asc,
+          ...desc,
           ...leftParams,
         },
       };