feat:table添加统计字段&panel样式调整

nezha-fronted/package-lock.json

@@ -1945,12 +1945,6 @@
         "supports-color": "^5.3.0"
       }
     },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
-      "dev": true
-    },
     "check-types": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
@@ -2700,12 +2694,6 @@
         "which": "^1.2.9"
       }
     },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
-      "dev": true
-    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -3973,11 +3961,12 @@
       }
     },
     "echarts": {
-      "version": "4.8.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.1.tgz",
-      "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
+      "integrity": "sha512-JYn22Dolt2esY2jEzUsw1OxbobuW67oGjIoTjZO3rW89SWkfJ4kbrmC2OW9JjsBrD1rdkmaWBuZZ2HgmThyxJw==",
       "requires": {
-        "zrender": "4.3.1"
+        "tslib": "2.0.3",
+        "zrender": "5.0.3"
       }
     },
     "ee-first": {
@@ -7019,17 +7008,6 @@
       "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
       "dev": true
     },
-    "md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "dev": true,
-      "requires": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      }
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -12611,6 +12589,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -13601,15 +13584,6 @@
         }
       }
     },
-    "webpack-md5-hash": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/webpack-md5-hash/-/webpack-md5-hash-0.0.6.tgz",
-      "integrity": "sha512-HrQ0AJpeXHRa3IjsgyyEfTx8EqYs5y/4x/WklSYsNDcqBixHzCkrmJV5U+4ks+sx7ycKoIdqWLdyuk913FCS+Q==",
-      "dev": true,
-      "requires": {
-        "md5": "^2.0.0"
-      }
-    },
     "webpack-merge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
@@ -13619,12 +13593,6 @@
         "lodash": "^4.17.15"
       }
     },
-    "webpack-shell-plugin": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-shell-plugin/-/webpack-shell-plugin-0.5.0.tgz",
-      "integrity": "sha1-Kbih2A3erg3bEOcpZn9yhlPCx0I=",
-      "dev": true
-    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@@ -13895,15 +13863,6 @@
         }
       }
     },
-    "yazl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz",
-      "integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==",
-      "dev": true,
-      "requires": {
-        "buffer-crc32": "~0.2.3"
-      }
-    },
     "zip-stream": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
@@ -13928,20 +13887,13 @@
         }
       }
     },
-    "zip-webpack-plugin": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/zip-webpack-plugin/-/zip-webpack-plugin-2.0.0.tgz",
-      "integrity": "sha1-xQZn3uFd3ezaXyy7ozNjbdOj58I=",
-      "dev": true,
-      "requires": {
-        "webpack-sources": "^1.0.1",
-        "yazl": "^2.4.2"
-      }
-    },
     "zrender": {
-      "version": "4.3.1",
+      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.3.tgz",
-      "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
+      "integrity": "sha512-TVcN2IMdo7je3GEq/E4CER4AGBe/n50/izILdupppyHf/hVHuiXCRliqdu8+32Z1OmGg6RfKt5qQlkX+bOtU0g==",
+      "requires": {
+        "tslib": "2.0.3"
+      }
     }
   }
 }

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

@@ -1378,7 +1378,7 @@ li{
 }
 
 .right-box-form {
-  width: calc(100% - 30px);
+  width: calc(100% - 15px);
 }
 .right-box-add-endpoint .right-box-form {
   height: 100%;
@@ -1394,17 +1394,16 @@ li{
 }
 .right-box-form .one-third-form-item-left{
   display: inline-block;
-  width: 220px;
+  width: 170px;
 }
 .right-box-form .one-third-form-item-right{
-  margin-left: 10px;
   display: inline-block;
-  width: 110px;
+  width: 170px;
   .el-form-item__label{
     width: 20px !important;
   }
   .el-form-item__content{
-    margin-left: 20px !important;
+    //margin-left: 20px !important;
   }
 }
 .right-box-form>.el-form-item {
@@ -2282,7 +2281,7 @@ li{
   padding: 20px 20px 20px 0;
   border: 1px dashed #dfe7f2;
   width: calc(100% - 120px);
-  margin-left: 70px;
+  margin-left: 15px;
   position: relative;
 }
 .right-box-form .form-row-item .nz-icon-minus{

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

@@ -1,7 +1,7 @@
 <style scoped>
   .chartBox {
     float:left;
-    padding: 0px 10px 10px 0;
+    padding: 0px 2px 2px 0;
     position:relative;
     box-sizing: border-box;
   }
@@ -9,8 +9,8 @@
     text-align: center
   }
   .list-width{
-    width: calc(100% - 14px);
+    width: calc(100% - 2px);
-    padding: 5px 15px 5px 0px;
+    padding: 5px 5px 5px 0px;
     box-sizing: border-box;
     overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
     min-height: calc(100vh - 150px);
@@ -813,9 +813,9 @@
                   chartInfo.param.nullType=chartInfo.param.nullType||'connected';
                   query+='&nullType='+chartInfo.param.nullType;
                 }
-                if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+                // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
-                  return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+                //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-                }
+                // }
                 return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
               });
               // 一个图表的所有element单独获取数据
