import { useTranslate, useAuthProvider, Title, useNotify } from 'react-admin';
|
import { Box, Typography, LinearProgress, Stack, Grid } from '@mui/material';
|
import React, { useState, useRef, useEffect, useMemo } from "react";
|
import SensorOccupiedIcon from '@mui/icons-material/SensorOccupied';
|
import CardWithIcon from '../components/CardWithIcon';
|
import CommentIcon from '@mui/icons-material/Comment';
|
import WifiIcon from '@mui/icons-material/Wifi';
|
import { useTheme } from '@mui/material/styles';
|
import { useNavigate } from 'react-router-dom';
|
import { getSystemDicts } from '@/api/auth'
|
import { WordEffect } from './WordEffect';
|
import request from '@/utils/request';
|
import Welcome from "./Welcome";
|
import NbChart from "./NbChart";
|
import NbList from "./NbList";
|
import NbCard from "./NbCard";
|
import NbPie from './NbPie';
|
|
const styles = {
|
flex: { display: 'flex' },
|
flexColumn: { display: 'flex', flexDirection: 'column' },
|
leftCol: { flex: 1, },
|
rightCol: { flex: 1, },
|
singleCol: { marginTop: '1em', marginBottom: '1em' },
|
};
|
|
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({});
|
const [stock, setStock] = useState([]);
|
const [deadStock, setDeadStock] = useState([]);
|
const [locUsage, setLocUsages] = useState([]);
|
const [tasks, setTasks] = useState([]);
|
const [total, setTotal] = useState(0);
|
|
|
useEffect(() => {
|
getDashBoardHeader()
|
getRecentTrands()
|
getRecentStocks()
|
getRecentUsage()
|
getExcingTasks()
|
|
}, [])
|
|
const getDashBoardHeader = async () => {
|
await request.post('/asnOrder/dashbord/header').then(res => {
|
const { code, msg, data } = res?.data;
|
console.log(code);
|
|
if (code === 200) {
|
setStatistic(data);
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
})
|
}
|
|
const getRecentStocks = async () => {
|
await request.post('/locItem/page', { current: 1, pageSize: 10, orderBy: 'create_time asc' }).then(res => {
|
const { code, msg, data } = res?.data;
|
if (code === 200) {
|
setDeadStock(data?.records);
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
})
|
}
|
|
const getExcingTasks = async () => {
|
await request.post('/task/page', { current: 1, pageSize: 100, orderBy: 'sort desc' }).then(res => {
|
const { code, msg, data } = res?.data;
|
if (code === 200) {
|
setTasks(data?.records)
|
setTotal(data?.total)
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
})
|
}
|
|
const getRecentUsage = () => {
|
request.post("/loc/pie/list").then(res => {
|
const { code, msg, data } = res?.data;
|
if (code === 200) {
|
setLocUsages(data?.data)
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
})
|
}
|
|
/**
|
* 获取库近一个月出入库信息
|
*/
|
const getRecentTrands = async () => {
|
await request.post('/asnOrder/stock/trand').then(res => {
|
const { code, msg, data } = res.data?.data;
|
if (code === 200) {
|
setStock(data)
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
})
|
}
|
|
return (
|
<>
|
<Grid container md={12} item>
|
<Grid item md={8}>
|
<Box sx={{ display: "flex" }}>
|
<CardWithIcon
|
icon={WifiIcon}
|
subtitle={translate('page.dashboard.header.inStockQty')}
|
title={`${statistic?.inAnf}`}
|
type={"in"}
|
statistic={statistic}
|
/>
|
<Spacer />
|
<CardWithIcon
|
icon={SensorOccupiedIcon}
|
subtitle={translate('page.dashboard.header.outStockQty')}
|
title={`${statistic?.outAnf}`}
|
type={"out"}
|
statistic={statistic}
|
/>
|
</Box>
|
<Spacer />
|
<Box>
|
<NbChart orders={stock} />
|
</Box>
|
<Spacer />
|
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
<NbList deadStock={deadStock} />
|
<NbPie locUsage={locUsage} />
|
</Box>
|
<Spacer />
|
</Grid>
|
<Grid item md={4}>
|
<Box sx={{ display: 'flex' }}>
|
<Spacer />
|
<NbCard
|
icon={CommentIcon}
|
subtitle={translate('page.dashboard.header.taskWorkQty')}
|
title={`${statistic?.taskQty}`}
|
total={total}
|
to={{
|
pathname: '/task',
|
search: JSON.stringify({
|
filter: JSON.stringify({ status: 1 }),
|
}),
|
}}
|
tasks={tasks}
|
/>
|
</Box>
|
</Grid>
|
</Grid>
|
</>
|
)
|
}
|
|
const Spacer = () => <span style={{ width: '1em' }} />;
|
|
export default Dashboard;
|
