From 061056b22b307eea2dac3b5dcf311cfe1a101022 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Sun, 31 May 2020 17:40:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=95=E5=80=BC=E5=9E=8B=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-single-stat.vue   | 392 +++++++++---------
 .../src/components/charts/chart-table.vue     |  17 +-
 .../components/charts/line-chart-block.scss   |  18 +-
 .../components/charts/line-chart-block.vue    | 151 -------
 nezha-fronted/src/tools.js                    |   7 +-
 5 files changed, 221 insertions(+), 364 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index a134b74ba..cec16b9dc 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -1,13 +1,11 @@
-<style lang="scss" scoped>
-@import './chart-single-stat.scss';
-</style>
-<style>
-  .max-width-90{
-    max-width: 90px;
-  }
+<style lang="scss">
+@import './line-chart-block.scss';
 </style>
 <template>
-    <div class="chart-single-stat"  :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-single" ref="resizeBox">
+      <div class="chart-single-stat"  :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading  :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
@@ -18,8 +16,8 @@
             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>
+              <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">
@@ -41,7 +39,6 @@
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
-
         </div>
         <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="single-stat-content" >
@@ -49,24 +46,26 @@
           </div>
         </div>
         <!--全屏-->
-          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                     :visible.sync="screenModal"
-                     width="96%"  @close="screenModal = false" >
-            <div slot="title">
-              <span class="nz-dialog-title">{{data.title}}</span>
-              <div class="float-right panel-calendar dialog-tool">
-                <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
-              </div>
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
+                   :visible.sync="screenModal"
+                   width="96%"  @close="screenModal = false" >
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.title}}</span>
+            <div class="float-right panel-calendar dialog-tool">
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
             </div>
-            <div class="single-stat-screen-container"  >
-              <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
-                {{serieSingleStat}}
-              </div>
+          </div>
+          <div class="single-stat-screen-container"  >
+            <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
+              {{serieSingleStat}}
             </div>
-            <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+          </div>
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize"></span>
     </div>
+  </div>
 </template>
 
 <script>
@@ -77,68 +76,68 @@ import loading from "../common/loading";
 import timePicker from '../common/timePicker'
 
 export default {
-    name: 'chartSingleStat',
+  name: 'chartSingleStat',
   components: {
     'loading': loading,
     'time-picker':timePicker
   },
-    props: {
-        // 看板id
-        panelId: {
-            type: Number,
-            default: 0,
-        },
-        editChartId: {
-          type: String,
-          default: 'editChartId',
-        },
-        chartIndex:{
-          type: Number,
-          default: 0,
-        }
+  props: {
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0,
     },
-    data() {
-        return {
-            data: {}, // 该图表信息,chartItem
-            unit:{},
-            isError:false,
-            errorContent:'',
-            seriesItem: [], // 保存信息
-            seriesItemScreen:[],//全屏数据
-            serieSingleStat:'',
-            images: '',
-            //toolbox: false,
-            loading:Object,
-            items: {
-                metric_name: [], // 每条数据列名称
-                xAxis: [],
-                theData: [], // series数据组
-            },
-            panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-            firstLoad: false, // 是否第一次加载
-            screenModal: false,
-            // 查询数据使用
-            filter: {
-                start_time: '',
-                end_time: '',
-            },
-            firstShow: false, // 默认不显示操作按钮,
-            caretShow:false,
-            dragTitleShow:false,
-            dropdownMenuShow:false,
-            minHeight:200,
-            chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-            titleHeight:38,//title-height:28,magrin-bottom:10
-            divFirstShow:false,
-            searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-            oldSearchTime: [],
-        };
-    },
-    created() {
+    editChartId: {
+      type: String,
+      default: 'editChartId',
     },
+    chartIndex:{
+      type: Number,
+      default: 0,
+    }
+  },
+  data() {
+    return {
+      data: {}, // 该图表信息,chartItem
+      unit:{},
+      isError:false,
+      errorContent:'',
+      seriesItem: [], // 保存信息
+      seriesItemScreen:[],//全屏数据
+      serieSingleStat:'',
+      images: '',
+      loading:Object,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [], // series数据组
+      },
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+          start_time: '',
+          end_time: '',
+      },
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow:false,
+      dragTitleShow:false,
+      dropdownMenuShow:false,
+      divFirstShow:false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+      oldSearchTime: [],
+    };
+  },
+  created() {
+  },
   computed: {},
     watch: {},
     methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e);
