feat: panel拖拽、缩放（部分）

nezha-fronted/src/components/charts/chart-single-stat.scss

@@ -39,8 +39,7 @@
   background: #FFF;
   border: 1px solid #d8dce1;
   padding: 0px 0px;
-  margin-bottom: 10px;
+  box-sizing: border-box;
-  padding-bottom: 3px;
   .single-stat-container{
     padding-left: 8px;
     padding-right: 8px;

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

@@ -9,14 +9,6 @@
 <template>
     <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading  :ref="'localLoading'+chartIndex"></loading>
-      <!--
-        <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
-          <div class="el-loading-spinner">
-            <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
-            <p class="el-loading-text loading-font">loading</p>
-          </div>
-        </div>
-        -->
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
@@ -53,8 +45,6 @@
         </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-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
-<!--                <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
               <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">

nezha-fronted/src/components/charts/chart-url.scss

@@ -40,8 +40,7 @@
   background: #FFF;
   border: 1px solid #d8dce1;
   padding: 0px 0px;
-  margin-bottom: 10px;
+  box-sizing: border-box;
-  padding-bottom: 3px;
   .url-container{
     padding-left: 8px;
     padding-right: 8px;

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

@@ -34,7 +34,7 @@
   bottom: 0px;
   line-height: 18px;
   position: absolute;
-  padding-bottom:5px;
+  padding-bottom:3px;
 }
 .legend-container-screen.legend-container {
   max-height: 80px;
@@ -142,45 +142,40 @@
   max-width:280px;
   border: 1px solid #e02f44;
 }
+.nz-chart-resize {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.resize-box {
+  border: 1px solid #d8dce1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.resize-shadow {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.resize-shadow-active {
+  background-color: #888;
+}
 .line-chart-block {
   height: 100%;
-  //min-height: 0px;
   position: relative;
-  background: #FFF;
+  background-color: white;
-  border: 1px solid #d8dce1;
-  padding: 0px 0px;
-  margin-bottom: 10px;
-  padding-bottom: 3px;
-  .vue-resizable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    bottom: 0;
-    right: 0;
-    cursor: se-resize;
-    box-sizing: border-box;
-  }
-  .vue-resizable-handle:after {
-    border-right: 2px solid #555;
-    border-bottom: 2px solid #555;
-    content: "";
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    width: 5px;
-    height: 5px;
-    /*border-right: 2px solid rgba(0,0,0,.4);
-    border-bottom: 2px solid rgba(0,0,0,.4);*/
-    box-sizing: inherit;
-  }
   .chartTitle:hover {
     background-color:#d8dce1;
   }
   .chartTitle {
-     text-align: center;
+    text-align: center;
-     width: 100%;
+    width: 100%;
-     line-height: 28px;
+    line-height: 28px;
-
+    padding: 0 3px;
+    box-sizing: border-box;
     .nz-chart-top{
       width:100%;
     }
@@ -195,7 +190,6 @@
       font-size: 18px;
       line-height: 26px;
       color: #333;
-      margin: -3px 0 3px 3px;
       display:flex;
       justify-content:center;
       align-items:center;

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

@@ -2,145 +2,95 @@
   @import './line-chart-block.scss';
 </style>
 <template>
-  <div class="line-chart-block"    :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
+  <div class="nz-chart-resize">
-    <loading  :ref="'localLoading'+chartIndex"></loading>
+    <div class="resize-shadow" ref="resizeShadow"></div>
-
+    <div class="resize-box" ref="resizeBox">
-    <!--<div class="edit">
+      <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
-
+        <loading  :ref="'localLoading'+chartIndex"></loading>
-      <div class="list-icon" v-if="firstShow">
+        <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
-        <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
+          <el-popover
-          <i class="el-icon-refresh-right"></i>
+            v-if="isError"
+            placement="top-start"
+            :close-delay=10
+            trigger="hover"
+            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>
-        <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
+          </el-popover>
-          <i class="el-icon-edit-outline"></i>
+          <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
-        </span>
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-        <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
+            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-          <i class="el-icon-delete"></i>
+              <span class="chart-title-text">{{data.title}}</span>
-        </span>
+              <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
-        <span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
-          <i class="el-icon-full-screen"></i>
-        </span>
-      </div>
-    </div>-->
-
-    <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
-      <el-popover
-        v-if="isError"
-        placement="top-start"
-        :close-delay=10
-        trigger="hover"
-        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>
-      </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>
-        <!--
-          <el-dropdown-menu slot="dropdown"  class="nz-chart-dropdown" :popper-append-to-body="false">
-            <el-dropdown-item @click.native="refreshChart" ><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i>{{$t('dashboard.refresh')}}</el-dropdown-item>
-            <el-dropdown-item @click.native="editChart"><i style="font-size: 14px;margin-right: 11px;margin-left: 1px;" class="nz-icon nz-icon-edit"></i>{{$t('dashboard.edit')}}</el-dropdown-item>
-            <el-dropdown-item @click.native="removeChart" ><i style="font-size: 16px;" class="el-icon-delete"></i>{{$t('dashboard.delete')}}</el-dropdown-item>
-            <el-dropdown-item @click.native="showAllScreen"  ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
-          </el-dropdown-menu>
-          -->
-        <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>
-          <li v-show="!isExplore" @click="editChart"  class="el-dropdown-menu__item">
-            <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
-          <li v-show="!isExplore" @click="removeChart"  class="el-dropdown-menu__item">
-            <i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-          <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-            <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-          <li  v-show="!isExplore" @click="duplicate"  class="el-dropdown-menu__item">
-            <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-        </ul>
-      </el-dropdown>
-      <!--
-     <div class="chart-title" v-show="firstShow">
-       {{data.title}}
-     </div>
-
-     <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
-       <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
-       <button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
-       <button  @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
-       <button
-       @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
-     </div>
-     -->
-    </div>
-
-    <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
-
-    <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
-      <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-        <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-      </div>
-    </div>
-    <!--
-    <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
-    <el-dialog class="line-chart-block-modal nz-dialog"
-               :title="$t('dashboard.panel.view')"
-               :visible.sync="screenModal"
-               width="90%"
-               @close="screenModal = false"
-               style="margin-top: 1vh !important;"
-               @opened="initDialog">
-      <el-popover
-        v-if="isError"
-        placement="top-start"
-        :close-delay=10
-        trigger="hover"
-        popper-class="chart-error-popper">
-        <div >{{errorContent}}</div>
-        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa-model" ></i>
-              <span class="panel-info-corner-inner"></span>
           </span>
-      </el-popover>
+            <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;" >
-      <div slot="title" >
+              <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
-        <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-        <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
+              <li v-show="!isExplore" @click="editChart"  class="el-dropdown-menu__item">
-        <div class="float-right panel-calendar dialog-tool">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
-
+              <li v-show="!isExplore" @click="removeChart"  class="el-dropdown-menu__item">
-          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+                <i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-          <!--
+              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
-          <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-                          format="yyyy/MM/dd HH:mm"
+              <li  v-show="!isExplore" @click="duplicate"  class="el-dropdown-menu__item">
-                          @change="dateChange"
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-                          v-model="searchTime"
+            </ul>
-                          type="datetimerange"
+          </el-dropdown>
-                          :picker-options="pickerOptions"
-                          :range-separator="$t('dashboard.panel.to')"
-                          :start-placeholder="$t('dashboard.panel.startTime')"
-                          :end-placeholder="$t('dashboard.panel.endTime')"
-                          align="right">
-          </el-date-picker>-->
-          <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
-      </div>
-      <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
 
-      <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+        <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
-        <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+
-          <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+        <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
-          <br/><!--bgColorList[index]-->
+          <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+          </div>
         </div>
-      </div>
+        <!--
+        <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
+        <el-dialog class="line-chart-block-modal nz-dialog"
+                   :title="$t('dashboard.panel.view')"
+                   :visible.sync="screenModal"
+                   width="90%"
+                   @close="screenModal = false"
+                   style="margin-top: 1vh !important;"
+                   @opened="initDialog">
+          <el-popover
+            v-if="isError"
+            placement="top-start"
+            :close-delay=10
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+                <i class="nz-icon nz-icon-warning fa-model" ></i>
+                <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <div slot="title" >
+            <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
+            <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
+            <div class="float-right panel-calendar dialog-tool">
 
-      <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
-    </el-dialog>
+            </div>
-    <!--</Modal>-->
+          </div>
-    <!--style="touch-action: none;" -->
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
-    <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+
+          <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+              <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+              <br/><!--bgColorList[index]-->
+            </div>
+          </div>
+
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+    </div>
   </div>
 </template>
 <script>
@@ -151,7 +101,6 @@
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
   import timePicker from '../common/timePicker'
-
   export default {
     name: 'lineChartBlock',
     components: {
@@ -159,9 +108,8 @@
       'time-picker':timePicker
     },
     props: {
-      editChartId: {
+      chartData: {
-        type: String,
+        type: Object
-        default: 'editChartId',
       },
       // 看板id
       panelId: {
@@ -180,7 +128,8 @@
       isExplore:{
         type:Boolean,
         default:false,
-      }
+      },
+      stepHeight: {type: Number}
     },
     data() {
       return {
@@ -232,24 +181,17 @@
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         oldSearchTime:[],
         minHeight:200,
-        chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
+        chartSpaceHeight:2,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:28,
-        screenTitleHeight:58,
+        screenTitleHeight:58
-        legendHeight:80,
       };
     },
-    computed: {
-      /*
-      typeVisible() {
-        if (this.data.type === 'line' || this.data.type === 'bar' || this.data.type === 4) {
-          return true;
-        }
-         return false;
-      },
-  */
-    },
     watch: {},
     methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.chartData, e);
+      },
       setDivFirstShow(showDiv){
         this.divFirstShow = showDiv;
       },
@@ -292,6 +234,10 @@
         }
       },
       dragResize:function(e){
+        this.$refs.shadow.classList.add("resize-shadow-active");
+
+
+
         var diffWidth = 20;//界面的宽度空白的地方的宽度
         var chartBoxPadding = 20;
         var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
@@ -438,14 +384,6 @@
         }
       },
       clickLegend(legendName,index){
-        // if (this.echartStore) {
-        //   this.echartStore.dispatchAction({
-        //     type: 'legendToggleSelect',
-        //     name: legendName
-        //   });
-        // let isGreyTmp = this.isGrey[index];
-        // this.$set(this.isGrey, index, !isGreyTmp);
-        // }
 
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
@@ -494,14 +432,6 @@
         }
       },
       clickScreenLegend(legendName,index){
-        // if (this.echartModalStore) {
-        //   this.echartModalStore.dispatchAction({
-        //     type: 'legendToggleSelect',
-        //     name: legendName
-        //   });
-        //   let isGreyTmp = this.isGreyScreen[index];
-        //   this.$set(this.isGreyScreen, index, !isGreyTmp);
-        // }
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGreyScreen[index];
         if(this.echartModalStore){
@@ -715,11 +645,6 @@
               //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               let sum = 0;
               params.forEach((item, i) => {
-                //alert('tooltip====='+JSON.stringify(item))
-                //let tip=legend.find((element)=>{
-                //alert('legend====='+JSON.stringify(element))
-                //return element.name == item.seriesName;
-                //});
                 let tip=legend[item.seriesIndex];
                 let color = self.bgColorList[item.seriesIndex];
                 if(i===0){
@@ -740,13 +665,6 @@
                 str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
                 str += `</div>`;
                 str += `</div>`;
-                /*str += `<div style='max-width:500px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:  `;
-                str +=`</div>`;*/
-                // str +=`<div style="display: inline-block;max-width: 10px; min-width: 5px;line-height: 18px;"></div>`;
-                /*str += `<div style='max-width:90px;min-width:20px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
-                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                str +=`</div>`;*/
               });
               if(self.data.type==='stackArea' || self.isStackArea){
                 sum = parseFloat(Number(sum).toFixed(2));
@@ -762,7 +680,6 @@
 
               str +=`</div>`;
               return str;
-              // return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${params[0].color};}'></span> ${params[0].seriesName}:${params[0].data[1]}</div>`;
             },
           },
           legend: {
@@ -773,7 +690,6 @@
             itemHeight:5,
             itemWidth:15,
             formatter:function(name){
-              //console.log('==========='+name);
               if(!name){
                 return '';
               }
@@ -805,9 +721,6 @@
             tooltip:{
               show:true,
               formatter:function(params){
-                //alert(params.length);
-                //alert(JSON.stringify(params));
-
                 return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
               },
             },
@@ -815,8 +728,6 @@
             orient:'vertical',
             x:'center',
             y:'bottom',
-            //top:'5%',
-            //bottom:0
           },
           grid: {
             top: 30,
@@ -825,26 +736,10 @@
             containLabel: true,
             bottom:8,//156
           },
-          /*
-          dataZoom: [{
-            type: 'slider',
-            show:true,
-            xAxisIndex: [0],
-            start: 0,
-            end: 100,
-            height:25,
-            bottom:10,//96
-            left:40,
-            right:48,
-          }
-           ],*/
           xAxis: {
             type: 'time',
-            // boundaryGap: false,//line-false; bar-true;
-            //data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
             axisLabel: {
               interval: '0',
-              //showMinLabel:false,
               showMaxLabel:false,
               rotate: 0,
               formatter: function (value) {
@@ -1118,24 +1013,6 @@
           var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
           return str.slice(0,charNum)+'...';
         }
-        /*
-        if(txtWidth < (chartWidth-30)){
-          return str;
-        }else {
-          var charNum = `${(chartWidth-200)/(txtWidth/str.length)}`;//一行的字符数
-          charNum = parseInt(charNum);
-          if(str.length>charNum){
-            let num = `${str.length/charNum}`;
-            num = parseInt(num)+1;
-            for(let i=0;i<num;i++){
-              rlt += str.substring(charNum*i,charNum*(i+1))+'\n';
-            }
-          }else {
-            return str;
-          }
-        }
-        */
-        //return rlt;
       },
       setColor(colorNum){
         this.bgColorList = [];
@@ -1167,13 +1044,8 @@
           this.legend = legend;
           //设置高度 chart-table
           this.$nextTick(() => {
-            const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+            let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-            let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
+            chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
-            if(height<this.minHeight){
-              height = this.minHeight;
-            }
-            chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-
           });
           this.$refs['localLoading'+this.chartIndex].startLoading();
           this.divFirstShow = true;
@@ -1468,11 +1340,6 @@
                   }
                 }
               });
-              /*
-              if (series.length && this.data.type === 4) {
-                series.push(sumData);
-              }
-              */
               this.setColor(legend.length);
               this.initChart(this.data, series, this.$refs.screenShowArea, 'screen',legend);
             }
