feat: echarts/table类型图表

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

@@ -25,6 +25,7 @@
     right: 0;
     cursor: se-resize;
     box-sizing: border-box;
+    user-select: none;
   }
   .vue-resizable-handle:after {
     border-right: 2px solid #555;
@@ -1248,12 +1249,6 @@
           }
         });
       },
-      /*
-      // 刷新数据
-      refreshData() {
-        this.getData(this.filter);
-      },
-       */
       handleElementInViewport(ele,scrollTop,item,index,isSearch) {
         /*
         网页被卷去的高：document.body.scrollTop

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

@@ -150,6 +150,7 @@
 .resize-box {
   border: 1px solid #d8dce1;
   position: absolute;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   top: 0;
@@ -163,97 +164,108 @@
 .resize-shadow-active {
   background-color: #888;
 }
-.line-chart-block {
+.resize-box {
-  height: 100%;
+  .pagination {
-  position: relative;
+    padding-top: 0;
-  background-color: white;
-  .chartTitle:hover {
-    background-color:#d8dce1;
   }
-  .chartTitle {
+  .chart-table {
-    text-align: center;
     width: 100%;
-    line-height: 28px;
+    .table-container {
-    padding: 0 3px;
+      padding: 0 6px;
-    box-sizing: border-box;
+      box-sizing: border-box;
-    .nz-chart-top{
+      .nz-table {
-      width:100%;
+        margin-top: 6px;
-    }
+        box-sizing: border-box;
-    .el-dropdown-link {
-      cursor: move;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-    .chart-title {
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 26px;
-      color: #333;
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      .chart-title-text{
-        max-width:calc(100% - 20px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        cursor: pointer;
       }
-      .chart-title-icon{
+    }
-        display: inline-block;
+  }
-        cursor: pointer;
+  .line-chart-block, .chart-table {
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chartTitle:hover {
+      background-color:#d8dce1;
+    }
+    .chartTitle {
+      text-align: center;
+      width: 100%;
+      line-height: 28px;
+      padding: 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 {
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 26px;
+        color: #333;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        .chart-title-text{
+          max-width:calc(100% - 20px);
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
 
-  .line-area {
+    .line-area {
-    box-sizing: border-box;
+      box-sizing: border-box;
-    background: #FFF;
+      background: #FFF;
-    min-height: 95px;
+      min-height: 95px;
-    padding-left:8px;
+      padding-left:8px;
-    padding-right:8px;
+      padding-right:8px;
-  }
+    }
-  /*.edit:after{
+    .button-panel-height{
-    display: block;
+      height:26px;
-    content: "";
+    }
-    clear: both;
+    .button-panel-height button{
-  }*/
+      height:26px;
-  .button-panel-height{
+    }
-    height:26px;
+    .edit {
-  }
+      position: absolute;
-  .button-panel-height button{
+      right: 20px;
-    height:26px;
+      top: 17px;
-  }
+      z-index: 10;
-  .edit {
-    position: absolute;
-    right: 20px;
-    top: 17px;
-    z-index: 10;
 
-  }
+    }
-  .chart-select {
+    .chart-select {
-    position: absolute;
+      position: absolute;
-    left: 40px;
+      left: 40px;
-    top: 25px;
+      top: 25px;
-    z-index: 10;
+      z-index: 10;
-    font-size: 14px;
+      font-size: 14px;
-    .chart-select-btn {
+      .chart-select-btn {
-      margin-right: 10px;
+        margin-right: 10px;
-      cursor: pointer;
+        cursor: pointer;
-      &.active {
+        &.active {
-        color: #5aacff;
+          color: #5aacff;
+        }
       }
     }
-  }
+    /*没有数据显示*/
-  /*没有数据显示*/
+    .null {
-  .null {
+      position: absolute;
-    position: absolute;
+      top: 50%;
-    top: 50%;
+      width: 100%;
-    width: 100%;
+      text-align: center;
-    text-align: center;
+      font-size: 24px;
-    font-size: 24px;
+      font-weight: 600;
-    font-weight: 600;
+    }
   }
 }
 .dialog-tool {

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

@@ -4,7 +4,7 @@
 <template>
   <div class="nz-chart-resize">
     <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box" ref="resizeBox">
+    <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading  :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
@@ -16,16 +16,16 @@
             popper-class="chart-error-popper">
             <div >{{errorContent}}</div>
             <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
-            <i class="nz-icon nz-icon-warning fa"></i>
+              <i class="nz-icon nz-icon-warning fa"></i>
-            <span class="panel-info-corner-inner"></span>
+              <span class="panel-info-corner-inner"></span>
-        </span>
+           </span>
           </el-popover>
           <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{data.title}}</span>
               <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
-          </span>
+            </span>
             <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
               <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
                 <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
@@ -180,9 +180,6 @@
         showLegend:true,
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         oldSearchTime:[],
-        minHeight:200,
-        chartSpaceHeight:2,//top-border: 1,bottom-border: 1,padding-bottome:3
-        titleHeight:28,
         screenTitleHeight:58
       };
     },
