From 467d5fc8a705ec54935b6bc2a0fccedfb87ae93f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Sun, 2 May 2021 15:31:15 +0800
Subject: [PATCH] =?UTF-8?q?BUG(=E7=9B=91=E6=8E=A7=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86):=20=E8=8E=B7=E5=8F=96=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E4=BF=A1=E6=81=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dvadmin-backend/apps/vadmin/monitor/views.py  | 13 +++++----
 .../monitor/server/components/LineChart.vue   | 29 ++++++++++++++-----
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/dvadmin-backend/apps/vadmin/monitor/views.py b/dvadmin-backend/apps/vadmin/monitor/views.py
index e9a3949..373bb30 100644
--- a/dvadmin-backend/apps/vadmin/monitor/views.py
+++ b/dvadmin-backend/apps/vadmin/monitor/views.py
@@ -48,19 +48,22 @@ class MonitorModelViewSet(CustomModelViewSet):
         """
         pk = kwargs.get("pk")
         queryset = self.filter_queryset(self.get_queryset())
-        queryset = queryset.filter(server__id=pk).order_by("-create_datetime")
+        queryset = queryset.filter(server__id=pk).order_by("create_datetime")
         # 间隔取值
         queryset_count = queryset.count()
         Interval_num = 1 if queryset_count < 200 else int(queryset_count / 100)
-        queryset = queryset.values('cpu_sys', 'mem_num', 'mem_sys')[::Interval_num][:100]
+        queryset = queryset.values('cpu_sys', 'mem_num', 'mem_sys', 'create_datetime')[::Interval_num][:100]
         data = {
             "cpu": [],
             "memory": [],
+            "datetime": [],
         }
         for ele in queryset:
-            data["cpu"].append(float(ele.get('cpu_sys', 0)) / 100)
-            data["memory"].append(float(ele.get('mem_num', 0)) and round(float(ele.get('mem_sys', 0)) /
-                                                                         float(ele.get('mem_num', 0)), 4))
+            data["cpu"].append(round(float(ele.get('cpu_sys', 0)), 2))
+            data["datetime"].append(ele.get('create_datetime').strftime('%Y-%m-%d %H:%M:%S'))
+            data["memory"].append(round(float(ele.get('mem_num', 0)), 4) and round(float(ele.get('mem_sys', 0)) /
+                                                                                   float(ele.get('mem_num', 0)) * 100,
+                                                                                   2))
         return SuccessResponse(data=data)
 
     def get_monitor_info(self, request: Request, *args, **kwargs):
diff --git a/dvadmin-ui/src/views/vadmin/monitor/server/components/LineChart.vue b/dvadmin-ui/src/views/vadmin/monitor/server/components/LineChart.vue
index 0f743c6..c8fdbb1 100644
--- a/dvadmin-ui/src/views/vadmin/monitor/server/components/LineChart.vue
+++ b/dvadmin-ui/src/views/vadmin/monitor/server/components/LineChart.vue
@@ -74,14 +74,15 @@ export default {
     serverInfo: VueTypes.object.isRequired,
     lineChartKey: VueTypes.string.isRequired,
     chartTitle: VueTypes.string.isRequired,
-    chartData: VueTypes.array.isRequired
+    chartData: VueTypes.array.isRequired,
   },
   data() {
     return {
       TIME_LIMIT_SETTING,
       timeLimit: DEFAULT_TIME,
       lineChartId: this.lineChartKey + 'Chart',
-      lineChartData: this.chartData
+      lineChartData: this.chartData,
+      lineChartTime: this.chartData
     }
   },
 
@@ -107,9 +108,14 @@ export default {
       let barGraph = echarts.init(document.getElementById(this.lineChartId))
       // 绘制图表
       barGraph.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}'
+        tooltip : {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            }
+          }
         },
         legend: {
           left: 'center',
@@ -120,7 +126,8 @@ export default {
           type: 'category',
           name: 'x',
           splitLine: { show: false },
-          data: []
+          data:this.lineChartTime,
+          offset:20
         },
         grid: {
           left: '1%',
@@ -131,14 +138,19 @@ export default {
         yAxis: {
           type: 'value',
           name: '使用率',
+          axisLabel: {
+            show: true,
+            interval: 'auto',
+            formatter: '{value}%'
+          },
         },
         series: [
           {
             name: '使用率',
             type: 'line',
-            data: this.lineChartData
+            data: this.lineChartData,
           }
-        ]
+        ],
       })
     },
     changeTimeLimit(value) {
@@ -148,6 +160,7 @@ export default {
     getCurrentServerMonitorLogs() {
       getMonitorLogs(this.serverInfo.id, {as: JSON.stringify({create_datetime__range: this.currentTimeLimitSetting.timeRange})}).then(results => {
         this.lineChartData = results.data[this.lineChartKey]
+        this.lineChartTime = results.data["datetime"]
         this.drawBar()
       }).catch(error => {
         this.$message.warning(error.msg || `获取${this.chartTitle}数据失败！`)