From adb6932593c193856663db4fe97568e90d41b28d Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Wed, 25 Mar 2020 09:21:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9BUG=20dashboard=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97:1=20=E5=9B=BE=E8=A1=A8=E6=8B=96=E6=8B=BD=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=A4=A7=E5=B0=8F=E7=A9=BA=E7=99=BD=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=202=E5=9B=BE=E8=A1=A8=E5=8F=AA=E6=9C=89title?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=8F=AF=E8=BF=9B=E8=A1=8C=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E6=8B=96=E6=8B=BD=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E6=97=B6=E6=A0=B7=E5=BC=8F=E4=B9=B1=203=20?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=94=B9=E5=8F=98=E5=9B=BE=E8=A1=A8=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=90=8E=E5=8F=B0=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=EF=BC=88=E7=9B=AE=E5=89=8D=E5=9B=BE=E8=A1=A8=E5=AD=98=E5=9C=A8?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E6=97=B6=E6=BB=9A=E5=8A=A8=E6=9D=A1=E4=B8=8D?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      | 131 ++++++++++++++++--
 .../src/components/charts/chart-table.scss    |   5 +-
 .../src/components/charts/chart-table.vue     |  10 +-
 .../components/charts/line-chart-block.vue    |  11 +-
 4 files changed, 136 insertions(+), 21 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index e856ba96f..a337701e3 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -12,18 +12,39 @@
     width: calc(100% - 14px);
     overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
