diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
index fc77df4ab..b17a5ab4d 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
@@ -40,8 +40,9 @@
           :showAllData="showAllData"
           v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
         ></chart>
-        <alertMessageInfoTab class="alert-message-info-tab">
-        </alertMessageInfoTab>
+        <alertMessageInfoTab
+          class="alert-message-info-tab"
+          :id="chartInfo.id" />
       </div>
       <div class="info-box-right">
         时间
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index 29100db04..36a7dd25f 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -1,21 +1,51 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" type="card">
+    <el-tabs v-model="activeName" type="card" v-if="nodata">
       <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
       <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
       <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
       <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
     </el-tabs>
+    <div v-else class="table-no-data">
+      <svg class="icon" aria-hidden="true">
+        <use xlink:href="#nz-icon-no-data-list"></use>
+      </svg>
+      <div class="table-no-data__title">No results found</div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'alertMessageInfoTab',
+  props: {
+    id: {
+      type: Number
+    }
+  },
   data () {
     return {
       activeName: '',
-      
+      nodata: false,
+      cardNames: [{
+        key: 'detail',
+        label: this.$t('overall.detail')
+      }]
+    }
+  },
+  mounted () {
+    this.getAlertMessageInfo()
+  },
+  methods: {
+    getAlertMessageInfo () {
+      this.nodata = false
+      this.$get('/alert/message/' + this.id).then(res => {
+        if (res.code === 200) {
+          console.log(res)
+        } else {
+          this.nodata = true
+        }
+      })
     }
   }
 }
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 3b01328dc..6cb3f9794 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -625,6 +625,7 @@ export default {
           }]
         }
       }
+      chartInfo.id = this.currentMsg.id
       chartInfo.name = this.currentMsg.alertRule.name
       chartInfo.isAlertMessage = true
       chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))