fix: chartbox回显、单值类型图表等修复

1.chartbox回显；
2.单值类型图表；
3.project-module列表显示优化（字数多会错位）；

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -107,7 +107,7 @@
       <chart ref="endpointChart" :unit="chartUnit"></chart>
     </el-dialog>
 
-    <chart-box v-if="rightBox.show" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
+    <chart-box v-if="rightBox.show" @close="rightBox.show = false" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
   </span>
 </template>
 
@@ -167,21 +167,27 @@
         this.rightBox.show = true;
         this.$nextTick(() => {
           this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-          this.$refs.addChartModal.show(true);
+          let chart = {
-          let metricInfo = {};
+            id:'',
-          metricInfo.elements = [];
+            title: '',
-          //console.info("aaa", this.selectedEndpoints)
+            type:'line',
-          for(let i = 0; i < this.selectedEndpoints.length; i++) {
+            span:12,
-            let type = 'expert';
+            height:'400',
-            // if (this.selectedEndpoints[i].type == '1') {
+            unit: this.chartUnit,
-            //   type = 'expert';
+            param:{
-            // } else if (this.selectedEndpoints[i].type == '2') {
+              url:'',
-            //   type = 'normal';
+              threshold:'',
-            // }
+            },
-            metricInfo.elements.push({expression: this.selectedEndpoints[i].element, type: type});
+            elements:[],
+            panel: '',
+            sync: 0
+          };
+          for (let i = 0; i < this.selectedEndpoints.length; i++) {
+            if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !=  '') {
+              chart.elements.push({chartId: "", expression: this.selectedEndpoints[i].element, type: 'expert'});
+            }
           }
-          this.$refs.addChartModal.createData(-1, metricInfo);
+          this.$refs.addChartModal.editData(chart);
-          this.$refs.addChartModal.setUnit(this.chartUnit)
         });
       },
       dropdownHandler(show) {

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -67,7 +67,7 @@
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
 
-    <chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+    <chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
   </div>
 </template>
 
@@ -217,9 +217,11 @@
       },
       // 编辑图表信息,打开编辑弹窗
       editData(data) {
-        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        this.rightBox.show = true;
-        this.$refs.addChartModal.show(true);
+        this.$nextTick(() => {
-        this.$refs.addChartModal.editData(data, this.panelId);
+          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+          this.$refs.addChartModal.editData(data, this.panelId);
+        });
       },
       // 移除图表:弹出确认框询问
       removeData(data,from) {

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -172,7 +172,7 @@
 
             <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
               <span>{{$t('alert.config.expr')}}</span>
-              <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
+              <span v-if="!isSingleStat" class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
             </div>
             <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
             <div v-if="!isUrl" class="line-100"></div>
@@ -181,7 +181,7 @@
               <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
             </el-row>
 
-            <el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+            <el-row v-if="!isUrl &&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
               <!--<chart-metric ref="chartTag"
                             :pointer="index"
                             :metric-list="metricList"
@@ -204,51 +204,31 @@
                 @removeExpression="removeExpression"
               ></promql-input>
               <el-row>
-                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                <template v-if="chart.type != 'singleStat'">
-                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                  <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
+                    {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
-                    <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+                    <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
-                  </el-popover>
+                      <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
-                </el-col>
+                    </el-popover>
-                <el-col style="width: calc(100% - 120px);">
+                  </el-col>
-                  <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
+                  <el-col style="width: calc(100% - 120px);">
-                </el-col>
+                    <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
+                  </el-col>
+                </template>
+                <template v-else>
+                  <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                    {{$t('dashboard.panel.chartForm.statistics')}}&nbsp;
+                  </el-col>
+                  <el-col style="width: calc(100% - 120px);">
+                    <el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">
+                      <el-option v-for="item in statisticsList" :key="item.id" :label="item.name" :value="item.id">
+                        <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+                      </el-option>
+                    </el-select>
+                  </el-col>
+                </template>
               </el-row>
             </el-row>
-
-            <el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
-              <chart-metric ref="chartTag"
-                            :has-legend="false"
-                            :is-single-stat="true"
-                            :pointer="index"
-                            :metric-list="metricList"
-                            :metricCascaderList="metricCascaderList"
-                            :metricAllData="metricAllData"
-                            :count-total="elements.length"
-                            @on-delete-target="deleteTarget"
-                            @sub-save-ok="subOk"
-                            @on-add-target-success="getTarget"
-              ></chart-metric>
-            </el-row>
-<!--
-            <el-form-item prop="param.statistics" v-show="isSingleStat">
-              <el-row :gutter="4">
-                <el-col :span="4">
-                  {{$t('dashboard.panel.chartForm.statistics')}}&nbsp;
-                </el-col>
-                <el-col :span="20">
-                  <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown-mini" v-model="chart.param.statistics" placeholder="" size="small">
-                    <el-option v-for="item in statisticsList" :key="item.id" :label="item.name" :value="item.id">
-                      <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-                    </el-option>
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-form-item>
--->
-            <!--<button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
-              <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
-            </button>-->
           </el-form>
         </el-scrollbar>
 
@@ -299,12 +279,46 @@
           show: false,
           title: this.$t('dashboard.panel.createChartTitle'),
         },
-
+        statisticsList:[
+          {
+            id:"min",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.min")
+          },
+          {
+            id:"max",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.max")
+          },
+          {
+            id:"average",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.average")
+          },
+          {
+            id:"total",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.total")
+          },
+          {
+            id:"first",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.first")
+          },
+          {
+            id:"last",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.last")
+          },
+          {
+            id:"range",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.range")
+          },
+          {
+            id:"different",
+            name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
+          },
+        ],
         promqlCount: 1,
         promqlKeys: [],
         elementIds: [],
         expressions: [],
         legends: [],
+        statistics: "",
 
         editInfo: {},
         chart: {
@@ -531,15 +545,8 @@
       esc() {
         this.rightBox.show = false;
         setTimeout(() => {
-          this.$parent.rightBox.show = false;
+          this.$emit("close");
         }, 200);
-        /*if (this.rightBox.show) {
-          this.rightBox.show = false;
-          //this.editParamBox.show = false;
-          this.$refs.chartForm.resetFields();//清空表单
-          this.panelName2 = '';
-          this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
-        }*/
       },
 
       /*metric部分相关方法--begin*/
@@ -721,10 +728,14 @@
               sync: this.chart.sync
             };
             if(this.chart.type === 'singleStat'){
-              params.param.statistics=target.statistics;
+              params.param.statistics=this.statistics;
+            } else {
+              delete params.param.statistics;
             }
             if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
               params.param.threshold=this.chart.param.threshold;
+            } else {
+              delete params.param.threshold;
             }
             //生成指标数组
             const elements = [];
