feats

src/components/ECharts/echarts.js

@@ -0,0 +1,24 @@
+// echarts 包太大, 因此需要按需引入
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入柱状图图表，图表后缀都为 Chart
+import {
+  LineChart,
+  BarChart
+} from 'echarts/charts';
+// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+} from 'echarts/components';
+import {
+  CanvasRenderer,
+} from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use(
+  [CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, BarChart, LineChart]
+);
+
+export default echarts;

src/components/ECharts/index.jsx

@@ -1,26 +1,15 @@
-// echarts 包太大, 因此需要按需引入
-import React, { useEffect, useRef, useImperativeHandle } from 'react';
-// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from 'echarts/core';
-// 引入柱状图图表，图表后缀都为 Chart
-import {
-    BarChart
-} from 'echarts/charts';
-// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
-import {
-    TitleComponent,
-    TooltipComponent,
-    GridComponent
-} from 'echarts/components';
 
-// 注册必须的组件
-echarts.use(
-  [TitleComponent, TooltipComponent, GridComponent, BarChart]
-);
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import echarts from './echarts';
 
 export default React.forwardRef((props, ref) => {
   const el = useRef()
   const chartRef = useRef()
+  const style = {
+    width: props.width || '480px',
+    height: props.height || '360px',
+    ...props.style || {}
+  }
 
   // 向父组件公开 echarts 实例
   useImperativeHandle(ref, () => ({
@@ -35,5 +24,15 @@ export default React.forwardRef((props, ref) => {
     return () => chart.dispose()
   }, [props.option])
 
-  return <div ref={el}></div>
+  useEffect(() => {
+    if (chartRef.current) {
+      if (props.loading) {
+        chartRef.current.showLoading()
+      } else {
+        chartRef.current.hideLoading()
+      }
+    }
+  }, [props.loading])
+
+  return <div ref={el} style={style}></div>
 })

src/components/ECharts/utils.js

@@ -0,0 +1,20 @@
+
+// source 合并到 target 上面, 并且会替换 target 同属性部分
+export function assignOption (target, source) {
+  const rtn = {...target}
+  Object.keys(source).forEach((key) => {
+    const val = source[key]
+    const origin = rtn[key]
+    if (typeof val === 'object') {
+      if (typeof origin === 'object') {
+        rtn[key] = assignOption(origin, val)
+      } else {
+        rtn[key] = val
+      }
+    } else {
+      rtn[key] = val
+    }
+  })
+
+  return rtn
+}

src/pages/Welcome/components/LineCard.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react'
+import moment from 'moment';
+import { Card, DatePicker } from 'antd';
+import ECharts from '@/components/ECharts'
+import echarts from '@/components/ECharts/echarts'
+import { assignOption } from '@/components/ECharts/utils'
+import request from '@/utils/request'
+import Title from './Title'
+
+const lineOption = {
+  xAxis: {
+    type: 'category',
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: {
+    type: 'line',
+    areaStyle: {
+      opacity: 0.8,
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: 'rgba(55, 162, 255)'
+      }, {
+          offset: 1,
+          color: 'rgba(1, 191, 236)'
+      }])
+    },
+    smooth: true,
+    lineStyle: {
+      width: 0
+    }
+  }
+}
+
+const Condition = (props) => (
+  <DatePicker.RangePicker value={props.value} onChange={props.onChange}/>
+)
+
+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 [params, setParams] = useState()
+
+  useEffect(() => {
+    setParams({
+      startDate: dtRange[0].format('YYYY-MM-DD'),      
+      endDate: dtRange[1].format('YYYY-MM-DD')
+    })
+  }, [dtRange])
+  
+  useEffect(() => {
+    if (params) {
+      setLoading(true)
+      request(props.api, { params }).then(res => {
+        setData(res)
+        setLoading(false)
+      }).catch(() => {
+        setLoading(false)
+      })
+    }
+  }, [params, props.api])
+
+  useEffect(() => {
+    const opt = assignOption(lineOption, {
+      xAxis: {
+        data: data.map((item) => item.dt)
+      },
+      series: {
+        data: data.map((item) => item.val)
+      }
+    })
+
+    setOption(opt)
+  }, [data])
+
+  return (
+    <Card
+      title={<Title text={props.title} icon={props.icon} />}
+      extra={<Condition value={dtRange} onChange={(vals) => setDtRange(vals)} />}
+      style={props.style}
+    >
+      <div style={{ margin: '0 auto', width: props.width || '100%'}}>
+        <ECharts loading={loading} ref={chartRef} option={option} width={props.width || '100%'} />
+      </div>
+    </Card>
+  )
+}

