diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index e012f1347..3cc3af804 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -699,13 +699,14 @@ export default {
           pageSize:this.pageObj.pageSize,
           pageNo:this.pageObj.pageNo,
         }
-        let chart=null;
+        let chart;
         if(chartInfo){
           chart=Object.assign({},chartInfo)
         }else{
           chart=Object.assign({},this.chartInfo)
         }
-        if(chart&&chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
+        console.info(chart)
+        if(chart && chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
           let param=chart.param;
           if(param.endpointId&&param.endpointId != ''){
             queryParam.endpointId=param.endpointId;
@@ -729,7 +730,7 @@ export default {
             queryParam.state=param.state;
           }
         }
-
+        console.info(queryParam)
         this.startLoading(filterType);
         this.$get('/alert/message', queryParam).then(response => {
           if (response.code == 200) {
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 2260503ac..68e03be39 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -79,14 +79,26 @@
                   <!-- project的projectInfo的project详情-->
                   <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
                     <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <template v-if="item.type == 'project'">
-                        <span>{{projectKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
-                      </template>
-                      <template v-if="item.type == 'module'">
-                        <span>{{moduleKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
+                      <span>{{projectKey[key]}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
+                    </div>
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                      <template v-if="key == 'alertStat'">
+                        <div class="active-icon dark-red"></div>
+                        <span>{{value[0]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon red"></div>
+                        <span>{{value[1]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon orange"></div>
+                        <span>{{value[2]}}</span>
                       </template>
+                      <span v-else-if="projectKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
+                  </div>
+                  <!-- project的projectInfo的module详情-->
+                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <span>{{moduleKey[key]}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
                     </div>
                     <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                       <template v-if="key == 'alertStat'">
@@ -103,40 +115,29 @@
                         <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
                         <span>{{value[1]}}</span>&nbsp;&nbsp;
                       </template>
-                      <span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
-                      <span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <span v-else-if="moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
                     </div>
                   </div>
 
                   <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && projectKey[key]">
+                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
                     <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <template v-if="item.type == 'project'">
-                        <span>{{projectKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
-                      </template>
-                      <template v-if="item.type == 'module'">
-                        <span>{{moduleKey[key]}}</span>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
-                      </template>
+                      <span>{{endpointKey[key]}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
                     </div>
                     <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <template v-if="key == 'alertStat'">
-                        <div class="active-icon dark-red"></div>
-                        <span>{{value[0]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon red"></div>
-                        <span>{{value[1]}}</span>&nbsp;&nbsp;
-                        <div class="active-icon orange"></div>
-                        <span>{{value[2]}}</span>
-                      </template>
-                      <template v-else-if="key == 'endpointStat'">
-                        <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
-                        <span>{{value[0]}}</span>&nbsp;&nbsp;
-                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
-                        <span>{{value[1]}}</span>&nbsp;&nbsp;
-                      </template>
-                      <span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
-                      <span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
+                      <span v-else-if="endpointKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
+                  </div>
+                  <!-- endpoint-detail的endpointInfo的alert详情-->
+                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <span>{{key}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                    </div>
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                      <span>{{value ? value : "&nbsp;"}}</span>
                     </div>
                   </div>
                 </template>
@@ -359,7 +360,6 @@
         this.panelIdInner = panelId;
         this.data = chartItem;
         this.detail = detail;
-
         this.$nextTick(() => {
           this.$refs.scrollbar.update();
         });
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 72acc04e4..25505b6a7 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -101,13 +101,6 @@
                      :chart-data="item"
                      :chart-index="index"></chart-url>
 
-        <!--<chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                    @on-drag-chart="editChartForDrag"
-                    :panel-id="filter.panelId"
-                    :chart-index="index"
-                    :chart-data="item"
-                    :editChartId="'editChartId' + item.id"
-        ></chart-asset-info>-->
         <chart-detail v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                           :panel-id="filter.panelId"
                           :chart-index="index"
@@ -116,32 +109,6 @@
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
 
-        <!--<chart-endpoint-info v-if="item.type === 'endpointInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                    @on-drag-chart="editChartForDrag"
-                    :panel-id="filter.panelId"
-                    :chart-index="index"
-                    :chart-data="item"
-                    :detail="detail"
-                    :editChartId="'editChartId' + item.id"
-        ></chart-endpoint-info>-->
-
-        <!--<chart-alert-rule-info v-if="item.type === 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                    @on-drag-chart="editChartForDrag"
-                    :panel-id="filter.panelId"
-                    :chart-index="index"
-                    :chart-data="item"
-                    :detail="detail"
-                    :editChartId="'editChartId' + item.id"
-        ></chart-alert-rule-info>-->
-
-        <!--<chart-project-info v-if="item.type  === 'projectInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                    @on-drag-chart="editChartForDrag"
-                    :panel-id="filter.panelId"
-                    :chart-index="index"
-                    :chart-data="item"
-                    :editChartId="'editChartId' + item.id"
-        ></chart-project-info>-->
-
         <chart-alert-list :ref="'editChart'+item.id"
                           :panel-id="filter.panelId"
                           :chart-index="index"
@@ -182,7 +149,7 @@
       isModel: {type: Boolean, default: false},
       additionalInfo:{},
       draggable: {type: Boolean, default: true},
-      detail: Array
+      detail: Object
     },
     components: {
       chartAlertList,
@@ -1234,14 +1201,8 @@
         let detail = [];
         this.$refs['editChart'+chartInfo.id][0].showLoad();
         chartInfo.title = this.$t("project.chart.endpointInfo");
-        detail.push({title: this.$t("project.chart.basicTitle"), data: function() {
-          let data = {};
-          vm.detail.forEach(item => {
-            data[item.label] = item.value;
-          });
-          data[vm.$t("alert.list.state")] = "";
-          return data;
-        }()});
+        this.$set(this.detail, "state", "");
+        detail.push({title: this.$t("project.chart.basicTitle"), data: this.detail});
         let endpointId = this.additionalInfo.id;
         let alertMsg = new Promise((resolve, reject) => {
           this.$get('/alert/message?endpointId=' + endpointId).then(response => {
@@ -1269,6 +1230,7 @@
           });
         });
         alertMsg.then(result => {
+          console.info(detail);
           this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
         }, err => {
 
@@ -1399,6 +1361,7 @@
         }
       },
       getAlertListChartData:function(chartInfo,filterType){
+        this.$set(chartInfo, "param", {endpointId: this.additionalInfo.id});
         this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
       },
       getAlertRuleChartData(chartInfo) {
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 99f1b82e1..8a36db3d3 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -72,7 +72,7 @@
       from: String, //来自哪个页面
       tabList: Array, //动态页签列表
       targetTab: String, //展示哪个页签
-      detail: Array, //对象详情内容
+      detail: Object, //对象详情内容
       detailList: Array, //多个对象详情内容
 
       assetDetail: Array, //endpoint页的asset详情
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index 59bcf8d06..0bd447e1f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -83,7 +83,7 @@
       from: String,
       obj: Object,
       draggable: {type: Boolean, default: true},
-      detail: Array
+      detail: Object
     },
     data() {
       return {
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 6cddc5539..0f85f821d 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -502,10 +502,14 @@
         this.viewAsset = false;
       },
       convertToDetail(obj) {
-        let detail = [];
-        detail.push({label: "ID", value: obj.id});
+        let detail = {
+          id: obj.id,
+          alertName: obj.alertName,
+          expr: obj.expr
+        };
+        /*detail.push({label: "ID", value: obj.id});
         detail.push({label: this.$t("alert.alertName"), value: obj.alertName});
-        detail.push({label: this.$t("alert.config.expr"), value: obj.expr});
+        detail.push({label: this.$t("alert.config.expr"), value: obj.expr});*/
         let type = "";
         for (let i = 0; i < this.typeData.length; i++) {
           if (obj.type == this.typeData[i].key) {
@@ -513,21 +517,27 @@
             break;
           }
         }
-        detail.push({label: this.$t("alert.list.type"), value: type});
+        detail.type = type;
+        //detail.push({label: this.$t("alert.list.type"), value: type});
         let link = "";
         if (obj.type == 1 || obj.type == 2) {
           link = obj.linkObject.name;
         } else if (obj.type == 3) {
           link = obj.linkObject.host;
         }
-        detail.push({label: this.$t("alert.config.link"), value: link});
-        detail.push({label: this.$t("alert.config.for"), value: obj.last});
+        detail.link = link;
+        detail.last = obj.last;
+        /*detail.push({label: this.$t("alert.config.link"), value: link});
+        detail.push({label: this.$t("alert.config.for"), value: obj.last});*/
         let severity = this.severityData.filter((item, index) => {
           return obj.severity == item.key;
         })[0].value;
-        detail.push({label: this.$t("alert.severity"), value: severity});
+        detail.severity = severity;
+        detail.alertNum = obj.alertNum;
+        detail.description = obj.description;
+        /*detail.push({label: this.$t("alert.severity"), value: severity});
         detail.push({label: this.$t("alert.description"), value: obj.description});
-        detail.push({label: this.$t("alert.message"), value: obj.alertNum});
+        detail.push({label: this.$t("alert.message"), value: obj.alertNum});*/
         return detail;
       },
     },
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index f98ec82cd..f9d91b02c 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -654,14 +654,22 @@
         }
       },
       convertToDetail(obj) {
-        let detail = [];
-        detail.push({label: this.$t('project.project.project'), value: obj.project.name});
+        let detail = {
+          project: obj.project.name,
+          module: obj.module.name,
+          asset: obj.asset.host,
+          host: obj.host,
+          port: obj.port,
+          path: obj.path,
+          param: obj.param
+        };
+        /*detail.push({label: this.$t('project.project.project'), value: obj.project.name});
         detail.push({label: this.$t("project.module.module"), value: obj.module.name});
         detail.push({label: this.$t("asset.asset"), value: obj.asset.host});
         detail.push({label: this.$t("project.endpoint.host"), value: obj.host});
         detail.push({label: this.$t("project.endpoint.port"), value: obj.port});
         detail.push({label: this.$t("project.endpoint.path"), value: obj.path});
-        detail.push({label: this.$t("project.endpoint.param"), value: obj.param});
+        detail.push({label: this.$t("project.endpoint.param"), value: obj.param});*/
         return detail;
       },
       formatUpdateTime:function(date){