@@ -806,6 +817,11 @@
               item.saveTarget(index);
             });
           }*/
+          if(this.chart.type == 'singleStat'){
+            this.$set(this.chart.param, "statistics", this.statistics);
+          } else {
+            delete this.chart.param.statistics;
+          }
           if (this.expressions[0]) {
             this.chart.elements = [];
             this.expressions.forEach((expr, i) => {
@@ -921,9 +937,7 @@
             });
 
           } else {
-            console.log(this.$refs)
             this.$nextTick(() => {
-
               this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
             });
           }
@@ -956,11 +970,16 @@
       // 编辑chart时使用, set_tdata
       editData(data, panelId) {
         //alert('data='+JSON.stringify(data)+"=="+panelId);
-        this.panelId = panelId;
+        if (!panelId) {
-        let temp = this.panelData.filter((item) => {
+          this.panelId = 0;
-          return item.id == panelId;
+          this.panelName2 = "";
-        });
+        } else {
-        this.panelName2 = temp[0].name;
+          this.panelId = panelId;
+          let temp = this.panelData.filter((item) => {
+            return item.id == panelId;
+          });
+          this.panelName2 = temp[0].name;
+        }
         this.isedit = true;
         //this.chartModal = true;
         this.editInfo = data;
@@ -976,27 +995,14 @@
           this.chart.param.url = data.param.url;
           this.setIsUrl();
           //this.elements = [1];
-        }else if(this.chart.type==='singleStat'){
-          this.setIsSingleStat();
-          /*this.elements = [];
-          bus.chartAddInfo.metricTarget = [];
-          data.elements.forEach((item, index) => {
-            this.elements.push(index);
-          });
-          this.$nextTick(() => {
-            const cSet = this.$refs.chartTag;
-            // 派发charttag数据
-            cSet.forEach((item, index) => {
-              item.setMdata(data.elements[index],data.param.statistics);
-            });
-          });*/
         }else if(this.chart.type==='alertLine'){
           this.chart.param=data.param;
           this.setIsAlertList();
           //this.elements=[1];
         }else{
-          if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
+          if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'||this.chart.type==='singleStat')&&data.param){
             this.chart.param.threshold=data.param.threshold;
+            this.chart.param.statistics = this.statistics = data.param.statistics;
           }else{
             this.chart.param.threshold='';
           }
@@ -1077,16 +1083,11 @@
               item.setNotSingleStat();
             });
           }*/
