From 1e83cf985afdf06ed6b7ace1b7a5428a7e27a361 Mon Sep 17 00:00:00 2001
From: eee555 <2234208506@qq.com>
Date: Tue, 30 Apr 2024 12:41:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E9=80=9F=E3=80=81cpu=E3=80=81?=
 =?UTF-8?q?=E7=A9=BA=E9=97=B4=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 back_end/saolei/monitor/views.py  |  12 +-
 front_end/package-lock.json       | 136 ++++++++++++++++
 front_end/package.json            |   2 +
 front_end/src/router/index.ts     |   2 +-
 front_end/src/views/AboutView.vue |   5 -
 front_end/src/views/WorldView.vue | 248 ++++++++++++++++++++++++++++++
 6 files changed, 395 insertions(+), 10 deletions(-)
 delete mode 100644 front_end/src/views/AboutView.vue
 create mode 100644 front_end/src/views/WorldView.vue

diff --git a/back_end/saolei/monitor/views.py b/back_end/saolei/monitor/views.py
index e1b055b..23c9294 100644
--- a/back_end/saolei/monitor/views.py
+++ b/back_end/saolei/monitor/views.py
@@ -51,12 +51,16 @@ def get_dir_size(path):
     return total
 
 # 服务器总容量、录像占用大小
-@throttled(interval=500)
+@throttled(interval=188)
 def get_capacity(request):
-    disk_total = psutil.disk_usage(".")
+    # 服务器总容量情况
+    disk = psutil.disk_usage(".")
+    # 录像占用容量情况
     video_size = get_dir_size(os.path.join(settings.BASE_DIR, 'assets/videos'))
-    return JsonResponse({"t_t": disk_total.total, "t_u": disk_total.used, "t_p": disk_total.percent,
-                         "v": video_size})
+    # 内存占用情况
+    virtual = psutil.virtual_memory()
+    return JsonResponse({"d_t": disk.total, "d_u": disk.used, "v": video_size,
+                         "v_t": virtual.total, "v_u": virtual.used})
 
 
 
diff --git a/front_end/package-lock.json b/front_end/package-lock.json
index b3fbd78..d3e2882 100644
--- a/front_end/package-lock.json
+++ b/front_end/package-lock.json
@@ -13,6 +13,7 @@
         "@types/lowdb": "^1.0.11",
         "@types/node": "^20.5.1",
         "axios": "^0.21.1",
+        "echarts": "^5.5.0",
         "element-plus": "^2.2.32",
         "flag-icon-css": "^4.1.7",
         "image-conversion": "^2.1.1",
@@ -20,6 +21,7 @@
         "ms-toollib": "1.4.6-alpha",
         "uuid": "^9.0.0",
         "vue": "^3.2.13",
+        "vue-echarts": "^6.7.1",
         "vue-router": "^4.0.3",
         "vuex": "^4.1.0"
       },
@@ -3224,6 +3226,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.5.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -6892,6 +6908,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -7988,6 +8009,55 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.7.1.tgz",
+      "integrity": "sha512-HYn54QBk1ILaQ+qA1PQGHwm3MsEFTD5NN9bmgk6wco8LcwKLnRC4HRM0ualYDGOJcCccTpnqD5DvIG0UH1+wDQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.5",
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.4.1",
+        "vue": "^2.6.12 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -8755,6 +8825,19 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -11355,6 +11438,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.5.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -14191,6 +14290,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -15066,6 +15170,23 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "vue-echarts": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.7.1.tgz",
+      "integrity": "sha512-HYn54QBk1ILaQ+qA1PQGHwm3MsEFTD5NN9bmgk6wco8LcwKLnRC4HRM0ualYDGOJcCccTpnqD5DvIG0UH1+wDQ==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.11"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -15660,6 +15781,21 @@
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/front_end/package.json b/front_end/package.json
index f1d3e56..71a6a06 100644
--- a/front_end/package.json
+++ b/front_end/package.json
@@ -12,6 +12,7 @@
     "@types/lowdb": "^1.0.11",
     "@types/node": "^20.5.1",
     "axios": "^0.21.1",
+    "echarts": "^5.5.0",
     "element-plus": "^2.2.32",
     "flag-icon-css": "^4.1.7",
     "image-conversion": "^2.1.1",
@@ -19,6 +20,7 @@
     "ms-toollib": "1.4.6-alpha",
     "uuid": "^9.0.0",
     "vue": "^3.2.13",
+    "vue-echarts": "^6.7.1",
     "vue-router": "^4.0.3",
     "vuex": "^4.1.0"
   },
