From 271ce33e16a6f89a89a8603f3e35dbf1b8a79c47 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Wed, 3 Jan 2024 11:37:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Server=20Monitir=20->=20Monitor=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../serverMonitor/instances/monitor.vue       | 292 +++---------------
 1 file changed, 47 insertions(+), 245 deletions(-)

diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
index 5377a2a..16b9b04 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
@@ -50,109 +50,13 @@
     </div>
     <div class="monitor-content">
       <a-row :gutter="[20, 15]" style="height: 100%">
-        <a-col :span="8" style="height: 34%">
+        <a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
-              title="CPU utilizatior"
-              layout="line1"
-              :xData="data1.xData"
-              :dataSource="data1.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Memory Usage"
-              layout="line2"
-              :xData="data2.xData"
-              :dataSource="data2.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="System Load"
-              layout="line3"
-              :xData="data3.xData"
-              :dataSource="data3.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Disk Read/Write BPS (Byte/s)"
-              layout="line4"
-              :xData="data4.xData"
-              :dataSource="data4.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Disk IOPS (Count/s)"
-              layout="line5"
-              :xData="data5.xData"
-              :dataSource="data5.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Disk Usage/Lnode Usage"
-              layout="line6"
-              :xData="data6.xData"
-              :dataSource="data6.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Public Bandwidth"
-              layout="line7"
-              :xData="data7.xData"
-              :dataSource="data7.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="Internal Network Bandwidth (bit/s)"
-              layout="line8"
-              :xData="data8.xData"
-              :dataSource="data8.data"
-              @zoom="handelZoom"
-            >
-            </LineChart>
-          </div>
-        </a-col>
-        <a-col :span="8" style="height: 34%">
-          <div class="monitor-content-item">
-            <LineChart
-              title="ECS Concurrent Connections (Count)"
-              layout="line9"
-              :xData="data9.xData"
-              :dataSource="data9.data"
+              :title="item.title"
+              :layout="'line' + index"
+              :xData="item.xData"
+              :dataSource="item.data"
               @zoom="handelZoom"
             >
             </LineChart>
@@ -207,92 +111,7 @@ export default {
         { label: 'user-defined', value: 0 },
       ],
       userDefined: false,
-      data1: {
-        xData: [],
-        data: [],
-      },
-      data2: {
-        xData: [],
-        data: [],
-      },
-      data3: {
-        xData: [],
-        data: [],
-      },
-      data4: {
-        xData: [],
-        data: [
-          {
-            name: 'Disk BPS Read',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-          {
-            name: 'Disk BPS Write',
-            data: [25, 13, 32, 18, 45, 27, 36],
-          },
-        ],
-      },
-      data5: {
-        xData: [],
-        data: [
-          {
-            name: 'Disk IOPS Read',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-          {
-            name: 'Disk IOPS Write',
-            data: [25, 13, 32, 18, 45, 27, 36],
-          },
-        ],
-      },
-      data6: {
-        xData: [],
-        data: [
-          {
-            name: 'Disk Usage Utilization',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-          {
-            name: 'Lnode Utilization',
-            data: [25, 13, 32, 18, 45, 27, 36],
-          },
-        ],
-      },
-      data7: {
-        xData: [],
-        data: [
-          {
-            name: 'VPC PublicIP Lnterner in Rate',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-          {
-            name: 'VPC PublicIP Lnterner Out Rate',
-            data: [25, 13, 32, 18, 45, 27, 36],
-          },
-        ],
-      },
-      data8: {
-        xData: [],
-        data: [
-          {
-            name: 'Intranet in Rete',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-          {
-            name: 'Intranet Out Rete',
-            data: [25, 13, 32, 18, 45, 27, 36],
-          },
-        ],
-      },
-      data9: {
-        xData: [],
-        data: [
-          {
-            name: 'Intranet Out Rete',
-            data: [15, 23, 22, 28, 35, 47, 26],
-          },
-        ],
-      },
+      chartDatas: [],
       visible: false,
       modalTitle: '',
       myLine: null,
@@ -320,74 +139,57 @@ export default {
       getAction('/alarmItem/alarmItems', params).then((res) => {
         if (res.success) {
           this.MonitorItem = res.result
+          this.chartDatas = Object.entries(this.MonitorItem).map(([k, v]) => ({
+            title: k,
+            value: v,
+            xData: [],
+            data: [],
+          }))
           this.getMonitorData()
         }
       })
     },
     // 获取监控项的数据
     getMonitorData() {
-      for (const key in this.MonitorItem) {
-        if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
-          const element = this.MonitorItem[key]
-          let params = {
-            itemId: element,
-            itemType: 0,
-            start: this.queryParams.startDate,
-            end: this.queryParams.endDate,
-          }
-          if (key === 'cpuUtilization') {
-            this.getMonitorItemData(params).then((res) => {
-              this.data1.xData = res.xData
-              this.data1.data = [
-                {
-                  name: res.name,
-                  data: res.data,
-                },
-              ]
-            })
-          } else if (key === 'memoryUtilization') {
-            this.getMonitorItemData(params).then((res) => {
-              this.data2.xData = res.xData
-              this.data2.data = [
-                {
-                  name: res.name,
-                  data: res.data,
-                },
-              ]
-            })
-          } else if (key === 'load') {
-            this.getMonitorItemData(params).then((res) => {
-              this.data3.xData = res.xData
-              this.data3.data = [
-                {
-                  name: res.name,
-                  data: res.data,
-                },
-              ]
-            })
-          }
+      this.chartDatas.forEach(async (item) => {
+        const params = {
+          itemId: item.value,
+          itemType: 0,
+          start: this.queryParams.startDate,
+          end: this.queryParams.endDate,
         }
-      }
-    },
-    getMonitorItemData(params) {
-      return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
-        // return res
-        if (res.success) {
-          let name = res.result.name
-          let xData = res.result.list.map((item) => {
-            return dateFormat(new Date(item.date * 1000), 'hh:mm')
-          })
-          let data = res.result.list.map((item) => {
-            return Number((item.value * 100).toFixed(2))
-          })
-          return {
-            name,
-            xData,
-            data,
-          }
+        try {
+          const res = await this.getMonitorItemData(params)
+          item.xData = res.xData
+          item.data = [
+            {
+              name: res.name,
+              data: res.data,
+            },
+          ]
+        } catch (error) {
+          console.error(error)
         }
       })
     },
+    async getMonitorItemData(params) {
+      const res = await getAction('/systemMonitor/queryItemHistory', params)
+      // return res
+      if (res.success) {
+        let name = res.result.name
+        let xData = res.result.list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        let data = res.result.list.map((item_1) => {
+          return Number(item_1.value.toFixed(2))
+        })
+        return {
+          name,
+          xData,
+          data,
+        }
+      }
+    },
     getBeforeHours(num) {
       let currentTime = moment()
       let oneHourAgo = moment().subtract(num, 'hours')