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

testcase

This commit is contained in:
qiangyanwen 2022-08-20 19:41:18 +08:00
parent 31b8be8c25
commit 89310e5610
4 changed files with 81 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/monitor.js Normal file
View File

@ -0,0 +1,9 @@
import {get} from "@/utils/request";
// 获取磁盘信息
export let disk =()=>{return get("/sys/disk")}
//获取系统信息
export let SysInfo =()=>{return get("sys/info")}
//获取cpu信息
export let Cpu = ()=>{return get("sys/cpu")}
//获取内存信息
export let get_memory =()=>{return get("sys/memory")}

10
src/api/user.js
View File

@ -1,9 +1,3 @@
import {get,post} from "@/utils/request"; import {post} from "@/utils/request";
let Login = (json)=>{ export let Login = (json)=>{return post("/login",json)}
return post("/login",json)
}
export {
Login
}

2
src/utils/request.js
View File

@ -4,7 +4,7 @@ import {useRouter} from "vue-router";
import NProgress from "nprogress" import NProgress from "nprogress"
const service = axios.create({ const service = axios.create({
baseURL: 'http://192.168.10.80:8000/api', baseURL: 'http://192.168.0.107:8000/api',
timeout: 5000 timeout: 5000
}); });
const router = useRouter() const router = useRouter()

122
src/view/Monit.vue
View File

@ -1,15 +1,25 @@
<template> <template>
<div class="charts" style="background: #fff; padding: 15px"> <div class="charts" style="background: #fff; padding: 15px">
<a-card title="cpu使用率" :bordered="false">
<echarts class="chart" :option="option"/>
</a-card>
<a-card title="memory使用率" :bordered="false"> <a-card title="系统信息" :bordered="false">
<echarts class="chart" :option="memory"/> <p>系统用户：qiangyanwen</p>
</a-card> <p>在线用户：1</p>
<p>系统当前时间：2022-08-22 14:55:43</p>
<p>系统开机时间：2022-08-22 14:55:43</p>
</a-card>
<a-card title="磁盘信息" :bordered="false">
<p></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> </div>
</template> </template>
@ -17,49 +27,48 @@
import {ref} from "vue"; import {ref} from "vue";
const option = ref({ const option = ref({
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: 71.5, value: 71.5,
name: 'memory' name: 'memory'
} }
] ]
} }
] ]
}) })
</script> </script>
@ -67,16 +76,23 @@ const memory = ref({
<style scoped> <style scoped>
.chart { .chart {
height: 300px; height: 300px;
width: 300px; width: 300px;
} }
.a-card{ .a-card{
width: 350px; width: 350px;
height: 350px; height: 350px;
} }
.charts { .charts {
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
p{
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
font-size: 16px;
font-weight: bold;
} }
</style> </style>