From 9f1fbf93cd1cc8ec33a42ee7f99880a17a500bb4 Mon Sep 17 00:00:00 2001
From: dk <1260500659@qq.com>
Date: Wed, 18 Mar 2026 21:06:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AE=9E=E6=97=B6=E8=BF=90?=
 =?UTF-8?q?=E7=BB=B4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/govern/manage/realTime/index.vue | 218 +++++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 src/views/govern/manage/realTime/index.vue

diff --git a/src/views/govern/manage/realTime/index.vue b/src/views/govern/manage/realTime/index.vue
new file mode 100644
index 0000000..73381d1
--- /dev/null
+++ b/src/views/govern/manage/realTime/index.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { getDevCapacity } from '@/api/cs-device-boot/capacity'
+import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { yMethod, completeTimeSeries } from '@/utils/echartMethod'
+import TableHeader from '@/components/table/header/index.vue'
+import { RefreshLeft } from '@element-plus/icons-vue'
+import { formatToDateTime } from '@/utils/dateUtil'
+
+defineOptions({
+    name: 'govern/manage/realTime'
+})
+
+//页面属性
+const pageHeight = mainHeight(20)
+const echartHeight = (mainHeight(180))
+
+const echartsData = ref<any>({
+    title: {
+        text: '终端性能'
+    },
+    legend: {
+        bottom: 0,
+        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
+    },
+    xAxis: {
+        type: 'category',
+        data: ['2023-05-01', '2023-05-02', '2023-05-03', '2023-05-04', '2023-05-05', '2023-05-06']
+    },
+    yAxis: {
+        name: '使用率',
+        type: 'value',
+        min: 0,
+        max: 100,
+        interval: 10,
+        axisLabel: {
+            formatter: '{value} %'
+        }
+    },
+    series: [
+        {
+            name: 'CPU1使用率',
+            type: 'line',
+            data: [10, 52, 20, 33, 39, 89]
+        },
+        {
+            name: 'CPU2使用率',
+            type: 'line',
+            data: [9, 52, 10, 33, 69, 79]
+        },
+        {
+            name: '内存使用率',
+            type: 'line',
+            data: [10, 62, 80, 13, 29, 39]
+        },
+        {
+            name: '磁盘使用率',
+            type: 'line',
+            data: [50, 52, 40, 55, 49, 61]
+        }
+    ]
+})
+
+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('对时')
+}
+</script>
+
+<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">
+                <span>系统时间：{{ formatToDateTime(new Date()) }}</span>
+                <span>终端时间：{{ formatToDateTime(new Date()) }}</span>
+                <el-button size="small" type="primary" @click="synchronizeTime">
+                    <RefreshLeft style="width: 15px;margin-right: 5px" />
+                    <span>对时</span>
+                </el-button>
+            </div>
+            <div :style="echartHeight" style="padding: 10px 20px 0 20px;">
+                <MyEchart :options="echartsData" />
+            </div>
+            <div style="padding: 0 20px 0 20px;">
+                <el-table :data="tableData" border :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>
+
+<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: 1px solid #dcdfe6;
+        }
+
+        /* 2. 第 1、2、4、6 列显示深色背景 */
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)),
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(2)),
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(4)),
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(6)) {
+            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>
\ No newline at end of file