@@ -969,14 +969,15 @@
                                   sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
                                 }
                                 */
-                                let t_date = new Date(dpsItem[0] * 1000);
+                                // let t_date = new Date(dpsItem[0] * 1000);
-                                let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                                // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                                 tableData.push({//表格数据
                                   // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
                                   // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
                                   element: {element: host, alias: alias},
-                                  time: timeTmp,//采集时间
+                                  // time: timeTmp,//采集时间
-                                  value: dpsItem[1],//数值
+                                  // value: dpsItem[1],//数值
+                                  data:[dpsItem[0] * 1000, dpsItem[1]]
                                 });
                                 return [dpsItem[0] * 1000, dpsItem[1]];
                               });

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

@@ -393,6 +393,8 @@
         }
         this.data = chartItem;
         this.unit = chartDataFormat.getUnit(this.data.unit);
+        let statistics = chartItem.param.statistics;
+        seriesItem = this.getStatisticsResult(statistics,seriesItem)
         seriesItem && (seriesItem = seriesItem.map(item=>{
           if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
             let type=chartItem.param.valueMapping.type;
@@ -450,6 +452,91 @@
           this.endLoading();
         }
       },
+      getStatisticsResult(statistics,seriesItem){
+        let copy=JSON.parse(JSON.stringify(seriesItem));
+        let last,result;
+        last=copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0];
+        switch (statistics) {
+          case 'null':
+            return copy.map(item=>{
+              return {
+                element:item.element,
+                time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+                value:item.data[1]
+              }
+            })
+          case 'min':
+            result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0];
+            result = [{
+              element:result.element,
+              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:result.data[1],
+            }]
+            break;
+          case 'max':
+            result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0];
+            result = [{
+              element:result.element,
+              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:result.data[1],
+            }]
+            break;
+          case 'average':
+            copy = copy.map(t=>parseFloat(t.data[1]));
+            let sum = eval(copy.join('+'));
+            let avg = sum / copy.length;
+            result=[{
+              element:last.element,
+              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:avg
+            }]
+            break;
+          case 'total':
+            copy = copy.map(t=>parseFloat(t.data[1]));
+            let total = eval(copy.join('+'));
+            result=[{
+              element:last.element,
+              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:total
+            }]
+            break;
+          case 'first':
+            result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]
+            result = [{
+              element:result.element,
+              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:result.data[1],
+            }]
+            break;
+          case 'last':
+            result=last;
+            result = [{
+              element:result.element,
+              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:result.data[1],
+            }]
+            break;
+          case 'range':
+            let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})
+            let max = sort[0]
+            let min = sort[sort.length-1]
+            result=[{
+              element:last.element,
+              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:max.data[1] - min.data[1]
+            }]
+            break;
+          case 'different':
+            let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1];
+            result = [{
+              element:last.element,
+              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value:last.data[1] - first.data[1]
+            }]
+            break;
+        }
+        return result;
+      },
       // 数据排序
       tableDataSort(item) {
         this.orderBy = {order: item.order, prop: item.prop};

nezha-fronted/src/components/common/js/tools.js

@@ -14,7 +14,7 @@ export const clickoutside = {
     try{
       oldValue= JSON.parse(JSON.stringify(binding.value.obj));
     }catch (e) {
-    
+
     }
     function documentHandler(e) {
       if (el.contains(e.target)) {
@@ -59,7 +59,7 @@ export const clickoutside = {
         }
       }
     }
-    
+
     // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
     el.__vueClickOutside__ = documentHandler;
     document.addEventListener('mousedown', documentHandler);
@@ -80,9 +80,9 @@ function isEqual (o1, o2) {
     if (Object.keys(obj1).length !== Object.keys(obj2).length) {
       return false;
     }
-    
+
     for (var attr of Object.keys(obj1)) {
-      
+
       var t1 = obj1[attr] instanceof Object;
       var t2 = obj2[attr] instanceof Object;
       if (t1 && t2) {
@@ -142,25 +142,25 @@ export const bottomBoxWindow = {
     let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
     let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
     let resizeBarDom = document.querySelector(".sub-list-resize"); //拖动条
-    
+
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
     //点击时俩dom的初始高度：
     let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
-    
+
     mainModalDom.style.display = "block";
     resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
     resizeBarDom.style.display = "none";
     let resizeModalEndHeight;
     //点击时鼠标的Y轴位置
     let mouseInitialY = e.clientY;
-    
+
     document.onmousemove = (e) => {
       window.resizing = true;
       e.preventDefault();
       //得到鼠标拖动的距离
       let mouseMoveY = e.clientY-mouseInitialY;
       resizeModalEndHeight = subInitialHeight-mouseMoveY;
-      
+
       // 主、副列表高度限制
       if(resizeModalEndHeight > contentRightHeight-minHeight){
         resizeModalEndHeight = contentRightHeight-minHeight;
@@ -178,7 +178,7 @@ export const bottomBoxWindow = {
       resizeModalDom.style.display = "none";
       mainModalDom.style.display = "none";
       resizeBarDom.style.display = "";
-      
+
       //当主副列表可视区域小于一定值时，不展示内容
       if(contentRightHeight-resizeModalEndHeight <= contentHideHeight){
         if (vm.bottomBox.mainResizeShow) {
@@ -198,7 +198,7 @@ export const bottomBoxWindow = {
           vm.bottomBox.subResizeShow = true;
         }
       }
-      
+
       document.onmousemove = null;
       document.onmouseup = null;
     }
@@ -209,7 +209,7 @@ export const bottomBoxWindow = {
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
     //主列表
     document.querySelector(".main-list-with-sub").style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)';
-    
+
     //副列表
     document.querySelector(".sub-list").style.height = vm.bottomBox.mainListHeight ? contentRightHeight-vm.bottomBox.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
     setTimeout(() => {
@@ -256,7 +256,7 @@ export const bottomBoxWindow = {
         paginationTop.classList.add("display-none");
         paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
       }, 210);
-      
+
       // 主列表恢复全屏
       vm.bottomBox.mainResizeShow = vm.bottomBox.subResizeShow = true;
       document.querySelector('.main-list').style.height = "";
@@ -317,11 +317,11 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
 //chart-resize工具
 export const chartResizeTool = {
   minHeight: 200, //图表最小高度
-  chartPaddingTop: 10, //图表padding-top
+  chartPaddingTop: 2, //图表padding-top
-  chartBlankHeight: 12, //图表空白占位高度(padding-top + border)
+  chartBlankHeight:4, //图表空白占位高度(padding-top + border)
   chartTableBlankHeight: 6, //表格型图表额外空白占位高度
-  chartBlankWidth: 10, //图表空白占位宽度
+  chartBlankWidth: 2, //图表空白占位宽度
-  containerBlankWidth: 15, //容器空白占位宽度（#listContainer的padding）
+  containerBlankWidth: 5, //容器空白占位宽度（#listContainer的padding）
   titleHeight: 28, //标题dom高度
   stepHeight: 50, //单元高度
   timeouter:null,
@@ -352,27 +352,28 @@ export const chartResizeTool = {
     let titleHeight = this.titleHeight;
     let stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth);
     let stepHeight = this.stepHeight;
-    
+
     let mouseOriginalX = event.clientX; //鼠标初始坐标
     let mouseOriginalY = event.clientY;
     let originalWidth = stepWidth*data.span; //图表、阴影初始宽高
     let shadowNewWidth = originalWidth;
     let originalHeight = data.height;
     let shadowNewHeight = originalHeight;
-    
+
     //1.激活背景阴影
     shadow.classList.add("resize-shadow-active");
     //2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
     document.addEventListener("mousemove", moveListener);
     //3.鼠标松开，将resize-box宽高改为resize-shadow宽高，结束
     document.addEventListener("mouseup", mouseupListener);
-    
+
-    
+
     function moveListener(e) {
       let mouseX = e.clientX;
       let mouseY = e.clientY;
       //调整resize-box的宽高
       box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
+      console.log(originalHeight,mouseY,mouseOriginalY,(mouseY-mouseOriginalY),chartBlankHeight,(originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight))
       box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
       //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
       let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
@@ -387,14 +388,14 @@ export const chartResizeTool = {
       data.span = Math.round((box.offsetWidth+chartBlankWidth)/stepWidth);
       //请求后台，保存变更
       if (data.height != originalData.height || data.span != originalData.span) {
-        
+
         originalData.height = data.height;
         originalData.span = data.span;
         vm.$put("panel/" + vm.panelIdInner + "/charts/modify", originalData);
       }
       //关闭背景阴影
       shadow.classList.remove("resize-shadow-active");
-      
+
       document.removeEventListener("mousemove", moveListener);
       document.removeEventListener("mouseup", mouseupListener);
     }
@@ -428,7 +429,7 @@ export const chartResizeTool = {
       if (heightChange) {
         shadowNewHeight = shadow.offsetHeight+chartBlankHeight;
       }
-      
+
       if (widthChange || heightChange) {
         clearTimeout($self.timeouter)
         $self.timeouter=setTimeout(()=>{
@@ -442,7 +443,7 @@ export const chartResizeTool = {
         outerBox.style.height = `${shadow.offsetHeight+chartPaddingTop}px`;
         outerBox.style.width = `${parseFloat(shadow.style.width.split("px")[0])+chartBlankWidth}px`;
       }
-      
+
     }
   }
 };
@@ -519,7 +520,7 @@ export const tableSet = {
           case 'principal': return 'su.username';
           default : return prop;
         }
-      
+
       case 'alertMessage':
         switch(prop){
           case 'id': return'am.id';
@@ -530,7 +531,7 @@ export const tableSet = {
           case 'endAt': return'am.end_at';
           default : return prop;
         }
-      
+
       case 'project':
         switch(prop){
           case 'id': return'e.id';
@@ -543,7 +544,7 @@ export const tableSet = {
           // case 'path': return'e.path';
           default : return prop;
         }
-      
+
       case 'dc':
         switch(prop){
           case 'id': return'i.id';
@@ -551,7 +552,7 @@ export const tableSet = {
           case 'area': return'sa.name';
           default : return prop;
         }
-      
+
       case 'endpointTab':
         switch(prop){
           case 'id': return'e.id';
@@ -712,7 +713,7 @@ export function  getMetricTypeValue(queryItem,type){
       let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
       return last;
     case 'first':
-      let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length][1];
+      let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length-1][1];
       return first;
     case 'total':
       copy = copy.map(t=>parseFloat(t[1]));
@@ -727,6 +728,6 @@ export function blankPromise() {
 
 export function clickLegend(echart,legendName,index){
   if(echart){
-  
+
   }
 }

nezha-fronted/src/components/common/language/cn.js

@@ -179,6 +179,7 @@ const cn = {
           last:'Last',
           range:'Range',
           different:'Different',
+          null:'Null'
         },
         width: "宽",
         high: "高",

nezha-fronted/src/components/common/language/en.js

@@ -192,6 +192,7 @@ const en = {
           last:'Last',
           range:'Range',
           different:'Different',
+          null:'Null'
         },
         width:'Width', //"宽"
         high:'High', //"高"
@@ -423,7 +424,7 @@ const en = {
     assets: 'Assets',//'资产'
     editAsset: 'Edit asset',//'编辑资产'
     createAsset: 'New asset',//'编辑资产'
-    batchEditAsset:'Batch edit asset',
+    batchEditAsset:'Bulk edit',
     selectAsset:'Selected assets',
     host: "Host",
     state: 'State',//'状态'

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

@@ -1,6 +1,6 @@
 <style scoped>
   .el-row {
-    margin-bottom: 15px;
+    margin-bottom: 5px;
   }
   .el-row:last-child  {
     margin-bottom: 0;
@@ -43,8 +43,8 @@
     width: 100%;
   }
   .right-box-form .element-item.form-row-item{
-    width: calc(100% - 120px);
+    width: calc(100% - 60px);
-    padding: 20px 20px 20px 0;
+    padding: 5px 20px 0px 0;
   }
   /*metric样式--end*/
   .label-center{
@@ -64,7 +64,7 @@
     height: 100vh;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: 100;
   }
   /deep/ .el-color-picker{
     position: absolute;
@@ -259,17 +259,17 @@
             <el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
           </el-form-item>
 
-          <el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie' ">
+          <el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' ">
-              <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
+              <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-panelname">
                 <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
               </el-select>
           </el-form-item>
 
-          <el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
+          <!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
             <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
-          </el-form-item>
+          </el-form-item>-->
 
           <!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
           <!--<el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>-->
@@ -323,7 +323,7 @@
                         ></promql-input>
               -->
               <el-row>
-                  <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  <el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
                     {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                     <el-popover placement="top" trigger="hover" width="211">
                       <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
@@ -452,7 +452,7 @@
           </div>
           <div style="margin-bottom: 20px; width: 100%" ></div>
           <div style="display: flex;">
-            <span style="margin-left: 75px;"></span>
+            <span style="margin-left: 15px;"></span>
             <template v-for="item in sortedOptionKeys">
               <div style="flex: 1">
                 <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
@@ -506,6 +506,7 @@
   import {nzNumber} from "../../common/js/validate";
   import richTextEditor from "../../charts/richTextEditor";
   import selectPanel from "../../common/popBox/selectPanel";
+  import i18n from "../../common/i18n";
 
   var rz = {
     methods: {
@@ -1042,7 +1043,7 @@
             this.$refs.alertParamBox.saveParam();
             return ;
           }
-          if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'){
+          if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'||this.editChart.type == 'table'){
             // this.$set(this.editChart.param, "statistics", this.statistics);
           } else {
             delete this.editChart.param.statistics;
@@ -1351,9 +1352,11 @@
         }else if(chartType === 'alertList'){
           this.setIsAlertList();
         }else if(chartType === 'singleStat' || chartType==='pie') {
-          this.setIsSingleStat();
+
-          this.resetElements();
+          if(chartType == 'singleStat'){
-          this.statistics='',
+            this.setIsSingleStat();
+            this.resetElements();
+          }
           this.editChart.param={
             statistics:'last',
             valueMapping:{
@@ -1369,7 +1372,7 @@
           }else if(chartType == 'table'){
             this.$set(this.editChart.param,'last',0)
             this.editChart.param={
-              statistics:'',
+              statistics:'last',
               nullType:'connected',
               valueMapping:{
                 type:'value',
@@ -1377,6 +1380,9 @@
               }
             }
             this.showPicker=[{bac:false,text:false}];
+            this.statisticsList = JSON.parse(JSON.stringify(this.statisticsList));
+            this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
+
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1443,8 +1449,7 @@
                 // params.param.statistics=this.statistics;
                 params.param.valueMapping=this.editChart.param.valueMapping;
               }
-              console.log(this.editChart)
+              if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'&& this.editChart.type != 'table'){
-              if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'){
                 delete params.param.statistics;
               }
               if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){
@@ -1455,7 +1460,6 @@
                 }
                 params.param.nullType=this.editChart.param.nullType;
                 params.param.legendValue=this.editChart.param.legendValue;
-                params.param.last=this.editChart.param.last;
               } else {
                 delete params.param.threshold;
                 delete params.param.nullType;

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

@@ -22,7 +22,7 @@
           <!--right-box里的样式-->
           <template v-if="styleType == 2">
             <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1" style="width: 100%;">
-              <el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':left, 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
+              <el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
                 <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
                   <el-dropdown-menu style="display: none"></el-dropdown-menu>
                   <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>

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

@@ -100,7 +100,7 @@
     <div class="table-list" id="tableList">
       <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
         <div class="box-content">
-          <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+          <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"  :class="{'show-top':showTopBtn}"></chart-list>
         </div>
       </div>
     </div>
@@ -840,12 +840,15 @@
   .table-list {
     margin-top: 0px;
     overflow-y: auto;
-    height: calc(100% - 92px);
+    height: calc(100% - 50px);
   }
 
   .box-content {
     position: relative;
     min-height: 100%;
+    .show-top:last-child{
+        margin-bottom: 50px;
+    }
   }
 
   /* end-chart list*/