testcase

src/view/Monit.vue

@@ -30,7 +30,7 @@
 
 <script setup>
 import {onMounted, reactive, ref} from "vue";
-import {Cpu, SysInfo} from "@/api/monitor"
+import {Cpu, SysInfo,disk} from "@/api/monitor"
 let sysparams = reactive({
  count: 0,
  name: "",
@@ -86,42 +86,26 @@ const memory = ref({
 
 
 const columns = [{
- title: 'Name',
+ title: '分区名称',
- dataIndex: 'name',
+ dataIndex: 'device',
 }, {
- title: 'Age',
+ title: '容量(G)',
- dataIndex: 'age',
+ dataIndex: 'total',
 }, {
- title: 'Address',
+ title: '已使用(G)',
- dataIndex: 'address',
+ dataIndex: 'used',
 },{
-
+ title: "剩余(G)",
+ dataIndex: "free",
 }
 ];
-const data = [{
- key: '1',
- name: 'John Brown',
- age: 32,
- address: 'New York No. 1 Lake Park',
-}, {
- key: '2',
- name: 'Jim Green',
- age: 42,
- address: 'London No. 1 Lake Park',
-}, {
- key: '3',
- name: 'Joe Black',
- age: 32,
- address: 'Sidney No. 1 Lake Park',
-}];
-
 onMounted(()=>{
  QuerySys()
  QueryCpu()
+ QueryDisk()
  setInterval(()=>{
  QuerySys();
  QueryCpu();
-
  },5000)
 })
 function QuerySys() {
@@ -148,6 +132,26 @@ 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)
+ }
+
+
+ })
+ })
+}
 </script>
 
 
@@ -180,23 +184,20 @@ p{
  margin-bottom: 16px;
 }
 .disk{
- background-color: lightblue;
+ border: 1px solid #f5f5f5;
- border: 1px;
  height:100%
 }
 .memory{
- background-color: aliceblue;
+ border: 1px solid #f5f5f5;
- border: 1px;
  height:100%;
 }
 .sys{
- background-color: mintcream;
  border: 1px solid #f5f5f5;
  height:100%
 
 }
 .cpu{
- background-color: honeydew;
+ border: 1px solid #f5f5f5;
  height:100%;
 }