feat:新增功能

1.panel图表删除功能（图表删除及编辑界面删除）
2.panel图表修改功能
3.panel图表图例增加分页及长度自适应
fix:修改BUG
1.legen样式及位置调整调整
2.panel图表高设置无效
3.新增图表界面会显示图表列表里的4个操作图标

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

@@ -17,7 +17,7 @@
       ref="editChart" 
       @on-refresh-data=""
       @on-remove-chart-block="removeChart"
-      @on-edit-chart-block=""
+      @on-edit-chart-block="editData"
       :panel-id="filter.panelId" 
       :editChartId="'editChartId' + item.id"></line-chart-block>
 <!--
@@ -88,6 +88,7 @@ export default {
           }else {
             this.dataList = response.data;
           }
+          //alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
           this.dataSetFirst(this.dataList);
         }
       });
@@ -103,11 +104,11 @@ export default {
 
     // 获取一个图表具体数据,图表信息，图表位置index
     getChartData(chartInfo, pos, filterType) {
+      //alert(JSON.stringify(chartInfo));
       const chartItem = chartInfo;
       const index = pos; // 指标
       const len = chartItem.elements.length;
-      //this.setSize(chartItem.span, index); // 设置该图表宽度
+      this.setSize(chartItem.span, index); // 设置该图表宽度
-      this.setSize(chartItem.span,chartItem.height, index); // 设置该图表宽度,高度
       // 没有数据的设置提示信息暂无数据-针对每一个图
       if (len === 0) {
         this.$nextTick(() => {
@@ -170,7 +171,7 @@ export default {
                         metric_name: '',
                       };
                       // 图表中每条线的名字,后半部分
-                      let host = `${queryItem.metric.__name__}, `;//up,
+                      let host = `${queryItem.metric.__name__}{`;//up,
                       const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                       // 设置时间-数据格式对
                       const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
@@ -178,10 +179,11 @@ export default {
                       if (dpsArr.length > 0 && tagsArr.length > 0) {
                         tagsArr.forEach((tag, i) => {
                           if (tag !== '__name__') {
-                            host += i === 0 ? `${tag}=${queryItem.metric[tag]}` : ` ${tag}=${queryItem.metric[tag]},`;
+                            host += i === 0 ? `${tag}="${queryItem.metric[tag]}"` : `${tag}="${queryItem.metric[tag]}",`;
                           }
                         });
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                        host +="}";
                         legend.push(host);
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
@@ -254,11 +256,11 @@ export default {
       }
     },
     // 设置图表的宽度
-    setSize(size,height, index) {
+    setSize(size, index) {
       this.$nextTick(() => {
         const chartBox = document.getElementsByClassName('chartBox');
         chartBox[index].style.width = `${(size / 12) * 100}%`;
-        chartBox[index].style.height = height;
+        //chartBox[index].style.height = height;
       });
     },
 
@@ -269,29 +271,18 @@ export default {
     },
     // 删除图表
     removeChart(chartId) {
-      /*
       const chart = this.dataList.find(item => item.id === chartId);
       if (chart) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
+        this.$emit('on-remove-chart', chart);
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("panel?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              if(this.showPanel.id===u.id){
-                this.showPanel.id ='';
       }
-              this.getTableData();
+    },
-              this.rightBox.show = false;
+    // 编辑图表
-            } else {
+    editData(chartId) {
-              this.$message.error(response.msg);
+      // 获取该id下chart的相关信息
+      const chart = this.dataList.find(item => item.id === chartId);
+      if (chart) {
+        this.$emit('on-edit-chart', chart);
       }
-          })
-        });
-        //this.$emit('on-remove-chart', chart);
-      }*/
     },
     /*
     // 刷新列表中的一个图表
@@ -306,16 +297,6 @@ export default {
     refreshData() {
       this.getData(this.filter);
     },
-
-    // 编辑图表
-    editData(chartId) {
-      // 获取该id下chart的相关信息
-      const chart = this.dataList.find(item => item.id === chartId);
-      if (chart) {
-        this.$emit('on-edit-chart', chart);
-      }
-    },
-
      */
   },
 

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <div class="line-area" ref="lineChartArea" style=""></div>
+    <div class="line-area" ref="lineChartArea"  ></div>
     <!--
     <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-
     <el-dialog class="line-chart-block-modal"
@@ -126,9 +126,15 @@ export default {
       if ( chartInfo.type === 4) {//line,bar
         this.chartType = 'line';
       }
+      //alert(ele.style.height);
+     // ele.style.height= chartInfo.height;
 
+      //alert(chartInfo.height);
+
+      //alert(ele.style.height);
       //var myEchart = echarts.init(document.getElementById('lineChartArea'));
       this.echartStore = echarts.init(ele);
+      var chartWidth = ele.clientWidth;
       var option = {
         title: {
           text: chartInfo.title || null,
@@ -152,34 +158,67 @@ export default {
           confine:true
         },
         legend: {
+          type:'scroll',
+          height:80,
           show:true,
+          icon:"roundRect",
+          itemHeight:5,
+          itemWidth:15,
           formatter:function(name){
             if(!name){
               return '';
             }
-            if(name.length>5){
+            //计算宽度
-              return name.slice(0,5)+'...';
+            var span = document.createElement("span");
+            var result = {};
+            result.width = span.offsetWidth;
+            result.height = span.offsetHeight;
+            span.style.visibility = "hidden";
+            span.style.fontSize = 14;
+            span.style.fontFamily = "Arial";
+            span.style.display = "inline-block";
+            document.body.appendChild(span);
+            if(typeof span.textContent != "undefined"){
+              span.textContent = name;
+            }else{
+              span.innerText = name;
+            }
+            var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+            document.body.removeChild(span);
+
+            if(txtWidth < chartWidth){
+              return name;
+            }else {
+              var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+              return name.slice(0,charNum)+'...';
+              //return name;
             }
           },
           tooltip:{show:true},
           data: legend,
-          //orient:'vertical',
+          orient:'vertical',
           x:'center',
-          y:'top',
+          y:'bottom',
-          top:'5%',
+          //top:'5%',
           //bottom:0
         },
         grid: {
-
+          //height:"50%",
-          bottom: '10%',
+          //top: '13%',
-          containLabel: true
+          containLabel: false,
+          bottom:156
         },
         dataZoom: [{
-          type: 'inside',
+          type: 'slider',
+          show:true,
+          xAxisIndex: [0],
           start: 0,
           end: 100,
-          height:15
+          height:25,
-        }, {
+          bottom:96
+        }
+        /*
+        , {
           start: 0,
           end: 100,
           handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
@@ -191,7 +230,10 @@ export default {
             shadowOffsetX: 2,
             shadowOffsetY: 2
           }
-        }],
+
+
+        }
+        */],
 
         xAxis: {
           type: 'time',
@@ -217,7 +259,8 @@ export default {
           type: 'value',
           splitLine:{
             show:true
-          }
+          },
+          //boundaryGap:[0,0.2]
         },
         useUTC: false,//使用本地时间
         series: dataArg
@@ -328,6 +371,7 @@ export default {
         // eslint-disable-next-line
         this.echartStore.setOption(option);//显示全屏界面
       }
+      this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
     },
     // 设置数据, filter区分
     setData(chartItem, seriesItem, panelId, filter,legend) {
@@ -338,14 +382,22 @@ export default {
       this.data = chartItem;
       this.seriesItem = seriesItem;
       this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
+      /*
       if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
         this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
       }
+      */
     },
+
     // 删除该图表
     removeChart() {
       this.$emit('on-remove-chart-block', this.data.id);
-    }
+    },
+    // 编辑图表
+    editChart() {
+      this.$emit('on-edit-chart-block', this.data.id);
+    },
+
     /*
     handleClose(done) {
       /*
@@ -375,11 +427,6 @@ export default {
       this.highchartStore.showLoading();
       this.$emit('on-refresh-data', this.data.id);
     },
-    // 编辑图表
-    editChart() {
-      this.$emit('on-edit-chart-block', this.data.id);
-    },
-    },
     // 全屏查看
     showAllScreen() {
       // 初始化同步时间

nezha-fronted/src/components/common/rightBox/panelBox.vue

@@ -1,6 +1,6 @@
 <template key="panelBox">
   <transition name="right-box">
-    <div class="right-box right-box-panel" v-if="rightBox.show">
+    <div class="right-box right-box-panel z-top" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
@@ -141,5 +141,7 @@
 
 
 <style scoped>
-
+  .z-top{
+    z-index: 50;
+  }
 </style>

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

@@ -46,10 +46,13 @@
   .label-center{
     margin-top:6px;
   }
+  .z-top{
+    z-index: 50;
+  }
 </style>
 <template key="chartBox">
   <transition name="right-box">
-    <div class="right-box right-box-add-chart" v-if="rightBox.show" >
+    <div class="right-box right-box-add-chart z-top" v-if="rightBox.show" >
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
@@ -110,7 +113,7 @@
             <el-col :span="8">
               <div class="grid-content ">
                 <el-form-item  prop="heigh">
-                  <el-input-number :min="10" label=""   v-model="chart.height" placeholder="" size="small"></el-input-number>px
+                  <el-input-number :min="400" label=""   v-model="chart.height" placeholder="" size="small"></el-input-number>px
                 </el-form-item>
               </div>
             </el-col>
@@ -198,6 +201,7 @@
           show: false,
           title: this.$t('dashboard.panel.createChartTitle'),
         },
+        editInfo: {},
         chart: {
           id:'',
           title: '',
@@ -239,7 +243,7 @@
         spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
         // 是否为编辑已有信息
         isedit: false,
-        productId: 0,//不需要这个参数，可以删除
+        //productId: 0,//不需要这个参数，可以删除
         panelId: 0,
         metricList: [], // metric列表
         deleteIndex: '', // 要删除的指标模块
@@ -253,6 +257,9 @@
       show(show) {
         this.rightBox.show = show;
       },
+      setTitle(title) {
+        this.rightBox.title = title;
+      },
       save() {
         this.$refs['chartForm'].validate((valid) => {
           if (valid) {
@@ -287,10 +294,14 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("panel/"+u.id+"/charts").then(response => {
+          this.$delete("panel/"+this.panelId+"/charts?ids="+u.id).then(response => {
             if (response.code === 200) {
               this.esc();
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              //this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
+              this.$refs.chartForm.resetFields();//清空表单
+              this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
+              this.$emit('on-delete-success');
             } else {
               this.$message.error(response.msg);
             }
@@ -303,6 +314,8 @@
       esc() {
         this.rightBox.show = false;
         //this.editParamBox.show = false;
+        this.$refs.chartForm.resetFields();//清空表单
+        this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
       },
 
       /*metric部分相关方法--begin*/
@@ -373,18 +386,16 @@
       },
       // 更新图表
       updateCharts(params) {
-        /*
+        this.$put('panel/'+this.panelId+'/charts', params).then(response => {
-        const obj = params;
+          if (response.code === 200) {
-        obj.id = this.chartId;
+            this.esc();
-        updateCharts(obj).then((res) => {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-          if (res.status === 200) {
+            this.$refs.chartForm.resetFields();//清空表单
-            this.chartModal = false;
+            this.$emit('on-create-success', 'update', response.data,params);
-            this.initInfo();
+          } else {
-            this.$refs.chartInfo.resetFields();
+            this.$message.error(response.msg);
-            this.$emit('on-create-success', 'update', res.data);
           }
         });
-        */
       },
       // 获取每个tag组件内部校验后数据,点击生成图表时触发
       getTarget(target) {
@@ -423,7 +434,7 @@
             params.elements = elements;
             if (valid) {
               if (this.isedit) {
-                params.id = this.chartId;
+                params.id = this.chart.id;
                 this.updateCharts(params);
               } else {
                 this.addCharts(params);
@@ -460,6 +471,34 @@
         //this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
         this.initOpen(); // 获取metric, productId数据
       },
+      // 编辑chart时使用, set_tdata
+      editData(data, panelId) {
+        //alert('data='+JSON.stringify(data)+"=="+panelId);
+        this.panelId = panelId;
+        this.isedit = true;
+        //this.chartModal = true;
+        this.editInfo = data;
+        // 图表信息获取
+        this.chart.id = data.id;
+        this.chart.title = data.title;
+        this.chart.span = data.span;
+        this.chart.height = data.height;
+        this.chart.type = data.type;
+        this.getSuggestMetric();//获得指标列表
+        // 指标
+        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]);
+          });
+        });
+      },
 
       // 初始化信息
       initInfo() {

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

@@ -290,12 +290,105 @@ export default {
 
     // 编辑已有图表状态时，先填充数据
     setMdata(data) {
+      //alert('metricSetData'+JSON.stringify(data));
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
-      this.elementInfo.metric = data.metric;
+      if(this.target.type==='expert'){
-      this.selectMetric(); // 获取tag
+        this.tableShow = 2;
-      // this.proTags(data.tags);
+        this.elementInfo.type = this.target.type;
+        this.elementInfo.expression = this.target.expression;
+      }else {
+        this.tableShow = 1;
+        this.elementInfo.type = this.target.type;
+        //解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
+        var expression = this.target.expression;
+        //alert('expression=='+expression);
+        this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
+        //alert(this.elementInfo.metric);
+        //this.selectMetric(); // 获取tag
+        this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
+          this.elementInfo.selectedTagList = [];
+          this.elementInfo.tagList = [];
+          if (response.code === 200) {
+              //this.elementInfo.tagList = response.data.list;
+              if(response.data.list){
+                response.data.list.forEach((item) => {
+                  const tagObj = {
+                    name: item.name,
+                    isSelect:false//当前元素是否被选中，默认都未选中
+                  };
+                  this.elementInfo.tagList.push(tagObj);
+                });
+              }else {
+                response.data.forEach((item) => {
+                  const tagObj = {
+                    name: item.name,
+                    isSelect:false//当前元素是否被选中，默认都未选中
+                  };
+                  this.elementInfo.tagList.push(tagObj);
+                });
+              }
+
+            let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
+            this.stringToTags(labValArrStr);
+          }else {
+            this.elementInfo.tagList = [];
+          }
+        });
+      }
     },
+    //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
+    stringToTags(str) {
+      //alert("str=="+str);
+      let labArr = str.split(',');
+      labArr.forEach((item, index) => {//b=~'1|2|3'
+        let labName = item.substring(0,item.indexOf('='));
+        this.elementInfo.tagList.every((tagItem,index) => {
+          if(tagItem.name===labName){
+            tagItem.isSelect = true;
+            return false;
+          }else {
+            return true;
+          }
+        });
+
+        //查询metricLabel名称对应的LabelValue
+        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
+          const tagObj = {
+            name:labName,//选中的metricLabel名称
+            list:[],//metricLabel名称对应的LabelValue
+            value:[]//最终选择的值
+          };
+          let labVal = item.substring(item.indexOf('=')+1,item.length);
+          if(labVal.indexOf('~')!=-1){
+            labVal = labVal.substring(2,labVal.length-1);
+            let valArr = labVal.split('|');
+            valArr.forEach((labItem, labIndex) => {
+              tagObj.value.push(labItem);
+            });
+          }else {
+            labVal = labVal.substring(1,labVal.length-1);
+            tagObj.value.push(labVal);
+          }
+          if (response.code === 200) {
+            if(response.data.list){
+              response.data.list.forEach((resItem) => {
+                tagObj.list.push(resItem.value)
+              });
+              this.elementInfo.selectedTagList.push(tagObj);
+            }else{
+              response.data.forEach((resItem) => {
+                tagObj.list.push(resItem.value)
+              });
+              this.elementInfo.selectedTagList.push(tagObj);
+            }
+          }else {
+            this.elementInfo.selectedTagList.push(tagObj);
+          }
+        });
+      });
+    },
+
     clearHistory() {
       this.elementInfo.metric = '';
       this.setDataFlag = false;

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

@@ -25,7 +25,8 @@
 /* begin-chart list*/
   .table-list {
     margin-top: 10px;
-
+    overflow-y:auto;
+    height: 100%;
   }
   .box-content {
     position: relative;
@@ -100,7 +101,7 @@
           </el-option>
         </el-select>
       </div>
-      <div class="table-list"   style="overflow-y:auto;height: 100%;">
+      <div class="table-list"  >
         <div class="box-content">
           <chart-list
             @on-edit-chart="editData"
@@ -110,7 +111,7 @@
     </div>
 
     <panel-box :panel="panel"  @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
-    <chart-box  ref="addChartModal" @on-create-success="createSuccess"></chart-box>
+    <chart-box  ref="addChartModal" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
   </div>
 
 </template>
@@ -181,8 +182,8 @@
           end_time: '',
         },
         panelId: 0,
-        removeModal: false, // 删除弹出
+        //removeModal: false, // 删除弹出
-        deleteObj: {}, // 删除对象
+        //deleteObj: {}, // 删除对象
         //---图表相关参数--end
       }
     },
@@ -243,12 +244,30 @@
 
       // 编辑图表信息,打开编辑弹窗
       editData(data) {
-        this.$refs.addChartModal.editData(data, this.panelId, this.filter.productId);
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        this.$refs.addChartModal.show(true);
+        this.$refs.addChartModal.editData(data, this.showPanel.id);
       },
-      // 移除图表
+      // 移除图表:弹出确认框询问
       removeData(data) {
-        this.deleteObj = data;
+        this.$confirm(this.$t("tip.confirmDelete"), {
-        this.removeModal = true;
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("panel/"+data.panelId+"/charts?ids=" + data.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();//删除相关图表后，刷新面板数据
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      delChartOk(){
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
       },
       // 图表创建成功，回调panel页面，进行图表的刷新
       createSuccess(msg, data,params) {
@@ -289,17 +308,22 @@
         this.$get('panel', this.searchLabel).then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
-            if(this.panelData.length>0 ){
+            if( response.data.list.length>0 ){
-              this.filter.panelId = this.panelData[0].id;
+              if(this.showPanel.id===''){
-            }
-            if( response.data.list.length>0 && this.showPanel.id===''){
                 this.showPanel.id = response.data.list[0].id;
                 this.filter.panelId = this.showPanel.id;
+                this.getData(this.filter);
+              }
+              this.filter.panelId = this.showPanel.id;
+            }else {
+              this.showPanel.id ='';
+              this.filter.panelId='';
             }
             this.pageObj.total = response.data.total
-
+            if(this.panel.id===''||this.panel.id===this.showPanel.id){
               this.getData(this.filter);
             }
+          }
         })
 
       },
@@ -324,6 +348,7 @@
     },
     created() {
       this.getTableData();
+      this.getData(this.filter);
     },
     mounted: function() {
     },