add test
This commit is contained in:
parent
a352073f39
commit
5f5a98f11d
|
|
@ -30,7 +30,8 @@
|
|||
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {Cpu, SysInfo,disk} from "@/api/monitor"
|
||||
import {Cpu, SysInfo, disk} from "@/api/monitor"
|
||||
|
||||
let sysparams = reactive({
|
||||
count: 0,
|
||||
name: "",
|
||||
|
|
@ -39,49 +40,49 @@ let sysparams = reactive({
|
|||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'memory',
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 60,
|
||||
name: 'memory'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -94,37 +95,39 @@ const columns = [{
|
|||
}, {
|
||||
title: '已使用(G)',
|
||||
dataIndex: 'used',
|
||||
},{
|
||||
}, {
|
||||
title: "剩余(G)",
|
||||
dataIndex: "free",
|
||||
}
|
||||
];
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
QuerySys()
|
||||
QueryCpu()
|
||||
QueryDisk()
|
||||
setInterval(()=>{
|
||||
setInterval(() => {
|
||||
QuerySys();
|
||||
QueryCpu();
|
||||
},5000)
|
||||
}, 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
|
||||
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)=>{
|
||||
|
||||
const QueryCpu = () => {
|
||||
Cpu().then((rep) => {
|
||||
let {cpu_percent} = rep.data
|
||||
option.series.forEach((data) => {
|
||||
data.data.forEach((key) => {
|
||||
key.value = cpu_percent
|
||||
})
|
||||
})
|
||||
|
|
@ -133,23 +136,23 @@ const QueryCpu =()=>{
|
|||
})
|
||||
}
|
||||
const data = reactive([])
|
||||
const QueryDisk = ()=>{
|
||||
disk().then((resp)=>{
|
||||
resp.data.map((par,index)=>{
|
||||
let params = {
|
||||
key: String(index),
|
||||
device: par.device,
|
||||
total: par.total,
|
||||
used: par.used,
|
||||
free: par.free,
|
||||
const QueryDisk = () => {
|
||||
disk().then((resp) => {
|
||||
resp.data.map((par, index) => {
|
||||
let params = {
|
||||
key: String(index),
|
||||
device: par.device,
|
||||
total: par.total,
|
||||
used: par.used,
|
||||
free: par.free,
|
||||
|
||||
}
|
||||
if(index < 5){
|
||||
data.push(params)
|
||||
}
|
||||
}
|
||||
if (index < 5) {
|
||||
data.push(params)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -158,47 +161,54 @@ const QueryDisk = ()=>{
|
|||
<style scoped>
|
||||
.chart {
|
||||
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
.echarts{
|
||||
|
||||
.echarts {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-items: center;
|
||||
height: 85%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-items: center;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
background-color: #42EBFF;
|
||||
overflow-x:scroll;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
p{
|
||||
|
||||
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{
|
||||
|
||||
.disk {
|
||||
border: 1px solid #f5f5f5;
|
||||
height:100%;
|
||||
height: 100%
|
||||
}
|
||||
.sys{
|
||||
|
||||
.memory {
|
||||
border: 1px solid #f5f5f5;
|
||||
height:100%
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sys {
|
||||
border: 1px solid #f5f5f5;
|
||||
height: 100%
|
||||
|
||||
}
|
||||
.cpu{
|
||||
|
||||
.cpu {
|
||||
border: 1px solid #f5f5f5;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue