xinadmin/school2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
liu
2026-07-13 15:23:29 +08:00
commit 50885a98c8
473 changed files with 33772 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pages/dashboard/analysis.tsx
+445
View File
@@ -0,0 +1,445 @@
import React from "react";
import {Card, Col, Row, theme, Radio, Table, Tag, Space, List, Avatar} from "antd";
import ReactECharts from "echarts-for-react";
import {ArrowDownOutlined, ArrowUpOutlined, LikeOutlined, TeamOutlined} from "@ant-design/icons";
import { useTranslation } from 'react-i18next';
const {useToken} = theme;
interface DataType {
key: string;
name: string;
age: number;
address: string;
tags: string[];
}
const Index: React.FC = () => {
const {token} = useToken();
const { t } = useTranslation();
const optionsBar = {
xAxis: {
type: 'category',
show: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
show: false,
type: 'value'
},
series: [
{
data: [120, 88, 116, 60, 70],
type: 'bar',
itemStyle: {
color: token.colorPrimary
},
barWidth: 10,
}
]
}
const optionsLine = {
xAxis: {
show: false,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: false,
type: 'value'
},
series: [
{
data: [1, 2, 3, 2, 3, 2, 1],
type: 'line',
itemStyle: {
color: token.colorPrimary
}
}
]
};
const options = {
title: {
text: t('dashboard.analysis.annualSales'),
textStyle: {
color: token.colorText,
fontSize: token.fontSizeLG,
fontWeight: token.fontWeightStrong
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: token.colorPrimaryBg,
color: token.colorPrimary
}
},
borderWidth: 0,
backgroundColor: token.colorPrimaryBg,
textStyle: {
color: token.colorText
}
},
legend: {
data: [t('dashboard.analysis.grossProfit'), t('dashboard.analysis.netProfit'), t('dashboard.analysis.totalExpense')],
textStyle: {
color: token.colorText
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [
t('dashboard.analysis.january'),
t('dashboard.analysis.february'),
t('dashboard.analysis.march'),
t('dashboard.analysis.april'),
t('dashboard.analysis.may'),
t('dashboard.analysis.june'),
t('dashboard.analysis.july'),
t('dashboard.analysis.august'),
t('dashboard.analysis.september'),
t('dashboard.analysis.october'),
t('dashboard.analysis.november'),
t('dashboard.analysis.december')
]
}
],
yAxis: [
{
type: 'value',
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: token.colorBorder
}
}
},
],
series: [
{
name: t('dashboard.analysis.grossProfit'),
type: 'line',
stack: 'Total',
areaStyle: {
color: token.colorPrimaryBorder
},
emphasis: {
focus: 'series'
},
itemStyle: {
color: token.colorPrimary
},
data: [30,36,42,33,21,26,29,35,42,32,28,26]
},
{
name: t('dashboard.analysis.netProfit'),
type: 'line',
stack: 'Total',
areaStyle: {
color: token.colorSuccessBorder
},
emphasis: {
focus: 'series'
},
itemStyle: {
color: token.colorSuccess
},
data: [32,16,18,30,15,19,22,17,24,19,30,31]
},
{
name: t('dashboard.analysis.totalExpense'),
type: 'line',
stack: 'Total',
areaStyle: {
color: token.colorWarningBorder
},
emphasis: {
focus: 'series'
},
itemStyle: {
color: token.colorWarning
},
data: [36,24,36,36,39,56,24,23,21,12,16,19]
}
]
}
const optionsPie = {
title: {
text: t('dashboard.analysis.accessFrom'),
textStyle: {
color: token.colorText,
fontSize: token.fontSizeLG,
fontWeight: token.fontWeightStrong
},
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: '0%',
left: 'center',
textStyle: {
color: token.colorText
}
},
series: [
{
name: t('dashboard.analysis.accessFrom'),
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: token.borderRadius,
borderColor: token.colorBorder,
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: t('dashboard.analysis.searchEngine') },
{ value: 735, name: t('dashboard.analysis.direct') },
{ value: 580, name: t('dashboard.analysis.email') },
{ value: 484, name: t('dashboard.analysis.unionAds') },
{ value: 300, name: t('dashboard.analysis.videoAds') }
]
}
]
};
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
{
key: '4',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '5',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
const msgData = [
{
title: 'Ant Design Title 1',
},
{
title: 'Ant Design Title 2',
},
{
title: 'Ant Design Title 3',
},
{
title: 'Ant Design Title 4',
},
{
title: 'Ant Design Title 5',
},
];
return (
<>
<Row gutter={[20, 20]}>
<Col xxl={6} lg={12} xs={24}>
<Card variant={"borderless"}>
<div>{t('dashboard.analysis.totalRevenue')}</div>
<div className={"flex items-center justify-between pt-4 pb-2"}>
<div className={"text-4xl flex-0"}>￥3,415.00</div>
<ReactECharts style={{width: 120, height: 80}} option={optionsBar} />
</div>
<div>{t('dashboard.since.lastWeek')} <span style={{color: token.colorError}}><ArrowUpOutlined />11.28%</span></div>
</Card>
</Col>
<Col xxl={6} lg={12} xs={24}>
<Card variant={"borderless"}>
<div>{t('dashboard.analysis.totalExpenses')}</div>
<div className={"flex items-center justify-between pt-4 pb-2"}>
<div className={"text-4xl flex-0"}>￥8,425.00</div>
<ReactECharts style={{width: 120, height: 80}} option={optionsLine} />
</div>
<div>{t('dashboard.since.lastWeek')} <span style={{color: token.colorSuccess}}><ArrowDownOutlined />15.33%</span></div>
</Card>
</Col>
<Col xxl={6} lg={12} xs={24}>
<Card variant={"borderless"}>
<div>{t('dashboard.analysis.visitors')}</div>
<div className={"flex items-center justify-between pt-4 pb-2"}>
<div className={"text-4xl flex-0"}>
1,128
</div>
<div className={"text-4xl rounded-full flex items-center justify-center"} style={{height: 80, width: 80, background: token.colorPrimaryBg}}>
<TeamOutlined style={{ color: token.colorPrimary }}/>
</div>
</div>
<div>{t('dashboard.since.lastWeek')} <span style={{color: token.colorError}}><ArrowUpOutlined />32.60%</span></div>
</Card>
</Col>
<Col xxl={6} lg={12} xs={24}>
<Card variant={"borderless"}>
<div>{t('dashboard.analysis.likes')}</div>
<div className={"flex items-center justify-between pt-4 pb-2"}>
<div className={"text-4xl flex-0"}>
668
</div>
<div className={"text-4xl rounded-full flex items-center justify-center"} style={{height: 80, width: 80, background: token.colorPrimaryBg}}>
<LikeOutlined style={{ color: token.colorPrimary }}/>
</div>
</div>
<div>{t('dashboard.since.lastWeek')} <span style={{color: token.colorSuccess}}><ArrowDownOutlined />9.60%</span></div>
</Card>
</Col>
<Col xl={18} xs={24}>
<Card variant={"borderless"}>
<ReactECharts style={{width: '100%', height: 460}} option={options} />
</Card>
</Col>
<Col xl={6} xs={24}>
<Card variant={"borderless"}>
<ReactECharts style={{width: '100%', height: 460}} option={optionsPie} />
</Card>
</Col>
<Col xl={12} xs={24}>
<Card variant={"borderless"}>
<div className={"flex items-center justify-between mb-5"}>
<div style={{ fontSize: token.fontSizeLG, fontWeight: token.fontWeightStrong }}>{t('dashboard.analysis.salesRanking')}</div>
<Radio.Group
options={[
{ label: t('dashboard.analysis.month'), value: 'month'},
{ label: t('dashboard.analysis.year'), value: 'year'},
{ label: t('dashboard.analysis.day'), value: 'day'},
]}
defaultValue={'day'}
optionType="button"
buttonStyle="solid"
/>
</div>
<Table
columns={[
{
title: t('dashboard.analysis.article'),
dataIndex: 'name',
key: 'name',
render: (text) => <a>{text}</a>,
},
{
title: t('dashboard.analysis.age'),
dataIndex: 'age',
key: 'age',
},
{
title: t('dashboard.analysis.address'),
dataIndex: 'address',
key: 'address',
},
{
title: t('dashboard.analysis.tags'),
key: 'tags',
dataIndex: 'tags',
render: (_, { tags }) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: t('dashboard.analysis.action'),
key: 'action',
render: (_, record) => (
<Space size="middle">
<a>{t('dashboard.analysis.invite')} {record.name}</a>
<a>{t('dashboard.analysis.delete')}</a>
</Space>
),
},
]}
dataSource={data}
pagination={false}
scroll={{x: 800}}
/>
</Card>
</Col>
<Col xl={12} xs={24}>
<Card variant={"borderless"}>
<div className={"mb-5"} style={{ fontSize: token.fontSizeLG, fontWeight: token.fontWeightStrong }}>{t('dashboard.analysis.userReviews')}</div>
<List
dataSource={msgData}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
avatar={
<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />
}
title={<a href="https://ant.design">{item.title}</a>}
description={t('dashboard.analysis.reviewDescription')}
/>
</List.Item>
)}
/>
</Card>
</Col>
</Row>
</>
)
}
export default Index