Complete main UI #37
956
src/pages/system/Statistic.tsx
Normal file
956
src/pages/system/Statistic.tsx
Normal file
@@ -0,0 +1,956 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
import * as echarts from 'echarts/core'
|
||||
import {
|
||||
TooltipComponent,
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption,
|
||||
ToolboxComponentOption,
|
||||
DataZoomComponentOption,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent
|
||||
} from 'echarts/components'
|
||||
import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
|
||||
import { UniversalTransition } from 'echarts/features'
|
||||
import { SVGRenderer } from 'echarts/renderers'
|
||||
import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
|
||||
import '@/assets/css/pages/system/index.scss'
|
||||
import { useUpdatedEffect } from '@/util/hooks'
|
||||
import { formatByteSize } from '@/util/common'
|
||||
import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
|
||||
import {
|
||||
r_sys_statistic_active,
|
||||
r_sys_statistic_cpu,
|
||||
r_sys_statistic_hardware,
|
||||
r_sys_statistic_online,
|
||||
r_sys_statistic_software,
|
||||
r_sys_statistic_storage
|
||||
} from '@/services/system'
|
||||
import Card from '@/components/common/Card'
|
||||
import FlexBox from '@/components/common/FlexBox'
|
||||
import FitFullScreen from '@/components/common/FitFullScreen'
|
||||
import HideScrollbar from '@/components/common/HideScrollbar'
|
||||
import LoadingMask from '@/components/common/LoadingMask'
|
||||
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
GridComponent,
|
||||
DataZoomComponent,
|
||||
BarChart,
|
||||
LineChart,
|
||||
SVGRenderer,
|
||||
UniversalTransition
|
||||
])
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| ToolboxComponentOption
|
||||
| GridComponentOption
|
||||
| BarSeriesOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
>
|
||||
|
||||
const barDefaultSeriesOption: BarSeriesOption = {
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
switch (params.seriesName) {
|
||||
case 'idle':
|
||||
case 'free':
|
||||
return '#F5F5F5'
|
||||
default:
|
||||
return params.color ?? echarts.color.random()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const barEChartsBaseOption: EChartsOption = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
|
||||
return (params: TopLevelFormatterParams) =>
|
||||
`${utcToLocalTime(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[0],
|
||||
format
|
||||
)}<br><span style="display: flex; justify-content: space-between"><span>${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
params[0]['marker']
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
}${params[0]['seriesName']}</span><span style="font-weight: bold">${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[1]
|
||||
}</span></span> `
|
||||
}
|
||||
|
||||
const lineEChartsBaseOption: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: 'none'
|
||||
},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
interval: 1
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
minValueSpan: 2 * 60 * 60 * 1000
|
||||
}
|
||||
],
|
||||
series: [{}]
|
||||
}
|
||||
|
||||
interface CommonCardProps extends React.PropsWithChildren {
|
||||
icon: IconComponent
|
||||
title: React.ReactNode
|
||||
loading?: boolean
|
||||
expand?: React.ReactNode
|
||||
}
|
||||
|
||||
const CommonCard: React.FC<CommonCardProps> = (props) => {
|
||||
return (
|
||||
<Card style={{ overflow: 'visible' }}>
|
||||
<FlexBox className={'common-card'}>
|
||||
<FlexBox direction={'horizontal'} className={'head'}>
|
||||
<Icon component={props.icon} className={'icon'} />
|
||||
<div className={'title'}>{props.title}</div>
|
||||
{props.expand}
|
||||
</FlexBox>
|
||||
<LoadingMask
|
||||
hidden={!props.loading}
|
||||
maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
|
||||
>
|
||||
{props.children}
|
||||
</LoadingMask>
|
||||
</FlexBox>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const OnlineInfo: React.FC = () => {
|
||||
const onlineInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
|
||||
const [scope, setScope] = useState('WEAK')
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
onlineInfoEChartsRef.current?.resize()
|
||||
})
|
||||
|
||||
onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
|
||||
}
|
||||
}, [isLoading])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
getOnlineInfo()
|
||||
}, [])
|
||||
|
||||
const handleOnScopeChange = (value: string) => {
|
||||
setScope(value)
|
||||
getOnlineInfo(value)
|
||||
}
|
||||
|
||||
const handleOnRefresh = () => {
|
||||
getOnlineInfo()
|
||||
}
|
||||
|
||||
const getOnlineInfo = (_scope: string = scope) => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_statistic_online({ scope: _scope }).then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
setIsLoading(false)
|
||||
|
||||
setCurrentOnlineCount(data.current)
|
||||
|
||||
setTimeout(() => {
|
||||
const dataList = getTimesBetweenTwoTimes(
|
||||
data.history[0].time,
|
||||
data.history[data.history.length - 1].time,
|
||||
'minute'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.history.find(
|
||||
(value) => value.time.substring(0, 16) === time.substring(0, 16)
|
||||
)?.record ?? 0
|
||||
])
|
||||
|
||||
onlineInfoEChartsRef.current = echarts.init(
|
||||
onlineInfoDivRef.current,
|
||||
null,
|
||||
{ renderer: 'svg' }
|
||||
)
|
||||
|
||||
onlineInfoEChartsRef.current?.setOption({
|
||||
...lineEChartsBaseOption,
|
||||
tooltip: {
|
||||
...lineEChartsBaseOption.tooltip,
|
||||
formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
|
||||
},
|
||||
xAxis: {
|
||||
...lineEChartsBaseOption.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: dataList
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebOnline}
|
||||
title={
|
||||
<>
|
||||
<FlexBox gap={10} direction={'horizontal'}>
|
||||
<span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
|
||||
<AntdTag>
|
||||
当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
|
||||
</AntdTag>
|
||||
</FlexBox>
|
||||
</>
|
||||
}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<>
|
||||
<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} />
|
||||
</AntdButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<div className={'big-chart'} ref={onlineInfoDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const ActiveInfo: React.FC = () => {
|
||||
const activeInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [scope, setScope] = useState('WEAK')
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
activeInfoEChartsRef.current?.resize()
|
||||
})
|
||||
|
||||
activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
|
||||
}
|
||||
}, [isLoading])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
getActiveInfo()
|
||||
}, [])
|
||||
|
||||
const handleOnScopeChange = (value: string) => {
|
||||
setScope(value)
|
||||
getActiveInfo(value)
|
||||
}
|
||||
|
||||
const handleOnRefresh = () => {
|
||||
getActiveInfo()
|
||||
}
|
||||
|
||||
const getActiveInfo = (_scope: string = scope) => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_statistic_active({ scope: _scope }).then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
setIsLoading(false)
|
||||
|
||||
setTimeout(() => {
|
||||
const registerList = data.registerHistory.length
|
||||
? getTimesBetweenTwoTimes(
|
||||
data.registerHistory[0].time,
|
||||
data.registerHistory[data.registerHistory.length - 1].time,
|
||||
'day'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.registerHistory.find(
|
||||
(value) =>
|
||||
value.time.substring(0, 10) === time.substring(0, 10)
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
const loginList = data.loginHistory.length
|
||||
? getTimesBetweenTwoTimes(
|
||||
data.loginHistory[0].time,
|
||||
data.loginHistory[data.loginHistory.length - 1].time,
|
||||
'day'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.loginHistory.find(
|
||||
(value) =>
|
||||
value.time.substring(0, 10) === time.substring(0, 10)
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
|
||||
activeInfoEChartsRef.current = echarts.init(
|
||||
activeInfoDivRef.current,
|
||||
null,
|
||||
{ renderer: 'svg' }
|
||||
)
|
||||
|
||||
activeInfoEChartsRef.current?.setOption({
|
||||
...lineEChartsBaseOption,
|
||||
tooltip: {
|
||||
...lineEChartsBaseOption.tooltip,
|
||||
formatter: getTooltipTimeFormatter('yyyy-MM-DD')
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
minValueSpan: 2 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '注册人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: registerList
|
||||
},
|
||||
{
|
||||
name: '登录人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: loginList
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebAnalysis}
|
||||
title={
|
||||
<>
|
||||
<FlexBox gap={10} direction={'horizontal'}>
|
||||
<span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
|
||||
</FlexBox>
|
||||
</>
|
||||
}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<>
|
||||
<AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
|
||||
<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} />
|
||||
</AntdButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<div className={'big-chart'} ref={activeInfoDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const SoftwareInfo: React.FC = () => {
|
||||
const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
void r_sys_statistic_software().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
response.data && setSoftwareInfoData(response.data)
|
||||
} else {
|
||||
void message.error('获取软件信息失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebSoftware}
|
||||
title={'软件信息'}
|
||||
loading={softwareInfoData === undefined}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'}>
|
||||
<div>操作系统</div>
|
||||
<div>位数</div>
|
||||
<div>Java</div>
|
||||
<div>Java 供应商</div>
|
||||
<div>Runtime</div>
|
||||
<div>JVM</div>
|
||||
<div>JVM 供应商</div>
|
||||
<div>操作系统启动时间</div>
|
||||
<div>后端服务器启动时间</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={'value'}>
|
||||
<div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
|
||||
<div title={softwareInfoData?.bitness.toString()}>
|
||||
{softwareInfoData?.bitness}
|
||||
</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
|
||||
>{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
|
||||
<div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
|
||||
>{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
|
||||
>{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
|
||||
<div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
|
||||
<div>
|
||||
{softwareInfoData?.osBootTime &&
|
||||
utcToLocalTime(softwareInfoData?.osBootTime)}
|
||||
</div>
|
||||
<div>
|
||||
{softwareInfoData?.serverStartupTime &&
|
||||
utcToLocalTime(softwareInfoData.serverStartupTime)}
|
||||
</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const HardwareInfo: React.FC = () => {
|
||||
const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
void r_sys_statistic_hardware().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
response.data && setHardwareInfoData(response.data)
|
||||
} else {
|
||||
void message.error('获取硬件信息失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebHardware}
|
||||
title={'硬件信息'}
|
||||
loading={hardwareInfoData === undefined}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'}>
|
||||
<div>CPU</div>
|
||||
<div>CPU 架构</div>
|
||||
<div>微架构</div>
|
||||
<div>64位</div>
|
||||
<div>物理 CPU</div>
|
||||
<div>物理核心</div>
|
||||
<div>逻辑核心</div>
|
||||
<div>内存</div>
|
||||
<div>磁盘</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={'value'}>
|
||||
<div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
|
||||
<div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
|
||||
<div title={hardwareInfoData?.microarchitecture}>
|
||||
{hardwareInfoData?.microarchitecture}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
|
||||
{hardwareInfoData?.is64Bit ? '是' : '否'}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
|
||||
{hardwareInfoData?.cpuPhysicalPackageCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
|
||||
{hardwareInfoData?.cpuPhysicalProcessorCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
|
||||
{hardwareInfoData?.cpuLogicalProcessorCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
|
||||
<div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const CPUInfo: React.FC = () => {
|
||||
const keyDivRef = useRef<HTMLDivElement>(null)
|
||||
const percentDivRef = useRef<HTMLDivElement>(null)
|
||||
const cpuInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [refreshInterval, setRefreshInterval] = useState('5')
|
||||
const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
|
||||
|
||||
const cpuDefaultSeriesOption: BarSeriesOption = {
|
||||
...barDefaultSeriesOption,
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
|
||||
}
|
||||
}
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
cpuInfoEChartsRef.current.forEach((value) => value.resize())
|
||||
})
|
||||
|
||||
cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
|
||||
}
|
||||
}, [cpuInfoDivRef.current])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}, [refreshInterval])
|
||||
|
||||
const getCpuInfo = () => {
|
||||
void r_sys_statistic_cpu().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
if (isLoading) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const dataList = data.processors.map((value) =>
|
||||
cpuInfoVoToCpuInfoData(value)
|
||||
)
|
||||
dataList.unshift(cpuInfoVoToCpuInfoData(data))
|
||||
|
||||
setCpuInfoEChartsOption(
|
||||
dataList.map((value, index) => ({
|
||||
...barEChartsBaseOption,
|
||||
yAxis: {
|
||||
...barEChartsBaseOption.yAxis,
|
||||
data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
|
||||
},
|
||||
series: value
|
||||
}))
|
||||
)
|
||||
|
||||
if (percentDivRef.current) {
|
||||
percentDivRef.current.innerHTML = ''
|
||||
dataList.forEach((value) => {
|
||||
const percentElement = document.createElement('div')
|
||||
const idle = value.find((item) => item.name === 'idle')?.data[0]
|
||||
percentElement.innerText =
|
||||
idle !== undefined
|
||||
? `${((1 - idle) * 100).toFixed(2)}%`
|
||||
: 'Unknown'
|
||||
percentDivRef.current?.appendChild(percentElement)
|
||||
})
|
||||
}
|
||||
|
||||
if (!cpuInfoEChartsRef.current.length) {
|
||||
keyDivRef.current && (keyDivRef.current.innerHTML = '')
|
||||
cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
const keyElement = document.createElement('div')
|
||||
keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
|
||||
keyDivRef.current?.appendChild(keyElement)
|
||||
|
||||
const valueElement = document.createElement('div')
|
||||
cpuInfoDivRef.current?.appendChild(valueElement)
|
||||
cpuInfoEChartsRef.current.push(
|
||||
echarts.init(valueElement, null, { renderer: 'svg' })
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return getCpuInfo
|
||||
}
|
||||
|
||||
const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
|
||||
Object.entries(cpuInfoVo)
|
||||
.filter(([key]) => !['total', 'processors'].includes(key))
|
||||
.map(([key, value]) => ({
|
||||
...cpuDefaultSeriesOption,
|
||||
name: key,
|
||||
data: [(value as number) / cpuInfoVo.total]
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
const order = [
|
||||
'steal',
|
||||
'irq',
|
||||
'softirq',
|
||||
'iowait',
|
||||
'system',
|
||||
'nice',
|
||||
'user',
|
||||
'idle'
|
||||
]
|
||||
return order.indexOf(a.name) - order.indexOf(b.name)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
cpuInfoEChartsRef.current?.forEach((value, index) => {
|
||||
try {
|
||||
value.setOption(cpuInfoEChartsOption[index])
|
||||
} catch (e) {
|
||||
/* empty */
|
||||
}
|
||||
})
|
||||
}, [cpuInfoEChartsOption])
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonCard
|
||||
icon={IconFatwebCpu}
|
||||
title={'CPU 信息'}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<AntdSelect
|
||||
value={refreshInterval}
|
||||
onChange={(value) => setRefreshInterval(value)}
|
||||
>
|
||||
<AntdSelect.Option key={1}>1秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={2}>2秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={3}>3秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={5}>5秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={10}>10秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={15}>15秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={20}>20秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={30}>30秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={60}>60秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={120}>2分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={180}>3分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={300}>5分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={600}>10分</AntdSelect.Option>
|
||||
</AntdSelect>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'} ref={keyDivRef} />
|
||||
<FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
|
||||
<FlexBox className={'value-percent'} ref={percentDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const StorageInfo: React.FC = () => {
|
||||
const keyDivRef = useRef<HTMLDivElement>(null)
|
||||
const percentDivRef = useRef<HTMLDivElement>(null)
|
||||
const storageInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [refreshInterval, setRefreshInterval] = useState('5')
|
||||
const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
|
||||
|
||||
const storageDefaultSeriesOption: BarSeriesOption = {
|
||||
...barDefaultSeriesOption,
|
||||
tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
|
||||
}
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
storageInfoEChartsRef.current.forEach((value) => value.resize())
|
||||
})
|
||||
|
||||
storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
|
||||
}
|
||||
}, [storageInfoDivRef.current])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}, [refreshInterval])
|
||||
|
||||
const getStorageInfo = () => {
|
||||
void r_sys_statistic_storage().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
if (isLoading) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const eChartsOptions = [
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'物理内存',
|
||||
data.memoryTotal - data.memoryFree,
|
||||
data.memoryFree
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'虚拟内存',
|
||||
data.virtualMemoryInUse,
|
||||
data.virtualMemoryMax - data.virtualMemoryInUse
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'swap',
|
||||
data.swapUsed,
|
||||
data.swapTotal - data.swapUsed
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'jvm 内存',
|
||||
data.jvmTotal - data.jvmFree,
|
||||
data.jvmFree
|
||||
)
|
||||
]
|
||||
data.fileStores.forEach((value) =>
|
||||
eChartsOptions.push(
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
value.mount,
|
||||
value.total - value.free,
|
||||
value.free
|
||||
)
|
||||
)
|
||||
)
|
||||
setStorageInfoEChartsOption(eChartsOptions)
|
||||
|
||||
if (percentDivRef.current && keyDivRef.current) {
|
||||
keyDivRef.current.innerHTML = ''
|
||||
percentDivRef.current.innerHTML = ''
|
||||
eChartsOptions.forEach((value) => {
|
||||
const keyElement = document.createElement('div')
|
||||
const percentElement = document.createElement('div')
|
||||
keyElement.innerText = value.yAxis.data[0]
|
||||
percentElement.innerText = `${(
|
||||
(value.series[0].data[0] /
|
||||
(value.series[0].data[0] + value.series[1].data[0])) *
|
||||
100
|
||||
).toFixed(2)}%`
|
||||
|
||||
keyDivRef.current?.appendChild(keyElement)
|
||||
percentDivRef.current?.appendChild(percentElement)
|
||||
})
|
||||
}
|
||||
|
||||
if (!storageInfoEChartsRef.current.length) {
|
||||
storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
|
||||
|
||||
eChartsOptions.forEach(() => {
|
||||
const element = document.createElement('div')
|
||||
storageInfoDivRef.current?.appendChild(element)
|
||||
storageInfoEChartsRef.current.push(
|
||||
echarts.init(element, null, { renderer: 'svg' })
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return getStorageInfo
|
||||
}
|
||||
|
||||
const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
|
||||
...barEChartsBaseOption,
|
||||
xAxis: {
|
||||
...barEChartsBaseOption.xAxis,
|
||||
max: used + free
|
||||
},
|
||||
yAxis: {
|
||||
...barEChartsBaseOption.yAxis,
|
||||
data: [label]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...storageDefaultSeriesOption,
|
||||
name: 'used',
|
||||
data: [used]
|
||||
},
|
||||
{
|
||||
...storageDefaultSeriesOption,
|
||||
name: 'free',
|
||||
data: [free]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
storageInfoEChartsRef.current?.forEach((value, index) => {
|
||||
try {
|
||||
value.setOption(storageInfoEChartsOption[index])
|
||||
} catch (e) {
|
||||
/* empty */
|
||||
}
|
||||
})
|
||||
}, [storageInfoEChartsOption])
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonCard
|
||||
icon={IconFatwebMemory}
|
||||
title={'内存信息'}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<AntdSelect
|
||||
value={refreshInterval}
|
||||
onChange={(value) => setRefreshInterval(value)}
|
||||
>
|
||||
<AntdSelect.Option key={1}>1秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={2}>2秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={3}>3秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={5}>5秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={10}>10秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={15}>15秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={20}>20秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={30}>30秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={60}>60秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={120}>2分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={180}>3分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={300}>5分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={600}>10分</AntdSelect.Option>
|
||||
</AntdSelect>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'} ref={keyDivRef} />
|
||||
<FlexBox className={'value-chart'} ref={storageInfoDivRef} />
|
||||
<FlexBox className={'value-percent'} ref={percentDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Statistic: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<FitFullScreen>
|
||||
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<OnlineInfo />
|
||||
<ActiveInfo />
|
||||
<SoftwareInfo />
|
||||
<HardwareInfo />
|
||||
<CPUInfo />
|
||||
<StorageInfo />
|
||||
</FlexBox>
|
||||
</HideScrollbar>
|
||||
</FitFullScreen>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Statistic
|
||||
@@ -1,956 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
import * as echarts from 'echarts/core'
|
||||
import {
|
||||
TooltipComponent,
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption,
|
||||
ToolboxComponentOption,
|
||||
DataZoomComponentOption,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent
|
||||
} from 'echarts/components'
|
||||
import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
|
||||
import { UniversalTransition } from 'echarts/features'
|
||||
import { SVGRenderer } from 'echarts/renderers'
|
||||
import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
|
||||
import '@/assets/css/pages/system/index.scss'
|
||||
import { useUpdatedEffect } from '@/util/hooks'
|
||||
import { formatByteSize } from '@/util/common'
|
||||
import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
|
||||
import {
|
||||
r_sys_statistic_active,
|
||||
r_sys_statistic_cpu,
|
||||
r_sys_statistic_hardware,
|
||||
r_sys_statistic_online,
|
||||
r_sys_statistic_software,
|
||||
r_sys_statistic_storage
|
||||
} from '@/services/system'
|
||||
import Card from '@/components/common/Card'
|
||||
import FlexBox from '@/components/common/FlexBox'
|
||||
import FitFullScreen from '@/components/common/FitFullScreen'
|
||||
import HideScrollbar from '@/components/common/HideScrollbar'
|
||||
import LoadingMask from '@/components/common/LoadingMask'
|
||||
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
GridComponent,
|
||||
DataZoomComponent,
|
||||
BarChart,
|
||||
LineChart,
|
||||
SVGRenderer,
|
||||
UniversalTransition
|
||||
])
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| ToolboxComponentOption
|
||||
| GridComponentOption
|
||||
| BarSeriesOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
>
|
||||
|
||||
const barDefaultSeriesOption: BarSeriesOption = {
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
switch (params.seriesName) {
|
||||
case 'idle':
|
||||
case 'free':
|
||||
return '#F5F5F5'
|
||||
default:
|
||||
return params.color ?? echarts.color.random()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const barEChartsBaseOption: EChartsOption = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
|
||||
return (params: TopLevelFormatterParams) =>
|
||||
`${utcToLocalTime(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[0],
|
||||
format
|
||||
)}<br><span style="display: flex; justify-content: space-between"><span>${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
params[0]['marker']
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
}${params[0]['seriesName']}</span><span style="font-weight: bold">${
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
|
||||
params[0].data[1]
|
||||
}</span></span> `
|
||||
}
|
||||
|
||||
const lineEChartsBaseOption: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: 'none'
|
||||
},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
interval: 1
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
minValueSpan: 2 * 60 * 60 * 1000
|
||||
}
|
||||
],
|
||||
series: [{}]
|
||||
}
|
||||
|
||||
interface CommonCardProps extends React.PropsWithChildren {
|
||||
icon: IconComponent
|
||||
title: React.ReactNode
|
||||
loading?: boolean
|
||||
expand?: React.ReactNode
|
||||
}
|
||||
|
||||
const CommonCard: React.FC<CommonCardProps> = (props) => {
|
||||
return (
|
||||
<Card style={{ overflow: 'visible' }}>
|
||||
<FlexBox className={'common-card'}>
|
||||
<FlexBox direction={'horizontal'} className={'head'}>
|
||||
<Icon component={props.icon} className={'icon'} />
|
||||
<div className={'title'}>{props.title}</div>
|
||||
{props.expand}
|
||||
</FlexBox>
|
||||
<LoadingMask
|
||||
hidden={!props.loading}
|
||||
maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
|
||||
>
|
||||
{props.children}
|
||||
</LoadingMask>
|
||||
</FlexBox>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const OnlineInfo: React.FC = () => {
|
||||
const onlineInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
|
||||
const [scope, setScope] = useState('WEAK')
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
onlineInfoEChartsRef.current?.resize()
|
||||
})
|
||||
|
||||
onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
|
||||
}
|
||||
}, [isLoading])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
getOnlineInfo()
|
||||
}, [])
|
||||
|
||||
const handleOnScopeChange = (value: string) => {
|
||||
setScope(value)
|
||||
getOnlineInfo(value)
|
||||
}
|
||||
|
||||
const handleOnRefresh = () => {
|
||||
getOnlineInfo()
|
||||
}
|
||||
|
||||
const getOnlineInfo = (_scope: string = scope) => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_statistic_online({ scope: _scope }).then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
setIsLoading(false)
|
||||
|
||||
setCurrentOnlineCount(data.current)
|
||||
|
||||
setTimeout(() => {
|
||||
const dataList = getTimesBetweenTwoTimes(
|
||||
data.history[0].time,
|
||||
data.history[data.history.length - 1].time,
|
||||
'minute'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.history.find(
|
||||
(value) => value.time.substring(0, 16) === time.substring(0, 16)
|
||||
)?.record ?? 0
|
||||
])
|
||||
|
||||
onlineInfoEChartsRef.current = echarts.init(
|
||||
onlineInfoDivRef.current,
|
||||
null,
|
||||
{ renderer: 'svg' }
|
||||
)
|
||||
|
||||
onlineInfoEChartsRef.current?.setOption({
|
||||
...lineEChartsBaseOption,
|
||||
tooltip: {
|
||||
...lineEChartsBaseOption.tooltip,
|
||||
formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
|
||||
},
|
||||
xAxis: {
|
||||
...lineEChartsBaseOption.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: dataList
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebOnline}
|
||||
title={
|
||||
<>
|
||||
<FlexBox gap={10} direction={'horizontal'}>
|
||||
<span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
|
||||
<AntdTag>
|
||||
当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
|
||||
</AntdTag>
|
||||
</FlexBox>
|
||||
</>
|
||||
}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<>
|
||||
<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} />
|
||||
</AntdButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<div className={'big-chart'} ref={onlineInfoDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const ActiveInfo: React.FC = () => {
|
||||
const activeInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [scope, setScope] = useState('WEAK')
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
activeInfoEChartsRef.current?.resize()
|
||||
})
|
||||
|
||||
activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
|
||||
}
|
||||
}, [isLoading])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
getActiveInfo()
|
||||
}, [])
|
||||
|
||||
const handleOnScopeChange = (value: string) => {
|
||||
setScope(value)
|
||||
getActiveInfo(value)
|
||||
}
|
||||
|
||||
const handleOnRefresh = () => {
|
||||
getActiveInfo()
|
||||
}
|
||||
|
||||
const getActiveInfo = (_scope: string = scope) => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_statistic_active({ scope: _scope }).then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
setIsLoading(false)
|
||||
|
||||
setTimeout(() => {
|
||||
const registerList = data.registerHistory.length
|
||||
? getTimesBetweenTwoTimes(
|
||||
data.registerHistory[0].time,
|
||||
data.registerHistory[data.registerHistory.length - 1].time,
|
||||
'day'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.registerHistory.find(
|
||||
(value) =>
|
||||
value.time.substring(0, 10) === time.substring(0, 10)
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
const loginList = data.loginHistory.length
|
||||
? getTimesBetweenTwoTimes(
|
||||
data.loginHistory[0].time,
|
||||
data.loginHistory[data.loginHistory.length - 1].time,
|
||||
'day'
|
||||
).map((time) => [
|
||||
time,
|
||||
data.loginHistory.find(
|
||||
(value) =>
|
||||
value.time.substring(0, 10) === time.substring(0, 10)
|
||||
)?.count ?? 0
|
||||
])
|
||||
: []
|
||||
|
||||
activeInfoEChartsRef.current = echarts.init(
|
||||
activeInfoDivRef.current,
|
||||
null,
|
||||
{ renderer: 'svg' }
|
||||
)
|
||||
|
||||
activeInfoEChartsRef.current?.setOption({
|
||||
...lineEChartsBaseOption,
|
||||
tooltip: {
|
||||
...lineEChartsBaseOption.tooltip,
|
||||
formatter: getTooltipTimeFormatter('yyyy-MM-DD')
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100,
|
||||
minValueSpan: 2 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '注册人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: registerList
|
||||
},
|
||||
{
|
||||
name: '登录人数',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {},
|
||||
data: loginList
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebAnalysis}
|
||||
title={
|
||||
<>
|
||||
<FlexBox gap={10} direction={'horizontal'}>
|
||||
<span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
|
||||
</FlexBox>
|
||||
</>
|
||||
}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<>
|
||||
<AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
|
||||
<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} />
|
||||
</AntdButton>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<div className={'big-chart'} ref={activeInfoDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const SoftwareInfo: React.FC = () => {
|
||||
const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
void r_sys_statistic_software().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
response.data && setSoftwareInfoData(response.data)
|
||||
} else {
|
||||
void message.error('获取软件信息失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebSoftware}
|
||||
title={'软件信息'}
|
||||
loading={softwareInfoData === undefined}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'}>
|
||||
<div>操作系统</div>
|
||||
<div>位数</div>
|
||||
<div>Java</div>
|
||||
<div>Java 供应商</div>
|
||||
<div>Runtime</div>
|
||||
<div>JVM</div>
|
||||
<div>JVM 供应商</div>
|
||||
<div>操作系统启动时间</div>
|
||||
<div>后端服务器启动时间</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={'value'}>
|
||||
<div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
|
||||
<div title={softwareInfoData?.bitness.toString()}>
|
||||
{softwareInfoData?.bitness}
|
||||
</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
|
||||
>{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
|
||||
<div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
|
||||
>{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
|
||||
<div
|
||||
title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
|
||||
>{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
|
||||
<div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
|
||||
<div>
|
||||
{softwareInfoData?.osBootTime &&
|
||||
utcToLocalTime(softwareInfoData?.osBootTime)}
|
||||
</div>
|
||||
<div>
|
||||
{softwareInfoData?.serverStartupTime &&
|
||||
utcToLocalTime(softwareInfoData.serverStartupTime)}
|
||||
</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const HardwareInfo: React.FC = () => {
|
||||
const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
void r_sys_statistic_hardware().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
response.data && setHardwareInfoData(response.data)
|
||||
} else {
|
||||
void message.error('获取硬件信息失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<CommonCard
|
||||
icon={IconFatwebHardware}
|
||||
title={'硬件信息'}
|
||||
loading={hardwareInfoData === undefined}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'}>
|
||||
<div>CPU</div>
|
||||
<div>CPU 架构</div>
|
||||
<div>微架构</div>
|
||||
<div>64位</div>
|
||||
<div>物理 CPU</div>
|
||||
<div>物理核心</div>
|
||||
<div>逻辑核心</div>
|
||||
<div>内存</div>
|
||||
<div>磁盘</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={'value'}>
|
||||
<div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
|
||||
<div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
|
||||
<div title={hardwareInfoData?.microarchitecture}>
|
||||
{hardwareInfoData?.microarchitecture}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
|
||||
{hardwareInfoData?.is64Bit ? '是' : '否'}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
|
||||
{hardwareInfoData?.cpuPhysicalPackageCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
|
||||
{hardwareInfoData?.cpuPhysicalProcessorCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
|
||||
{hardwareInfoData?.cpuLogicalProcessorCount}
|
||||
</div>
|
||||
<div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
|
||||
<div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
)
|
||||
}
|
||||
|
||||
const CPUInfo: React.FC = () => {
|
||||
const keyDivRef = useRef<HTMLDivElement>(null)
|
||||
const percentDivRef = useRef<HTMLDivElement>(null)
|
||||
const cpuInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [refreshInterval, setRefreshInterval] = useState('5')
|
||||
const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
|
||||
|
||||
const cpuDefaultSeriesOption: BarSeriesOption = {
|
||||
...barDefaultSeriesOption,
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
|
||||
}
|
||||
}
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
cpuInfoEChartsRef.current.forEach((value) => value.resize())
|
||||
})
|
||||
|
||||
cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
|
||||
}
|
||||
}, [cpuInfoDivRef.current])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}, [refreshInterval])
|
||||
|
||||
const getCpuInfo = () => {
|
||||
void r_sys_statistic_cpu().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
if (isLoading) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const dataList = data.processors.map((value) =>
|
||||
cpuInfoVoToCpuInfoData(value)
|
||||
)
|
||||
dataList.unshift(cpuInfoVoToCpuInfoData(data))
|
||||
|
||||
setCpuInfoEChartsOption(
|
||||
dataList.map((value, index) => ({
|
||||
...barEChartsBaseOption,
|
||||
yAxis: {
|
||||
...barEChartsBaseOption.yAxis,
|
||||
data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
|
||||
},
|
||||
series: value
|
||||
}))
|
||||
)
|
||||
|
||||
if (percentDivRef.current) {
|
||||
percentDivRef.current.innerHTML = ''
|
||||
dataList.forEach((value) => {
|
||||
const percentElement = document.createElement('div')
|
||||
const idle = value.find((item) => item.name === 'idle')?.data[0]
|
||||
percentElement.innerText =
|
||||
idle !== undefined
|
||||
? `${((1 - idle) * 100).toFixed(2)}%`
|
||||
: 'Unknown'
|
||||
percentDivRef.current?.appendChild(percentElement)
|
||||
})
|
||||
}
|
||||
|
||||
if (!cpuInfoEChartsRef.current.length) {
|
||||
keyDivRef.current && (keyDivRef.current.innerHTML = '')
|
||||
cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
const keyElement = document.createElement('div')
|
||||
keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
|
||||
keyDivRef.current?.appendChild(keyElement)
|
||||
|
||||
const valueElement = document.createElement('div')
|
||||
cpuInfoDivRef.current?.appendChild(valueElement)
|
||||
cpuInfoEChartsRef.current.push(
|
||||
echarts.init(valueElement, null, { renderer: 'svg' })
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return getCpuInfo
|
||||
}
|
||||
|
||||
const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
|
||||
Object.entries(cpuInfoVo)
|
||||
.filter(([key]) => !['total', 'processors'].includes(key))
|
||||
.map(([key, value]) => ({
|
||||
...cpuDefaultSeriesOption,
|
||||
name: key,
|
||||
data: [(value as number) / cpuInfoVo.total]
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
const order = [
|
||||
'steal',
|
||||
'irq',
|
||||
'softirq',
|
||||
'iowait',
|
||||
'system',
|
||||
'nice',
|
||||
'user',
|
||||
'idle'
|
||||
]
|
||||
return order.indexOf(a.name) - order.indexOf(b.name)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
cpuInfoEChartsRef.current?.forEach((value, index) => {
|
||||
try {
|
||||
value.setOption(cpuInfoEChartsOption[index])
|
||||
} catch (e) {
|
||||
/* empty */
|
||||
}
|
||||
})
|
||||
}, [cpuInfoEChartsOption])
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonCard
|
||||
icon={IconFatwebCpu}
|
||||
title={'CPU 信息'}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<AntdSelect
|
||||
value={refreshInterval}
|
||||
onChange={(value) => setRefreshInterval(value)}
|
||||
>
|
||||
<AntdSelect.Option key={1}>1秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={2}>2秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={3}>3秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={5}>5秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={10}>10秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={15}>15秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={20}>20秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={30}>30秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={60}>60秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={120}>2分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={180}>3分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={300}>5分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={600}>10分</AntdSelect.Option>
|
||||
</AntdSelect>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'} ref={keyDivRef} />
|
||||
<FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
|
||||
<FlexBox className={'value-percent'} ref={percentDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const StorageInfo: React.FC = () => {
|
||||
const keyDivRef = useRef<HTMLDivElement>(null)
|
||||
const percentDivRef = useRef<HTMLDivElement>(null)
|
||||
const storageInfoDivRef = useRef<HTMLDivElement>(null)
|
||||
const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [refreshInterval, setRefreshInterval] = useState('5')
|
||||
const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
|
||||
|
||||
const storageDefaultSeriesOption: BarSeriesOption = {
|
||||
...barDefaultSeriesOption,
|
||||
tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
|
||||
}
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const chartResizeObserver = new ResizeObserver(() => {
|
||||
storageInfoEChartsRef.current.forEach((value) => value.resize())
|
||||
})
|
||||
|
||||
storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
|
||||
|
||||
return () => {
|
||||
storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
|
||||
}
|
||||
}, [storageInfoDivRef.current])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}, [refreshInterval])
|
||||
|
||||
const getStorageInfo = () => {
|
||||
void r_sys_statistic_storage().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
if (isLoading) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const eChartsOptions = [
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'物理内存',
|
||||
data.memoryTotal - data.memoryFree,
|
||||
data.memoryFree
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'虚拟内存',
|
||||
data.virtualMemoryInUse,
|
||||
data.virtualMemoryMax - data.virtualMemoryInUse
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'swap',
|
||||
data.swapUsed,
|
||||
data.swapTotal - data.swapUsed
|
||||
),
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
'jvm 内存',
|
||||
data.jvmTotal - data.jvmFree,
|
||||
data.jvmFree
|
||||
)
|
||||
]
|
||||
data.fileStores.forEach((value) =>
|
||||
eChartsOptions.push(
|
||||
storageInfoVoToStorageEChartsOption(
|
||||
value.mount,
|
||||
value.total - value.free,
|
||||
value.free
|
||||
)
|
||||
)
|
||||
)
|
||||
setStorageInfoEChartsOption(eChartsOptions)
|
||||
|
||||
if (percentDivRef.current && keyDivRef.current) {
|
||||
keyDivRef.current.innerHTML = ''
|
||||
percentDivRef.current.innerHTML = ''
|
||||
eChartsOptions.forEach((value) => {
|
||||
const keyElement = document.createElement('div')
|
||||
const percentElement = document.createElement('div')
|
||||
keyElement.innerText = value.yAxis.data[0]
|
||||
percentElement.innerText = `${(
|
||||
(value.series[0].data[0] /
|
||||
(value.series[0].data[0] + value.series[1].data[0])) *
|
||||
100
|
||||
).toFixed(2)}%`
|
||||
|
||||
keyDivRef.current?.appendChild(keyElement)
|
||||
percentDivRef.current?.appendChild(percentElement)
|
||||
})
|
||||
}
|
||||
|
||||
if (!storageInfoEChartsRef.current.length) {
|
||||
storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
|
||||
|
||||
eChartsOptions.forEach(() => {
|
||||
const element = document.createElement('div')
|
||||
storageInfoDivRef.current?.appendChild(element)
|
||||
storageInfoEChartsRef.current.push(
|
||||
echarts.init(element, null, { renderer: 'svg' })
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return getStorageInfo
|
||||
}
|
||||
|
||||
const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
|
||||
...barEChartsBaseOption,
|
||||
xAxis: {
|
||||
...barEChartsBaseOption.xAxis,
|
||||
max: used + free
|
||||
},
|
||||
yAxis: {
|
||||
...barEChartsBaseOption.yAxis,
|
||||
data: [label]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...storageDefaultSeriesOption,
|
||||
name: 'used',
|
||||
data: [used]
|
||||
},
|
||||
{
|
||||
...storageDefaultSeriesOption,
|
||||
name: 'free',
|
||||
data: [free]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
storageInfoEChartsRef.current?.forEach((value, index) => {
|
||||
try {
|
||||
value.setOption(storageInfoEChartsOption[index])
|
||||
} catch (e) {
|
||||
/* empty */
|
||||
}
|
||||
})
|
||||
}, [storageInfoEChartsOption])
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonCard
|
||||
icon={IconFatwebMemory}
|
||||
title={'内存信息'}
|
||||
loading={isLoading}
|
||||
expand={
|
||||
<AntdSelect
|
||||
value={refreshInterval}
|
||||
onChange={(value) => setRefreshInterval(value)}
|
||||
>
|
||||
<AntdSelect.Option key={1}>1秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={2}>2秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={3}>3秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={5}>5秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={10}>10秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={15}>15秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={20}>20秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={30}>30秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={60}>60秒</AntdSelect.Option>
|
||||
<AntdSelect.Option key={120}>2分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={180}>3分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={300}>5分</AntdSelect.Option>
|
||||
<AntdSelect.Option key={600}>10分</AntdSelect.Option>
|
||||
</AntdSelect>
|
||||
}
|
||||
>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'} ref={keyDivRef} />
|
||||
<FlexBox className={'value-chart'} ref={storageInfoDivRef} />
|
||||
<FlexBox className={'value-percent'} ref={percentDivRef} />
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import React from 'react'
|
||||
|
||||
const System: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<FitFullScreen>
|
||||
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<OnlineInfo />
|
||||
<ActiveInfo />
|
||||
<SoftwareInfo />
|
||||
<HardwareInfo />
|
||||
<CPUInfo />
|
||||
<StorageInfo />
|
||||
</FlexBox>
|
||||
</HideScrollbar>
|
||||
</FitFullScreen>
|
||||
</>
|
||||
)
|
||||
return <></>
|
||||
}
|
||||
|
||||
export default System
|
||||
|
||||
@@ -7,9 +7,19 @@ const system: RouteJsonObject[] = [
|
||||
absolutePath: '/system',
|
||||
id: 'system',
|
||||
component: React.lazy(() => import('@/pages/system')),
|
||||
name: '系统管理',
|
||||
icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
|
||||
menu: true
|
||||
},
|
||||
{
|
||||
path: 'statistic',
|
||||
absolutePath: '/system/statistic',
|
||||
id: 'system-statistic',
|
||||
component: React.lazy(() => import('@/pages/system/Statistic')),
|
||||
name: '系统概况',
|
||||
icon: React.lazy(() => import('~icons/fatweb/chart.jsx')),
|
||||
menu: true
|
||||
menu: true,
|
||||
autoHide: true
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
|
||||
Reference in New Issue
Block a user