diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 540e1c5..76e3cc9 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -40,7 +40,6 @@
           <a-breadcrumb-item>{{ route.meta.title }}</a-breadcrumb-item>
         </a-breadcrumb>
         <div :style="container">
-
           <router-view></router-view>
         </div>
       </a-layout-content>
@@ -80,7 +79,7 @@ export default defineComponent({
     const selectedKeys = ref(['1'])
     const {username} = storeToRefs(useStore())
     let container = {
-      padding: '24px', background: '#fff', minHeight: '100%'
+      padding: '24px', background: '#fff', minHeight: '100%',
     }
     const router = useRouter()
     const route = useRoute()
diff --git a/src/view/Monit.vue b/src/view/Monit.vue
index 585e620..e5d1fef 100644
--- a/src/view/Monit.vue
+++ b/src/view/Monit.vue
@@ -2,13 +2,10 @@
  <div class="charts" style="background: #fff; padding: 15px">
 
  <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>
+   <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"/>
@@ -24,9 +21,16 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
-
-const option = ref({
+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}%'
  },
@@ -46,6 +50,7 @@ const option = ref({
  }
  ]
 })
+
 const memory = ref({
  tooltip: {
  formatter: '{a} <br/>{b} : {c}%'
@@ -63,13 +68,47 @@ const memory = ref({
  },
  data: [
  {
- value: 71.5,
+ 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>
 
 
@@ -80,8 +119,8 @@ const memory = ref({
  width: 300px;
 }
 .a-card{
- width: 350px;
- height: 350px;
+ width: 300px;
+ height: 300px;
 }
 
 .charts {