diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index f76f97ab..103d3aa6 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -59,4 +59,5 @@
 @import './views/charts2/npmEventsHeader';
 @import './views/charts2/npmEventsByType';
 @import './views/charts2/npmRecentEvents';
+@import './views/charts2/npmAppEventTable';
 //@import '../chart';
diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
new file mode 100644
index 00000000..e52a083e
--- /dev/null
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -0,0 +1,135 @@
+.npm-app-event {
+  $blue:#046ECA;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .metric-select {
+    color:#575757;
+    display: flex;
+    margin-bottom: 10px;
+    flex-direction: row-reverse;
+    align-items: center;
+    .el-scrollbar {
+      width:100%;
+    }
+    span {
+      font-size: 12px;
+      font-weight: 400;
+    }
+    .option__select.select-column {
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+      border-radius: 2px;
+      .el-input__inner {
+        width: 100px;
+        height:24px;
+        padding-left: 8px;
+        font-size: 12px;
+        color: #2C72C6;
+        font-weight:400;
+      }
+    }
+    .option-popper {
+      margin-bottom:0px;
+      .el-select-dropdown__item.selected {
+        span{
+          color: #2C72C6 !important;
+        }
+      }
+    }
+  }
+  .npm-app-event-table {
+    height: calc(100% - 30px) !important;
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    padding: 1px;
+    .el-table__header-wrapper {
+      tr th {
+        padding: 4px 0;
+        .data-column__span {
+          font-family: NotoSansHans-Medium;
+          font-size: 12px;
+          color: #353636;
+          font-weight: 500;
+        }
+      }
+    }
+    .el-table__body-wrapper.is-scrolling-none {
+      tr td {
+        padding: 7.5px 0;
+      }
+    }
+  }
+  .data-app-event-table{
+    display: flex !important;
+    height: 20px;
+    line-height: 20px;
+    flex-direction: row;
+    align-items: center;
+    .data-severity {
+      font-size: 12px;
+      color: #353636;
+      font-weight: 400;
+      margin-left:6px;
+    }
+    .red-dot {
+      width:6px;
+      height:6px;
+      background: #E26154;
+      border-radius: 3px;
+      margin-right:4px;
+    }
+    .grey-dot {
+      opacity: 0.35;
+      background: #717171;
+      border-radius: 3px;
+      width:6px;
+      height:6px;
+      margin-right:4px;
+    }
+    .critical {
+      color: #E26154;
+      background: rgba(226,97,84, .18);
+    }
+    .high {
+      color: #E48E4D;
+      background: rgba(228,142,77, .18);
+    }
+    .info {
+      color: #88AF65;
+      background: rgba(136,175,101, .18);
+    }
+    .medium {
+      color: #E7B34E;
+      background: rgba(231,179,78, .18);
+    }
+    .low {
+      color: #DAC74B;
+      background: rgba(218,199,75, .18);
+    }
+    .data-applications {
+      font-size: 12px;
+      color: $blue;
+      font-weight: 400;
+    }
+    .data-eventType {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: $blue;
+      font-weight: 500;
+      background: #EBF1F4;
+      border-radius: 4px;
+      padding: 0 6px;
+      margin-right:10px;
+    }
+    .data-eventCount {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: #046ECA;
+      font-weight: 500;
+    }
+  }
+  .el-table--group::after,.el-table--border::after, .el-table::before {
+    height: 0px;
+  }
+}
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 31a0f546..cf174a13 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -25,6 +25,13 @@
          :chartData="chartData"
          :ref="`tab${chart.id}`"
     ></network-overview-tabs>
+    <npm-app-event-table @getChartData="getChartData"
+         v-else-if="chart.type === typeMapping.npm.appEventTable"
+         :time-filter="timeFilter"
+         :chart="chart"
+         :chartData="chartData"
+         :ref="`tab${chart.id}`"
+    ></npm-app-event-table>
     <network-overview-apps
         v-else-if="chart.type === typeMapping.networkOverview.appList"
         :chart="chart"
@@ -84,6 +91,7 @@ import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverv
 import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
 import NetworkOverviewApps from '@/views/charts2/charts/NetworkOverviewApps'
 import NpmTabs from '@/views/charts2/charts/NpmTabs'
+import NpmAppEventTable from '@/views/charts2/charts/NpmAppEventTable'
 import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
 import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
 import NpmMap from '@/views/charts2/charts/NpmMap'
