feat: 详情类图表代码抽取重构，提高可读性易维护性

nezha-fronted/src/assets/stylus/main.scss

@@ -902,15 +902,19 @@ li{
   }
   25%{
     opacity: 0;
-    max-height: 125px;
+    max-height: 100px;
   }
   50%{
     opacity: 0;
-    max-height: 250px;
+    max-height: 200px;
   }
-  75%{
+  66%{
-    opacity: 0.4;
+    opacity: 0.2;
-    max-height: 375px;
+    max-height: 300px;
+  }
+  83%{
+    opacity: 0.5;
+    max-height: 400px;
   }
   100% {
     visibility: visible;
@@ -924,18 +928,21 @@ li{
     max-height: 500px;
     visibility: visible;
   }
-  25%{
+  16% {
-
+    opacity: 0.5;
-    opacity: 0.4;
+    max-height: 400px;
-    max-height: 375px;
+  }
+  33%{
+    opacity: 0.2;
+    max-height: 300px;
   }
   50%{
     opacity: 0;
-    max-height: 250px;
+    max-height: 200px;
   }
   75%{
     opacity: 0;
-    max-height: 125px;
+    max-height: 100px;
   }
   100% {
     visibility: hidden;

nezha-fronted/src/components/charts/chart-detail.vue

@@ -0,0 +1,221 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box" ref="resizeBox">
+      <div class="chart-container" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
+        <loading :ref="'localLoading' + chartIndex"></loading>
+        <div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
+          <el-popover
+            v-if="isError"
+            :close-delay="10"
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div>{{errorContent}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
+        </div>
+        <div ref="chartInfo" class="mt-10 chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
+          <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
+            <div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;">
+              <div class="chart-sub-title" @click="hideElement(index)">
+                <span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
+                <span>{{item.title}}</span>
+              </div>
+              <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
+                <div class="content-item" v-for="(value, key, i) in item.data">
+                  <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}`">
+                    <template v-if="data.type == 'endpointInfo' && key == $t('alert.list.state')">
+                      <span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
+                    </template>
+                    <template v-else>
+                      <span>{{value}}</span>
+                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, value, i, ready)">{{value}}</div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+      <span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
+    </div>
+    <!--preview -->
+    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
+  </div>
+</template>
+
+<script>
+  import loading from "../common/loading";
+  import timePicker from '../common/timePicker';
+  import chartPreview from './chartPreview';
+
+  export default {
+    name: 'chartDetail',
+    components: {
+      'loading': loading,
+      'time-picker': timePicker,
+      'chart-preview': chartPreview
+    },
+    props: {
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      }
+    },
+    data() {
+      return {
+        ready: false,
+        data: {}, // 该图表信息,chartItem
+        detail: [], //展示的详情
+        unit: {},
+        show: [0], //控制展开/隐藏
+        isError:false,
+        errorContent:'',
+        loading:Object,
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+        },
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dropdownMenuShow:false,
+        divFirstShow:false,
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+      };
+    },
+    methods: {
+      itemTip(type, content, index, ready) {
+        let className = "";
+        this.$nextTick(() => {
+          if (ready) {
+            let cellDom = document.querySelector(`#${type}-${index}`);
+            let spanDom = document.createElement("span");
+            spanDom.style.display = "inline-block";
+            spanDom.innerText = content;
+            cellDom.appendChild(spanDom);
+            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
+              className = "item-tip-show";
+            }
+            cellDom.removeChild(spanDom);
+            return className;
+          }
+        });
+        return className;
+      },
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e);
+      },
+      hideElement(index) {
+        if (this.show.indexOf(index) > -1) {
+          this.show.splice(this.show.indexOf(index), 1);
+        } else {
+          this.show.push(index);
+        }
+      },
+      startLoading(area){
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+      },
+      endLoading(area){
+        this.$refs['localLoading'+this.chartIndex].endLoading();
+      },
+      preview() {
+        this.$refs.chartsPreview.show(this.data);
+      },
+      resize() {
+        let container = document.querySelector('#chartInfoDiv' + this.chartIndex);
+        container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`;
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          this.resize();
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow = false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow = false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      clearChart(){
+        this.data = {};
+      },
+
+      // 设置数据, filter区分
+      setData(chartItem, detail, panelId, filter, area, errorMsg) {
+        //this.resize(chartItem);
+        if(errorMsg && errorMsg !== ''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        this.divFirstShow = true;
+
+        this.firstShow = true; // 展示操作按键
+
+        this.panelIdInner = panelId;
+        this.data = chartItem;
+        this.detail = detail;
+
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
+        this.endLoading();
+      },
+    },
+    mounted() {
+      this.firstLoad = false;
+      this.$nextTick(() => {
+        this.$refs.scrollbar.update();
+      });
+      setTimeout(() => {
+        this.ready = true;
+      }, 300);
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+  };
+</script>

nezha-fronted/src/components/charts/chart-list.vue

@@ -25,6 +25,7 @@
     cursor: se-resize;
     box-sizing: border-box;
     user-select: none;
+    z-index: 2000;
   }
   .vue-resizable-handle:after {
     border-right: 2px solid #555;
@@ -52,8 +53,8 @@
                  scroll:true,
                  filter: '.drag-disabled',
                  scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                 animation:150,
+                 animation: 150,
-                 handle:'.chartTitle'
+                 handle: '.chart-title'
                }"  >
       <div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable}">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
@@ -79,15 +80,15 @@
                      :chart-index="index"></chart-single-stat>
 
         <chart-table v-if="item.type === 'table'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-          @on-refresh-data="refreshChart"
+                      @on-refresh-data="refreshChart"
-          @on-search-data="searchData"
+                      @on-search-data="searchData"
-          @on-remove-chart-block="removeChart"
+                      @on-remove-chart-block="removeChart"
-          @on-duplicate-chart-block="duplicateChart"
+                      @on-duplicate-chart-block="duplicateChart"
-          @on-drag-chart="editChartForDrag"
+                      @on-drag-chart="editChartForDrag"
-          @on-edit-chart-block="editData"
+                      @on-edit-chart-block="editData"
-          :panel-id="filter.panelId"
+                      :panel-id="filter.panelId"
-          :chart-data="item"
+                      :chart-data="item"
-          :chart-index="index"></chart-table>
+                      :chart-index="index"></chart-table>
 
         <chart-url v-if="item.type === 'url'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                      @on-refresh-data="refreshChart"
@@ -100,39 +101,46 @@
                      :chart-data="item"
                      :chart-index="index"></chart-url>
 
-        <chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <!--<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-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"
+                          @on-refresh-data="refreshChart"
+                          :chart-data="item"
+                          :editChartId="'editChartId' + item.id"
+        ></chart-detail>
 
-        <chart-endpoint-info v-if="item.type === 'endpointInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <!--<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-endpoint-info>-->
 
-        <chart-alert-rule-info v-if="item.type === 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <!--<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-alert-rule-info>-->
 
-        <chart-project-info v-if="item.type  === 'projectInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <!--<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-project-info>-->
 
         <chart-alert-list :ref="'editChart'+item.id"
                           :panel-id="filter.panelId"
@@ -160,7 +168,8 @@
   import chartTable from './chart-table';
   import chartUrl from './chart-url';
   import chartSingleStat from './chart-single-stat';
-  import chartAssetInfo from './chart-asset-info'
+  import chartAssetInfo from './chart-asset-info';
+  import chartDetail from './chart-detail';
   import chartEndpointInfo from './chart-endpoint-info'
   import chartAlertRuleInfo from './chart-alert-rule-info'
   import chartProjectInfo from './chart-project-info'
@@ -178,6 +187,7 @@
     components: {
       chartAlertList,
       chartAssetInfo,
+      chartDetail,
       chartProjectInfo,
       lineChartBlock,
       chartTable,
@@ -351,10 +361,6 @@
         chartTitle.style.background = '#d8dce1';
 
       },
-      choose(event){
-        console.log('choose', event);
-        let chartTitle = event.item.querySelector('.chartTitle');
-      },
       clone(event){
         //console.log('clone',event );
         let canvas = event.item.querySelector('canvas');
@@ -375,18 +381,6 @@
           }
         }
       },
-      add(event){
-        console.log('add',event );
-      },
-      update(event){
-        console.log('update',event );
-      },
-      remove(event){
-        console.log('remove',event );
-      },
-      sort(event){
-        console.log('sort',event );
-      },
       dragPosition:function(e){
         console.log('===',e.clientY,e.clientX);
         let odiv=e;//目标元素e.target
@@ -442,13 +436,6 @@
         this.currentRecordNum = 0;
       },
       cleanData(){
-        /*if (this.dataList.length > 0 ) {
-          this.dataList.forEach((item) => {
-            if (this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id].length > 0) {
-              this.$refs['editChart'+item.id][0].clearData();
-            }
-          });
-        }*/
         this.dataList = [];
         this.chartDataCacheGroup.clear();
       },
@@ -549,7 +536,6 @@
       },
       // 获取panel详情数据,获取panel下所有chart列表
       getData(params) {
-        //param   目前没有用
         const param = {
           panelId: params.panelId,
           query: params.query,
@@ -567,7 +553,10 @@
             type: "alertRuleInfo",
             prev: 0,
             next: -9,
-            buildIn: 1
+            buildIn: 1,
+            draggable: false,
+            resizable: false,
+            editable: false,
           });
           this.dataList.push({
             id: -9,
@@ -610,7 +599,10 @@
             buildIn: 1,
             elements: [{
               expression: `up{endpoint="${this.additionalInfo.id}"}`
-            }]
+            }],
+            draggable: false,
+            resizable: false,
+            editable: false,
           });
           this.dataList.push({
             id: -9,
@@ -621,7 +613,10 @@
             type: "assetInfo",
             prev: -10,
             next: -8,
-            buildIn: 1
+            buildIn: 1,
+            draggable: false,
+            resizable: false,
+            editable: false,
           });
           this.dataList.push({
             id: -8,
@@ -643,6 +638,7 @@
           });
           return;
         }
+
         if (!param.query) delete param.query;
         //根据panelId获得panel下的所有图表
         this.$get('panel/'+ params.panelId+'/charts').then(response => {
@@ -675,6 +671,17 @@
               if (this.dataList.length > 0 ) {
                 this.dataList.forEach((item,index) => {
                   this.setChartSize(item, index);//设置该图表宽度
+                  if (param.from == "asset") {
+                    if (item.type == "assetInfo") {
+                      this.$set(item, "draggable", true);
+                      this.$set(item, "resizable", true);
+                    }
+                  } else if (param.from == "project") {
+                    if (item.type == "projectInfo") {
+                      this.$set(item, "draggable", true);
+                      this.$set(item, "resizable", true);
+                    }
+                  }
                   if(!item.isLoaded){
                     //获得当前显示在浏览器的图表，从后台获取数据
                     let chartBox = document.getElementById('chart-' + item.id);
@@ -914,7 +921,7 @@
                             dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
                             dpsArr = dpsArr.map(item => {
                               return [item[0], [item[1][0], Number(item[1][1])]]
-                            })
+                            });
                             // 判断是否有数据, && tagsArr.length > 0
                             if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
                               tagsArr.forEach((tag, i) => {
@@ -1173,18 +1180,6 @@
               return [dpsItem[0] * 1000, dpsItem[1]];
             });
             series.push(seriesItem.theData);
-
-          } else if (chartInfo.elements && chartInfo.elements[0]) {
-            // 无数据提示
-            /*
-          const currentInfo = chartItem.elements[innerPos];
-          const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-          this.$message.warning({
-            duration: 15,
-            content: errorMsg,
-            closable: true,
-          });
-          */
           }
         }
         if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
@@ -1232,90 +1227,71 @@
         }
       },
       getEndpointInfoChartData(chartInfo) {
+        let vm = this;
+        let detail = [];
+        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;
+        }()});
         let endpointId = this.additionalInfo.id;
         let alertMsg = new Promise((resolve, reject) => {
-          this.$get('/alert/message?endpointId='+endpointId).then(response=>{
+          this.$get('/alert/message?endpointId=' + endpointId).then(response => {
-            if(response.code == 200){
+            if (response.code == 200) {
-              resolve(response.data);
+              let alerts = {};
-            } else {
+              response.data && function () {
-              reject(false);
+                response.data.list.forEach(item => {
+                  let alertName = item.alertRule.alertName;
+                  let hasAlert = false;
+                  for (let alert in alerts) {
+                    if (alertName == alert) {
+                      hasAlert = true;
+                    }
+                  }
+                  if (hasAlert) {
+                    alerts[alertName]++;
+                  } else {
+                    alerts[alertName] = 1;
+                  }
+                });
+              }();
+              detail.push({title: this.$t("overall.alert"), data: alerts});
+              resolve(true);
             }
           });
         });
-        /*let endpointState = new Promise((resolve, reject) => {
+        alertMsg.then(result => {
-          let query = `up{endpoint="${endpointId}"}`;
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
-          this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(this.filter.start_time) + "&end=" + this.$stringTimeParseToUnix(this.filter.end_time) + '&step=' + bus.getStep(this.filter.start_time, this.filter.end_time)).then(response=>{
-            if(response.status == "success"){
-              resolve(response.data);
-            } else {
-              reject(false);
-            }
-          });
-        });*/
-        Promise.all([alertMsg]).then(result => {
-          //endpointInfo的告警信息
-          let alerts = [];
-          let data = result[0];
-          if (data.list) {
-            data.list.forEach(item => {
-              let index = -1;
-              let hasLabel = alerts.some((alert, i) => {
-                if (alert.label == item.alertRule.alertName) {
-                  index = i;
-                }
-                return alert.label == item.alertRule.alertName;
-              });
-              if (hasLabel) {
-                alerts[index].value++;
-              } else {
-                alerts.push({label: item.alertRule.alertName, value: 1});
-              }
-            });
-          }
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
-          //endpointInfo的state
-          /*data = result[1];
-          let state = [];
-          if (data.result && data.result[0] && data.result[0].values) {
-            state = data.result[0].values;
-          }
-
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts, state);*/
         }, err => {
 
         });
-        /*req.then(data => {
-          let alerts = [];
-          if (data && data.list) {
-            data.list.forEach(item => {
-              let index = -1;
-              let hasLabel = alerts.some((alert, i) => {
-                if (alert.label == item.alertRule.alertName) {
-                  index = i;
-                }
-                return alert.label == item.alertRule.alertName;
-              });
-              if (hasLabel) {
-                alerts[index].value++;
-              } else {
-                alerts.push({label: item.alertRule.alertName, value: 1});
-              }
-            });
-          }
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
-        });*/
       },
       getAssetInfoChartData(chartInfo){
+        let vm = this;
+        chartInfo.title = this.$t("asset.createAssetTab.assetInfo");
+        let detail = [];
         if(!this.isModel){
-          this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
+          this.$refs['editChart'+chartInfo.id][0].showLoad();
           let assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id;
           this.$get('/asset/info?id=' + assetId).then(response=>{
             if(response.code == 200){
-              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
+              response.data && function() {
-            }else{
+                response.data.Basic && detail.push({
-              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
+                  title: vm.$t('asset.createAssetTab.basicTitle'),
+                  data: response.data.Basic
+                });
+                response.data.Feature && detail.push({
+                  title: vm.$t('asset.createAssetTab.featureTitle'),
+                  data: response.data.Feature
+                });
+              }();
             }
-          })
+            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
+          });
         }else {
           let data={
             Basic:{
@@ -1353,62 +1329,112 @@
         }
       },
       getProjectInfoChartData(chartInfo){
+        let vm = this;
+        let detail = [];
         if(!this.isModel){
           this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
           this.$get('/project/info?id='+this.additionalInfo.id).then(response=>{
             if(response.code == 200){
-              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
+              response.data && function() {
-            }else{
+                response.data.basic && detail.push({
-              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
+                  title: vm.$t('project.chart.basicTitle'),
+                  data: response.data.basic
+                });
+                response.data.module && function() {
+                  response.data.module.forEach(d => {
+                    detail.push({
+                      title: `${vm.$t('project.module.module')}：${d.name}`,
+                      data: d
+                    });
+                  });
+                }();
+              }();
             }
+            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg);
           })
         }else {
-          let data={
+          detail.push({
-            basic: {
+            title: "system",
+            data: {
               id: 1,
               name: "system",
               remark: "描述信息",
               alertStat: [1,2,3],
-            },
+            }
-            module: [
+          });
-              {
+          detail.push({
-                id: 1,
+            title: `${this.$t("project.module.module")}：kafka`,
-                name: "kafka",
+            data: {
-                type: "http",
+              id: 1,
-                remark: "描述信息",
+              name: "kafka",
-                endpointStat: [3,23],
+              type: "http",
-                alertStat: [2,3,4],
+              remark: "描述信息",
-              },
+              endpointStat: [3,23],
-              {
+              alertStat: [2,3,4],
-                id: 2,
+            }
-                name: "kafkakafkakafkakafkakafkakafkakafka",
+          });
-                type: "http",
+          detail.push({
-                remark: "描述信息",
+            title: `${this.$t("project.module.module")}：kafkakafkakafkakafkakafkakafkakafka`,
-                endpointStat: [3,23],
+            data: {
-                alertStat: [2,0,4],
+              id: 2,
-              },
+              name: "kafkakafkakafkakafkakafkakafkakafka",
-              {
+              type: "http",
-                id: 3,
+              remark: "描述信息",
-                name: "kafkakafka",
+              endpointStat: [3,23],
-                type: "snmp",
+              alertStat: [2,0,4],
-                remark: "描述信息",
+            }
-                endpointStat: [3,0],
+          });
-                alertStat: [2,3,4],
+          detail.push({
-              },
+            title: `${this.$t("project.module.module")}：kafkakafka`,
-            ]
+            data: {
-          };
+              id: 3,
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+              name: "kafkakafka",
+              type: "snmp",
+              remark: "描述信息",
+              endpointStat: [3,0],
+              alertStat: [2,3,4],
+            }
+          });
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
         }
       },
       getAlertListChartData:function(chartInfo,filterType){
         this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
       },
       getAlertRuleChartData(chartInfo) {
-        this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
+        let vm = this;
-          if (response.code === 200) {
+        let detail = [];
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data);
+        let req = new Promise((resolve, reject) => {
-          }
+          this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
+            if (response.code == 200) {
+              response.data && function () {
+                for (let type in response.data) {
+                  if (type == "project" && response.data.project.length > 0) {
+                    detail.push({title: vm.$t("project.project.project"), data: convert(response.data.project)});
+                  } else if (type == "module" && response.data.module.length > 0) {
+                    detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
+                  } else if (type == "asset" && response.data.asset.length > 0) {
+                    detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
+                  } else if (type == "endpoint" && response.data.endpoint.length > 0) {
+                    detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
+                  }
+                }
+              }();
+              resolve(true);
+            }
+          });
         });
+        req.then(result => {
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
+        }, err => {});
+
+        function convert(d) {
+          let data = {};
+          d.forEach(item => {
+            data[item.name] = item.nums;
+          });
+          return data;
+        }
       },
 
       // 设置图表的尺寸
@@ -1552,7 +1578,7 @@
           //1.元素距离页面顶部的距离
           var mainOffsetTop = ele.offsetTop;//offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
           //2.元素的高度
-          var mainHeight = itemHeight//ele.offsetHeight;//itemHeight;
+          var mainHeight = itemHeight;//ele.offsetHeight;//itemHeight;
           //3.页面滚动的距离
           var windowScrollTop = scrollTop;//document.documentElement.scrollTop || document.body.scrollTop;
           //4.浏览器可见区域的高度
@@ -1575,7 +1601,7 @@
             let chartType = item.type;
             item.isLoaded = true;
             if(chartType!=='url'){
-              that.getChartDataForSearch(item,index);
+              that.getChartDataForSearch(item, index);
             } else {
               that.$refs['editChart'+item.id][0].showLoad(item);
             }

nezha-fronted/src/components/charts/chart.scss

@@ -198,63 +198,68 @@
       }
     }
   }
-  .chart-asset-info, .chart-project-info, .chart-alert-rule-info {
+  .chart-container {
-    .chart-info-container {
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chart-title:hover {
+      background-color:#d8dce1;
+    }
+    .chart-title:not(.drag-disabled) {
+      cursor: move;
+    }
+    .chart-title {
+      text-align: center;
+      width: 100%;
+      line-height: 30px;
+      height: 28px;
+      padding: 1px 3px 0 3px;
+      box-sizing: border-box;
+      .nz-chart-top{
+        width:100%;
+      }
+      .el-dropdown-link {
+        cursor: move;
+      }
+      .el-icon-arrow-down {
+        font-size: 12px;
+      }
+      .chart-title-text {
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 26px;
+        color: #333;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
+    .chart-info {
       padding-top: 6px;
+      width: 100%;
+      height: calc(100% - 10px);
     }
     .active-icon {
       margin: 0;
     }
-    .asset-info-content {
+    .chart-sub-title {
-      width: 100%;
-      height: calc(100% - 10px);
-    }
-    .asset-info-content-title {
       background-color: #efefef;
       font-size: 13px;
       color: #505255;
       padding-left: 2px;
       height: 25px;
       line-height: 25px;
+      user-select: none;
     }
-    .basic-content-asset.fold, .feature-content-asset.fold {
+    .chart-sub-content {
-      animation-name: fold-500; //该动画定义在main.scss里
-      animation-duration: 0.3s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-     }
-    .basic-content-project.init-no-animation {
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
-    .basic-content-project.fold, .feature-content-project.fold {
-      animation-name: fold-200; //该动画定义在main.scss里
-      animation-duration: 0.3s;
-      animation-iteration-count:1;
-      opacity: 0;
-      max-height: 0;
-      visibility: hidden;
-     }
-    .basic-content-asset.unfold, .feature-content-asset.unfold {
-      animation-name: unfold-500;
-      animation-duration: 0.3s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 500px;
-      visibility: visible;
-    }
-    .basic-content-project.unfold, .feature-content-project.unfold {
-      animation-name: unfold-200;
-      animation-duration: 0.3s;
-      animation-iteration-count:1;
-      opacity: 1;
-      max-height: 200px;
-      visibility: visible;
-    }
-    .basic-content, .feature-content {
       opacity: 0;
       max-height: 0;
       visibility: hidden;
@@ -360,6 +365,43 @@
         }
       }
     }
+    .init-no-animation {
+      opacity: 1;
+      max-height: 200px;
+      visibility: visible;
+    }
+    .fold-500 {
+      animation-name: fold-500; //该动画定义在main.scss里
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 0;
+      max-height: 0;
+      visibility: hidden;
+    }
+    .fold-200 {
+      animation-name: fold-200; //该动画定义在main.scss里
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 0;
+      max-height: 0;
+      visibility: hidden;
+    }
+    .unfold-500 {
+      animation-name: unfold-500;
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 1;
+      max-height: 500px;
+      visibility: visible;
+    }
+    .unfold-200 {
+      animation-name: unfold-200;
+      animation-duration: 0.2s;
+      animation-iteration-count:1;
+      opacity: 1;
+      max-height: 200px;
+      visibility: visible;
+    }
   }
   .chart-url {
     .url-container {