From e84fd20593c567068714cd3b4cf3b0b39f8d41c1 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Fri, 20 Mar 2020 18:47:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=8A=9F=E8=83=BD=201.dashboard?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=EF=BC=9A=E6=9B=B2=E7=BA=BF=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=AE=9E=E7=8E=B0=E6=8B=96=E6=8B=BD=E6=94=B9?=
 =?UTF-8?q?=E5=8F=98=E5=A4=A7=E5=B0=8F,=E5=90=8E=E5=8F=B0=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=B7=B2=E6=B5=8B=E8=AF=95=EF=BC=8C=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=9B=BE=E8=A1=A8=E6=8B=96=E6=8B=BD=E6=94=B9?=
 =?UTF-8?q?=E5=8F=98=E5=A4=A7=E5=B0=8F=EF=BC=8C=E5=8F=8A=E5=BD=93=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E7=BC=A9=E5=B0=8F=E5=88=B0=E6=9C=80=E5=B0=8F=E6=97=B6?=
 =?UTF-8?q?=E8=B6=85=E5=87=BA=E9=83=A8=E5=88=86=E9=9A=90=E8=97=8F=E7=AD=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      | 134 +++++++++++++---
 .../src/components/charts/chart-table.scss    |  37 ++++-
 .../src/components/charts/chart-table.vue     | 146 +++++++++++++++++-
 .../components/charts/line-chart-block.scss   |  15 +-
 .../components/charts/line-chart-block.vue    |  15 +-
 5 files changed, 320 insertions(+), 27 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 3589682d3..7c1b48e2d 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -3,6 +3,7 @@
     box-sizing: border-box;
     float:left;
     padding: 0 10px 10px 10px;