src/pages/Welcome/components/NavCard.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Card, Avatar } from 'antd'
+import { Link  } from 'umi';
+
+export default (props) => {
+  const style= {
+    color: '#fff',
+    background: props.color,
+    height: props.height || '120px'
+  }
+
+  return (
+    <Link to={props.link}>
+      <Card style={style}>
+        <Card.Meta
+          avatar={props.icon}
+          title={props.title}
+          description={props.description}
+        />
+      </Card>
+    </Link>
+  )
+}

src/pages/Welcome/components/Title.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Space } from 'antd';
+
+export default (props) => (
+  <Space>
+    {props.icon}
+    <div>{props.text}</div>
+  </Space>
+)

src/pages/Welcome/index.jsx

@@ -1,9 +1,20 @@
 import React from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Alert, Typography } from 'antd';
+import { Card, Row, Col, Space, Button } from 'antd';
+import { LineChartOutlined, UserOutlined, ReadOutlined, BranchesOutlined } from '@ant-design/icons';
 // import { useIntl, FormattedMessage } from 'umi';
 import HeaderContent from './components/HeaderContent';
-import styles from './style.less';
+import LineCard from './components/LineCard';
+import NavCard from './components/NavCard';
+
+const navIconStyle = {
+  fontSize: '5em',
+  color: 'rgba(0, 0, 0, 0.04)'
+}
+
+const Text = (props) => (
+  <span style={{ color: props.color }}>{props.children}</span>
+)
 
 export default () => {
   // const intl = useIntl();
@@ -14,53 +25,41 @@ export default () => {
       }}
       content={<HeaderContent />}
     >
-      <Card>
-        <Alert
-          // message={intl.formatMessage({
-          //   id: 'pages.welcome.alertMessage',
-          //   defaultMessage: '更快更强的重型组件，已经发布。',
-          // })}
-          message="更快更强的重型组件，已经发布。"
-          type="success"
-          showIcon
-          banner
-          style={{
-            margin: -12,
-            marginBottom: 24,
-          }}
-        />
-        <Typography.Text strong>
-          {/* <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="高级表格" /> */}
-          高级表格{' '}
-          <a
-            href="https://procomponents.ant.design/components/table"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            {/* <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" /> */}
-            欢迎使用
-          </a>
-        </Typography.Text>
-    
-        <Typography.Text
-          strong
-          style={{
-            marginBottom: 12,
-          }}
-        >
-          {/* <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="高级布局" /> */}
-          高级布局{' '}
-          <a
-            href="https://procomponents.ant.design/components/layout"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            {/* <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" /> */}
-            欢迎使用
-          </a>
-        </Typography.Text>
-
-      </Card>
+      <Row gutter={24}>
+        <Col span={8}>
+          <NavCard
+            link="/student/student"
+            title={<Text color="rgba(255, 255, 255, .95)">学生管理</Text>}
+            color="#389e0d"
+            icon={<UserOutlined style={navIconStyle} />}
+          />
+        </Col>
+        <Col span={8}>
+          <NavCard
+            link="/post/list"
+            title={<Text color="rgba(255, 255, 255, .95)">科普管理</Text>}
+            color="#d48806"
+            icon={<ReadOutlined style={navIconStyle} />}
+          />
+        </Col>
+        <Col span={8}>
+          <NavCard
+            link="/medical/visit"
+            title={<Text color="rgba(255, 255, 255, .95)">就诊管理</Text>}
+            color="#08979c"
+            icon={<BranchesOutlined style={navIconStyle} />}
+          />
+        </Col>
+      </Row>
+      
+      <Row gutter={16} style={{ marginTop: '1.5em' }}>
+        <Col span={12}>
+          <LineCard icon={<LineChartOutlined />} title="科普浏览量统计" api="/index/post-pv" />
+        </Col>
+        <Col span={12}>
+          <LineCard icon={<LineChartOutlined />} title="学生阅读数统计" api="/index/post-uv" />
+        </Col>
+      </Row>
     </PageContainer>
   );
 };