diff --git a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
new file mode 100644
index 000000000..1ed1b84fd
--- /dev/null
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)">
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
+            {{item.name}}
+          </div>
+          <div class="asset-name">
+            <span>{{item.severity?item.severity.name:'-'}} /
+              <span v-if="item.type === 1">{{ $t('project.metrics.metrics') }}</span>
+              <span v-else-if="item.type === 2">{{ $t('overall.logs') }}</span>
+              <span v-else-if="item.type === 3">SNMP trap</span>
+              <span v-else>-</span>
+            </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+export default {
+  name: 'alertRuleDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('alert.config.expr'),
+          prop: 'expr',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('alert.config.operator'),
+          prop: 'operator',
+          minWidth: 100,
+          show: true
+        }, {
+          label: this.$t('alert.config.threshold'),
+          prop: 'threshold',
+          minWidth: 100,
+          show: true
+        }, {
+          label: this.$t('alert.config.for'),
+          prop: 'last',
+          minWidth: 100,
+          show: true
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'description',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('alert.alert'),
+          prop: 'alertNum',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }, {
+          label: this.$t('alert.config.receiver'),
+          prop: 'receivers',
+          show: false,
+          minWidth: 100
+        },
+        {
+          label: this.$t('alert.notify'),
+          prop: 'method',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('config.dc.state'),
+          prop: 'state',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      if (!status || status === 1 || status == 0) { return '' }
+      const arr = status.toString(2).split('')
+      while (arr.length < 4) {
+        arr.unshift('0')
+      }
+      arr.pop()
+      let str = ''
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> DC</div>`
+        }
+        if (index === 1) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> ASSET</div>`
+        }
+        if (index === 2) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> ENDPOINT</div>`
+        }
+        // if (index === 3) {
+        //   str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
+        // }
+      })
+      return str
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .order-box{
+    display: flex;
+    height:40px;
+    padding: 0 15px;
+    line-height: 40px;
+    align-items: center;
+    /*.detail-select{*/
+    /*  height: 30px;*/
+    /*  line-height: 30px;*/
+    /*  flex: 1;*/
+    /*  /deep/ .el-input--small{*/
+    /*    height: 30px;*/
+    /*    line-height: 30px;*/
+    /*    background-color: rgba(9,30,66,0.08);*/
+    /*    border: none;*/
+    /*    color: #344563;*/
+    /*    input{*/
+    /*      height: 30px;*/
+    /*      line-height: 30px;*/
+    /*      background-color: rgba(9,30,66,0.08);*/
+    /*      border: none;*/
+    /*      color: #344563;*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-select:hover{*/
+    /*  /deep/ .el-input--small{*/
+    /*    input{*/
+    /*      background-color: rgba(9,30,66,0.13);*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-button{*/
+    /*  height: 28px;*/
+    /*  line-height: 28px;*/
+    /*  background-color: rgba(9,30,66,0.08);*/
+    /*  border: none;*/
+    /*  .nz-icon{*/
+    /*    color: #344563;*/
+    /*  }*/
+    /*}*/
+    /*.detail-button:hover{*/
+    /*  background-color: rgba(9,30,66,0.13);*/
+    /*}*/
+  }
+  .detail-row-box{
+    height: calc(100% - 40px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .detail-row{
+    width: 245px;
+    padding: 0px 0 0px 15px;
+    height: 60px;
+    border-bottom: 1px solid #E7EAED;
+    cursor: pointer;
+  }
+  .detail-row:last-of-type{
+    border-bottom: none
+  }
+  .detail-row-info{
+    display: flex;
+    height: 100%;
+    width: calc(100% - 15px);
+    justify-content:center;
+    flex-direction: column;
+    > div{
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+  }
+    .asset-name {
+      padding-left: 22px;
+      width: calc(100% - 22px);
+      font-size: 14px;
+      color: #999999;
+      font-weight: 400;
+    }
+  }
+  .selected{
+    background: #FFFBF6;
+  }
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index e9d81e9ce..71ec16baf 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -1,13 +1,85 @@
 <template>
   <div>
+    <nzDetailView
+      v-loading="detailViewLoading || tools.loading"
+      v-if="detailType !== 'list'"
+      :api="url"
+      ref="detailList"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
+      :from="fromRoute.alertRule"
+      :search-msg="searchMsg"
+      :detailType="detailType"
+      :detailViewRightObj="detailViewRightObj"
+      :dataLength="tableData.length"
+      @search="search"
+      @changeDetailType="changeDetailType"
+    >
+      <template v-slot:top-tool-left>
+        <!--        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />-->
+      </template>
+      <template v-slot:top-tool-right>
+        <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          ref="export"
+          id="model"
+          :params="searchLabel"
+          :params2="searchCheckBox"
+          :permissions="{
+                  import: 'asset_add',
+                  export: 'asset_view'
+                }"
+          class="top-tool-export margin-l-10 margin-r-10"
+          export-file-name="asset"
+          export-url="/asset/asset/export"
+          import-url="/asset/asset/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
+      </template>
+      <template v-slot:nz-detail-view-list>
+        <alertRuleDetail
+          class="data-detail"
+          ref="dataDetail"
+          :orderByFa="orderBy"
+          v-loading="tools.loading"
+          :detailViewRightObj="detailViewRightObj"
+          :api="url"
+          :table-data="tableData"
+          @detailViewRightShow = 'detailViewRightShow'
+          @orderDetail="orderDetail"
+        >
+        </alertRuleDetail>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <el-pagination
+          @current-change="pageNo"
+          :current-page.sync="pageObj.pageNo"
+          :page-size="20"
+          :total="pageObj.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
+            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
+          </template>
+        </el-pagination>
+      </template>
+    </nzDetailView>
     <nz-data-list
       ref="dataList"
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertRule"
-      :layout="['searchInput', 'elementSet', 'pagination']"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
       :search-msg="searchMsg"
       @search="search"
+      :detailType="detailType"
+      @changeDetailType="changeDetailType"
+      @getTableData="getTableData"
     >
       <template v-slot:top-tool-right>
         <button id="alert-add" v-has="'alertRule_add'" :title="$t('overall.createAlertRule')" class="top-tool-btn"
@@ -75,6 +147,10 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import alertRuleTable from '@/components/common/table/alert/alertRuleTable'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
+import nzDetailView from '@/components/common/detailView/nzDetailView'
+import detailViewMixin from '@/components/common/mixin/detailViewMixin'
+import alertRuleDetail from '@/components/common/detailView/list/alertRule/alertRuleDetail'
+import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
 
 export default {
   name: 'alertRule',
@@ -85,9 +161,12 @@ export default {
     nzDataList,
     'export-excel': exportXLSX,
     topToolMoreOptions,
-    alertSilenceBox
+    alertSilenceBox,
+    nzDetailView,
+    alertRuleDetail,
+    detailViewTopSearch
   },
-  mixins: [dataListMixin],
+  mixins: [dataListMixin, detailViewMixin],
   data () {
     return {
       url: 'alert/rule',
@@ -195,7 +274,9 @@ export default {
             item.receiverShow = temp
           })
           this.tableData = response.data.list
+          this.detailViewRightObj = this.tableData[0]
           this.pageObj.total = response.data.total
+          this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
               this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper