zsxt_nbzs_h5/web-react/src/pages/system/machine/use-charts.jsx

import React, { Component } from 'react'
import { Card, Col, Descriptions, Row, Statistic } from 'antd'
import * as echarts from 'echarts'
import moment from 'moment'
import { api } from 'common/api'

export default class useCharts extends Component {
    state = {
        use: {},

        nowMoment: moment(),
    }

    timer = null
    timerMoment = null

    systemStart = moment()

    now = Date.now()

    cpuChart = null
    cpuData = []

    ramChart = null
    ramData = []

    shouldComponentUpdate(props) {
        // 当前页签未选中时停止获取状态
        if (this.props.actived !== props.actived) {
            if (props.actived) {
                this.start()
            } else {
                this.stop()
            }
        }
        return true
    }

    componentDidMount() {
        this.systemStart = moment().add(-this.props.base.runTime)
        this.initCpuChart()
        this.initRamChart()

        this.start()

        window.addEventListener('resize', this.onResizeCharts)
    }

    componentWillUnmount() {
        this.stop()

        window.removeEventListener('resize', this.onResizeCharts)
    }

    start() {
        this.timer = setInterval(() => {
            this.refreshData()
        }, 3000)
        this.refreshData()
        this.timerMoment = setInterval(() => {
            this.setState({ nowMoment: moment() })
        }, 1000)
    }

    stop() {
        clearInterval(this.timer)
        clearInterval(this.timerMoment)
    }

    async refreshData() {
        const { data: use } = await api.sysMachineUse()

        this.now = Date.now()

        this.cpuData.shift()
        this.cpuData.push({
            name: this.now,
            value: [this.now, use.cpuRate],
        })
        this.cpuChart.setOption({
            series: [{ data: this.cpuData }],
        })

        this.ramData.shift()
        this.ramData.push({
            name: this.now,
            value: [this.now, use.ramRate],
        })
        this.ramChart.setOption({
            series: [{ data: this.ramData }],
        })

        this.setState({ use })
    }

    initCpuChart() {
        for (let i = 0; i < 60; i++) {
            const past = this.now - (60 - i) * 1000
            this.cpuData.push({
                name: past,
                value: [past, -1],
            })
        }

        const dom = this.refs['cpu-chart']
        this.cpuChart = echarts.init(dom)
        const option = {
            grid: {
                show: true,
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 2,
                zlevel: 2,
            },
            tooltip: false,
            xAxis: {
                type: 'time',
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
            yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: false,
                },
            },
            series: [
                {
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    animation: false,
                    data: this.cpuData,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(0, 123, 255, .8)',
                    },
                    areaStyle: {
                        color: 'rgba(0, 123, 255, .3)',
                    },
                },
            ],
        }
        this.cpuChart.setOption(option)
    }

    initRamChart() {
        for (let i = 0; i < 60; i++) {
            const past = this.now - (60 - i) * 1000
            this.ramData.push({
                name: past,
                value: [past, -1],
            })
        }

        const dom = this.refs['ram-chart']
        this.ramChart = echarts.init(dom)
        const option = {
            grid: {
                show: true,
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                borderColor: 'rgba(83, 29, 171, 1)',
                borderWidth: 2,
                zlevel: 2,
            },
            tooltip: false,
            xAxis: {
                type: 'time',
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
            yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: false,
                },
            },
            series: [
                {
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    animation: false,
                    data: this.ramData,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(83, 29, 171, .8)',
                    },
                    areaStyle: {
                        color: 'rgba(83, 29, 171, .3)',
                    },
                },
            ],
        }
        this.ramChart.setOption(option)
    }

    onResizeCharts = () => {
        this.cpuChart.resize()
        this.ramChart.resize()
    }

    render() {
        const { base } = this.props
        const { use, nowMoment } = this.state
        const { cpuName, cpuBaseSpeed, processorCount, totalRam } = base
        const { cpuRate, ramRate } = use

        const diffDays = nowMoment.diff(this.systemStart, 'days')
        const diff =
            diffDays + ':' + moment(nowMoment.diff(this.systemStart)).utc().format('HH:mm:ss')

        return (
            <>
                <Col xl={12} lg={24}>
                    <Card bordered={false}>
                        <Row align="bottom" justify="space-between">
                            <div className="h2">CPU</div>
                            <div className="h5">{cpuName}</div>
                        </Row>
                        <div className="h-200 mt-md mb-md" ref="cpu-chart"></div>
                        <Row>
                            <Col flex="1">
                                <Statistic title="使用率" value={(cpuRate || 0) + ' %'} />
                                <Statistic title="正常运行时间" value={diff} />
                            </Col>
                            <Col flex="1">
                                <Descriptions column={1}>
                                    <Descriptions.Item label="基准速度">
                                        <b>{((cpuBaseSpeed || 0) / 1000).toFixed(2)} GHz</b>
                                    </Descriptions.Item>
                                    <Descriptions.Item label="逻辑处理器">
                                        <b>{processorCount || 0}</b>
                                    </Descriptions.Item>
                                </Descriptions>
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col xl={12} lg={24}>
                    <Card bordered={false}>
                        <Row align="bottom" justify="space-between">
                            <div className="h2">内存</div>
                            <div className="h5">{((totalRam || 0) / 1024).toFixed(1)} GB</div>
                        </Row>
                        <div className="h-200 mt-md mb-md" ref="ram-chart"></div>
                        <Row>
                            <Col flex="1">
                                <Statistic
                                    title="使用中"
                                    value={
                                        (((totalRam || 0) / 1024) * ((ramRate || 1) / 100)).toFixed(
                                            1
                                        ) + ' GB'
                                    }
                                />
                                <Statistic
                                    title="可用"
                                    value={
                                        (
                                            ((totalRam || 0) / 1024) *
                                            (1 - (ramRate || 1) / 100)
                                        ).toFixed(1) + ' GB'
                                    }
                                />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </>
        )
    }
}