BUG(监控日志管理): 获取监控日志信息优化

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):

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}数据失败！`)