@@ -366,7 +363,7 @@
           _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
             if (response.code === 200) {
               //更新当前图表数据
-              _this.data.span= span;
+              _this.data.span= span;re
               _this.data.height= containerHeight+_this.chartSpaceHeight;
               _this.$emit('on-drag-chart', _this.data);
             }else {
@@ -820,15 +817,15 @@
             setTimeout(function () {
               let divHeight = self.$refs.legendArea.offsetHeight;
               if(!chartInfo.height){
-                self.echartStore.resize({height:(400-divHeight-self.titleHeight-self.chartSpaceHeight)});
+                self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }else {
-                self.echartStore.resize({height:(chartInfo.height-divHeight-self.titleHeight-self.chartSpaceHeight)});
+                self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }
               self.echartStore.clear();
               self.echartStore.setOption(option);//创建图表
               self.$refs['localLoading'+self.chartIndex].endLoading();
               self.firstShow = true; // 展示操作按键
-            }, 100)
+            }, 100);
 
             window.addEventListener('resize', function () {
               self.echartStore.resize();
@@ -1042,11 +1039,6 @@
           */
         }else{
           this.legend = legend;
-          //设置高度 chart-table
-          this.$nextTick(() => {
-            let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-            chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
-          });
           this.$refs['localLoading'+this.chartIndex].startLoading();
           this.divFirstShow = true;
           this.firstShow = true; // 展示操作按键
@@ -1062,11 +1054,14 @@
             this.oldSearchTime[0] = this.searchTime[0];
             this.oldSearchTime[1] = this.searchTime[1];
           }
-          //this.$refs['localLoading'+this.chartIndex].endLoading();
           this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
         }
 
       },
