qiangyanwen
/
monit_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add test

This commit is contained in:
qiangyanwen 2022-11-27 13:39:08 +08:00
parent a352073f39
commit 5f5a98f11d
1 changed files with 100 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/view/Monit.vue
View File

@ -30,7 +30,8 @@
<script setup> <script setup>
import {onMounted, reactive, ref} from "vue"; import {onMounted, reactive, ref} from "vue";
import {Cpu, SysInfo,disk} from "@/api/monitor" import {Cpu, SysInfo, disk} from "@/api/monitor"
let sysparams = reactive({ let sysparams = reactive({
count: 0, count: 0,
name: "", name: "",
@ -39,49 +40,49 @@ let sysparams = reactive({
cpu_percent: 0, cpu_percent: 0,
}) })
const option = reactive({ const option = reactive({
tooltip: { tooltip: {
formatter: '{a} <br/>{b} : {c}%' formatter: '{a} <br/>{b} : {c}%'
}, },
series: [ series: [
{ {
name: 'cpu', name: 'cpu',
type: 'gauge', type: 'gauge',
detail: { detail: {
formatter: '{value}' formatter: '{value}'
}, },
data: [ data: [
{ {
value: 60, value: 60,
name: 'cpu' name: 'cpu'
} }
] ]
} }
] ]
}) })
const memory = ref({ const memory = ref({
tooltip: { tooltip: {
formatter: '{a} <br/>{b} : {c}%' formatter: '{a} <br/>{b} : {c}%'
}, },
series: [ series: [
{ {
name: 'memory', name: 'memory',
type: 'gauge', type: 'gauge',
progress: { progress: {
show: true show: true
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
formatter: '{value}' formatter: '{value}'
}, },
data: [ data: [
{ {
value: 60, value: 60,
name: 'memory' name: 'memory'
} }
] ]
} }
] ]
}) })
@ -94,37 +95,39 @@ const columns = [{
}, { }, {
title: '已使用(G)', title: '已使用(G)',
dataIndex: 'used', dataIndex: 'used',
},{ }, {
title: "剩余(G)", title: "剩余(G)",
dataIndex: "free", dataIndex: "free",
} }
]; ];
onMounted(()=>{ onMounted(() => {
QuerySys() QuerySys()
QueryCpu() QueryCpu()
QueryDisk() QueryDisk()
setInterval(()=>{ setInterval(() => {
QuerySys(); QuerySys();
QueryCpu(); QueryCpu();
},5000) }, 5000)
}) })
function QuerySys() { function QuerySys() {
SysInfo().then((response)=>{ SysInfo().then((response) => {
if (response.code===200){ if (response.code === 200) {
let {count,name,current_time,start_time} = response.data let {count, name, current_time, start_time} = response.data
sysparams.count = count sysparams.count = count
sysparams.name = name sysparams.name = name
sysparams.current_time = current_time sysparams.current_time = current_time
sysparams.start_time = start_time sysparams.start_time = start_time
} }
}) })
} }
const QueryCpu =()=>{
Cpu().then((rep)=>{ const QueryCpu = () => {
let {cpu_percent} =rep.data Cpu().then((rep) => {
option.series.forEach((data)=>{ let {cpu_percent} = rep.data
data.data.forEach((key)=>{ option.series.forEach((data) => {
data.data.forEach((key) => {
key.value = cpu_percent key.value = cpu_percent
}) })
}) })
@ -133,23 +136,23 @@ const QueryCpu =()=>{
}) })
} }
const data = reactive([]) const data = reactive([])
const QueryDisk = ()=>{ const QueryDisk = () => {
disk().then((resp)=>{ disk().then((resp) => {
resp.data.map((par,index)=>{ resp.data.map((par, index) => {
let params = { let params = {
key: String(index), key: String(index),
device: par.device, device: par.device,
total: par.total, total: par.total,
used: par.used, used: par.used,
free: par.free, free: par.free,
} }
if(index < 5){ if (index < 5) {
data.push(params) data.push(params)
} }
}) })
}) })
} }
</script> </script>
@ -158,47 +161,54 @@ const QueryDisk = ()=>{
<style scoped> <style scoped>
.chart { .chart {
height: 300px; height: 300px;
width: 300px; width: 300px;
} }
.echarts{
.echarts {
width: 270px; width: 270px;
} }
.charts { .charts {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
justify-items: center; justify-items: center;
height: 85%; height: 85%;
width: 100%; width: 100%;
background-color: #42EBFF; background-color: #42EBFF;
overflow-x:scroll; overflow-x: scroll;
} }
p{
p {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
#components-table-demo-size h4 { #components-table-demo-size h4 {
margin-bottom: 16px; margin-bottom: 16px;
} }
.disk{
border: 1px solid #f5f5f5; .disk {
height:100%
}
.memory{
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
height:100%; height: 100%
} }
.sys{
.memory {
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
height:100% height: 100%;
}
.sys {
border: 1px solid #f5f5f5;
height: 100%
} }
.cpu{
.cpu {
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
height:100%; height: 100%;
} }