diff --git a/package-lock.json b/package-lock.json index 70c8bb9..e2e52d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "css-minimizer-webpack-plugin": "^3.2.0", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", + "echarts": "^5.4.1", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.1", "eslint-webpack-plugin": "^3.1.1", @@ -7142,6 +7143,20 @@ "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", "license": "MIT" }, + "node_modules/echarts": { + "version": "5.4.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz", + "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.1" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -17952,6 +17967,19 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zrender": { + "version": "5.4.1", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz", + "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } }, "dependencies": { @@ -22631,6 +22659,22 @@ "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "echarts": { + "version": "5.4.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz", + "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.4.1" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -29795,6 +29839,21 @@ "version": "0.1.0", "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zrender": { + "version": "5.4.1", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz", + "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } } } } diff --git a/package.json b/package.json index d442899..dbb121e 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "css-minimizer-webpack-plugin": "^3.2.0", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", + "echarts": "^5.4.1", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.1", "eslint-webpack-plugin": "^3.1.1", diff --git a/src/assets/images/dashboard/icon-more.png b/src/assets/images/dashboard/icon-more.png new file mode 100644 index 0000000..2796475 Binary files /dev/null and b/src/assets/images/dashboard/icon-more.png differ diff --git a/src/assets/images/dashboard/icon-n1.png b/src/assets/images/dashboard/icon-n1.png new file mode 100644 index 0000000..a256963 Binary files /dev/null and b/src/assets/images/dashboard/icon-n1.png differ diff --git a/src/assets/images/dashboard/icon-n2.png b/src/assets/images/dashboard/icon-n2.png new file mode 100644 index 0000000..199b87e Binary files /dev/null and b/src/assets/images/dashboard/icon-n2.png differ diff --git a/src/assets/images/dashboard/icon-n3.png b/src/assets/images/dashboard/icon-n3.png new file mode 100644 index 0000000..611c9b5 Binary files /dev/null and b/src/assets/images/dashboard/icon-n3.png differ diff --git a/src/assets/images/dashboard/img-a1.png b/src/assets/images/dashboard/img-a1.png new file mode 100644 index 0000000..24fb70a Binary files /dev/null and b/src/assets/images/dashboard/img-a1.png differ diff --git a/src/index.less b/src/index.less index 102d671..906d6a1 100644 --- a/src/index.less +++ b/src/index.less @@ -46,6 +46,14 @@ code { width: 200px; } +.mr-5 { + margin-right: 5px; +} + +.ml-5 { + margin-left: 5px; +} + .ml-8 { margin-left: 8px; } @@ -177,10 +185,14 @@ code { color: #e1a500; } -.c-green { +.c-success { color: #04c877; } +.c-green { + color: #00cc66; +} + .c-red { color: @primaryColor; } @@ -219,6 +231,7 @@ code { box-sizing: border-box; padding: 24px; border-radius: 12px; + position: relative; } .playedu-main-body { diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index 83c7480..2be7eb5 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -111,7 +111,7 @@ export const CoursePage = () => { title: "是否显示", dataIndex: "is_show", render: (is_show: number) => ( - + {is_show === 1 ? "· 显示" : "· 隐藏"} ), diff --git a/src/pages/dashboard/index.module.less b/src/pages/dashboard/index.module.less index e69de29..8a6d99e 100644 --- a/src/pages/dashboard/index.module.less +++ b/src/pages/dashboard/index.module.less @@ -0,0 +1,204 @@ +.label-item { + width: auto; + height: 94px; + display: flex; + flex-direction: column; + .label { + width: 84px; + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.88); + line-height: 24px; + } + .info { + width: auto; + height: 46px; + display: flex; + flex-direction: row; + margin-top: 24px; + align-items: center; + .num { + width: auto; + height: 46px; + font-size: 30px; + font-weight: 600; + color: rgba(0, 0, 0, 0.88); + line-height: 46px; + } + .compare { + width: auto; + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + line-height: 24px; + margin-left: 24px; + display: flex; + flex-direction: row; + align-items: center; + .down { + color: #00cc66; + font-size: 10px; + } + + .up { + color: #ff4d4f; + font-size: 10px; + } + } + } +} + +.large-title { + width: 100%; + height: 28px; + font-size: 18px; + font-weight: 600; + color: rgba(0, 0, 0, 0.88); + line-height: 28px; +} +.mode-box { + width: 100%; + height: 76px; + display: grid; + column-gap: 24px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-top: 24px; + .link-mode { + width: 176px; + height: 76px; + border-radius: 7px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 24px; + cursor: pointer; + &:hover { + background: #fafafa; + } + + i { + margin-right: 16px; + } + + span { + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.88); + line-height: 24px; + } + } +} + +.usage-guide { + width: 100%; + height: 76px; + background: #fafafa; + border-radius: 7px; + display: flex; + align-items: center; + margin-top: 24px; + .banner { + width: 130px; + height: 130px; + position: absolute; + top: 22px; + left: 196px; + z-index: 10; + } + + .link { + margin-left: 352px; + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + line-height: 24px; + display: flex; + align-items: center; + cursor: pointer; + &:hover { + text-decoration: underline; + } + .icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + } +} + +.rank-list { + width: 100%; + height: auto; + display: grid; + column-gap: 100px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-top: 24px; + margin-bottom: 12px; + .half-list { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + .rank-item { + width: 100%; + height: 24px; + display: flex; + align-items: center; + margin-bottom: 36px; + justify-content: space-between; + &:last-child { + margin-bottom: 0px; + } + .left-item { + width: auto; + display: flex; + align-items: center; + .item-num { + width: 24px; + height: 24px; + border-radius: 50%; + font-size: 14px; + background-color: #fafafa; + color: rgba(0, 0, 0, 0.45); + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; + } + .item-icon { + width: 24px; + height: 24px; + margin-right: 8px; + } + .item-name { + width: 150px; + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.88); + line-height: 24px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + .item-time { + height: 24px; + font-size: 12px; + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + line-height: 24px; + } + } + } +} + +.charts { + width: 100%; + height: 300px; + box-sizing: border-box; + padding-top: 24px; +} diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index c7c3bec..62104fd 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,10 +1,335 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import styles from "./index.module.less"; +import { Row, Col, message } from "antd"; +import { useNavigate } from "react-router-dom"; +import { DepartmentCreate } from "../department/compenents/create"; +import { MemberCreate } from "../member/compenents/create"; +import { CourseCreate } from "../course/compenents/create"; +import banner from "../../assets/images/dashboard/img-a1.png"; +import icon from "../../assets/images/dashboard/icon-more.png"; +import iconN1 from "../../assets/images/dashboard/icon-n1.png"; +import iconN2 from "../../assets/images/dashboard/icon-n2.png"; +import iconN3 from "../../assets/images/dashboard/icon-n3.png"; export const Dashboard: React.FC = () => { + const navigate = useNavigate(); + const [departmentVisible, setDepartmentVisible] = useState(false); + const [memberVisible, setMembeVisible] = useState(false); + const [uploadVideoVisible, setUploadVideoVisible] = useState(false); + const [courseVisible, setCourseVisible] = useState(false); + + useEffect(() => { + renderPieView({ + videos_count: 30, + images_count: 10, + }); + return () => { + window.onresize = null; + }; + }, []); + + const renderPieView = (params: any) => { + let num = params.videos_count + params.images_count; + let data = [ + { + name: "视频数", + value: params.videos_count, + }, + { + name: "图片数", + value: params.images_count, + }, + ]; + var echarts = require("echarts"); + let myChart = echarts.init(document.getElementById("chartCircle")); + myChart.setOption({ + legend: [ + { + selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。 + bottom: "10%", + left: "center", + textStyle: { + // 图例的公用文本样式。 + fontSize: 14, + color: " #333333", + }, + data: ["视频数", "图片数"], + }, + ], + tooltip: { + show: true, // 是否显示提示框 + }, + title: { + text: "", //主标题 + left: "center", // 水平对齐方式 + bottom: 0, + itemGap: 4, // 主副标题相隔间距 + textStyle: { + // 主标题样式 + fontSize: 16, + fontWeight: 400, + }, + }, + series: [ + { + type: "pie", + radius: ["40%", "60%"], // 环比 圈的大小 + center: ["50%", "40%"], // 图形在整个canvas中的位置 + color: ["#FE8650", "#FFB504"], // item的取色盘 + avoidLabelOverlap: false, + itemStyle: { + borderColor: "#fff", // 白边 + borderWidth: 2, + }, + emphasis: { + // 高亮item的样式 + disabled: true, + }, + label: { + show: true, + position: "center", + formatter: "总资源数" + num, // 可以自定义，也可以{a}{b}{c}这种 + }, + labelLine: { + show: false, + }, + data: data, + }, + ], + }); + window.onresize = () => { + myChart.resize(); + }; + }; + return ( -
-

首頁概況

-
+ <> + + { + setDepartmentVisible(false); + }} + /> + { + setMembeVisible(false); + }} + /> + { + setCourseVisible(false); + }} + /> + +
+
+
+
今日学习学员
+
+
300
+
+ 较昨日 + + ▼100 + +
+
+
+
+
总学员数
+
+
3000
+
+ 较昨日 + + ▲100 + +
+
+
+
+
线上课数
+
+
20
+
+
+
+
+
+
快捷操作
+
+
{ + setMembeVisible(true); + }} + > + + 添加学员 +
+
+ + 上传视频 +
+
{ + setCourseVisible(true); + }} + > + + 新建线上课 +
+
{ + setDepartmentVisible(true); + }} + > + + 添加部门 +
+
+
+
+
今日学习排行
+
+
+
+
+ +
忻咏
+
+
1小时24秒
+
+
+
+ +
蒋建
+
+
1小时24秒
+
+
+
+ +
谭茂
+
+
1小时24秒
+
+
+
+
4
+
渠雅眉
+
+
1小时24秒
+
+
+
+
5
+
柴晨
+
+
1小时24秒
+
+
+
+
+
+
6
+
柴晨
+
+
1小时24秒
+
+
+
+
7
+
柴晨
+
+
1小时24秒
+
+
+
+
8
+
柴晨
+
+
1小时24秒
+
+
+
+
9
+
柴晨
+
+
1小时24秒
+
+
+
+
10
+
柴晨
+
+
1小时24秒
+
+
+
+
+ + +
+
+
+
部门数
+
+
8
+
+
+
+
超级管理员
+
+
2
+
+
+
+
子管理员
+
+
8
+
+
+
+
+
+
使用指南
+
+ +
+ 点击查看产品手册，快速玩转Playedu！ + +
+
+
+
+
资源统计
+
+
+
+
+ + + ); }; diff --git a/src/pages/department/compenents/create.tsx b/src/pages/department/compenents/create.tsx index c7fd291..de3cc5d 100644 --- a/src/pages/department/compenents/create.tsx +++ b/src/pages/department/compenents/create.tsx @@ -97,7 +97,7 @@ export const DepartmentCreate: React.FC = ({ return ( <> {
} p="department-cud"