+      },
       dragResize:function(e){
         var diffWidth =20; //界面的宽度空白的地方的宽度
         var chartBoxPadding = 22;
@@ -283,67 +282,65 @@ export default {
           document.onmouseup = null;
         }
       },
-        startLoading(area){
-          if(area==='screen'){
-            this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-          }else {
-            //this.showLoading = true;
-            this.$refs['localLoading'+this.chartIndex].startLoading();
+      startLoading(area){
+        if(area==='screen'){
+          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
+        }else {
+          //this.showLoading = true;
+          this.$refs['localLoading'+this.chartIndex].startLoading();
+        }
+      },
+      endLoading(area){
+        if(area==='screen'){
+          //this.showLoadingScreen = false;
+          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
+        }else {
+          //this.showLoading = false;
+          this.$refs['localLoading'+this.chartIndex].endLoading();
+        }
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
+          let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
+          if(height<this.minHeight){
+            height = this.minHeight;
           }
-        },
-        endLoading(area){
-          if(area==='screen'){
-            //this.showLoadingScreen = false;
-            this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-          }else {
-            //this.showLoading = false;
-            this.$refs['localLoading'+this.chartIndex].endLoading();
-          }
-        },
-        clearData(){
-        },
-        showLoad(chartItem) {
-          this.$nextTick(() => {
-            const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
-            let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-            if(height<this.minHeight){
-              height = this.minHeight;
-            }
-            chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-            const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
-            singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
-          });
-          this.startLoading();
-          this.divFirstShow = true;
-        },
-        // 重新请求数据 刷新操作-local
-        refreshChart() {
-            this.dropdownMenuShow=false;
-            this.startLoading();
-            this.firstShow = false;
-            this.$emit('on-refresh-data', this.data.id);
-        },
-        // 编辑图表
-        editChart() {
-            this.dropdownMenuShow=false;
-            this.$emit('on-edit-chart-block', this.data.id);
-        },
-        // 删除该图表
-        removeChart() {
-            this.dropdownMenuShow=false;
-            this.$emit('on-remove-chart-block', this.data.id);
-        },
-        //全屏时间条件查询
-        dateChange(time) {
-            this.searchTime = [...time];
-            this.seriesItemScreen = [];
-            this.serieSingleStat = "";
-            this.startLoading('screen');
-            this.$emit('on-search-data', this.data.id, this.searchTime);
-        },
-        clickos() {
-          this.dropdownMenuShow=false;
-        },
+          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
+          const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
+          singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      //全屏时间条件查询
+      dateChange(time) {
+        this.searchTime = [...time];
+        this.seriesItemScreen = [];
+        this.serieSingleStat = "";
+        this.startLoading('screen');
+        this.$emit('on-search-data', this.data.id, this.searchTime);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
       clearChart(){
         this.data = {};
       },
@@ -369,75 +366,70 @@ export default {
           }
         });
       },
