Add scope select to online statistic

This commit is contained in:
2023-12-19 10:25:20 +08:00
parent 33368f7f89
commit 9b1beed8b5
3 changed files with 37 additions and 7 deletions

4
src/global.d.ts vendored
View File

@@ -385,3 +385,7 @@ interface OnlineInfoVo {
record: string record: string
}[] }[]
} }
interface OnlineInfoGetParam {
scope: string
}

View File

@@ -156,6 +156,7 @@ const OnlineInfo: React.FC = () => {
const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null) const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [currentOnlineCount, setCurrentOnlineCount] = useState(-1) const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
const [scope, setScope] = useState('WEAK')
useUpdatedEffect(() => { useUpdatedEffect(() => {
const chartResizeObserver = new ResizeObserver(() => { const chartResizeObserver = new ResizeObserver(() => {
@@ -173,14 +174,23 @@ const OnlineInfo: React.FC = () => {
getOnlineInfo() getOnlineInfo()
}, []) }, [])
const getOnlineInfo = () => { const handleOnScopeChange = (value: string) => {
setScope(value)
getOnlineInfo(value)
}
const handleOnRefresh = () => {
getOnlineInfo()
}
const getOnlineInfo = (_scope: string = scope) => {
if (isLoading) { if (isLoading) {
return return
} }
setIsLoading(true) setIsLoading(true)
void r_sys_statistic_online().then((res) => { void r_sys_statistic_online({ scope: _scope }).then((res) => {
const response = res.data const response = res.data
if (response.success) { if (response.success) {
const data = response.data const data = response.data
@@ -224,15 +234,30 @@ const OnlineInfo: React.FC = () => {
<> <>
<FlexBox gap={10} direction={'horizontal'}> <FlexBox gap={10} direction={'horizontal'}>
<span style={{ whiteSpace: 'nowrap' }}>线</span> <span style={{ whiteSpace: 'nowrap' }}>线</span>
<AntdTag> {currentOnlineCount}</AntdTag> <AntdTag>
{currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
</AntdTag>
</FlexBox> </FlexBox>
</> </>
} }
loading={isLoading} loading={isLoading}
expand={ expand={
<AntdButton title={'刷新'} onClick={() => getOnlineInfo()}> <>
<AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
<AntdSelect.Option key={'DAY'}></AntdSelect.Option>
<AntdSelect.Option key={'WEAK'}>7</AntdSelect.Option>
<AntdSelect.Option key={'MONTH'}>30</AntdSelect.Option>
<AntdSelect.Option key={'QUARTER'}>3</AntdSelect.Option>
<AntdSelect.Option key={'YEAR'}>12</AntdSelect.Option>
<AntdSelect.Option key={'TWO_YEARS'}>2</AntdSelect.Option>
<AntdSelect.Option key={'THREE_YEARS'}>3</AntdSelect.Option>
<AntdSelect.Option key={'FIVE_YEARS'}>5</AntdSelect.Option>
<AntdSelect.Option key={'ALL'}></AntdSelect.Option>
</AntdSelect>
<AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
<Icon component={IconFatwebRefresh} /> <Icon component={IconFatwebRefresh} />
</AntdButton> </AntdButton>
</>
} }
> >
<FlexBox className={'card-content'} direction={'horizontal'}> <FlexBox className={'card-content'} direction={'horizontal'}>

View File

@@ -88,4 +88,5 @@ export const r_sys_statistic_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTI
export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE) export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE)
export const r_sys_statistic_online = () => request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE) export const r_sys_statistic_online = (param: OnlineInfoGetParam) =>
request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE, param)