新增实时运维页面
This commit is contained in:
218
src/views/govern/manage/realTime/index.vue
Normal file
218
src/views/govern/manage/realTime/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user