绘制 运维版本管理页面

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

@@ -1,67 +1,134 @@
+<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 { 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 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: 'category',
-        data: ['2023-05-01', '2023-05-02', '2023-05-03', '2023-05-04', '2023-05-05', '2023-05-06']
+        type: 'time',
+        name: '时间',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
     },
     yAxis: {
-        name: '使用率',
+        name: '%',
         type: 'value',
         min: 0,
-        max: 100,
-        interval: 10,
-        axisLabel: {
-            formatter: '{value} %'
-        }
+        max: 100
     },
     series: [
         {
             name: 'CPU1使用率',
             type: 'line',
-            data: [10, 52, 20, 33, 39, 89]
+            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',
-            data: [9, 52, 10, 33, 69, 79]
+            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',
-            data: [10, 62, 80, 13, 29, 39]
+            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',
-            data: [50, 52, 40, 55, 49, 61]
+            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]
+            ]
         }
     ]
 })
@@ -125,38 +192,19 @@ const handleClose = () => {
 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>
-
-<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;
@@ -195,14 +243,11 @@ const synchronizeTime = async () => {
         }
 
         :deep(.custom-table .el-table__cell) {
-            border: 1px solid #dcdfe6;
+            border: 0.5px 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)) {
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
             background-color: #f5f7fa;
             font-weight: bold;
         }
@@ -211,8 +256,8 @@ const synchronizeTime = async () => {
         :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;
+            // background-color: #fff;
         }
     }
 }
-</style>
+</style>