264 lines
6.9 KiB
Vue
264 lines
6.9 KiB
Vue
<template>
|
||
<div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
|
||
<DeviceTree @node-click="nodeClick" @init="nodeClick" @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: '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>
|