fix: Server Monitir -> Monitor修改

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"
+              :title="item.title"
-              layout="line1"
+              :layout="'line' + index"
-              :xData="data1.xData"
+              :xData="item.xData"
-              :dataSource="data1.data"
+              :dataSource="item.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"
               @zoom="handelZoom"
             >
             </LineChart>
@@ -207,92 +111,7 @@ export default {
         { label: 'user-defined', value: 0 },
       ],
       userDefined: false,
-      data1: {
+      chartDatas: [],
-        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],
-          },
-        ],
-      },
       visible: false,
       modalTitle: '',
       myLine: null,
@@ -320,65 +139,49 @@ 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) {
+      this.chartDatas.forEach(async (item) => {
-        if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
+        const params = {
-          const element = this.MonitorItem[key]
+          itemId: item.value,
-          let params = {
-            itemId: element,
           itemType: 0,
           start: this.queryParams.startDate,
           end: this.queryParams.endDate,
         }
-          if (key === 'cpuUtilization') {
+        try {
-            this.getMonitorItemData(params).then((res) => {
+          const res = await this.getMonitorItemData(params)
-              this.data1.xData = res.xData
+          item.xData = res.xData
-              this.data1.data = [
+          item.data = [
             {
               name: res.name,
               data: res.data,
             },
           ]
-            })
+        } catch (error) {
-          } else if (key === 'memoryUtilization') {
+          console.error(error)
-            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,
-                },
-              ]
-            })
-          }
-        }
         }
+      })
     },
-    getMonitorItemData(params) {
+    async getMonitorItemData(params) {
-      return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
+      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) => {
+        let data = res.result.list.map((item_1) => {
-            return Number((item.value * 100).toFixed(2))
+          return Number(item_1.value.toFixed(2))
         })
         return {
           name,
@@ -386,7 +189,6 @@ export default {
           data,
         }
       }
-      })
     },
     getBeforeHours(num) {
       let currentTime = moment()