#

vincentlu

1 天以前 a7e568d9f10d0a6419a7b07bf08b1f3faba730a9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useState, useRef, useEffect, useMemo } from "react";
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import { useTranslate, useAuthProvider, Title, useNotify } from 'react-admin';
import { WordEffect } from './WordEffect';
import { getSystemDicts } from '@/api/auth'
import Welcome from "./Welcome";
import CardWithIcon from '../components/CardWithIcon';
import SensorOccupiedIcon from '@mui/icons-material/SensorOccupied';
import WifiIcon from '@mui/icons-material/Wifi';
import request from '@/utils/request';
import { Box, Typography, LinearProgress, Stack } from '@mui/material';
 
const Dashboard = () => {
    const authProvider = useAuthProvider();
    const navigate = useNavigate();
    const theme = useTheme();
    const translate = useTranslate();
 
    useEffect(() => {
        authProvider.checkAuth().catch(() => {
            navigate('/login');
        })
        getSystemDicts().then((data) => {
            localStorage.setItem("sys_dicts", JSON.stringify(data));
        })
    }, [authProvider, navigate]);
 
    return (
        <>
            <Title title={"menu.dashboard"} />
            <Welcome />
            <DashboardSummaryView />
            <div
                style={{
                    boxSizing: 'border-box',
                    display: 'flex',
                    width: '100%',
                    height: '100%',
                    flexDirection: 'column',
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    padding: '2rem 1rem',
                }}
            >
                <WordEffect
                    words={translate('page.welcome.index')}
                    color={theme.palette.mode === 'light' ? '#666' : '#eeeeee'}
                />
                <WordEffect
                    words={translate('page.welcome.tech')}
                    color={theme.palette.mode === 'light' ? '#666' : '#eeeeee'}
                />
            </div>
        </>
    )
}
 
const DashboardSummaryView = () => {
    const translate = useTranslate();
    const notify = useNotify();
    const [statistic, setStatistic] = useState(null);
 
    useEffect(() => {
        request.get('/dashboard/member/statistic', {
            params: {}
        }).then(res => {
            const { code, msg, data } = res.data;
            if (code === 200) {
                setStatistic(data);
            } else {
                notify(msg, { type: 'error', messageArgs: { _: msg } });
            }
        }).catch((error) => {
            notify(error.message, { type: 'error', messageArgs: { _: error.message } });
            console.error(error);
        })
    }, [])
 
    return (
        <Box sx={{
            display: 'flex',
            mt: 2,
            gap: 2,
            justifyContent: 'space-between',
        }}>
            <CardWithIcon
                icon={WifiIcon}
                title={translate('page.member.header.onlineMembers')}
                subtitle={`${statistic?.membersOnlineQua}`}
            />
            <CardWithIcon
                icon={SensorOccupiedIcon}
                title={translate('page.member.header.totalMembers')}
                subtitle={`${statistic?.membersTotalQua}`}
            />
            <CardWithIcon
                icon={WifiIcon}
                title={translate('page.member.header.onlineMembers')}
                subtitle={`${statistic?.membersOnlineQua}`}
            />
            <CardWithIcon
                icon={SensorOccupiedIcon}
                title={translate('page.member.header.totalMembers')}
                subtitle={`${statistic?.membersTotalQua}`}
            />
        </Box>
    )
}
 
export default Dashboard;