-        // 全屏查看
-        showAllScreen() {
-            this.dropdownMenuShow=false;
-            this.searchTime = [];
-            this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-            this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-            this.$refs.calendarPanel.setCustomTime(this.searchTime);
+      // 全屏查看
+      showAllScreen() {
+          this.dropdownMenuShow=false;
+          this.searchTime = [];
+          this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+          this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+          this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
-            this.seriesItemScreen = this.seriesItem;
-            this.screenModal = true;
-        },
-        // 设置数据, filter区分
-        setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-          if(errorMsg && errorMsg!==''){
-            this.isError = true;
-            this.errorContent = errorMsg;
+          this.seriesItemScreen = this.seriesItem;
+          this.screenModal = true;
+      },
+      resize(chartItem) {
+        document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .single-stat-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
+      },
+      // 设置数据, filter区分
+      setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
+        if(errorMsg && errorMsg!==''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        if(area==='showFullScreen'){//全屏按时间查询
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          if(Number(seriesItem)){
+            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
+            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
           }else {
-            this.isError = false;
-            this.errorContent = '';
+            this.serieSingleStat =seriesItem;
           }
-            if(area==='showFullScreen'){//全屏按时间查询
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              if(Number(seriesItem)){
-                let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
-                this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-              }else {
-                this.serieSingleStat =seriesItem;
-              }
-              this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-              this.searchTime[1] = filter.end_time;
-              this.endLoading('screen');
-            }else{
-              this.$nextTick(() => {
-                const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
-                let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-                if(height<this.minHeight){
-                  height = this.minHeight;
-                }
-                chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-                const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
-                singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
-              });
-              this.divFirstShow = true;
+          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time;
+          this.endLoading('screen');
+        }else{
+          this.$nextTick(() => {
+            this.resize(chartItem);
+          });
+          this.divFirstShow = true;
 
-              this.firstShow = true; // 展示操作按键
+          this.firstShow = true; // 展示操作按键
 
-              this.panelIdInner = panelId;
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              if(Number(seriesItem)){
-                let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-                this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-              }else {
-                this.serieSingleStat =seriesItem;
-              }
-              if (filter) { // 保存数据,用于同步时间
-                this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-                this.searchTime[1] = filter.end_time;
-                this.oldSearchTime[0] = this.searchTime[0];
-                this.oldSearchTime[1] = this.searchTime[1];
-              }
-
-              this.endLoading();
-            }
-        },
+          this.panelIdInner = panelId;
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          if(Number(seriesItem)){
+            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+          }else {
+            this.serieSingleStat =seriesItem;
+          }
+          if (filter) { // 保存数据,用于同步时间
+            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+            this.searchTime[1] = filter.end_time;
+            this.oldSearchTime[0] = this.searchTime[0];
+            this.oldSearchTime[1] = this.searchTime[1];
+          }
+          this.endLoading();
+        }
+      },
     },
     mounted() {
-        this.firstLoad = false;
+      this.firstLoad = false;
     },
     beforeDestroy() {
       this.clearChart();
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index b108988b5..00cc60bb4 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -41,7 +41,7 @@
           </el-dropdown>
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow">
-          <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
+          <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
               <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
                 <template slot-scope="scope">
@@ -116,6 +116,7 @@ export default {
   },
   data() {
     return {
+      tableHeight: 0,
       data: {}, // 该图表信息,chartItem
       unit:{},
       isError:false,
@@ -224,13 +225,13 @@ export default {
       }
     },
     resize(chartItem) {
-      let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
-      if(height < this.$chartResizeTool.minHeight){
-        height = this.$chartResizeTool.minHeight;
-      }
-      const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-      tableBox.style.height = `${height-this.$refs.Pagination.$el.offsetHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight-this.$chartResizeTool.chartTableBlankHeight}px`;
-      tableBox.querySelector(".el-table__body-wrapper")._ps_.update();
+      let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
+      let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
+      container.style.height = `calc(100% - ${deHeight}px)`;
+      this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
+      this.$nextTick(() => {
+        container.querySelector(".el-table__body-wrapper")._ps_.update();
+      });
     },
     showLoad(chartItem) {
       //设置高度 chart-table
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 126881075..1c4704b35 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -179,7 +179,23 @@
       }
     }
   }
-  .line-chart-block, .chart-table {
+  .chart-single-stat {
+    width: 100%;
+    .single-stat-container {
+      padding-left: 8px;
+      padding-right: 8px;
+      display: table;
+      text-align: center;
+      width: calc(100% - 16px);
+      .single-stat-content{
+        text-align:center;
+        vertical-align: middle;
+        display:table-cell;
+        font-size:30px;
+      }
+    }
+  }
+  .line-chart-block, .chart-table, .chart-single-stat {
     height: 100%;
     position: relative;
     background-color: white;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 802d2f54d..9c54d94a9 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -230,158 +230,7 @@
           })
         }
       },
