testcase

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()

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>在线用户：{{sysparams.name}}</p>
- <p>在线用户：1</p>
+ <p>用户数量：{{sysparams.count}}</p>
- <p>系统当前时间：2022-08-22 14:55:43</p>
+ <p>系统当前时间：{{sysparams.current_time}}</p>
- <p>系统开机时间：2022-08-22 14:55:43</p>
+ <p>系统开机时间：{{sysparams.start_time}}</p>
- </a-card>
- <a-card title="磁盘信息" :bordered="false">
- <p></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";
+import {onMounted, reactive, ref} from "vue";
-
+import {Cpu, SysInfo} from "@/api/monitor"
-const option = ref({
+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;
+ width: 300px;
- height: 350px;
+ height: 300px;
 }
 
 .charts {