Merge branch 'master' of http://git.ycjcjy.com/medical-plat/pc-admin into master

package.json

@@ -55,6 +55,7 @@
     "antd": "^4.12.0",
     "array-move": "^3.0.1",
     "classnames": "^2.2.6",
+    "echarts": "^5.1.0",
     "lodash": "^4.17.11",
     "md5": "^2.3.0",
     "moment": "^2.25.3",

src/components/ECharts/index.jsx

@@ -0,0 +1,39 @@
+// 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]
+);
+
+export default React.forwardRef((props, ref) => {
+  const el = useRef()
+  const chartRef = useRef()
+
+  // 向父组件公开 echarts 实例
+  useImperativeHandle(ref, () => ({
+    chart: chartRef.current,
+  }))
+
+  useEffect(() => {
+    const chart = echarts.init(el.current)
+    chart.setOption(props.option)
+    chartRef.current = chart
+
+    return () => chart.dispose()
+  }, [props.option])
+
+  return <div ref={el}></div>
+})

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -2,6 +2,7 @@ import { LogoutOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
 import { history, connect } from 'umi';
+import { defaultAvatar } from '@/utils/utils';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 
@@ -45,10 +46,7 @@ class AvatarDropdown extends React.Component {
           <Avatar
             size="small"
             className={styles.avatar}
-            src={
-              currentUser.avatar ||
-              'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
-            }
+            src={ currentUser.avatar || defaultAvatar }
             alt="avatar"
           />
           <span className={`${styles.name} anticon`}>{currentUser.userName}</span>

src/pages/Welcome.less

@@ -1,8 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.pre {
-  margin: 12px 0;
-  padding: 12px 20px;
-  background: @input-bg;
-  box-shadow: @card-shadow;
-}

src/pages/Welcome/components/HeaderContent.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import { Image, Statistic, Spin, Badge } from 'antd'
+import { connect } from 'umi'
+import request from '@/utils/request'
+import { defaultAvatar } from '@/utils/utils';
+import Styles from '../style.less'
+
+const HeaderContent = (props) => {
+  const [loading, setLoading] = useState(false)
+  const [statis, setStatis] = useState({})
+
+  useEffect(() => {
+    setLoading(true)
+    request('/index/post-data').then((res) => {
+      setStatis(res)
+      setLoading(false)
+    }).catch((e) => {
+      setLoading(false)
+    })
+  }, [])
+
+  return (
+    <div className={Styles['header-content']}>
+      <div className={Styles['ctt-header']}>
+        <Image width="100%" src={props.user.avatar || defaultAvatar} />
+      </div>
+      <div className={Styles['ctt-body']}>
+        <h3>{`你好, ${props.user.userName}, 祝你开心每一天！`}</h3>
+        <p>
+          <span className={Styles['sub-title']}>{`登录名: ${props.user.loginName}`}</span>
+          <span className={Styles['sub-title']}>状态: 正常 <Badge status="success" /></span>
+        </p>
+      </div>
+      <div className={Styles['ctt-footer']}>
+        <Spin spinning={loading}>
+          <div className={Styles['st-wrapper']}>
+            <div className={Styles['st-item']}><Statistic title="科普数量" value={statis.total} /></div>
+            <div className={Styles['st-item']}><Statistic title="浏览总数" value={statis.pv} /></div>
+            <div className={Styles['st-item']}><Statistic title="学生总数" value={statis.student} /></div>
+          </div>
+        </Spin>
+      </div>
+    </div>
+  )
+}
+
+export default connect((s) => ({ user: s.user.currentUser }))(HeaderContent)

src/pages/Welcome.jsx → src/pages/Welcome/index.jsx

@@ -2,20 +2,18 @@ import React from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Alert, Typography } from 'antd';
 // import { useIntl, FormattedMessage } from 'umi';
-import styles from './Welcome.less';
-
-const CodePreview = ({ children }) => (
-  <pre className={styles.pre}>
-    <code>
-      <Typography.Text copyable>{children}</Typography.Text>
-    </code>
-  </pre>
-);
+import HeaderContent from './components/HeaderContent';
+import styles from './style.less';
 
 export default () => {
   // const intl = useIntl();
   return (
-    <PageContainer>
+    <PageContainer
+      header={{
+        title: '工作台'
+      }}
+      content={<HeaderContent />}
+    >
       <Card>
         <Alert
           // message={intl.formatMessage({
@@ -43,7 +41,7 @@ export default () => {
             欢迎使用
           </a>
         </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
+    
         <Typography.Text
           strong
           style={{
@@ -61,7 +59,7 @@ export default () => {
             欢迎使用
           </a>
         </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
+
       </Card>
     </PageContainer>
   );

src/pages/Welcome/style.less

@@ -0,0 +1,55 @@
+@import '~antd/lib/style/themes/default.less';
+
+.header-content {
+  display: flex;
+  
+  .ctt-header {
+    flex: none;
+    width: 72px;
+    height: 72px;
+    
+    img {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+
+  .ctt-body {
+    flex: auto;
+    margin: 0 2em;
+
+    .sub-title {
+      display: inline-block;
+      size: 1em;
+      color: #666;
+      margin-right: 2em;
+    }
+  }
+
+  .ctt-footer {
+    flex: none;
+  }
+
+  .st-wrapper {
+    display: flex;
+
+    .st-item {
+      flex: none;
+      position: relative;
+
+      & + .st-item {
+        margin-left: 1em;
+        padding-left: 1em;
+
+        &::before {
+          position: absolute;
+          content: '';
+          border-left: 1px solid rgba(0, 0, 0, .2);
+          height: 60%;
+          top: 20%;
+          left: 0;
+        }
+      }
+    }
+  }
+}

src/utils/utils.js

@@ -43,3 +43,5 @@ export function getCurrentRoute(pathname) {
 
   return routeArr.filter((x) => x.path === pathname)[0];
 }
+
+export const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'