137 lines
2.1 KiB
Vue
137 lines
2.1 KiB
Vue
<template>
|
||
<div class="charts" style="background: #fff; padding: 15px">
|
||
|
||
<a-card title="系统信息" :bordered="false">
|
||
<p>在线用户：{{sysparams.name}}</p>
|
||
<p>用户数量：{{sysparams.count}}</p>
|
||
<p>系统当前时间：{{sysparams.current_time}}</p>
|
||
<p>系统开机时间：{{sysparams.start_time}}</p>
|
||
</a-card>
|
||
<a-card title="cpu使用率" :bordered="false">
|
||
<echarts class="chart" :option="option"/>
|
||
</a-card>
|
||
|
||
<a-card title="memory使用率" :bordered="false">
|
||
<echarts class="chart" :option="memory"/>
|
||
</a-card>
|
||
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, reactive, ref} from "vue";
|
||
import {Cpu, SysInfo} from "@/api/monitor"
|
||
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 = ref({
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'memory',
|
||
type: 'gauge',
|
||
progress: {
|
||
show: true
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: '{value}'
|
||
},
|
||
data: [
|
||
{
|
||
value: 60,
|
||
name: 'memory'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
|
||
onMounted(()=>{
|
||
QuerySys()
|
||
QueryCpu()
|
||
setInterval(()=>{
|
||
QuerySys();
|
||
QueryCpu();
|
||
|
||
},5000)
|
||
})
|
||
function QuerySys() {
|
||
SysInfo().then((response)=>{
|
||
if (response.code===200){
|
||
let {count,name,current_time,start_time} = response.data
|
||
sysparams.count = count
|
||
sysparams.name = name
|
||
sysparams.current_time = current_time
|
||
sysparams.start_time = start_time
|
||
|
||
}
|
||
})
|
||
}
|
||
const QueryCpu =()=>{
|
||
Cpu().then((rep)=>{
|
||
let {cpu_percent} =rep.data
|
||
option.series.forEach((data)=>{
|
||
data.data.forEach((key)=>{
|
||
key.value = cpu_percent
|
||
})
|
||
})
|
||
console.log(rep.data)
|
||
|
||
})
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.chart {
|
||
|
||
height: 300px;
|
||
width: 300px;
|
||
}
|
||
.a-card{
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
.charts {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap
|
||
}
|
||
p{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
</style> |