-  .drag-chart-class{
-    cursor:move;
+  .dragChartClass{
+    cursor:move;/*
+    border:solid 2px yellow;
+    color:yellow;
+    background-color:yellow;
+    opacity:1;*/
     /*background-color:red;
     opacity:1*/
   }
+  .chooseClass{
+    cursor:move;/*
+    border:solid 2px purple;
+    color:purple;
+    background-color:purple;*/
+  }
+  .chosenClass .chartTitle{/*
+    color:orange;
+    border:solid 2px orange;*/
+  }
   .fallback-class{
+    cursor:move;
     /*background-color:green;
     cursor:pointer;*/
   }
   .chart-ghost-class{
     /*opacity:1*/
   }
+  .ghost {/*
+    opacity: 1;
+    border:solid 2px green;
+    color:green;
+    background-color:green;*/
+  }
 
 </style>
 <template>
@@ -37,15 +58,18 @@
          @dragend="handleDragEnd($event, item)"    ,ghostClass:''  {scroll:true,forceFallback:true,animation:600,handle:'.drag-icon'
 -->
     <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move"
+               :scroll-sensitivity="150"
                :options="{
-               dragClass:'drag-chart-class',
-               fallbackClass:'fallback-class',
-               forceFallback:true,
-               ghostClass:'chart-ghost-class',
-               scroll:true,
-               animation:150,
+                 dragClass:'dragChartClass',
+                 fallbackClass:'fallback-class',
+                 forceFallback:true,
+                 ghostClass:'ghost',
+                 chosenClass:'chooseClass',
+                 scroll:true,
+                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+                 animation:150,
+                 handle:'.chartTitle',
                }"  >
-
       <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id"   style="border:solid 0px red;" @dragstart="">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
         ref="editChart"
@@ -91,6 +115,7 @@ export default {
     return {
       filter: {},
       dataList: [], // 看板中所有图表信息
+      //dataListDragTmp:[],
       time: {
         start: '',
         end: '',
@@ -112,14 +137,97 @@ export default {
       console.log('change', event)
     },
     start (event) {
-      console.log('start', event)
+      console.log('start', event, this.dataList)
+      let item = event.item;
+      let chartTitle = item.querySelector('.chartTitle');
+      chartTitle.style.background = '#d8dce1';
+      console.log('start-title',chartTitle);
+      //this.dataListDragTmp = [...this.dataList];
     },
     end (event) {
-      console.log('end', event, this.groups)
+      let item = event.item;
+      let chartTitle = item.querySelector('.chartTitle');
+      chartTitle.style.background = '';
+      console.log('end', event, this.dataList);
+      /*
+      let len = this.dataListDragTmp.length;
+      let endIndex = len-1;
+      let oldIndex = event.oldIndex;
+      if(oldIndex===0){//挪动之前为第一个元素
+        let oldNextItem = this.dataListDragTmp[oldIndex+1];
+        let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
+        nextItem.prev = 0;
+      }else if(oldIndex===endIndex){//挪动之前为最后一个元素
+        let oldPrevItem = this.dataListDragTmp[oldIndex-1];
+        let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
+        prevItem.next = -1;
+      }else{//挪动之前为中间元素
+        let oldPrevItem = this.dataListDragTmp[oldIndex-1];
+        let oldNextItem = this.dataListDragTmp[oldIndex+1];
+        let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
+        let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
+        prevItem.next = oldNextItem.id;
+        nextItem.prev = oldPrevItem.id;
+      }
+
+      let newIndex = event.newIndex;
+      let newItem = this.dataList[newIndex];
+      if(newIndex===0){//挪动之后为第一个元素
+        let newNextItem = this.dataList[newIndex+1];
+        newNextItem.prev = newItem.id;
+      }else if(newIndex===endIndex){//挪动之后为最后一个元素
+        let newPrevItem = this.dataList[newIndex-1];
+        newPrevItem.next =newItem.id;
+      }else{//挪动之后为中间元素
+        let newPrevItem = this.dataList[newIndex-1];
+        let newNextItem = this.dataList[newIndex+1];
+        newPrevItem.next = newItem.id;
+        newNextItem.prev = newItem.id;
+      }
+*/
+      let newIndex = event.newIndex;
+      let newItem = this.dataList[newIndex];
+
+      if(newIndex===0){//挪动之后为第一个元素
+        let newNextItem = this.dataList[newIndex+1];
+        newItem.prev = 0;
+        newItem.next = newNextItem.id;
+      }else if(newIndex===(this.dataList.length-1)){//挪动之后为最后一个元素
+        let newPrevItem = this.dataList[newIndex-1];
+        newItem.prev = newPrevItem.id;
+        newItem.next = -1;
+      }else{//挪动之后为中间元素
+        let newNextItem = this.dataList[newIndex+1];
+        let newPrevItem = this.dataList[newIndex-1];
+        newItem.prev = newPrevItem.id;
+        newItem.next = newNextItem.id;
+      }
+      //更新图表prev和next
+      const modifyParams = {
+        id:newItem.id,
+        span:newItem.span,
+        height:newItem.height,
+        prev:newItem.prev,
+        next:newItem.next,
+      }
+      this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
+        if (response.code === 200) {
+          //let item = this.dataList.find(item => item.id === newItem.id);
+        }else {
+          if(response.msg){
+            this.$message.error(response.msg);
+          }else if(response.error){
+            this.$message.error(response.error);
+          }else {
+            this.$message.error(response);
+          }
+        }
+      });
     },
     move (event, orgin) {
       console.log('move', event, orgin)
     },
+    /*
     handleDragStart(e,item){
       this.dragging = item;
     },
@@ -144,6 +252,7 @@ export default {
 
       this.dataList = newItems
     },
+    */
     initCurrentRecordNum(){
       this.currentRecordNum = 0;
     },
diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss
index 1053ed656..f1a726462 100644
--- a/nezha-fronted/src/components/charts/chart-table.scss
+++ b/nezha-fronted/src/components/charts/chart-table.scss
@@ -33,7 +33,7 @@
   }
 }
 .chart-table {
-  width: calc(100% - 18px);
+  width: 100%;
   height: 100%;//calc(100% - 40px);
   // min-height: 500px;
   position: relative;
@@ -71,6 +71,9 @@
   .chartTitle:hover {
     background-color:#d8dce1;
   }
+  .dragTitle{
+    background-color:#d8dce1;
+  }
   .chartTitle {
     text-align: center;
     width: 100%;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 1f3e4f992..afa96f039 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -17,7 +17,7 @@
           </div>
         </div>
         -->
-        <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex">
+        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
 
           <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">
@@ -163,6 +163,7 @@ export default {
             stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
             firstShow: false, // 默认不显示操作按钮,
             caretShow:false,
+            dragTitleShow:false,
             dropdownMenuShow:false,
             minHeight:200,
             chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
@@ -310,7 +311,8 @@ export default {
           this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
         },
       dragResize:function(e){
-        var diffWidth =38; //界面的宽度空白的地方的宽度
+        var diffWidth =20; //界面的宽度空白的地方的宽度
+        var chartBoxPadding = 22;
         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;
@@ -367,7 +369,7 @@ export default {
             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.width = (containerWidth+chartBoxPadding)+'px';
             //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
             //表格的高度
             const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
@@ -418,7 +420,7 @@ export default {
           let containerWidth = parseInt(targetDiv.style.width);
 
           const chartBox = document.getElementsByClassName('chartBox');
-          chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
+          chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
           //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
           //表格的高度
           const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 8611b45cd..cd8af7309 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -294,9 +294,10 @@
         this.divFirstShow = showDiv;
       },
       dragResize:function(e){
-        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 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;
@@ -355,7 +356,7 @@
             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.width = (containerWidth+chartBoxPadding)+'px';
             _this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
           }
         }
@@ -405,7 +406,7 @@
           if(_this.echartStore){
             let divHeight = _this.$refs.legendArea.offsetHeight;
             const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
+            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
             _this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
           }