tijiao

config/cacheRoutes.js

@@ -7,7 +7,7 @@ const routes = [
   '/demo/tabcrud',
   '/demo/tabcrud/add',
   '/demo/tabcrud/edit',
-  '/tenantsys/tenant',      // xx
+  '/charts/line',      // xx
 ]
 
 export default {

config/config.js

@@ -154,6 +154,24 @@ export default defineConfig({
                 }
               ]
             },
+            // 图表
+            {
+              path: '/charts',
+              routes: [
+                {
+                  path: '/charts/line',
+                  component: './charts/line/index',
+                },
+                {
+                  path: '/charts/bar',
+                  component: './charts/bar/index',
+                },
+                {
+                  path: '/charts/pie',
+                  component: './charts/pie/index',
+                }
+              ]
+            },
             // -----
             {
               path: '*',

config/defaultSettings.js

@@ -13,5 +13,5 @@ export default {
   },
   title: 'Sage Framework',
   pwa: false,
-  iconfontUrl: '//at.alicdn.com/t/font_1873986_zq2zexdsrnm.js',
+  iconfontUrl: '//at.alicdn.com/t/font_1873986_v1i35remd38.js',
 };

package.json

@@ -57,6 +57,7 @@
     "@umijs/hooks": "^1.9.2",
     "antd": "^4.0.0",
     "classnames": "^2.2.6",
+    "echarts": "^5.0.0",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
     "omit.js": "^1.0.2",
@@ -66,6 +67,7 @@
     "react-activation": "^0.5.0",
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",
+    "sage-chart": "^1.0.1",
     "umi": "^3.1.1",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1"

src/global.less

@@ -73,6 +73,15 @@ ol {
   display: none !important;
 }
 
