feature：内存占用情况

front_end/src/views/WorldView.vue

@@ -3,14 +3,15 @@
         <v-chart style="height: 240px;width: 888px;" class="chart" :option="option_cpu" autoresize />
         <v-chart style="height: 240px;width: 888px;" class="chart" :option="option_s" autoresize />
         <v-chart style="height: 240px;width: 888px;" class="chart" :option="option_r" autoresize />
-        <v-chart style="height: 430px;" class="chart" :option="option_disk" autoresize />
+        <v-chart style="height: 328px;" class="chart" :option="option_disk" autoresize />
+        <v-chart style="height: 328px;" class="chart" :option="option_virtual_memory" autoresize />
     </div>
 </template>
 
 <script setup lang="ts">
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { PieChart, LineChart, LineSeriesOption,BarChart } from 'echarts/charts';
+import { PieChart, LineChart, LineSeriesOption, BarChart } from 'echarts/charts';
 import {
     TitleComponent,
     TooltipComponent,
@@ -32,34 +33,21 @@ const io_cpus = ref({
     r: ["0"],
     c: ["0"],
 });
-let timer: number;
+let timer_1: number;
+let timer_2: number;
 
 
 onMounted(() => {
     refresh_data();
-    timer = setInterval(refresh_data, 5001);
-
-    proxy.$axios.get('/monitor/capacity/')
-        .then(function (response) {
-            const data = response.data;
-            option_disk.value.series[0].data[0] = +data.v/1000000;
-            option_disk.value.series[1].data[1] = +data.d_u/1000000;
-            option_disk.value.series[2].data[1] = (+data.d_t-(+data.d_u))/1000000;
-            option_disk.value.angleAxis.max = +data.d_t/1000000;
-            const a = `录像大小(${Math.round(data.v/1000000)}MB)`;
-            const b = `已用空间(${Math.round(data.d_u/1000000)}MB)`;
-            const c = `可用空间(${Math.round((+data.d_t-(+data.d_u))/1000000)}MB)`;
-            option_disk.value.series[0].name = a;
-            option_disk.value.series[1].name = b;
-            option_disk.value.series[2].name = c;
-            option_disk.value.legend.data = [a, b, c];
-        })
-
+    timer_1 = setInterval(refresh_data, 5010);
+    refresh_memory_data();
+    timer_2 = setInterval(refresh_memory_data, 188010);
 })
 
 onBeforeUnmount(() => {
     // 组件即将卸载前停止定时任务  
-    clearInterval(timer);
+    clearInterval(timer_1);
+    clearInterval(timer_2);
 
 },)
 
@@ -82,6 +70,31 @@ const refresh_data = () => {
         })
 }
 
+const refresh_memory_data = () => {
+    proxy.$axios.get('/monitor/capacity/')
+        .then(function (response) {
+            const data = response.data;
+            option_disk.value.series[0].data[0].value = +data.v / 1000000;
+            option_disk.value.series[0].endAngle = 90 - 360 * (data.v / data.d_t);
+            option_disk.value.series[1].data[0].value = +data.d_u / 1000000;
+            option_disk.value.series[1].data[1].value = (+data.d_t - (+data.d_u)) / 1000000;
+            const a = `录像大小(${Math.round(data.v / 1000000)}MB)`;
+            const b = `已用空间(${Math.round(data.d_u / 1000000)}MB)`;
+            const c = `可用空间(${Math.round((+data.d_t - (+data.d_u)) / 1000000)}MB)`;
+            option_disk.value.series[0].data[0].name = a;
+            option_disk.value.series[1].data[0].name = b;
+            option_disk.value.series[1].data[1].name = c;
+            option_disk.value.legend.data = [a, b, c];
+            option_virtual_memory.value.series[0].data[0].value = +data.v_u / 1000000;
+            option_virtual_memory.value.series[0].data[1].value = (+data.v_t - (+data.v_u)) / 1000000;
+            const d = `已用内存(${Math.round(data.v_u / 1000000)}MB)`;
+            const e = `可用内存(${Math.round((+data.v_t - (+data.v_u)) / 1000000)}MB)`;
+            option_virtual_memory.value.series[0].data[0].name = d;
+            option_virtual_memory.value.series[0].data[1].name = e;
+            option_virtual_memory.value.legend.data = [d, e];
+        })
+}
+
 use([
     CanvasRenderer,
     PieChart,
@@ -191,54 +204,65 @@ const option_r = ref({
 
 
 const option_disk = ref({
-  angleAxis: {
-    startAngle: 90,
-    endAngle: -270,
-    max: 100,
-  },
-  radiusAxis: {
-    type: 'category',
-    data: ['', ''],
-    z: 10
-  },
-  polar: {},
-  series: [
-    {
-      type: 'bar',
-      data: [44, 0],
-      coordinateSystem: 'polar',
-      name: '录像大小(MB)',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      }
+    legend: {
+        data: [
+            '可用空间',
+            '已用空间',
+            '录像大小',
+        ]
     },
-    {
-      type: 'bar',
-      data: [0, 40],
-      coordinateSystem: 'polar',
-      name: '已用空间(MB)',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      }
+    series: [
+        {
+            name: '录像大小',
+            type: 'pie',
+            selectedMode: 'single',
+            radius: [0, '38%'],
+            endAngle: 50,
+            label: {
+                show: false
+            },
+            data: [
+                { value: 50, name: 'Search Engine' },
+            ]
+        },
+        {
+            name: '磁盘大小',
+            type: 'pie',
+            radius: ['45%', '68%'],
+            label: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '已用空间' },
+                { value: 335, name: '可用空间' },
+            ]
+        }
+    ]
+});
+
+
+const option_virtual_memory = ref({
+    legend: {
+        data: [
+            '已用空间',
+            '可用空间',
+        ]
     },
-    {
-      type: 'bar',
-      data: [0, 20],
-      coordinateSystem: 'polar',
-      name: '可用空间(MB)',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      }
-    }
-  ],
-  legend: {
-    show: true,
-    data: ['录像大小(MB)', '已用空间(MB)', '可用空间(MB)']
-  }
+    series: [
+        {
+            name: '内存大小',
+            type: 'pie',
+            label: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '已用空间' },
+                { value: 335, name: '可用空间' },
+            ]
+        }
+    ]
 });
+
 </script>
 
 <style scoped>