-        }else if(chartType==='singleStat'){
-          this.elements = [1];
-          this.setIsSingleStat();
-          /*if(this.$refs.chartTag){
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setSingleStat();
-            });
-          }*/
         }else if(chartType === 'alertList'){
           this.setIsAlertList();
+        }else if(chartType === 'singleStat'){
+          this.setIsSingleStat();
+          this.resetElements();
         }else {
           this.setIsOtherChart();
           if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
@@ -1099,6 +1100,12 @@
           }*/
         }
       },
+      resetElements() {
+        this.promqlKeys = [""];
+        this.expressions = [""];
+        this.legends = [];
+        this.elementIds = [];
+      },
       /*panel搜索建议*/
       panelSuggestion(queryString, callback) {
         let data = [];

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -193,7 +193,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
             </div>
 
         </div>
-        <chart-box v-if="rightBox.show" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
+        <chart-box v-if="rightBox.show" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
         <element-set
           :allowed-all="true"
           v-clickoutside="elementsetHide"
@@ -447,22 +447,35 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
       changeTableVisible: function () {
         this.tableVisible = !this.tableVisible;
       },
+      handleBox(show) {
+        this.rightBox.show = show;
+      },
       saveChart: function () {
         this.rightBox.show = true;
-        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+        this.$nextTick(() => {
-        //this.$refs.addChartModal.show(true);
+          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-        let metricInfo = {};
+          let chart = {
-        metricInfo.elements = [];
+            id:'',
-        // {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}
+            title: '',
-        for (let i = 0; i < this.expressions.length; i++) {
+            type:'line',
-          if (this.expressions[i] != '') {
+            span:12,
-            let type = 'expert';
+            height:'400',
-            metricInfo.metric = this.expressions[i];
+            unit: this.chartUnit,
-            metricInfo.elements.push({expression: this.expressions[i], type: type});
+            param:{
+              url:'',
+              threshold:'',
+            },
+            elements:[],
+            panel: '',
+            sync: 0
+          };
+          for (let i = 0; i < this.expressions.length; i++) {
+            if (this.expressions[i] !=  '') {
+              chart.elements.push({chartId: "", expression: this.expressions[i], type: 'expert'});
+            }
           }
-        }
+          this.$refs.addChartModal.editData(chart);
-        this.$refs.addChartModal.createData(-1, metricInfo);
+        });
-        this.$refs.addChartModal.setUnit(this.chartUnit)
       },
       createSuccess(type, response, param, panel) { //添加chart成功
         this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -104,7 +104,7 @@
     </left-menu>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
-    <chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+    <chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
   </div>
 </template>
 

nezha-fronted/src/components/page/project/project.vue

@@ -46,11 +46,11 @@
                 </div>
                 <template v-else>
                   <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
-                    <el-popover v-if="module.name.length > 16" trigger="hover" placement="top-start" :content="module.name" >
+                    <div :id="`module-${module.id}`" class="item-tip">
-                      <span slot="reference">{{module.name}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
-                    </el-popover>
+                      <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                    <span v-else>{{module.name}}</span>
+                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
-                    <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                    </div>
                   </div>
                 </template>
               </div>
@@ -195,7 +195,7 @@
       vm = this;
       return {
         loading: false,
-
+        ready: false,
         assetDetail: {}, //asset详情
         endpointDetail: [],
         targetTab: '',
@@ -782,10 +782,9 @@
       if (pageSize) {
         this.endpointPageObj.pageSize = pageSize
       }
-      //this.detailProjectInfo();
+      setTimeout(() => {
-      // setTimeout(()=>{
+        this.ready = true;
-      //   this.getEndpointTableData();
+      }, 300);
-      // }, 200);
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
@@ -830,6 +829,23 @@
       moduleListReloadWatch() {
         return this.$store.state.moduleListChange;
       },
+      itemTip() {
+        return function(id, content, ready) {
+          let className = "item-tip-show";
+          this.$nextTick(() => {
+            if (ready) {
+              let cellDom = document.querySelector(`#module-${id}`);
+              let spanDom = document.querySelector(`#module-${id}>span`);
+              if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+                document.querySelector(`#module-${id}>.el-popover`).classList.add(className);
+              } else {
+                document.querySelector(`#module-${id}>.el-popover`).classList.remove(className);
+              }
+            }
+          });
+          return "";
+        }
+      },
     },
     watch: {
       currentProjectChange:{
@@ -1071,6 +1087,17 @@
   .sub-side-bar-menu-edit{
     margin-right: 18px;
   }
+
+  .item-tip-hide {
+    display: none;
+    position: absolute;
+    bottom: 34px;
+    min-width: 50px;
+    white-space: normal;
+  }
+  .item-tip:hover>.item-tip-show {
+    display: block;
+  }
 </style>
 <style>
   /* begin--覆盖分页组件样式*/