@@ -1497,20 +1364,11 @@
             height = this.minHeight;
           }
           chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-          //const tableBox = document.getElementById('tableContainer');
-          // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-          //tableBox.style.height = `${height-75}px`;
         });
         this.clearData();
         this.firstShow = false;
         this.$refs['localLoading'+this.chartIndex].startLoading();
         this.divFirstShow = true;
-
-        /*
-        if (this.echartStore) {
-          this.echartStore.showLoading();
-        }
-        */
       },
       dealLegendAlias:function(legend,expression){
         if(/\{\{.+\}\}/.test(expression)){
@@ -1538,15 +1396,6 @@
             const mbNum = kbNum / 1000;
             if (mbNum > 1000) {
               const gbNum = mbNum / 1000;
-              /*
-              if (gbNum > 1000) {
-                const tbNum = gbNum / 1000;
-                if (tbNum > 1000) {
-                  const pbNum = tbNum / 1000;
-                  return `${pbNum.toFixed(2)}PB`;
-                }
-                return `${tbNum.toFixed(2)}TB`;
-              }*/
               return `${gbNum.toFixed(2)}B`;
             }
             return `${mbNum.toFixed(2)}M`;
@@ -1559,14 +1408,6 @@
     },
     mounted() {
       this.firstLoad = false;
-      /*
-      let Myecharts2 = echarts.init(document.getElementById('lineChartArea'));
-      console.log(Myecharts2);
-
-      setTimeout(function () {
-        Myecharts2.resize()
-      }, 500)
-*/
     },
     beforeDestroy() {
       this.clearChart();

nezha-fronted/src/main.js

@@ -19,7 +19,7 @@ import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
 
 import {post, get, put, del} from './http.js'
-import {toTop, clickoutside, scrollBar, bottomBoxWindow,stringTimeParseToUnix,unixTimeParseToString} from './tools.js'
+import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool} from './tools.js'
 
 
 import Pagination from "./components/common/pagination"; //引入全局分页组件
@@ -81,6 +81,7 @@ Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
 Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
 Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
 Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
+Vue.prototype.$chartResizeTool = chartResizeTool;
 Vue.prototype.$tableHeight = { //列表页表格的高度
   normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
   openSubList: { //打开二级列表后的高度

nezha-fronted/src/tools.js

@@ -358,3 +358,80 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
       fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
   return fmt;
 }
+
+//chart-resize工具
+export const chartResizeTool = {
+  minHeight: 200, //图表最小高度
+  chartBlankHeight: 2, //图表空白占位高度
+  chartBlankWidth: 20, //图表空白占位宽度
+  containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
+  titleHeight: 28, //标题dom高度
+  stepHeight: 50, //单元高度
+  stepWidth(containerWidth) { //单元宽度，参数为容器总宽度
+    return (containerWidth-this.containerBlankWidth)/12;
+  },
+  calculateHeight(original) {
+    let height = Math.round(original/this.stepHeight)*this.stepHeight;
+    if (height < this.minHeight) {
+      height = this.minHeight;
+    }
+    return height-this.chartSpaceHeight;
+  },
+  start(vm, data, event) {
+    let shadow; //缩放时底部阴影dom
+    let box; //图表内容dom
+    try {
+      shadow = vm.$refs.resizeShadow;
+    } catch (e) {
+      shadow = vm.$refs[0].resizeShadow;
+    }
+    try {
+      box = vm.$refs.resizeBox;
+    } catch (e) {
+      box = vm.$refs[0].resizeBox;
+    }
+    let chartBlankWidth = this.chartBlankWidth;
+    let chartBlankHeight = this.chartBlankHeight;
+    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)
+    //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.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
+      box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
+      //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
+      let remainderWidth = (box.offsetWidth+chartBlankWidth)%stepWidth; //宽的余数
+      let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
+
+    }
+    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);
+      //关闭背景阴影
+      shadow.classList.remove("resize-shadow-active");
+      document.removeEventListener("mousemove", moveListener);
+      document.removeEventListener("mouseup", mouseupListener);
+    }
+    function boxStepHandler(type, op) {
+
+    }
+  }
+}