+      resize(chartItem) {
+        let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
+      },
       clearChart(){
         if(this.echartStore){
           this.echartStore.clear();
@@ -1359,11 +1354,11 @@
         //设置高度
         this.$nextTick(() => {
           const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-          let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
+          let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
-          if(height<this.minHeight){
+          if(height<this.$chartResizeTool.minHeight){
-            height = this.minHeight;
+            height = this.$chartResizeTool.minHeight;
           }
-          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
+          chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
         });
         this.clearData();
         this.firstShow = false;

nezha-fronted/src/tools.js

@@ -363,6 +363,7 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
 export const chartResizeTool = {
   minHeight: 200, //图表最小高度
   chartBlankHeight: 2, //图表空白占位高度
+  chartTableBlankHeight: 6, //表格型图表额外空白占位高度
   chartBlankWidth: 20, //图表空白占位宽度
   containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
   titleHeight: 28, //标题dom高度
@@ -375,9 +376,10 @@ export const chartResizeTool = {
     if (height < this.minHeight) {
       height = this.minHeight;
     }
-    return height-this.chartSpaceHeight;
+    return height-this.chartBlankHeight;
   },
-  start(vm, data, event) {
+  start(vm, originalData, event) {
+    let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象
     let shadow; //缩放时底部阴影dom
     let box; //图表内容dom
     try {
@@ -392,15 +394,17 @@ export const chartResizeTool = {
     }
     let chartBlankWidth = this.chartBlankWidth;
     let chartBlankHeight = this.chartBlankHeight;
+    let titleHeight = this.titleHeight;
     let stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth);
     let stepHeight = this.stepHeight;
 
-    let containerAvailableWidth = document.getElementById('listContainer').offsetWidth-this.containerBlankWidth;
     let mouseOriginalX = event.clientX; //鼠标初始坐标
     let mouseOriginalY = event.clientY;
-    let originalHeight = data.height; //图表初始宽高
+    let originalWidth = stepWidth*data.span; //图表、阴影初始宽高
-    let originalWidth = stepWidth*data.span;
+    let shadowNewWidth = originalWidth;
-    //console.info("mouseOrigX %s, mouseOrigY %s, chartOrigX %s, chartOrigY %s", mouseOriginalX, mouseOriginalY, originalHeight, originalWidth)
+    let originalHeight = data.height;
+    let shadowNewHeight = originalHeight;
+
     //1.激活背景阴影
     shadow.classList.add("resize-shadow-active");
     //2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
@@ -413,25 +417,69 @@ export const chartResizeTool = {
       let mouseX = e.clientX;
       let mouseY = e.clientY;
       //调整resize-box的宽高
-      box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
       box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
+      box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
       //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
-      let remainderWidth = (box.offsetWidth+chartBlankWidth)%stepWidth; //宽的余数
+      let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
-      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
-
+      boxStepHandler(remainderWidth, remainderHeight);
     }
     function mouseupListener(e) {
-      let remainderWidth = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      //将resize-box的宽高设为resize-shadow的宽高
-      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+      box.style.width = `${shadow.offsetWidth}px`;
-      data.height = box.offsetHeight+chartBlankHeight;
+      box.style.height = `${shadow.offsetHeight}px`;
-      data.span = (box.offsetWidth+chartBlankWidth)/(containerAvailableWidth/12);
+      data.height = box.offsetHeight;
+      data.span = (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);
     }
-    function boxStepHandler(type, op) {
+    function boxStepHandler(width, height) { //宽高变化量，大于0放大小于0缩小等于0不变; return: boolean 是否重绘
+      let widthChange = false;
+      let heightChange = false;
+      if (width > stepWidth/2) { //放大shadow宽
+        widthChange = true;
+        shadow.style.width = `${shadow.offsetWidth+stepWidth}px`;
+      } else if (width <= 0-(stepWidth/2)) { //缩小shadow宽
+        widthChange = true;
+        shadow.style.width = `${shadow.offsetWidth-stepWidth}px`;
+      }
+      if (widthChange) {
+        shadowNewWidth = shadow.offsetWidth;
+      }
+      if (height > stepHeight/2) { //放大shadow宽
+        heightChange = true;
+        shadow.style.height = `${shadow.offsetHeight+stepHeight}px`;
+      } else if (height <= 0-(stepHeight/2)) { //缩小shadow宽
+        heightChange = true;
+        shadow.style.height = `${shadow.offsetHeight-stepHeight}px`;
+      }
+      if (heightChange) {
+        shadowNewHeight = shadow.offsetHeight;
+      }
 
+      if (widthChange || heightChange) {
+        //chart重绘
+        if (box.classList.contains("resize-box-echarts")) { //echarts类型
+          vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
+        } else if (box.classList.contains("resize-box-table")) { //table类型
+          vm.$nextTick(() => {
+            vm.resize({height: shadow.offsetHeight});
+          });
+        }
+        //chart外层宽高调整
+        let outerBox = document.getElementById(`chart-${data.id}`);
+        outerBox.style.height = `${shadow.offsetHeight}px`;
+        outerBox.style.width = `${shadow.offsetWidth+chartBlankWidth}px`;
+      }
     }
   }
 }