add test

src/main.js

@@ -13,6 +13,7 @@ import {createPinia} from "pinia";
 const pina = createPinia()
 import piniaPluginPersist from 'pinia-plugin-persist'
 pina.use(piniaPluginPersist)
+// eslint-disable-next-line vue/multi-word-component-names
 app.component("Echarts",Echarts)
 app.config.globalProperties.$mitt = mitt();
 app.use(Antd)

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.9.93:8000/api',
+ baseURL: 'http://127.0.0.1:8000/api',
  timeout: 5000
 });
 const router = useRouter()

src/view/Monit.vue

@@ -20,7 +20,7 @@
  </a-col>
  <a-col :span="6">
  <a-card title="磁盘分区" :bordered="false" class="disk">
- <a-table :columns="columns" :data-source="data" size="middle" :pagination="false"/>
+ <a-table :columns="columns" :data-source="disk.data" size="middle" :pagination="false"/>
  </a-card>
  </a-col>
 
@@ -30,7 +30,6 @@
 
 <script setup>
 import {onMounted, reactive, ref} from "vue";
-import {Cpu, SysInfo, disk} from "@/api/monitor"
 
 let sysparams = reactive({
  count: 0,
@@ -60,7 +59,7 @@ const option = reactive({
  ]
 })
 
-const memory = ref({
+const memory = reactive({
  tooltip: {
  formatter: '{a} <br/>{b} : {c}%'
  },
@@ -100,29 +99,64 @@ const columns = [{
  dataIndex: "free",
 }
 ];
+
 onMounted(() => {
- QuerySys()
- QueryCpu()
- QueryDisk()
+
  setInterval(() => {
- QuerySys();
- QueryCpu();
+ console.log("=======wwww")
+  GetSytem()
  }, 5000)
+
+
+})
+const disk = reactive({
+ data:[]
 })
 
-function QuerySys() {
- SysInfo().then((response) => {
- if (response.code === 200) {
- let {count, name, current_time, start_time} = response.data
+function GetSytem(){
+ const ws = new WebSocket("ws://127.0.0.1:8000/api/ws")
+ console.log('=====>ws-=====',ws)
+ ws.onopen = function () { ws.send("")};
+ ws.onmessage = function (e){
+ const data = JSON.parse(e.data)
+ let {cpu_percent} = data.cpu_info
+ let {percent} = data.memory_info
+ option.series.forEach((data) => {
+ data.data.forEach((key) => {
+ key.value = cpu_percent
+ })
+ })
+ memory.series.forEach((data) => {
+ data.data.forEach((key) => {
+ key.value = percent
+ })
+ })
+ let {count, name, current_time, start_time} = data.sys_info
  sysparams.count = count
  sysparams.name = name
  sysparams.current_time = current_time
+ let data_array = reactive([])
  sysparams.start_time = start_time
+ data.disk_info.map((par, index) => {
+ let params = {
+ key: String(index),
+ device: par.device,
+ total: par.total,
+ used: par.used,
+ free: par.free,
 
  }
+ if (index < 5) {
+ data_array.push(params)
+ }
  })
+ disk.data=data_array
+ }
+
 }
 
+
+
 const QueryCpu = () => {
  Cpu().then((rep) => {
  let {cpu_percent} = rep.data
@@ -135,26 +169,25 @@ const QueryCpu = () => {
 
  })
 }
-const data = reactive([])
-const QueryDisk = () => {
- disk().then((resp) => {
- resp.data.map((par, index) => {
- let params = {
- key: String(index),
- device: par.device,
- total: par.total,
- used: par.used,
- free: par.free,
-
- }
- if (index < 5) {
- data.push(params)
- }
-
-
- })
- })
-}
+// const QueryDisk = () => {
+//   disk().then((resp) => {
+//     resp.data.map((par, index) => {
+//       let params = {
+//         key: String(index),
+//         device: par.device,
+//         total: par.total,
+//         used: par.used,
+//         free: par.free,
+//
+//       }
+//       if (index < 5) {
+//         data.push(params)
+//       }
+//
+//
+//     })
+//   })
+// }
 </script>