diff --git a/front_end/src/router/index.ts b/front_end/src/router/index.ts
index e39a98a..db32047 100644
--- a/front_end/src/router/index.ts
+++ b/front_end/src/router/index.ts
@@ -20,7 +20,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/world',
     name: 'world',
-    component: () => import('../views/AboutView.vue')
+    component: () => import('../views/WorldView.vue')
   },
   {
     path: '/guide',
diff --git a/front_end/src/views/AboutView.vue b/front_end/src/views/AboutView.vue
deleted file mode 100644
index 4bd02ad..0000000
--- a/front_end/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div style="margin: 0px;padding: 0px;">
-    <div>This is an about page</div>
-  </div>
-</template>
diff --git a/front_end/src/views/WorldView.vue b/front_end/src/views/WorldView.vue
new file mode 100644
index 0000000..c3dd7cd
--- /dev/null
+++ b/front_end/src/views/WorldView.vue
@@ -0,0 +1,248 @@
+<template>
+    <div style="margin: auto;text-align: center;width: 888px;">
+        <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 />
+    </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 {
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent,
+    GridComponentOption,
+    PolarComponent,
+
+} from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref, provide } from 'vue';
+import { onMounted, onBeforeUnmount, Ref, defineAsyncComponent, computed } from 'vue'
+import useCurrentInstance from "@/utils/common/useCurrentInstance";
+const { proxy } = useCurrentInstance();
+
+
+const io_cpus = ref({
+    s: ["0"],
+    r: ["0"],
+    c: ["0"],
+});
+let timer: 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];
+        })
+
+})
+
+onBeforeUnmount(() => {
+    // 组件即将卸载前停止定时任务  
+    clearInterval(timer);
+
+},)
+
+
+// 更新曲线用的数据
+const refresh_data = () => {
+    proxy.$axios.get('/monitor/io_cpus/')
+        .then(function (response) {
+            const data = response.data;
+            io_cpus.value = {
+                s: data.s,
+                r: data.r,
+                c: data.c
+            };
+            option_cpu.value.series[0].data = [...io_cpus.value.c.map((i) => { return +i })];
+            option_s.value.series[0].data = [...io_cpus.value.s.map((i) => { return +i / 1000 })];
+            option_r.value.series[0].data = [...io_cpus.value.r.map((i) => { return +i / 1000 })];
+
+
+        })
+}
+
+use([
+    CanvasRenderer,
+    PieChart,
+    LineChart,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent,
+    BarChart,
+    PolarComponent
+]);
+
+// provide(THEME_KEY, 'dark');
+
+const option_cpu = ref({
+    title: {
+        text: "CPU",
+        left: "center"
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: false,
+        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        min: 0,
+        max: 100,
+        type: 'value',
+        axisLabel: {
+            formatter: function (value: number) {
+                return value + '%';
+            }
+        },
+    },
+    series: [
+        {
+            data: [0],
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {}
+        }
+    ]
+});
+
+const option_s = ref({
+    title: {
+        text: "发送的数据",
+        left: "center"
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: false,
+        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        min: 0,
+        // max: 1000,
+        type: 'value',
+        axisLabel: {
+            formatter: function (value: number) {
+                return value + 'kB/s';
+            }
+        },
+    },
+    series: [
+        {
+            data: [0],
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {}
+        }
+    ]
+});
+
+const option_r = ref({
+    title: {
+        text: "收到的数据",
+        left: "center"
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: false,
+        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        min: 0,
+        // max: 1000,
+        type: 'value',
+        axisLabel: {
+            formatter: function (value: number) {
+                return value + 'kB/s';
+            }
+        },
+    },
+    series: [
+        {
+            data: [0],
+            type: 'line',
+            symbol: 'none',
+            areaStyle: {}
+        }
+    ]
+});
+
+
+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'
+      }
+    },
+    {
+      type: 'bar',
+      data: [0, 40],
+      coordinateSystem: 'polar',
+      name: '已用空间(MB)',
+      stack: 'a',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'bar',
+      data: [0, 20],
+      coordinateSystem: 'polar',
+      name: '可用空间(MB)',
+      stack: 'a',
+      emphasis: {
+        focus: 'series'
+      }
+    }
+  ],
+  legend: {
+    show: true,
+    data: ['录像大小(MB)', '已用空间(MB)', '可用空间(MB)']
+  }
+});
+</script>
+
+<style scoped>
+.chart {
+    height: 100vh;
+}
+</style>
\ No newline at end of file