@@ -111,7 +119,8 @@ export default {
     NetworkOverviewTabs,
     NetworkOverviewApps,
     NpmTabs,
-    NpmNetworkQuantity
+    NpmNetworkQuantity,
+    NpmAppEventTable
   },
   props: {
     chart: Object,
@@ -175,7 +184,7 @@ export default {
         }
         let requestUrl = url
 
-        if (this.chart.type === 601) {
+        if (this.chart.type === typeMapping.networkOverview.table) {
           const chartObj = this.$refs['tab' + this.chart.id]
           requestUrl = url || chartObj.getCurUrl()
           this.queryParams = {
diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js
index 9e3fa407..e8f66e8d 100644
--- a/src/views/charts2/chart-tools.js
+++ b/src/views/charts2/chart-tools.js
@@ -14,6 +14,7 @@ export const typeMapping = {
     npmTabs: 704,
     npmEventsHeader: 705,
     npmNetworkQuantity: 703,
-    npmRecentEvents: 602
+    npmRecentEvents: 602,
+    appEventTable: 603
   }
 }
diff --git a/src/views/charts2/charts/NpmAppEventTable.vue b/src/views/charts2/charts/NpmAppEventTable.vue
new file mode 100644
index 00000000..013fc4b8
--- /dev/null
+++ b/src/views/charts2/charts/NpmAppEventTable.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="npm-app-event">
+    <div class="metric-select" >
+      <el-select v-model="metric"
+                 class="option__select select-column"
+                 popper-class="option-popper metric-select"
+                 :popper-append-to-body="false"
+                 key="tabMetric"
+                 @change="changeMetric"
+                 size="mini"
+                 width="100">
+        <el-option
+                v-for="item in options"
+                :key="item.label"
+                :label="item.label"
+                :value="item.value"
+        />
+      </el-select>
+      <span>{{$t('network.metric')}}：</span>
+    </div>
+    <el-table
+            :id="`tabTable_${index}`"
+            :ref="`dataTable_${index}`"
+            :data="tableData"
+            class="npm-app-event-table"
+            height="100%"
+    >
+      <template v-for="(item, index) in customTableTitles" :key="index">
+        <el-table-column class="data-column">
+          <template #header>
+            <span class="data-column__span">{{$t(item.label)}}</span>
+          </template>
+          <template  #default="scope" :column="item">
+            <div class="data-app-event-table">
+              <template v-if="item.prop === 'applications'">
+                <span class="data-applications">{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'severity'">
+                <template v-if="scope.row[item.prop]==='Critical'">
+                  <div v-for="item in 5" class="red-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='High'">
+                  <div v-for="item in 4" class="red-dot"></div>
+                  <div class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Medium'">
+                  <div v-for="item in 3" class="red-dot"></div>
+                  <div v-for="item in 2" class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Low'">
+                  <div v-for="item in 2" class="red-dot"></div>
+                  <div v-for="item in 3" class="grey-dot"></div>
+                </template>
+                <template v-else-if="scope.row[item.prop]==='Info'">
+                  <div v-for="item in 1" class="red-dot"></div>
+                  <div v-for="item in 4" class="grey-dot"></div>
+                </template>
+                <span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
+              </template>
+              <template v-else-if="item.prop === 'eventType'">
+                <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>
+              </template>
+              <template v-else-if="item.prop === 'eventCount'">
+                <span class="data-eventCount">{{scope.row[item.prop]}}</span>
+              </template>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <span v-else>-</span>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NpmAppEventTable',
+  data () {
+    return {
+      metric: 'Application',
+      options: [
+        {
+          value: 'Application',
+          label: 'Application'
+        },
+        {
+          value: 'Provider',
+          label: 'Provider'
+        }
+      ],
+      dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
+      tableData: [
+        {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }, {
+          applications: 'High',
+          severity: 'High',
+          eventCount: 8,
+          eventType: ['dns error']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'high dns response time']
+        }, {
+          applications: 'Medium',
+          severity: 'Medium',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }, {
+          applications: 'Low',
+          severity: 'Low',
+          eventCount: 8,
+          eventType: ['http error', 'high dns response time']
+        }, {
+          applications: 'Info',
+          severity: 'Info',
+          eventCount: 8,
+          eventType: ['dns error', 'high dns response time']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error']
+        }, {
+          applications: 'Critical',
+          severity: 'Critical',
+          eventCount: 8,
+          eventType: ['dns error', 'http error', 'high dns response time']
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.applications', prop: 'applications' },
+        { label: 'network.severity', prop: 'severity' },
+        { label: 'network.eventType', prop: 'eventType' },
+        { label: 'network.eventCount', prop: 'eventCount' }
+      ]
+    }
+  },
+  computed: {
+  }
+}
+</script>