admin-govern/src/views/govern/manage/realTime/index.vue

<template>
    <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
        <DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
        <div class="manage-realTime-right">
            <div class="time-container">
                <div>
                    <div>系统时间：{{ realTime }}</div>
                    <div>终端时间：{{ deviceTime }}</div>
                </div>
                <el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
            </div>
            <div :style="echartHeight" class="pl10 pr10">
                <MyEchart :options="echartsData" />
            </div>
            <div class="pl10 pr10">
                <el-table :data="tableData" border stripe :show-header="false" class="custom-table">
                    <el-table-column prop="label1" />
                    <el-table-column prop="label2" />
                    <el-table-column prop="value1" />
                    <el-table-column prop="label3" />
                    <el-table-column prop="value2" />
                    <el-table-column prop="label4" />
                    <el-table-column prop="value3" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { formatToDateTime } from '@/utils/dateUtil'
defineOptions({
    name: 'govern/manage/realTime'
})

//页面属性
const pageHeight = mainHeight(20)
const echartHeight = mainHeight(180)
const realTime = ref<string>('')
const deviceTime = ref<string>('')
const timer = ref<any>(null)
const echartsData = ref<any>({
    title: {
        text: '终端性能'
    },
    tooltip: {
        axisPointer: {
            type: 'cross',
            label: {
                color: '#fff',
                fontSize: 16
            }
        },
        textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            opacity: 0.35,
            fontSize: 14
        },
        backgroundColor: 'rgba(0,0,0,0.55)',
        borderWidth: 0
    },

    legend: {
        bottom: 0,
        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
    },
    xAxis: {
        type: 'time',
        name: '时间',
        axisLabel: {
            formatter: {
                day: '{MM}-{dd}',
                month: '{MM}',
                year: '{yyyy}'
            }
        }
    },
    yAxis: {
        name: '%',
        type: 'value',
        min: 0,
        max: 100
    },
    series: [
        {
            name: 'CPU1使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 10],
                ['2025-01-01 09:00:00', 10],
                ['2025-01-01 010:00:00', 10]
            ]
        },
        {
            name: 'CPU2使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 11],
                ['2025-01-01 09:00:00', 11],
                ['2025-01-01 010:00:00', 11]
            ]
        },
        {
            name: '内存使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 12],
                ['2025-01-01 09:00:00', 12],
                ['2025-01-01 010:00:00', 12]
            ]
        },
        {
            name: '磁盘使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 13],
                ['2025-01-01 09:00:00', 13],
                ['2025-01-01 010:00:00', 13]
            ]
        }
    ]
})

const tableData = ref([
    {
        label1: 'cpu1负载(%)',
        label2: '使用:',
        value1: '43',
        label3: '剩余:',
        value2: '57',
        label4: '',
        value3: ''
    },
    {
        label1: 'cpu2负载(%)',
        label2: '使用:',
        value1: '/',
        label3: '剩余:',
        value2: '/',
        label4: '',
        value3: ''
    },
    {
        label1: '终端内存详情(MB)',
        label2: '内存总量:',
        value1: '489',
        label3: '已使用:',
        value2: '143',
        label4: '未使用:',
        value3: '346.00'
    },
    {
        label1: '主存储器详情(GB)',
        label2: '主存储器总量:',
        value1: '6.44',
        label3: '已使用:',
        value2: '6.03',
        label4: '未使用:',
        value3: '0.41'
    },
    {
        label1: '其余信息',
        label2: '最后对时对标:',
        value1: '1970-01-01 08:00:00',
        label3: '信号强度(dBm):',
        value2: '-',
        label4: '',
        value3: ''
    }
])

const nodeClick = async (e: anyObj) => {
    console.log('点击设备树节点')
}

const handleClose = () => {
    console.log('close')
}

const synchronizeTime = async () => {
    console.log('对时')
}
onMounted(() => {
    timer.value = setInterval(() => {
        realTime.value = formatToDateTime(new Date())
    }, 1000)
})
// 在组件卸载时清除定时器
onUnmounted(() => {
    if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
    }
})
</script>
<style scoped lang="scss">
.manage-realTime {
    display: flex;

    &-right {
        height: 100%;
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5; // 加个边框方便查看效果

        .time-container {
            display: flex;
            justify-content: flex-end; // 让内容靠右
            align-items: center; // 让内容垂直居中（避免高度不一致时偏移）

            * {
                margin-right: 15px;
            }

            .el-button * {
                margin-right: 0;
            }
        }

        :deep(.el-table__cell) {
            text-align: center;
        }

        /* 1. 加深表格边框线条 */
        :deep(.custom-table.el-table) {
            border: 1px solid #dcdfe6;
            width: auto;
        }

        :deep(.custom-table .el-table__cell) {
            border: 0.5px solid #dcdfe6;
        }

        /* 2. 第 1、2、4、6 列显示深色背景 */
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
            background-color: #f5f7fa;
            font-weight: bold;
        }

        /* 第 3、5、7 列显示白色背景 */
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(3)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(5)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(7)) {
            // background-color: #fff;
        }
    }
}
</style>