209 lines
3.8 KiB
Vue
209 lines
3.8 KiB
Vue
<template>
|
||
<a-row justify="space-between" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
|
||
<a-col :span="6">
|
||
<a-card title="系统信息" :bordered="false" class="sys">
|
||
<p>在线用户：{{ sysparams.name }}</p>
|
||
<p>用户数量：{{ sysparams.count }}</p>
|
||
<p>系统当前时间：{{ sysparams.current_time }}</p>
|
||
<p>系统开机时间：{{ sysparams.start_time }}</p>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<a-card title="cpu使用率" :bordered="false" class="cpu">
|
||
<echarts class="chart" :option="option"/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<a-card title="内存使用率" :bordered="false" class="memory">
|
||
<echarts class="chart" :option="memory"/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<a-card title="磁盘分区" :bordered="false" class="disk">
|
||
<a-table :columns="columns" :data-source="disk.data" size="middle" :pagination="false"/>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, reactive,watch} from "vue";
|
||
|
||
let sysparams = reactive({
|
||
count: 0,
|
||
name: "",
|
||
current_time: "",
|
||
start_time: "",
|
||
cpu_percent: 0,
|
||
})
|
||
const option = reactive({
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'cpu',
|
||
type: 'gauge',
|
||
detail: {
|
||
formatter: '{value}'
|
||
},
|
||
data: [
|
||
{
|
||
value: 60,
|
||
name: 'cpu'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
|
||
const memory = reactive({
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'memory',
|
||
type: 'gauge',
|
||
progress: {
|
||
show: true
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: '{value}'
|
||
},
|
||
data: [
|
||
{
|
||
value: 60,
|
||
name: 'memory'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
|
||
|
||
const columns = [{
|
||
title: '分区名称',
|
||
dataIndex: 'device',
|
||
}, {
|
||
title: '容量(G)',
|
||
dataIndex: 'total',
|
||
}, {
|
||
title: '已使用(G)',
|
||
dataIndex: 'used',
|
||
}, {
|
||
title: "剩余(G)",
|
||
dataIndex: "free",
|
||
}
|
||
];
|
||
|
||
onMounted(() => {
|
||
GetSytem()
|
||
})
|
||
const disk = reactive({
|
||
data:[]
|
||
})
|
||
|
||
|
||
function GetSytem(){
|
||
console.log("开始连接websocket......")
|
||
const ws = new WebSocket("ws://127.0.0.1:8000/api/ws")
|
||
ws.onopen = function () { ws.send("")};
|
||
ws.onmessage = function (msg){
|
||
console.log("开始接受数据.............")
|
||
const data = JSON.parse(msg.data)
|
||
console.log(data)
|
||
let {cpu_percent} = data.cpu_info
|
||
let {percent} = data.memory_info
|
||
// 渲染cpu数据
|
||
option.series[0].data[0].value = cpu_percent
|
||
//渲染内存信息数据
|
||
memory.series[0].data[0].value = percent
|
||
//渲染系统信息数据
|
||
let {count, name, current_time, start_time} = data.sys_info
|
||
sysparams.count = count
|
||
sysparams.name = name
|
||
sysparams.current_time = current_time
|
||
let data_array = reactive([])
|
||
sysparams.start_time = start_time
|
||
//渲染disk磁盘信息
|
||
data.disk_info.map((par, index) => {
|
||
let params = {
|
||
key: String(index),
|
||
device: par.device,
|
||
total: par.total,
|
||
used: par.used,
|
||
free: par.free,
|
||
}
|
||
if (index < 5) {
|
||
data_array.push(params)
|
||
}
|
||
})
|
||
disk.data=data_array
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.chart {
|
||
|
||
height: 300px;
|
||
width: 300px;
|
||
}
|
||
|
||
.echarts {
|
||
width: 270px;
|
||
}
|
||
|
||
.charts {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
justify-items: center;
|
||
height: 85%;
|
||
width: 100%;
|
||
background-color: #42EBFF;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
p {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#components-table-demo-size h4 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.disk {
|
||
border: 1px solid #f5f5f5;
|
||
height: 100%
|
||
}
|
||
|
||
.memory {
|
||
border: 1px solid #f5f5f5;
|
||
height: 100%;
|
||
}
|
||
|
||
.sys {
|
||
border: 1px solid #f5f5f5;
|
||
height: 100%
|
||
|
||
}
|
||
|
||
.cpu {
|
||
border: 1px solid #f5f5f5;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
</style> |