+.sage-page-wrapper {
+  padding: 12px;
+}
+
+.sage-chart-card {
+  height: calc(100vh - 90px - 40px - 24px);
+  border: 1px solid #eee;
+}
+
 // 新增组件样式
 
 @media (max-width: @screen-xs) {

src/layouts/BasicLayout.jsx

@@ -13,7 +13,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
 import TabBar from '@/components/TabBar';
 import GlobalFooter from '@/components/GlobalFooter';
 import { getAuthorityFromRouter } from '@/utils/utils';
-import logo from '../assets/logo.svg';
+import logo from '../assets/logo.png';
 
 import './BasicLayout.less'
 

src/layouts/BasicLayout.less

@@ -128,7 +128,9 @@
 }
 
 .sage-dashboard-container {
-  padding-bottom: 50px;
+  height: calc(100vh - 90px - 40px);
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .hideSidebar {

src/layouts/UserLayout.jsx

@@ -3,7 +3,7 @@ import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { Link, useIntl, connect } from 'umi';
 import React from 'react';
 import SelectLang from '@/components/SelectLang';
-import logo from '../assets/logo.svg';
+import logo from '../assets/logo2.png';
 import styles from './UserLayout.less';
 
 const UserLayout = props => {
@@ -43,10 +43,10 @@ const UserLayout = props => {
             <div className={styles.header}>
               <Link to="/">
                 <img alt="logo" className={styles.logo} src={logo} />
-                <span className={styles.title}>Ant Design</span>
+                <span className={styles.title}>Sage Front Framework</span>
               </Link>
             </div>
-            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+            <div className={styles.desc}>SageFrontFramework 是江苏圣捷远创公司 后台管理 的前端框架</div>
           </div>
           {children}
         </div>

src/pages/charts/bar/index.jsx

+import React, { useEffect } from 'react'
+import * as echarts from 'echarts';
+
+const Line = () => {
+
+  useEffect(() => {
+    // 基于准备好的dom，初始化echarts实例
+    const myChart = echarts.init(document.getElementById('demo-bar-1'));
+    // 绘制图表
+    myChart.setOption({
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(220, 220, 220, 0.8)'
+        }
+      }]
+    });
+
+    // 高宽度自适应
+    window.addEventListener("resize", () => {
+      myChart.resize();
+    });
+
+  }, [])
+
+  return (
+    <div class="sage-page-wrapper">
+      <div id="demo-bar-1" className="sage-chart-card"></div>
+    </div>
+
+  )
+}
+
+export default Line
\ No newline at end of file

src/pages/charts/line/index.jsx

+import React, { useEffect } from 'react'
+import * as echarts from 'echarts';
+
+const Line = () => {
+
+  useEffect(() => {
+    // 基于准备好的dom，初始化echarts实例
+    const myChart = echarts.init(document.getElementById('demo-line-1'));
+    // 绘制图表
+    myChart.setOption({
+      title: {
+        text: '折线图堆叠'
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: '邮件营销',
+          type: 'line',
+          stack: '总量',
+          data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+          name: '联盟广告',
+          type: 'line',
+          stack: '总量',
+          data: [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+          name: '视频广告',
+          type: 'line',
+          stack: '总量',
+          data: [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+          name: '直接访问',
+          type: 'line',
+          stack: '总量',
+          data: [320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+          name: '搜索引擎',
+          type: 'line',
+          stack: '总量',
+          data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }
+      ]
+    });
+
+    // 高宽度自适应
+    window.addEventListener("resize", () => {
+      myChart.resize();
+    });
+
+  }, [])
+
+  return (
+    <div class="sage-page-wrapper">
+      <div id="demo-line-1" className="sage-chart-card"></div>
+    </div>
+
+  )
+}
+
+export default Line
\ No newline at end of file

src/pages/charts/pie/index.jsx

+import React, { useEffect } from 'react'
+import * as echarts from 'echarts';
+
+const Pie = () => {
+
+  useEffect(() => {
+    // 基于准备好的dom，初始化echarts实例
+    const myChart = echarts.init(document.getElementById('demo-pie-1'));
+    // 绘制图表
+    myChart.setOption({
+      title: {
+        text: '某站点用户访问来源',
+        subtext: '纯属虚构',
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+      },
+      series: [
+        {
+          name: '访问来源',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            { value: 1048, name: '搜索引擎' },
+            { value: 735, name: '直接访问' },
+            { value: 580, name: '邮件营销' },
+            { value: 484, name: '联盟广告' },
+            { value: 300, name: '视频广告' }
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    });
+
+    // 高宽度自适应
+    window.addEventListener("resize", () => {
+      myChart.resize();
+    });
+
+  }, [])
+
+  return (
+    <div class="sage-page-wrapper">
+      <div id="demo-pie-1" className="sage-chart-card"></div>
+    </div>
+
+  )
+}
+
+export default Pie
\ No newline at end of file

src/pages/menu/index.jsx

@@ -89,13 +89,14 @@ const MenuList = (props) => {
   const handleEdit = async (event, record) => {
     event.stopPropagation()
 
+    modalRef.current.setTitle('编辑')
+    modalRef.current.setVisible(true)
+
     setStatus('update')
     const res = await getMenuDetail({ id: record.id })
     const { data } = res
     setDetail(data)
 
-    modalRef.current.setTitle('编辑')
-    modalRef.current.setVisible(true)
     updateFormRef.current.setFieldsValue({
       parentId: data.parentId,
       menuType: data.menuType,

yarn.lock

@@ -6370,6 +6370,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/echarts/download/echarts-5.0.0.tgz?cache=0&sync_timestamp=1606890742227&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-5.0.0.tgz#66ec0ea47e3c93b2aadfbb2d719869932ad13ce0"
+  integrity sha1-ZuwOpH48k7Kq37stcZhpkyrRPOA=
+  dependencies:
+    tslib "1.10.0"
+    zrender "5.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -14937,6 +14945,14 @@ safe-regex@^2.1.1:
   resolved "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=
 
+sage-chart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/sage-chart/-/sage-chart-1.0.1.tgz#afc27f84e0cc8eefc7b5fb3b3b075238a4dc717a"
+  integrity sha512-KP2kY5R0bTZp6Kec2sukeF5thJbCGbR7r+cci1h0cVxJ+Nj69D/UWGlnc+sLbo7yyPrUNnj8jfOBttEWvcMu2w==
+  dependencies:
+    react "^16.8.6"
+    react-dom "^16.8.6"
+
 sane@^4.0.3:
   version "4.1.0"
   resolved "https://registry.npm.taobao.org/sane/download/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
@@ -16606,6 +16622,11 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tslib@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.10.0.tgz?cache=0&sync_timestamp=1609887438976&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha1-w8GflZc/sKYpc/sJ2Q2WHuQ+XIo=
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887438976&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -17694,6 +17715,13 @@ zlib@1.0.5:
   resolved "https://registry.npm.taobao.org/zlib/download/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0"
   integrity sha1-bnyXL8NxxkWmr7A6sUdp3vEU/MA=
 
+zrender@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/zrender/download/zrender-5.0.1.tgz?cache=0&sync_timestamp=1610458835064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-5.0.1.tgz#cc377136a9d00d0a177ca7f65c32aed2901928da"
+  integrity sha1-zDdxNqnQDQoXfKf2XDKu0pAZKNo=
+  dependencies:
+    tslib "1.10.0"
+
 zscroller@~0.4.0:
   version "0.4.8"
   resolved "https://registry.npm.taobao.org/zscroller/download/zscroller-0.4.8.tgz#69eed68690808eedf81f9714014356b36cdd20f4"