testcase

src/api/monitor.js

@@ -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")}

src/api/user.js

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

src/utils/request.js

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

src/view/Monit.vue

@@ -1,15 +1,25 @@
 <template>
- <div class="charts" style="background: #fff; padding: 15px">
- <a-card title="cpu使用率" :bordered="false">
- <echarts class="chart" :option="option"/>
- </a-card>
+ <div class="charts" style="background: #fff; padding: 15px">
 
- <a-card title="memory使用率" :bordered="false">
- <echarts class="chart" :option="memory"/>
- </a-card>
+ <a-card title="系统信息" :bordered="false">
+ <p>系统用户：qiangyanwen</p>
+ <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>
 
@@ -17,49 +27,48 @@
 import {ref} from "vue";
 
 const option = ref({
-  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: 71.5,
-  name: 'memory'
-  }
-  ]
-  }
-  ]
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [
+ {
+ name: 'memory',
+ type: 'gauge',
+ progress: {
+ show: true
+ },
+ detail: {
+ valueAnimation: true,
+ formatter: '{value}'
+ },
+ data: [
+ {
+ value: 71.5,
+ name: 'memory'
+ }
+ ]
+ }
+ ]
 })
 </script>
 
@@ -67,16 +76,23 @@ const memory = ref({
 <style scoped>
 .chart {
 
-  height: 300px;
-  width: 300px;
+ height: 300px;
+ width: 300px;
 }
 .a-card{
-  width: 350px;
-  height: 350px;
+ width: 350px;
+ height: 350px;
 }
 
 .charts {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap
+}
+p{
  display: flex;
  justify-content: flex-start;
+ font-size: 16px;
+ font-weight: bold;
 }
 </style>