mirror of
https://github.com/PlayEdu/backend
synced 2025-06-21 19:04:18 +08:00
首页概览初步
This commit is contained in:
禺狨
parent
0614f198e4
commit
e4ffae20b2
59
package-lock.json
generated
59
package-lock.json
generated
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
BIN
src/assets/images/dashboard/icon-more.png
Normal file
BIN
src/assets/images/dashboard/icon-more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
BIN
src/assets/images/dashboard/icon-n1.png
Normal file
BIN
src/assets/images/dashboard/icon-n1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/dashboard/icon-n2.png
Normal file
BIN
src/assets/images/dashboard/icon-n2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/dashboard/icon-n3.png
Normal file
BIN
src/assets/images/dashboard/icon-n3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/images/dashboard/img-a1.png
Normal file
BIN
src/assets/images/dashboard/img-a1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@ -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 {
|
||||
|
||||
@ -111,7 +111,7 @@ export const CoursePage = () => {
|
||||
title: "是否显示",
|
||||
dataIndex: "is_show",
|
||||
render: (is_show: number) => (
|
||||
<span className={is_show === 1 ? "c-green" : "c-red"}>
|
||||
<span className={is_show === 1 ? "c-success" : "c-red"}>
|
||||
{is_show === 1 ? "· 显示" : "· 隐藏"}
|
||||
</span>
|
||||
),
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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<any> = () => {
|
||||
const navigate = useNavigate();
|
||||
const [departmentVisible, setDepartmentVisible] = useState<boolean>(false);
|
||||
const [memberVisible, setMembeVisible] = useState<boolean>(false);
|
||||
const [uploadVideoVisible, setUploadVideoVisible] = useState<boolean>(false);
|
||||
const [courseVisible, setCourseVisible] = useState<boolean>(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 (
|
||||
<div>
|
||||
<p>首頁概況</p>
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<DepartmentCreate
|
||||
open={departmentVisible}
|
||||
onCancel={() => {
|
||||
setDepartmentVisible(false);
|
||||
}}
|
||||
/>
|
||||
<MemberCreate
|
||||
open={memberVisible}
|
||||
onCancel={() => {
|
||||
setMembeVisible(false);
|
||||
}}
|
||||
/>
|
||||
<CourseCreate
|
||||
open={courseVisible}
|
||||
onCancel={() => {
|
||||
setCourseVisible(false);
|
||||
}}
|
||||
/>
|
||||
<Col span={12}>
|
||||
<div className="playedu-main-top">
|
||||
<div className="j-b-flex">
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>今日学习学员</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>300</div>
|
||||
<div className={styles["compare"]}>
|
||||
<span className="mr-5">较昨日</span>
|
||||
<span className="c-green">
|
||||
<i className={styles["down"]}>▼</i>100
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>总学员数</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>3000</div>
|
||||
<div className={styles["compare"]}>
|
||||
<span className="mr-5">较昨日</span>
|
||||
<span className="c-red">
|
||||
<i className={styles["up"]}>▲</i>100
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>线上课数</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="playedu-main-top mt-24">
|
||||
<div className={styles["large-title"]}>快捷操作</div>
|
||||
<div className={styles["mode-box"]}>
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setMembeVisible(true);
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="iconfont icon-adduser"
|
||||
style={{ color: "#FF9F32", fontSize: 36 }}
|
||||
></i>
|
||||
<span>添加学员</span>
|
||||
</div>
|
||||
<div className={styles["link-mode"]}>
|
||||
<i
|
||||
className="iconfont icon-upvideo"
|
||||
style={{ color: "#419FFF", fontSize: 36 }}
|
||||
></i>
|
||||
<span>上传视频</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setCourseVisible(true);
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="iconfont icon-onlinelesson"
|
||||
style={{ color: "#B284FF", fontSize: 36 }}
|
||||
></i>
|
||||
<span>新建线上课</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setDepartmentVisible(true);
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="iconfont icon-department"
|
||||
style={{ color: "#21C785", fontSize: 36 }}
|
||||
></i>
|
||||
<span>添加部门</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="playedu-main-top mt-24">
|
||||
<div className={styles["large-title"]}>今日学习排行</div>
|
||||
<div className={styles["rank-list"]}>
|
||||
<div className={styles["half-list"]}>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<img className={styles["item-icon"]} src={iconN1} alt="" />
|
||||
<div className={styles["item-name"]}>忻咏</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<img className={styles["item-icon"]} src={iconN2} alt="" />
|
||||
<div className={styles["item-name"]}>蒋建</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<img className={styles["item-icon"]} src={iconN3} alt="" />
|
||||
<div className={styles["item-name"]}>谭茂</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>4</div>
|
||||
<div className={styles["item-name"]}>渠雅眉</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>5</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["half-list"]}>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>6</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>7</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>8</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>9</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
<div className={styles["rank-item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<div className={styles["item-num"]}>10</div>
|
||||
<div className={styles["item-name"]}>柴晨</div>
|
||||
</div>
|
||||
<div className={styles["item-time"]}>1小时24秒</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div className="playedu-main-top">
|
||||
<div className="j-b-flex">
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>部门数</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>超级管理员</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["label-item"]}>
|
||||
<div className={styles["label"]}>子管理员</div>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["num"]}>8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="playedu-main-top mt-24">
|
||||
<div className={styles["large-title"]}>使用指南</div>
|
||||
<div className={styles["usage-guide"]}>
|
||||
<img className={styles["banner"]} src={banner} alt="" />
|
||||
<div className={styles["link"]}>
|
||||
点击查看产品手册，快速玩转Playedu！
|
||||
<img className={styles["icon"]} src={icon} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="playedu-main-top mt-24">
|
||||
<div className={styles["large-title"]}>资源统计</div>
|
||||
<div className={styles["charts"]}>
|
||||
<div
|
||||
id="chartCircle"
|
||||
style={{ width: "100%", height: 280 }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -97,7 +97,7 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title="新建部门"
|
||||
title="添加部门"
|
||||
centered
|
||||
forceRender
|
||||
open={open}
|
||||
|
||||
@ -366,7 +366,7 @@ export const DepartmentPage: React.FC = () => {
|
||||
<div className="d-flex">
|
||||
<PerButton
|
||||
type="primary"
|
||||
text="新建部门"
|
||||
text="添加部门"
|
||||
class="mr-16"
|
||||
icon={<PlusOutlined />}
|
||||
p="department-cud"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user