+    /*position:relative;*/
   }
   .noData{
     text-align: center
@@ -11,31 +12,79 @@
     width: calc(100% - 14px);
     overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
+
 </style>
 <template>
 
-  <div class="list-width">
-    <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id">
+  <div class="list-width"  id="listContainer"><!--v-drag-->
+    <!--
+    draggable="true"
+         @dragstart="handleDragStart($event, item)"
+         @dragover.prevent="handleDragOver($event, item)"
+         @dragenter="handleDragEnter($event, item)"
+         @dragend="handleDragEnd($event, item)"
 
-      <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-      ref="editChart"
-      @on-refresh-data="refreshChart"
-      @on-remove-chart-block="removeChart"
-      @on-edit-chart-block="editData"
-      :panel-id="filter.panelId"
-      :chart-index="index"
-      :editChartId="'editChartId' + item.id"></line-chart-block>
+         const drag = {
+  // 指令的定义
+  bind: function (el) {
+    let odiv = el;   //获取当前元素
+    odiv.onmousedown = (e) => {
+      //算出鼠标相对元素的位置
+      let disX = e.clientX - odiv.offsetLeft;
+      let disY = e.clientY - odiv.offsetTop;
 
-      <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
-      @on-refresh-data="refreshChart"
-      @on-search-data="searchData"
-      @on-remove-chart-block="removeChart"
-      @on-edit-chart-block="editData"
-      :panel-id="filter.panelId"
-      :chart-index="index"
-      :editChartId="'editChartId' + item.id"></chart-table>
+      document.onmousemove = (e)=>{
+        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
 
-    </div>
+        //绑定元素位置到positionX和positionY上面
+        //this.positionX = top;
+        //this.positionY = left;
+
+        //移动当前元素
+        odiv.style.left = left + 'px';
+        odiv.style.top = top + 'px';
+      };
+      document.onmouseup = (e) => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  }
+};
+
+Vue.directive('drag',
+  drag
+)
+
+    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move">
+     -->
+      <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id"   style="border:solid 0px red;">
+
+        <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
+        ref="editChart"
+        @on-refresh-data="refreshChart"
+        @on-remove-chart-block="removeChart"
+        @on-drag-chart="editChartForDrag"
+        @on-edit-chart-block="editData"
+        :panel-id="filter.panelId"
+        :chart-index="index"
+        :editChartId="'editChartId' + item.id"></line-chart-block>
+
+        <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
+        @on-refresh-data="refreshChart"
+        @on-search-data="searchData"
+        @on-remove-chart-block="removeChart"
+        @on-drag-chart="editChartForDrag"
+        @on-edit-chart-block="editData"
+        :panel-id="filter.panelId"
+        :chart-index="index"
+        :editChartId="'editChartId' + item.id"></chart-table>
+
+
+      </div>
+    <!--</draggable>-->
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
   </div>
 </template>
@@ -44,6 +93,7 @@ import axios from 'axios';
 import bus from '../../libs/bus';
 import lineChartBlock from './line-chart-block';
 import chartTable from './chart-table';
+//import draggable from 'vuedraggable'
 
 export default {
   name: 'chartList',
@@ -52,6 +102,7 @@ export default {
   components: {
     lineChartBlock,
     chartTable,
+    //draggable,
   },
   data() {
     return {
@@ -67,12 +118,49 @@ export default {
       isPage:true,//是否分页懒加载
       currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
       lineNum:3,//每页加载的行数
-      pagePanelId:''//当前分页的panelId
+      pagePanelId:'',//当前分页的panelId
+      dragging: null
     };
   },
   computed: {},
   watch: {},
   methods: {
+    change (event) {
+      console.log('change', event)
+    },
+    start (event) {
+      console.log('start', event)
+    },
+    end (event) {
+      console.log('end', event, this.groups)
+    },
+    move (event, orgin) {
+      console.log('move', event, orgin)
+    },
+    handleDragStart(e,item){
+      this.dragging = item;
+    },
+    handleDragEnd(e,item){
+      this.dragging = null
+    },
+    //首先把div变成可以放置的元素，即重写dragenter/dragover
+    handleDragOver(e) {
+      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+    },
+    handleDragEnter(e,item){
+      e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
+      if(item === this.dragging){
+        return
+      }
+      const newItems = [...this.dataList]
+      console.log(newItems)
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
+
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
+
+      this.dataList = newItems
+    },
     initCurrentRecordNum(){
       this.currentRecordNum = 0;
     },
@@ -417,6 +505,12 @@ export default {
         this.$emit('on-edit-chart', chart);
       }
     },
+
+    editChartForDrag(chartItem){
+      let chart = this.dataList.find(item => item.id === chartItem.id);
+      chart.span = chartItem.span;
+      chart.height = chartItem.height;
+    },
     // 刷新列表中的一个图表
     refreshChart(chartId,searchTime) {
       this.dataList.forEach((item, index) => {
diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss
index f7883dc84..4f9152d5e 100644
--- a/nezha-fronted/src/components/charts/chart-table.scss
+++ b/nezha-fronted/src/components/charts/chart-table.scss
@@ -41,10 +41,33 @@
   border: 1px solid #d8dce1;
   padding: 20px 8px 3px;
   margin-bottom: 10px;
+  .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 {
     text-align: center;
     width: 100%;
     .nz-chart-top{
+      width:100%;
     }
     .el-dropdown-link {
       cursor: pointer;
@@ -57,7 +80,19 @@
       font-size: 18px;
       line-height: 26px;
       color: #333;
-      margin: -3px 0 3px 10px;
+      margin: -3px 0 3px 3px;
+      display:flex;
+      justify-content:center;
+      align-items:center;
+      .chart-title-text{
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .chart-title-icon{
+        display: inline-block;
+      }
     }
   }
   .edit:after{
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index afc496b29..15c433f03 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -21,7 +21,8 @@
 
           <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-              {{data.title}}<i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i>
+              <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>
             <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
               <li  @click="refreshChart"  class="el-dropdown-menu__item">
@@ -90,6 +91,7 @@
                 </div>
                 -->
         </el-dialog>
+      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
     </div>
 </template>
 
@@ -303,6 +305,148 @@ export default {
           this.screenPageObj.pageSize = val;
           this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
         },
+      dragResize:function(e){
+        var diffWidth =38; //界面的宽度空白的地方的宽度
+        var targetDiv= document.getElementById('chartTableDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
+        var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
+        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;
+
+        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;
+          }
+          //调整表格大小
+            let containerHeight = parseInt(targetDiv.style.height);
+            let containerWidth = parseInt(targetDiv.style.width);
+            const chartBox = document.getElementsByClassName('chartBox');
+            chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
+            //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
+            //表格的高度
+            const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
+            tableBox.style.height = `${containerHeight-75-32+25}px`;
+        }
+
+        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;
+            //alert('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);
+
+          const chartBox = document.getElementsByClassName('chartBox');
+          chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
+          //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
+          //表格的高度
+          const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
+          tableBox.style.height = `${containerHeight-75-32+25}px`;
+
+          const modifyParams = {
+            id:_this.data.id,
+            span:span,
+            height:(containerHeight+25),
+            prev:parseInt(_this.data.prev),
+            next:parseInt(_this.data.next),
+          }
+          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
+            if (response.code === 200) {
+              //更新当前图表数据
+              _this.data.span= span;
+              _this.data.height= containerHeight+25;
+              _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;
+        }
+      },
         startLoading(area){
           if(area==='screen'){
             //this.showLoadingScreen = true;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 482e7660d..619caeb4c 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -96,6 +96,7 @@
      text-align: center;
      width: 100%;
     .nz-chart-top{
+      width:100%;
     }
     .el-dropdown-link {
       cursor: pointer;
@@ -108,7 +109,19 @@
       font-size: 18px;
       line-height: 26px;
       color: #333;
-      margin: -3px 0 3px 10px;
+      margin: -3px 0 3px 3px;
+      display:flex;
+      justify-content:center;
+      align-items:center;
+      .chart-title-text{
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .chart-title-icon{
+        display: inline-block;
+      }
     }
   }
 
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 48989be41..7107ddbdb 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -26,8 +26,9 @@
 
       <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
           <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            {{data.title}}<i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i>
-          </span>
+            <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>
@@ -291,7 +292,7 @@
         this.divFirstShow = showDiv;
       },
       dragResize:function(e){
-        var diffWidth = 38;
+        var diffWidth = 38;//界面的宽度空白的地方的宽度
         var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
         var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
         var maxWidth = targetDivContainer.offsetWidth-diffWidth;
@@ -366,12 +367,14 @@
           let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
           if(targetDivHeight>targetDivHeightNew){
             let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
+            //alert('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);
@@ -407,13 +410,17 @@
           const modifyParams = {
             id:_this.data.id,
             span:span,
-            height:containerHeight,
+            height:(containerHeight+_this.dataZoomHeight),
             prev:parseInt(_this.data.prev),
             next:parseInt(_this.data.next),
           }
           //alert('=55='+JSON.stringify(modifyParams));
           _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
             if (response.code === 200) {
+              //更新当前图表数据
+              _this.data.span= span;
+              _this.data.height= containerHeight+_this.dataZoomHeight;
+              _this.$emit('on-drag-chart', _this.data);
             }else {
               if(response.msg){
                 _this.$message.error(response.msg);