Temp
This commit is contained in:
@@ -1,16 +1,33 @@
|
||||
import React, { useState } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
// import { DualAxes, DualAxesConfig } from '@ant-design/plots'
|
||||
import * as echarts from 'echarts/core'
|
||||
import {
|
||||
TooltipComponent,
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption
|
||||
} from 'echarts/components'
|
||||
import { BarChart, BarSeriesOption } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import '@/assets/css/pages/system/index.scss'
|
||||
import { useUpdatedEffect } from '@/util/hooks'
|
||||
import { utcToLocalTime } from '@/util/datetime'
|
||||
import { r_sys_statistics_hardware, r_sys_statistics_software } from '@/services/system'
|
||||
import {
|
||||
r_sys_statistics_cpu,
|
||||
r_sys_statistics_hardware,
|
||||
r_sys_statistics_software
|
||||
} 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'
|
||||
import EChartReact from '@/components/common/echarts/EChartReact'
|
||||
|
||||
echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer])
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
TooltipComponentOption | GridComponentOption | BarSeriesOption
|
||||
>
|
||||
interface CommonCardProps extends React.PropsWithChildren {
|
||||
icon: IconComponent
|
||||
title: string
|
||||
@@ -19,7 +36,7 @@ interface CommonCardProps extends React.PropsWithChildren {
|
||||
|
||||
const CommonCard: React.FC<CommonCardProps> = (props) => {
|
||||
return (
|
||||
<Card>
|
||||
<Card style={{ overflow: 'visible' }}>
|
||||
<FlexBox className={'common-card'}>
|
||||
<FlexBox direction={'horizontal'} className={'head'}>
|
||||
<Icon component={props.icon} className={'icon'} />
|
||||
@@ -27,7 +44,7 @@ const CommonCard: React.FC<CommonCardProps> = (props) => {
|
||||
</FlexBox>
|
||||
<LoadingMask
|
||||
hidden={!props.loading}
|
||||
maskContent={<AntdSkeleton active paragraph={{ rows: 10 }} />}
|
||||
maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
|
||||
>
|
||||
{props.children}
|
||||
</LoadingMask>
|
||||
@@ -124,9 +141,9 @@ const HardwareInfo: React.FC = () => {
|
||||
<div>CPU 架构</div>
|
||||
<div>微架构</div>
|
||||
<div>64位</div>
|
||||
<div>CPU 插槽</div>
|
||||
<div>CPU 内核</div>
|
||||
<div>CPU 逻辑处理器</div>
|
||||
<div>物理 CPU</div>
|
||||
<div>物理核心</div>
|
||||
<div>逻辑核心</div>
|
||||
<div>内存</div>
|
||||
<div>磁盘</div>
|
||||
</FlexBox>
|
||||
@@ -156,75 +173,121 @@ const HardwareInfo: React.FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const System: React.FC = () => {
|
||||
/*
|
||||
const dualAxesData = [
|
||||
{ year: '1991', value: 3, count: 10 },
|
||||
{ year: '1992', value: 4, count: 4 },
|
||||
{ year: '1993', value: 3.5, count: 5 },
|
||||
{ year: '1994', value: 5, count: 5 },
|
||||
{ year: '1995', value: 4.9, count: 4.9 },
|
||||
{ year: '1996', value: 6, count: 35 },
|
||||
{ year: '1997', value: 7, count: 7 },
|
||||
{ year: '1998', value: 9, count: 1 },
|
||||
{ year: '1999', value: 13, count: 20 }
|
||||
]
|
||||
const CPUInfo: React.FC = () => {
|
||||
const [cpuInfoData, setCpuInfoData] = useState<BarSeriesOption[]>()
|
||||
|
||||
const userStatisticsData = [
|
||||
{ time: '2023-12-01', type: 'register', number: 23 },
|
||||
{ time: '2023-12-02', type: 'register', number: 123 },
|
||||
{ time: '2023-12-03', type: 'register', number: 1432 },
|
||||
{ time: '2023-12-05', type: 'register', number: 1 },
|
||||
{ time: '2023-12-04', type: 'register', number: 234 },
|
||||
{ time: '2023-12-06', type: 'register', number: 23 },
|
||||
{ time: '2023-12-07', type: 'register', number: 54 },
|
||||
{ time: '2023-12-08', type: 'register', number: 87 },
|
||||
{ time: '2023-12-09', type: 'register', number: 12 },
|
||||
{ time: '2023-12-10', type: 'register', number: 123 },
|
||||
{ time: '2023-12-11', type: 'register', number: 20 },
|
||||
{ time: '2023-12-01', type: 'login', number: 433 },
|
||||
{ time: '2023-12-02', type: 'login', number: 2 },
|
||||
{ time: '2023-12-03', type: 'login', number: 34 },
|
||||
{ time: '2023-12-05', type: 'login', number: 12 },
|
||||
{ time: '2023-12-04', type: 'login', number: 345 },
|
||||
{ time: '2023-12-06', type: 'login', number: 121 },
|
||||
{ time: '2023-12-07', type: 'login', number: 2 },
|
||||
{ time: '2023-12-08', type: 'login', number: 435 },
|
||||
{ time: '2023-12-09', type: 'login', number: 1 },
|
||||
{ time: '2023-12-10', type: 'login', number: 54 },
|
||||
{ time: '2023-12-11', type: 'login', number: 56 }
|
||||
]
|
||||
|
||||
const dualAxesConfig: DualAxesConfig = {
|
||||
data: userStatisticsData,
|
||||
slider: { x: true },
|
||||
shapeField: 'smooth',
|
||||
xField: 'time',
|
||||
children: [
|
||||
{
|
||||
type: 'line',
|
||||
yField: 'number',
|
||||
colorField: 'type'
|
||||
}
|
||||
]
|
||||
const defaultSeriesOption: BarSeriesOption = {
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
setInterval(
|
||||
() =>
|
||||
r_sys_statistics_cpu().then((res) => {
|
||||
const response = res.data
|
||||
if (response.success) {
|
||||
const data = response.data
|
||||
if (data) {
|
||||
const cpuInfoData = Object.entries(data)
|
||||
.filter(([key]) => key !== 'processors')
|
||||
.map(([key, value]) => ({
|
||||
...defaultSeriesOption,
|
||||
name: key,
|
||||
data: [value as number]
|
||||
}))
|
||||
console.log(cpuInfoData)
|
||||
setCpuInfoData(cpuInfoData)
|
||||
}
|
||||
}
|
||||
}),
|
||||
5000
|
||||
)
|
||||
}, [])
|
||||
|
||||
const option: EChartsOption = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
data: ['总使用'],
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: cpuInfoData
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonCard icon={IconFatwebCpu} title={'CPU 信息'} loading={false}>
|
||||
<FlexBox className={'card-content'} direction={'horizontal'}>
|
||||
<FlexBox className={'key'}>
|
||||
<div>总占用</div>
|
||||
<div>总占用</div>
|
||||
<div>总占用</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={'value-chart'}>
|
||||
<div>
|
||||
<EChartReact
|
||||
echarts={echarts}
|
||||
opts={{ renderer: 'svg', height: 12 }}
|
||||
option={option}
|
||||
/>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
</CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const MemoryInfo: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CommonCard icon={IconFatwebMemory} title={'内存信息'} loading={true}></CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const JvmInfo: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CommonCard icon={IconFatwebJava} title={'JVM 信息'} loading={true}></CommonCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const System: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<FitFullScreen>
|
||||
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
|
||||
<FlexBox className={'root-content'}>
|
||||
<FlexBox direction={'horizontal'} className={'root-row'}>
|
||||
<SoftwareInfo />
|
||||
<HardwareInfo />
|
||||
</FlexBox>
|
||||
<FlexBox direction={'horizontal'} className={'root-row'}>
|
||||
<Card style={{ height: '400px' }}>
|
||||
{/*<DualAxes {...dualAxesConfig} />*/}
|
||||
</Card>
|
||||
<div />
|
||||
</FlexBox>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<SoftwareInfo />
|
||||
<HardwareInfo />
|
||||
<CPUInfo />
|
||||
<MemoryInfo />
|
||||
<JvmInfo />
|
||||
<div />
|
||||
</FlexBox>
|
||||
</HideScrollbar>
|
||||
</FitFullScreen>
|
||||
|
||||
Reference in New Issue
Block a user