-      dragResize:function(e){
-        this.$refs.shadow.classList.add("resize-shadow-active");
-
-
-
-        var diffWidth = 20;//界面的宽度空白的地方的宽度
-        var chartBoxPadding = 20;
-        var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
-        var targetDivContainer= document.getElementById('listContainer'); //
-        var maxWidth = targetDivContainer.offsetWidth-diffWidth;
-        var minWidth = maxWidth/12;
-        var stepWidth = maxWidth/12;
-        var stepHeight = 10;
-
-        //得到点击时该容器的宽高：
-        var targetDivHeight=targetDiv.offsetHeight;
-        var targetDivWidth=targetDiv.offsetWidth;
-        var startY=e.clientY;
-        var startX=e.clientX;
-        var _this=this;
-
-        //var heightTmp = targetDivHeight;
-        //var widthTmp = targetDivWidth;
-        document.onmousemove=function(e){
-          e.preventDefault();
-          //得到鼠标拖动的宽高距离：取绝对值
-          var distY=Math.abs(e.clientY-startY);
-          var distX=Math.abs(e.clientX-startX);
-
-          //往上方拖动：
-          if( e.clientY < startY){
-            targetDiv.style.height=targetDivHeight-distY+'px';
-            //heightTmp = targetDivHeight-distY;
-          }
-          if( e.clientX < startX){
-            targetDiv.style.width=targetDivWidth-distX+'px';
-            //widthTmp = targetDivWidth-distX;
-          }
-          //往下方拖动：
-          if (e.clientY > startY) {
-            targetDiv.style.height=(targetDivHeight+distY)+'px';
-            //heightTmp = targetDivHeight+distY;
-          }
-          if (e.clientX > startX) {
-            targetDiv.style.width=(targetDivWidth+distX)+'px';
-            //widthTmp = targetDivWidth+distX;
-          }
-
-          if(parseInt(targetDiv.style.height)<=_this.minHeight){
-            targetDiv.style.height=_this.minHeight+'px';
-            //heightTmp = _this.minHeight;
-          }
-
-          if(parseInt(targetDiv.style.width)>=maxWidth){
-            targetDiv.style.width=maxWidth+'px';
-            //widthTmp = maxWidth;
-          }
-          if(parseInt(targetDiv.style.width)<=minWidth){
-            targetDiv.style.width=minWidth+'px';
-            //widthTmp = minWidth;
-          }
-          //调整图表大小
-          if(_this.echartStore){
-            let divHeight = _this.$refs.legendArea.offsetHeight;
-            let containerHeight = parseInt(targetDiv.style.height);
-            let containerWidth = parseInt(targetDiv.style.width);
-            const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-            _this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
-          }
-        };
-
-        document.onmouseup=function(){
-          let targetDivHeightNew = parseInt(targetDiv.style.height);
-          //let targetDivHeightNew = heightTmp
-          let targetDivWidthNew = parseInt(targetDiv.style.width);
-          //let targetDivWidthNew = widthTmp;
-
-          let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
-          if(targetDivHeight>targetDivHeightNew){
-            let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
-            //console.log('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-            targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
-          }
-          if(targetDivHeight<targetDivHeightNew){
-            let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
-            targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
-          }
-
-          var span = _this.data.span;
-          if(targetDivWidth>targetDivWidthNew){
-            span =  Math.floor((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
-            if((finalWidth)<minWidth){
-              targetDiv.style.width=minWidth+'px';
-              span = 1;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          if(targetDivWidth<targetDivWidthNew){
-            span =  Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = spanUnit*stepWidth;
-            if(finalWidth>maxWidth || spanUnit===12){
-              targetDiv.style.width=maxWidth+'px';
-              span = 12;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          //调整图表大小
-          let containerHeight = parseInt(targetDiv.style.height);
-          let containerWidth = parseInt(targetDiv.style.width);
-          if(_this.echartStore){
-            let divHeight = _this.$refs.legendArea.offsetHeight;
-            const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-            _this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
-          }
-
-          const modifyParams = {
-            id:_this.data.id,
-            span:span,
-            height:(containerHeight+_this.chartSpaceHeight),
-            prev:parseInt(_this.data.prev),
-            next:parseInt(_this.data.next),
-          };
-          targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
-          //alert('=55='+JSON.stringify(modifyParams));
-          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
-            if (response.code === 200) {
-              //更新当前图表数据
-              _this.data.span= span;re
-              _this.data.height= containerHeight+_this.chartSpaceHeight;
-              _this.$emit('on-drag-chart', _this.data);
-            }else {
-              if(response.msg){
-                _this.$message.error(response.msg);
-              }else if(response.error){
-                _this.$message.error(response.error);
-              }else {
-                _this.$message.error(response);
-              }
-            }
-          });
-          document.onmousemove=null;
-          document.onmouseup = null;
-        }
-      },
       clickLegend(legendName,index){
-
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
         if(this.echartStore){
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
index 365b3584d..eb6bc94cc 100644
--- a/nezha-fronted/src/tools.js
+++ b/nezha-fronted/src/tools.js
@@ -419,6 +419,7 @@ export const chartResizeTool = {
       //调整resize-box的宽高
       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-shadowNewWidth)%stepWidth; //宽的余数
       let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
@@ -467,13 +468,11 @@ export const chartResizeTool = {
       }
 
       if (widthChange || heightChange) {
-        //chart重绘
+        //step时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});
-          });
+          box.querySelector(".el-table__body-wrapper")._ps_.update();
         }
         //chart外层宽高调整
         let outerBox = document.getElementById(`chart-${data.id}`);