feat: echarts/table类型图表

2020-05-31 13:44:47 +08:00
parent 7de9cdb6be
commit 6f6082d07c
5 changed files with 522 additions and 777 deletions
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/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
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/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 {
-  height: 100%;
-  position: relative;
-  background-color: white;
-  .chartTitle:hover {
-    background-color:#d8dce1;
+.resize-box {
+  .pagination {
+    padding-top: 0;
  }
-  .chartTitle {
-    text-align: center;
+  .chart-table {
    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;
+    .table-container {
+      padding: 0 6px;
+      box-sizing: border-box;
+      .nz-table {
+        margin-top: 6px;
+        box-sizing: border-box;
      }
-      .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 {
-    box-sizing: border-box;
-    background: #FFF;
-    min-height: 95px;
-    padding-left:8px;
-    padding-right:8px;
-  }
-  /*.edit:after{
-    display: block;
-    content: "";
-    clear: both;
-  }*/
-  .button-panel-height{
-    height:26px;
-  }
-  .button-panel-height button{
-    height:26px;
-  }
-  .edit {
-    position: absolute;
-    right: 20px;
-    top: 17px;
-    z-index: 10;
+    .line-area {
+      box-sizing: border-box;
+      background: #FFF;
+      min-height: 95px;
+      padding-left:8px;
+      padding-right:8px;
+    }
+    .button-panel-height{
+      height:26px;
+    }
+    .button-panel-height button{
+      height:26px;
+    }
+    .edit {
+      position: absolute;
+      right: 20px;
+      top: 17px;
+      z-index: 10;

-  }
-  .chart-select {
-    position: absolute;
-    left: 40px;
-    top: 25px;
-    z-index: 10;
-    font-size: 14px;
-    .chart-select-btn {
-      margin-right: 10px;
-      cursor: pointer;
-      &.active {
-        color: #5aacff;
+    }
+    .chart-select {
+      position: absolute;
+      left: 40px;
+      top: 25px;
+      z-index: 10;
+      font-size: 14px;
+      .chart-select-btn {
+        margin-right: 10px;
+        cursor: pointer;
+        &.active {
+          color: #5aacff;
+        }
      }
    }
-  }
-  /*没有数据显示*/
-  .null {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
+    /*没有数据显示*/
+    .null {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      text-align: center;
+      font-size: 24px;
+      font-weight: 600;
+    }
  }
 }
 .dialog-tool {
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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>
-            <span class="panel-info-corner-inner"></span>
-        </span>
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></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;//图表高度四舍五入
-          if(height<this.minHeight){
-            height = this.minHeight;
+          let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
+          if(height<this.$chartResizeTool.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;
--- a/nezha-fronted/src/tools.js
+++ b/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;
-    //console.info("mouseOrigX %s, mouseOrigY %s, chartOrigX %s, chartOrigY %s", mouseOriginalX, mouseOriginalY, originalHeight, originalWidth)
+    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内容
@@ -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 remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
-
+      let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
+      let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
+      boxStepHandler(remainderWidth, remainderHeight);
    }
    function mouseupListener(e) {
-      let remainderWidth = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
-      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
-      data.height = box.offsetHeight+chartBlankHeight;
-      data.span = (box.offsetWidth+chartBlankWidth)/(containerAvailableWidth/12);
+      //将resize-box的宽高设为resize-shadow的宽高
+      box.style.width = `${shadow.offsetWidth}px`;
+      box.style.height = `${shadow.offsetHeight}px`;
+      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`;
+      }
    }
  }
 }