diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
index af9616d4..5c188c54 100644
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ b/src/assets/css/components/views/charts/chartRelationShipList.scss
@@ -103,12 +103,16 @@
         font-size: 12px;
         color: #FFFFFF;
         font-weight: 400;
-        text-align: center;
         border-radius: 2px;
         margin: 0 3px;
-        word-wrap: break-word;
+        width: 200px;
+        flex-wrap: wrap;
+        .ship-severity {
+          margin-bottom: 3px;
+        }
         .ship-body-list-security-alert {
-          padding: 1px 2px;
+          padding: 1px;
+          text-align: center;
         }
         .ship-body-list-security-length {
           margin: 0 10px 0 3px;
diff --git a/src/views/charts/charts/ChartRelationShip.vue b/src/views/charts/charts/ChartRelationShip.vue
index 1e9404f4..bbbb8fee 100644
--- a/src/views/charts/charts/ChartRelationShip.vue
+++ b/src/views/charts/charts/ChartRelationShip.vue
@@ -99,13 +99,11 @@
         <loading :loading="loadingAlert"></loading>
         <div class="ship-body-list-title">{{$t('relationShip.alert')}}</div>
         <div class="ship-body-list-value security">
-          <template v-if="entityData.showShipServerity">
-            <template v-for="(item, index) in entityData.shipSeverity" :key="index">
-              <template v-if="item.severityData && item.severityData.length > 0">
-                <span class="ship-body-list-security-alert" :class="iconClass(item)">{{ item.eventSeverity }}</span>
-                <span class="ship-body-list-security-length">{{ item.severityData.length }}</span>
-              </template>
-            </template>
+          <template v-if="shipSeverity.length > 0">
+            <span v-for="ship in shipSeverity" class="ship-severity">
+              <span class="ship-body-list-security-alert" :class="iconClass(ship)">{{ ship.eventSeverity }}</span>
+              <span class="ship-body-list-security-length">{{ ship.length }}</span>
+            </span>
           </template>
           <span v-else class="no-recent-alerts"><i style="font-size: 14px;" class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
         </div>
diff --git a/src/views/charts/charts/chart-relation-ship.js b/src/views/charts/charts/chart-relation-ship.js
index 37ba5a09..8b876af3 100644
--- a/src/views/charts/charts/chart-relation-ship.js
+++ b/src/views/charts/charts/chart-relation-ship.js
@@ -19,13 +19,13 @@ export default {
         chartOption: null,
         sentChart: null,
         receivedChart: null,
-        tableData: {},
-        shipSeverity: []
+        tableData: {}
       },
       chartOption: null,
       echartsArray: [],
       security: [],
-      performance: []
+      performance: [],
+      shipSeverity: []
     }
   },
   computed: {
@@ -166,48 +166,27 @@ export default {
 
     queryEntityDetailAll (urlObj, params, queryParams) {
       this.loadingAlert = true
-      get(urlObj.performanceUrl, queryParams).then(response => {
-        if (response.code === 200) {
-          this.performance = response.data.result
-        }
-      })
-      get(urlObj.securityUrl, queryParams).then(response => {
-        this.security = response.data.result
-      })
-      const severity = [...this.security, ...this.performance]
-      const criticalList = severity.filter(item => item.eventSeverity === 'critical')
-      const highList = severity.filter(item => item.eventSeverity === 'high')
-      const infoList = severity.filter(item => item.eventSeverity === 'info')
-      const mediumList = severity.filter(item => item.eventSeverity === 'medium')
-      const lowList = severity.filter(item => item.eventSeverity === 'low')
-      this.entityData.shipSeverity[0] = {
-        severityData: criticalList,
-        eventSeverity: 'critical'
-      }
-      this.entityData.shipSeverity[1] = {
-        severityData: highList,
-        eventSeverity: 'high'
-      }
-      this.entityData.shipSeverity[2] = {
-        severityData: infoList,
-        eventSeverity: 'info'
-      }
-      this.entityData.shipSeverity[3] = {
-        severityData: mediumList,
-        eventSeverity: 'medium'
-      }
-      this.entityData.shipSeverity[4] = {
-        severityData: lowList,
-        eventSeverity: 'low'
-      }
-      this.entityData.shipSeverity.forEach(item => {
-        if (item.severityData.length > 0) {
-          this.entityData.showShipServerity = true
-        } else {
-          this.entityData.showShipServerity = false
-        }
-        this.loadingAlert = false
+      this.shipSeverity = []
+      const performance = get(urlObj.performanceUrl, queryParams)
+      const security = get(urlObj.securityUrl, queryParams)
+      Promise.all([performance, security]).then(res => {
+        const alertEventSeverity = ['critical', 'high', 'medium', 'info', 'low']
+        const alertAll = [...res[0].data.result, ...res[1].data.result]
+        alertEventSeverity.forEach(d => {
+          const eventArray = alertAll.filter(p => d === p.eventSeverity)
+          const eventArrayTwo = eventArray.find(t => d === t.eventSeverity)
+          if (eventArrayTwo) {
+            const eventObject = Object.keys(eventArrayTwo).map(e => {
+              return {
+                eventSeverity: eventArrayTwo[e],
+                length: eventArray.length
+              }
+            })
+            this.shipSeverity.push(...eventObject)
+          }
+        })
       })
+      this.loadingAlert = false
     },
     getBasicProperties (urlObj, params, queryParams) {
       this.loadingIp = true