From b5eecd5926f16a2d85df1e5ceac341e794c4515b Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 29 May 2020 21:06:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20panel=E6=8B=96=E6=8B=BD=E3=80=81?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=EF=BC=88=E9=83=A8=E5=88=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      | 2495 ++++++++---------
 .../components/charts/chart-single-stat.scss  |    3 +-
 .../src/components/charts/chart-table.vue     |   10 -
 .../src/components/charts/chart-url.scss      |    3 +-
 .../components/charts/line-chart-block.scss   |   62 +-
 .../components/charts/line-chart-block.vue    |  357 +--
 nezha-fronted/src/main.js                     |    3 +-
 nezha-fronted/src/tools.js                    |   77 +
 8 files changed, 1349 insertions(+), 1661 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index a019249ef..8d3476f4f 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1,74 +1,45 @@
 <style scoped>
   .chartBox {
-    box-sizing: border-box;
     float:left;
-    padding: 0 10px 10px 10px;
-    /*position:relative;*/
+    padding: 0 10px;
+    margin: 10px 0;
+    position:relative;
+    box-sizing: border-box;
   }
   .noData{
     text-align: center
   }
   .list-width{
     width: calc(100% - 14px);
-    overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+    padding: 5px 15px 5px 10px;
+    box-sizing: border-box;
+    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
-  .drag-chart-class{
-    cursor:move !important;
-    /*
-    border:solid 2px yellow;
-    color:yellow;
-    background-color:yellow !important;
-    */
-    /*background-color:red;
-    opacity:1*/
+</style>
+<style lang="scss">
+  .vue-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+    box-sizing: border-box;
   }
-  .choose-class{
-    cursor:move;
-   /* border:solid 2px purple;
-    color:purple;
-    background-color:purple;*/
+  .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;
+    box-sizing: inherit;
   }
-  .chosen-class .chartTitle{
-  }
-  .fallback-class{
-    cursor:move;
-    /*background-color:green;
-    cursor:pointer;*/
-  }
-  .chart-ghost {
-    /*
-    opacity: 1;
-    border:solid 2px green;
-    */
-  }
-
 </style>
 <template>
-
   <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)"
- @mousedown="dragPosition($event,item)"
-    <draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move" @choose="choose"
-               @add="add" @clone="clone" @update="update" @remove="remove" @sort="sort"
-               :scroll-sensitivity="150"
-               :options="{
-                 group:{name:'chartGroup',pull:'false'},
-                 dragClass:'drag-chart-class',
-                 fallbackClass:'fallback-class',
-                 forceFallback:true,
-                 ghostClass:'chart-ghost',
-                 chosenClass:'choose-class',
-                 scroll:true,
-                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                 animation:150,
-                 handle:'.chartTitle',
-               }"  >@clone="clone"
-     -->
     <draggable v-model="dataList" @start="start" @end="end" :move="move" :key
                :scroll-sensitivity="150"
                :options="{
@@ -83,40 +54,40 @@
                  animation:150,
                  handle:'.chartTitle',
                }"  >
-      <div class="chartBox" v-for="(item, index) in dataList"    :key="index" :id="item.title+'_'+item.id"
-          >
+      <div class="chartBox" v-for="(item, index) in dataList" :key="index" :id="'chart-' + item.id" :name="item.title">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-        :ref="'editChart'+item.id"
-        @on-refresh-data="refreshChart"
-        @on-remove-chart-block="removeChart"
-        @on-duplicate-chart-block="duplicateChart"
-        @on-drag-chart="editChartForDrag"
-        @on-edit-chart-block="editData"
-        :panel-id="filter.panelId"
-        :chart-index="index"
-        :editChartId="'editChartId' + item.id"></line-chart-block>
+                          :ref="'editChart'+item.id"
+                          @on-refresh-data="refreshChart"
+                          @on-remove-chart-block="removeChart"
+                          @on-duplicate-chart-block="duplicateChart"
+                          @on-drag-chart="editChartForDrag"
+                          @on-edit-chart-block="editData"
+                          :panel-id="filter.panelId"
+                          :chart-index="index"
+                          :chart-data="item"
+                          :step-height="stepHeight"></line-chart-block>
 
         <chart-single-stat v-if="item.type === 'singleStat'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                      @on-refresh-data="refreshChart"
                      @on-search-data="searchData"
                      @on-remove-chart-block="removeChart"
-                      @on-duplicate-chart-block="duplicateChart"
+                     @on-duplicate-chart-block="duplicateChart"
                      @on-drag-chart="editChartForDrag"
                      @on-edit-chart-block="editData"
+                     :chart-data="item"
                      :panel-id="filter.panelId"
-                     :chart-index="index"
-                     :editChartId="'editChartId' + item.id"></chart-single-stat>
+                     :chart-index="index"></chart-single-stat>
 
         <chart-table v-if="item.type === 'table'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-        @on-refresh-data="refreshChart"
-        @on-search-data="searchData"
-        @on-remove-chart-block="removeChart"
-        @on-duplicate-chart-block="duplicateChart"
-        @on-drag-chart="editChartForDrag"
-        @on-edit-chart-block="editData"
-        :panel-id="filter.panelId"
-        :chart-index="index"
-        :editChartId="'editChartId' + item.id"></chart-table>
+          @on-refresh-data="refreshChart"
+          @on-search-data="searchData"
+          @on-remove-chart-block="removeChart"
+          @on-duplicate-chart-block="duplicateChart"
+          @on-drag-chart="editChartForDrag"
+          @on-edit-chart-block="editData"
+          :panel-id="filter.panelId"
+          :chart-index="index"
+          :step-height="stepHeight"></chart-table>
 
         <chart-url v-if="item.type === 'url'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                      @on-refresh-data="refreshChart"
@@ -126,8 +97,7 @@
                      @on-drag-chart="editChartForDrag"
                      @on-edit-chart-block="editData"
                      :panel-id="filter.panelId"
-                     :chart-index="index"
-                     :editChartId="'editChartId' + item.id"></chart-url>
+                     :chart-index="index"></chart-url>
 
         <chart-asset-info v-if="item.type  === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                     @on-drag-chart="editChartForDrag"
@@ -153,1343 +123,1160 @@
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
   </div>
 </template>
+
 <script>
-import axios from 'axios';
-import bus from '../../libs/bus';
-import lineChartBlock from './line-chart-block';
-import chartTable from './chart-table';
-import chartUrl from './chart-url';
-import chartSingleStat from './chart-single-stat';
-import chartAssetInfo from './chart-asset-info'
-import draggable from 'vuedraggable'
-import chartDataFormat from "./chartDataFormat";
-import chartAlertList from './chart-alert-list'
-export default {
-  name: 'chartList',
-  props: {
-    isModel: {type: Boolean, default: false},
-    additionalInfo:{}
-  },
-  components: {
-    chartAlertList,
-    chartAssetInfo,
-    lineChartBlock,
-    chartTable,
-    chartUrl,
-    chartSingleStat,
-    draggable,
-  },
-  data() {
-    return {
-      filter: {},
-      dataList: [], // 看板中所有图表信息
-      dataListDragTmp:[],
-      time: {
-        start: '',
-        end: '',
+  import axios from 'axios';
+  import bus from '../../libs/bus';
+  import lineChartBlock from './line-chart-block';
+  import chartTable from './chart-table';
+  import chartUrl from './chart-url';
+  import chartSingleStat from './chart-single-stat';
+  import chartAssetInfo from './chart-asset-info'
+  import draggable from 'vuedraggable'
+  import chartDataFormat from "./chartDataFormat";
+  import chartAlertList from './chart-alert-list'
+  export default {
+    name: 'chartList',
+    props: {
+      isModel: {type: Boolean, default: false},
+      additionalInfo:{}
+    },
+    components: {
+      chartAlertList,
+      chartAssetInfo,
+      lineChartBlock,
+      chartTable,
+      chartUrl,
+      chartSingleStat,
+      draggable,
+    },
+    data() {
+      return {
+        filter: {},
+        dataList: [], // 看板中所有图表信息
+        dataListDragTmp:[],
+        time: {
+          start: '',
+          end: '',
+        },
+        panelId: '',
+        timer: null,
+        dataTotalList:[],//懒加载：总记录数
+        dataTotalListBak:[],//用于查询：懒加载，总记录备份
+        isPage:false,//是否分页懒加载
+        currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
+        lineNum:3,//每页加载的行数
+        pagePanelId:'',//当前分页的panelId
+        dragging: null,
+        chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+        stepHeight: 50,
+      };
+    },
+    computed: {},
+    watch: {},
+    methods: {
+      change (event) {
+        console.log('change', event)
       },
-      panelId: '',
-      timer: null,
-      dataTotalList:[],//懒加载：总记录数
-      dataTotalListBak:[],//用于查询：懒加载，总记录备份
-      isPage:false,//是否分页懒加载
-      currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
-      lineNum:3,//每页加载的行数
-      pagePanelId:'',//当前分页的panelId
-      dragging: null,
-      chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
-    };
-  },
-  computed: {},
-  watch: {},
-  methods: {
-    change (event) {
-      console.log('change', event)
-    },
-    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];
-      let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-      console.log('start---class', dragClass);
-      //dragClass.style.opacity = 1;
-      //dragClass.style.pointerEvents = 'auto';
-/*
-      let canvas = item.querySelector('canvas');
-      console.log('start-canvas',canvas);
-      let canvasclone = event.clone.querySelector('canvas');
-      console.log('start-canvas-style',canvasclone.style);
-      canvasclone.style.border='solid 2px green !importmant';
-      console.log('start-canvas-style2',canvasclone.style);
-      if(canvas&&canvasclone) {
-        let ctx = canvas.getContext("2d");
-        let image = new Image();
-        image.src = canvas.toDataURL();
-        //var a = document.createElement("a");
-        //a.href=canvas.toDataURL();
-        //a.download="drcQrcode";
-        //a.click();
-        console.log('clone-image', image)
-        let ctxClone = canvasclone.getContext("2d");
-        image.onload = function () {
-          console.log('clone-image-load', image)
-          //ctxClone.drawImage(image, 0, 0);
+      start (event) {
+        console.log('start', event, this.dataList);
+        event.item.querySelector('.chartTitle').style.background = '#d8dce1';
+        this.dataListDragTmp = [...this.dataList];
+      },
+      end (event) {
+        let item = event.item;
+        let oldIndex = event.oldIndex;
+        let newIndex = event.newIndex;
+        let newItem = this.dataList[newIndex];
+        //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--start
+        let len = this.dataListDragTmp.length;//移动之前的元素列表
+        let endIndex = len-1;
+        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;
         }
-      }
-      */
-    },
-    end (event) {
-      let item = event.item;
-      //console.log('item--old', item);
-      //console.log('end', event, this.dataList);
-      //console.log('totalBak', event, this.dataTotalListBak);
-      /*
-      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;
-      }
-*/
-      /*
-      if(this.dataList.length===1){
-        newItem.prev = 0;
-        newItem.next = -1;
-      }else 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;
-      }
-      */
-      let oldIndex = event.oldIndex;
-      let newIndex = event.newIndex;
-      let newItem = this.dataList[newIndex];
-      //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--start
-      let len = this.dataListDragTmp.length;//移动之前的元素列表
-      let endIndex = len-1;
-      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;
-      }
-
-      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;
-      }
-      //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--end
-
-      //前台总列表中的顺序也得修改（dataTotalList及dataTotalListBak），后台接口也得调用
-      if(newIndex<oldIndex){//从后往前移动：
-        //console.log('从后往前移动：oldIndex='+oldIndex+',newIndex='+newIndex)
-        let newNextItem = this.dataList[newIndex+1];
-        newItem.next = newNextItem.id;
-
-        let nextItemIndexInTotal = -1;
-        this.dataTotalListBak.forEach((item,index)=>{
-          if(item.id===newNextItem.id){
-            nextItemIndexInTotal = index;
-          }
-        })
-       // console.log('从后往前移动：next元素在总列表中之前的元素的index='+nextItemIndexInTotal)
-        if(nextItemIndexInTotal>0){//总列表中：移动之后的当前元素后面的元素之前有元素
-          let prevItem = this.dataTotalListBak[nextItemIndexInTotal-1];
-          newItem.prev = prevItem.id;
-        }else{//之前无元素
-          newItem.prev = 0;
+        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;
         }
-      }else if(newIndex>oldIndex){//从前往后移动
-        //console.log('从前往后移动：oldIndex='+oldIndex+',newIndex='+newIndex)
-        let newPrevItem = this.dataList[newIndex-1];
-        newItem.prev = newPrevItem.id;
+        //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--end
 
-        let prevItemIndexInTotal = -1;
-        this.dataTotalListBak.forEach((item,index)=>{
-          if(item.id===newPrevItem.id){
-            prevItemIndexInTotal = index;
-          }
-        })
-        //console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
-        if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
-          let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
-          newItem.next = nextItem.id;
-        }else{//之后无元素
-          newItem.next = -1;
-        }
-      }else {//oldIndex = newIndex
+        //前台总列表中的顺序也得修改（dataTotalList及dataTotalListBak），后台接口也得调用
+        if(newIndex<oldIndex){//从后往前移动：
+          //console.log('从后往前移动：oldIndex='+oldIndex+',newIndex='+newIndex)
+          let newNextItem = this.dataList[newIndex+1];
+          newItem.next = newNextItem.id;
 
-      }
-
-      //更新图表prev和next
-      const modifyParams = {
-        id:newItem.id,
-        span:newItem.span,
-        height:newItem.height,
-        prev:newItem.prev,
-        next:newItem.next,
-      };
-
-      if(this.dataList.length>1 && oldIndex !== newIndex){
-        this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
-          if (response.code === 200) {
-            //修改前台列表中元素的顺序
-            let curItem = this.dataTotalListBak.find((item,index)=>{return newItem.id===item.id});
-            let curIndex = this.dataTotalListBak.indexOf(curItem);
-            this.dataTotalListBak.splice(curIndex,1);
-
-            let nextItemTmp = this.dataTotalListBak.find((item)=>{return item.id===newItem.next});
-            if(nextItemTmp){
-              let nextIndex = this.dataTotalListBak.indexOf(nextItemTmp);
-              this.dataTotalListBak.splice(nextIndex,0,newItem);
-            }else{//移动到最后一个元素
-              this.dataTotalListBak.push(newItem);
+          let nextItemIndexInTotal = -1;
+          this.dataTotalListBak.forEach((item,index)=>{
+            if(item.id===newNextItem.id){
+              nextItemIndexInTotal = index;
             }
-          }else {
-            if(response.msg){
-              this.$message.error(response.msg);
-            }else if(response.error){
-              this.$message.error(response.error);
+          })
+          // console.log('从后往前移动：next元素在总列表中之前的元素的index='+nextItemIndexInTotal)
+          if(nextItemIndexInTotal>0){//总列表中：移动之后的当前元素后面的元素之前有元素
+            let prevItem = this.dataTotalListBak[nextItemIndexInTotal-1];
+            newItem.prev = prevItem.id;
+          }else{//之前无元素
+            newItem.prev = 0;
+          }
+        }else if(newIndex>oldIndex){//从前往后移动
+          //console.log('从前往后移动：oldIndex='+oldIndex+',newIndex='+newIndex)
+          let newPrevItem = this.dataList[newIndex-1];
+          newItem.prev = newPrevItem.id;
+
+          let prevItemIndexInTotal = -1;
+          this.dataTotalListBak.forEach((item,index)=>{
+            if(item.id===newPrevItem.id){
+              prevItemIndexInTotal = index;
+            }
+          })
+          //console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
+          if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
+            let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
+            newItem.next = nextItem.id;
+          }else{//之后无元素
+            newItem.next = -1;
+          }
+        }else {//oldIndex = newIndex
+
+        }
+
+        //更新图表prev和next
+        const modifyParams = {
+          id:newItem.id,
+          span:newItem.span,
+          height:newItem.height,
+          prev:newItem.prev,
+          next:newItem.next,
+        };
+
+        if(this.dataList.length>1 && oldIndex !== newIndex){
+          this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
+            if (response.code === 200) {
+              //修改前台列表中元素的顺序
+              let curItem = this.dataTotalListBak.find((item,index)=>{return newItem.id===item.id});
+              let curIndex = this.dataTotalListBak.indexOf(curItem);
+              this.dataTotalListBak.splice(curIndex,1);
+
+              let nextItemTmp = this.dataTotalListBak.find((item)=>{return item.id===newItem.next});
+              if(nextItemTmp){
+                let nextIndex = this.dataTotalListBak.indexOf(nextItemTmp);
+                this.dataTotalListBak.splice(nextIndex,0,newItem);
+              }else{//移动到最后一个元素
+                this.dataTotalListBak.push(newItem);
+              }
             }else {
-              this.$message.error(response);
-            }
-          }
-        });
-      }
-
-      let chartTitle = item.querySelector('.chartTitle');
-      chartTitle.style.background = '';
-    },
-    move (event, orgin) {
-      console.log('move', event, orgin);
-      let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-      console.log('move---class', dragClass);
-      //dragClass.style.opacity = 1;
-      //dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
-
-      let chartTitle = dragClass.querySelector('.chartTitle');
-      console.log('move-title',chartTitle);
-      chartTitle.style.background = '#d8dce1';
-
-    },
-    choose(event ){
-      console.log('choose', event);
-      let chartTitle = event.item.querySelector('.chartTitle');
-      //console.log('choose-title',chartTitle);
-      //chartTitle.style.background = '#d8dce1';
-    },
-    clone(event){
-      console.log('clone',event );
-      let canvas = event.item.querySelector('canvas');
-      console.log('clone-canvas',canvas);
-      let canvasclone = event.clone.querySelector('canvas');
-      canvasclone.style.border='solid 1px yellow';
-      console.log('clone-canvasclone',canvasclone);
-      if(canvas&&canvasclone){
-        let ctx = canvas.getContext("2d");
-        let image = new Image();
-        image.src= canvas.toDataURL();
-        /*var a = document.createElement("a");
-        a.href=canvas.toDataURL();
-        a.download="drcQrcode";
-        a.click();*/
-        console.log('clone-image',image);
-        let ctxClone = canvasclone.getContext("2d");
-        //ctxClone.drawImage(image,0,0);
-        image.onload = function(){
-          console.log('clone-image-load',image);
-          ctxClone.drawImage(image,0,0);
-        }
-
-      }
-    },
-    add(event){
-      console.log('add',event );
-    },
-    update(event){
-      console.log('update',event );
-    },
-    remove(event){
-      console.log('remove',event );
-    },
-    sort(event){
-      console.log('sort',event );
-    },
-    dragPosition:function(e){
-      console.log('===',e.clientY,e.clientX);
-      let odiv=e;//目标元素e.target
-      console.log('odiv====',odiv);
-      //var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
-      //得到点击时该容器的：
-      var startY=e.clientY;
-      var startX=e.clientX;
-      var _this=this;
-//鼠标相对元素的位置
-      var distY=e.clientY-odiv.offsetLeft;
-      var distX=e.clientX-odiv.offsetTop;
-      document.onmousemove=function(e){
-        e.preventDefault();
-        console.log('===onmousemove',e.clientY,e.clientX);
-        //e.preventDefault();
-
-       // var distY=Math.abs(e.clientY-startY);
-       // var distX=Math.abs(e.clientX-startX);
-        let left=e.clientX-distX;
-        let top=e.clientY-distY;
-        odiv.style.top=top+'px';
-        odiv.style.left=left+'px';
-        console.log('odiv====',odiv);
-        /*
-        //往上方拖动：
-        if( e.clientY < startY){
-          targetDiv.style.top=(startY-distY)+'px';
-        }
-        if( e.clientX < startX){
-          targetDiv.style.left=(startX-distX)+'px';
-        }
-        //往下方拖动：
-        if (e.clientY > startY) {
-          targetDiv.style.top=(startY+distY)+'px';
-        }
-        if (e.clientX > startX) {
-          targetDiv.style.left=(startX+distX)+'px';
-        }
-        */
-      };
-
-      document.onmouseup=function(){
-        document.onmousemove=null;
-        document.onmouseup = null;
-      }
-    },
-    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;
-    },
-    cleanData(){
-      /*if (this.dataList.length > 0 && this.$refs.editChart) {
-         this.$refs.editChart.forEach((item) => {
-           item.clearData();
-         });
-        }*/
-      if (this.dataList.length > 0 ) {
-        this.dataList.forEach((item) => {
-          this.$refs['editChart'+item.id][0].clearData();
-        });
-      }
-      this.dataList = [];
-      //console.log("__map__",JSON.stringify(this.chartDataCacheGroup))
-      this.chartDataCacheGroup.clear();
-      //console.log("__map22__",JSON.stringify(this.chartDataCacheGroup))
-    },
-    initData(filter) {
-      //this.dataList = [];
-      this.cleanData();
-      // 内含 panelId,开始时间,结束时间
-      this.filter = filter;
-      this.pagePanelId = this.filter.panelId;
-      this.getData(this.filter);
-    },
-    searchCharts(searchName){
-      this.dataList = [];
-      this.dataTotalList = [];
-
-      let chartListTmp = [];
-      if(searchName && searchName.trim()!==''){
-        this.dataTotalListBak.forEach((item)=>{
-          if(item.title.indexOf(searchName)>-1){
-            item.isLoaded = false;
-            chartListTmp.push(item);
-          }
-        });
-      }else{
-        this.dataTotalListBak.forEach((item)=>{
-            item.isLoaded = false;
-            chartListTmp.push(item);
-        });
-      }
-
-      this.dataTotalList = [...chartListTmp];
-      this.dataList = [...this.dataTotalList];
-
-      this.$nextTick(() => {
-        if (this.dataList.length > 0 ) {
-          this.dataList.forEach((item,index) => {
-            this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
-            this.setSize(item.span, index);//设置该图表宽度
-
-            //获得当前显示在浏览器的图表，从后台获取数据
-            let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
-            //console.log(item.title,"___searchChart___",JSON.stringify(item))
-            if(!item.isLoaded ){
-              this.handleElementInViewport(chartBox,0,item,index,true);
+              if(response.msg){
+                this.$message.error(response.msg);
+              }else if(response.error){
+                this.$message.error(response.error);
+              }else {
+                this.$message.error(response);
+              }
             }
           });
         }
-      });
-    },
-    pageDataList(isAdd,panelId,isSearch){
-      if(panelId!==this.pagePanelId){
+
+        let chartTitle = item.querySelector('.chartTitle');
+        chartTitle.style.background = '';
+      },
+      move (event, orgin) {
+        console.log('move', event, orgin);
+        let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
+        console.log('move---class', dragClass);
+        //dragClass.style.opacity = 1;
+        //dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
+
+        let chartTitle = dragClass.querySelector('.chartTitle');
+        console.log('move-title',chartTitle);
+        chartTitle.style.background = '#d8dce1';
+
+      },
+      choose(event ){
+        console.log('choose', event);
+        let chartTitle = event.item.querySelector('.chartTitle');
+      },
+      clone(event){
+        console.log('clone',event );
+        let canvas = event.item.querySelector('canvas');
+        console.log('clone-canvas',canvas);
+        let canvasclone = event.clone.querySelector('canvas');
+        canvasclone.style.border='solid 1px yellow';
+        console.log('clone-canvasclone',canvasclone);
+        if(canvas&&canvasclone){
+          let ctx = canvas.getContext("2d");
+          let image = new Image();
+          image.src= canvas.toDataURL();
+          console.log('clone-image',image);
+          let ctxClone = canvasclone.getContext("2d");
+          //ctxClone.drawImage(image,0,0);
+          image.onload = function(){
+            console.log('clone-image-load',image);
+            ctxClone.drawImage(image,0,0);
+          }
+        }
+      },
+      add(event){
+        console.log('add',event );
+      },
+      update(event){
+        console.log('update',event );
+      },
+      remove(event){
+        console.log('remove',event );
+      },
+      sort(event){
+        console.log('sort',event );
+      },
+      dragPosition:function(e){
+        console.log('===',e.clientY,e.clientX);
+        let odiv=e;//目标元素e.target
+        console.log('odiv====',odiv);
+        //var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+        //得到点击时该容器的：
+        var startY=e.clientY;
+        var startX=e.clientX;
+        var _this=this;
+//鼠标相对元素的位置
+        var distY=e.clientY-odiv.offsetLeft;
+        var distX=e.clientX-odiv.offsetTop;
+        document.onmousemove=function(e){
+          e.preventDefault();
+          console.log('===onmousemove',e.clientY,e.clientX);
+          let left=e.clientX-distX;
+          let top=e.clientY-distY;
+          odiv.style.top=top+'px';
+          odiv.style.left=left+'px';
+          console.log('odiv====',odiv);
+        };
+
+        document.onmouseup=function(){
+          document.onmousemove=null;
+          document.onmouseup = null;
+        }
+      },
+      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;
-      }
-      if(this.dataTotalList && this.dataTotalList.length>0){
-        if(this.currentRecordNum>=this.dataTotalList.length){
-          //alert('数据加载完毕！');
-        }else {
-          let dataTmpList = [];
-          let spanSum = 0;
-          let line = 0;//行数
-          let isDataFull=false;
-          let curRecNum = this.currentRecordNum;
-          let len = this.dataTotalList.length;
-          for(let i=curRecNum;!isDataFull && i<len;i++){
-            if(line<this.lineNum){
-              let item = this.dataTotalList[i];
-              let span = item.span;
-              let sumTmp = spanSum+span;
-              if(sumTmp<=12){
-                spanSum =sumTmp;
-              }else{//大于12表示够1行了，
-                line = line +1;
-                spanSum = span;
+      },
+      cleanData(){
+        /*if (this.dataList.length > 0 ) {
+          this.dataList.forEach((item) => {
+            if (this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id].length > 0) {
+              this.$refs['editChart'+item.id][0].clearData();
+            }
+          });
+        }*/
+        this.dataList = [];
+        this.chartDataCacheGroup.clear();
+      },
+      initData(filter) {
+        this.cleanData();
+        // 内含 panelId,开始时间,结束时间
+        this.filter = filter;
+        this.pagePanelId = this.filter.panelId;
+        this.getData(this.filter);
+      },
+      searchCharts(searchName){
+        this.dataList = [];
+        this.dataTotalList = [];
+
+        let chartListTmp = [];
+        if(searchName && searchName.trim()!==''){
+          this.dataTotalListBak.forEach((item)=>{
+            if(item.title.indexOf(searchName)>-1){
+              item.isLoaded = false;
+              chartListTmp.push(item);
+            }
+          });
+        }else{
+          this.dataTotalListBak.forEach((item)=>{
+            item.isLoaded = false;
+            chartListTmp.push(item);
+          });
+        }
+
+        this.dataTotalList = [...chartListTmp];
+        this.dataList = [...this.dataTotalList];
+
+        this.$nextTick(() => {
+          if (this.dataList.length > 0 ) {
+            this.dataList.forEach((item,index) => {
+              this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
+              this.setChartSize(item.span, index);//设置该图表宽度
+              if(!item.isLoaded ){
+                //获得当前显示在浏览器的图表，从后台获取数据
+                let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
+                this.handleElementInViewport(chartBox,0,item,index,true);
               }
+            });
+          }
+        });
+      },
+      pageDataList(isAdd,panelId,isSearch){
+        if(panelId!==this.pagePanelId){
+          this.currentRecordNum = 0;
+        }
+        if(this.dataTotalList && this.dataTotalList.length>0){
+          if(this.currentRecordNum>=this.dataTotalList.length){
+            //alert('数据加载完毕！');
+          }else {
+            let dataTmpList = [];
+            let spanSum = 0;
+            let line = 0;//行数
+            let isDataFull=false;
+            let curRecNum = this.currentRecordNum;
+            let len = this.dataTotalList.length;
+            for(let i=curRecNum;!isDataFull && i<len;i++){
               if(line<this.lineNum){
-                dataTmpList.push(item);
-                this.currentRecordNum = i+1;
-              }else{
+                let item = this.dataTotalList[i];
+                let span = item.span;
+                let sumTmp = spanSum+span;
+                if(sumTmp<=12){
+                  spanSum =sumTmp;
+                }else{//大于12表示够1行了，
+                  line = line +1;
+                  spanSum = span;
+                }
+                if(line<this.lineNum){
+                  dataTmpList.push(item);
+                  this.currentRecordNum = i+1;
+                }else{
+                  this.currentRecordNum = i;
+                  break;
+                }
+              }else {//数据加载够了
+                isDataFull=true;
                 this.currentRecordNum = i;
                 break;
               }
-            }else {//数据加载够了
-              isDataFull=true;
-              this.currentRecordNum = i;
-              break;
+            }
+            if(isAdd){
+              let oldDataListLen = this.dataList.length;
+              let dataListTmp = [...this.dataList];
+              this.dataList =  [...dataListTmp.concat(dataTmpList)];
+              this.$nextTick(() => {
+                this.dataSetFirst(dataTmpList,oldDataListLen,isSearch);
+              });
+            }else {
+              this.dataList = [...dataTmpList];
             }
           }
-          if(isAdd){
-            let oldDataListLen = this.dataList.length;
-            let dataListTmp = [...this.dataList];
-            this.dataList =  [...dataListTmp.concat(dataTmpList)];
-            this.$nextTick(() => {
-              this.dataSetFirst(dataTmpList,oldDataListLen,isSearch);
-            });
-          }else {
-            this.dataList = [...dataTmpList];
-          }
         }
-      }
-    },
-    // 获取panel详情数据,获取panel下所有chart列表
-    getData(params) {
-      //param   目前没有用
-      const param = {
-        panelId: params.panelId,
-        query: params.query,
-      };
-      if (!param.query) delete param.query;
-      //根据panelId获得panel下的所有图表
-      this.$get('panel/'+ params.panelId+'/charts').then(response => {
-        if (response.code === 200) {
-          response.data.list.forEach((item,index)=>{
-            item.isLoaded = false;
-          });
+      },
+      // 获取panel详情数据,获取panel下所有chart列表
+      getData(params) {
+        //param   目前没有用
+        const param = {
+          panelId: params.panelId,
+          query: params.query,
+        };
+        if (!param.query) delete param.query;
+        //根据panelId获得panel下的所有图表
+        this.$get('panel/'+ params.panelId+'/charts').then(response => {
+          if (response.code === 200) {
+            response.data.list.forEach((item,index)=>{
+              item.isLoaded = false;
+            });
 
-          if(response.data.list){
-            this.dataTotalList =  response.data.list;
-          }else {
-            this.dataTotalList = response.data;
-          }
-          this.dataTotalListBak = [...this.dataTotalList];
+            if(response.data.list){
+              this.dataTotalList =  response.data.list;
+            }else {
+              this.dataTotalList = response.data;
+            }
+            this.dataTotalListBak = [...this.dataTotalList];
 
-          if(this.filter.searchName&&this.filter.searchName!=''){
-            let chartListTmp = [];
-            let searchTitleStr = this.filter.searchName;
-            this.dataTotalListBak.forEach((item)=>{
-              if(item.title.indexOf(searchTitleStr)>-1){
-                chartListTmp.push(item);
+            //查询条件带name
+            if(this.filter.searchName&&this.filter.searchName!=''){
+              let chartListTmp = [];
+              let searchTitleStr = this.filter.searchName;
+              this.dataTotalListBak.forEach((item)=>{
+                if(item.title.indexOf(searchTitleStr)>-1){
+                  chartListTmp.push(item);
+                }
+              });
+              this.dataTotalList = chartListTmp;
+            }
+
+            this.dataList = [...this.dataTotalList];
+            this.$nextTick(() => {
+              if (this.dataList.length > 0 ) {
+                this.dataList.forEach((item,index) => {
+                  this.setChartSize(item, index);//设置该图表宽度
+                  if(!item.isLoaded){
+                    //获得当前显示在浏览器的图表，从后台获取数据
+                    let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
+                    this.handleElementInViewport(chartBox, 0, item, index);
+                  }
+                });
               }
             });
-            this.dataTotalList = chartListTmp;
           }
-
-          this.dataList = [...this.dataTotalList];
-          this.$nextTick(() => {
-            if (this.dataList.length > 0 ) {
-              this.dataList.forEach((item,index) => {
-                this.$refs['editChart'+item.id][0].showLoad(item);//设置该图表的高度
-                this.setSize(item.span, index);//设置该图表宽度
-
-                //获得当前显示在浏览器的图表，从后台获取数据
-                  let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
-                  if( !item.isLoaded ){
-                    this.handleElementInViewport(chartBox,0,item,index);
-                  }
-              });
+        });
+      },
+      loadChartData(scrollTop){
+        if (this.dataList.length > 0 ) {
+          let chartListInViewport = [];
+          this.dataList.forEach((item,index) => {
+            if(!item.isLoaded){
+              //获得当前显示在浏览器的图表，从后台获取数据
+              let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
+              this.handleElementInViewport(chartBox,scrollTop,item,index);
             }
           });
         }
-      });
-    },
-    loadChartData(scrollTop){
-      if (this.dataList.length > 0 ) {
-        let chartListInViewport = [];
-        this.dataList.forEach((item,index) => {
-          //获得当前显示在浏览器的图表，从后台获取数据
-          let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
-          //console.log("loadChartData___",item.title,item.isLoaded)
-          if(!item.isLoaded){
-            this.handleElementInViewport(chartBox,scrollTop,item,index);
-          }
-        });
-      }
-    },
-    // arr: 该panel下图表list,生成该看板下所有图表
-    dataSetFirst(arr,oldDataListLen,isSearch) {
-      if (arr.length) {
-        arr.forEach((item, index) => {
-          let realIndex = index;
-          if(oldDataListLen){
-            realIndex += oldDataListLen;
-          }
-          let chartType = item.type;
-          if(chartType!=='url'){
-            if(isSearch){
-              this.getChartDataForSearch(item,realIndex);
+      },
+      // arr: 该panel下图表list,生成该看板下所有图表
+      dataSetFirst(arr,oldDataListLen,isSearch) {
+        if (arr.length) {
+          arr.forEach((item, index) => {
+            let realIndex = index;
+            if(oldDataListLen){
+              realIndex += oldDataListLen;
+            }
+            let chartType = item.type;
+            if(chartType!=='url'){
+              if(isSearch){
+                this.getChartDataForSearch(item,realIndex);
+              }else {
+                this.getChartData(item, realIndex);
+              }
             }else {
-              this.getChartData(item, realIndex);
+              if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
+                this.$refs['editChart'+item.id][0].showLoad(item);
+              }
+              this.setChartSize(item.span, realIndex); // 设置该图表宽度
             }
-          }else {
-            if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
-              this.$refs['editChart'+item.id][0].showLoad(item);
-            }
-            this.setSize(item.span, realIndex); // 设置该图表宽度
-          }
-        });
-      }
-    },
-    getChartDataForSearch(chartItem,realIndex){
-      let chartData = this.chartDataCacheGroup.get(chartItem.id);
-      if(chartData){
-        this.setSize(chartItem.span, realIndex); // 设置该图表宽度
-        let filterType = chartData.filterType;
-        let errorMsg = chartData.errorMsg;
-        let tableData = chartData.tableData;
-        let panelId = chartData.panelId;
-        let filter = chartData.filter;
-        let legend = chartData.legend;
-        let series = chartData.series;
-        let singleStatRlt = chartData.singleStatRlt;
-        if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
-          if (chartItem.type === 'table') {//表格
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter, filterType,errorMsg);
-            } else {
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
-                panelId, filter,'',errorMsg);
-            }
-          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend, filterType,errorMsg);
-            } else {
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
-                panelId, filter, legend,'',errorMsg);
-            }
-          }else if(chartItem.type ==='singleStat'){
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter, filterType,errorMsg);
-            } else {
-              this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
-                this.filter.panelId, this.filter,'',errorMsg);
+          });
+        }
+      },
+      getChartDataForSearch(chartItem,realIndex){
+        let chartData = this.chartDataCacheGroup.get(chartItem.id);
+        if(chartData){
+          let filterType = chartData.filterType;
+          let errorMsg = chartData.errorMsg;
+          let tableData = chartData.tableData;
+          let panelId = chartData.panelId;
+          let filter = chartData.filter;
+          let legend = chartData.legend;
+          let series = chartData.series;
+          let singleStatRlt = chartData.singleStatRlt;
+          if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
+            if (chartItem.type === 'table') {//表格
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
+                  panelId, filter, filterType,errorMsg);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
+                  panelId, filter,'',errorMsg);
+              }
+            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
+                  panelId, filter, legend, filterType,errorMsg);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
+                  panelId, filter, legend,'',errorMsg);
+              }
+            }else if(chartItem.type ==='singleStat'){
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
+                  this.filter.panelId, this.filter, filterType,errorMsg);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
+                  this.filter.panelId, this.filter,'',errorMsg);
+              }
             }
           }
+        }else {
+          this.getChartData(chartItem, realIndex);
         }
-      }else {
-        this.getChartData(chartItem, realIndex);
-      }
-    },
-    /*
-    getSingleStatRlt(statistics,result){
-      let dataArray = [];
-      if(result){
-        result.forEach((item)=>{
-          dataArray.push(item[1]);
-        })
-      }
-      let statisticsRlt = '';
-      if(dataArray.length>0){
-        if(statistics==='min'){//min：最小值
-          statisticsRlt = dataArray.reduce(function(a , b){
-            return b < a ? b : a;
-          });
-        }else if(statistics==='max'){// max：最大值
-          statisticsRlt = dataArray.reduce(function(a , b){
-            return b > a ? b : a;
-          });
-        }else if(statistics==='average'){// average：平均值
-          let sum = 0;
-          dataArray.forEach((item)=>{
-            sum =Number(sum) + Number(item);
-          })
-          statisticsRlt = sum/dataArray.length;
-        }else if(statistics==='total'){//total：总计
-          dataArray.forEach((item)=>{
-            statisticsRlt =Number(statisticsRlt) + Number(item);
-          })
-        }else if(statistics==='first'){//first：第一个值
-          statisticsRlt = dataArray[0];
-        }else if(statistics==='last'){// last：最后一个值
-          statisticsRlt = dataArray[dataArray.length-1];
-        }else if(statistics==='range'){//range : max - min
-          let min = dataArray.reduce(function(a , b){
-            return b < a ? b : a;
-          });
-          let max = dataArray.reduce(function(a , b){
-            return b > a ? b : a;
-          });
-          statisticsRlt = max-min;
-        }else if(statistics==='different'){//different : last - first
-          statisticsRlt = dataArray[dataArray.length-1]-dataArray[0];
+      },
+      // 获取一个图表具体数据,图表信息，图表位置index
+      getChartData(chartInfo, pos, filterType) {
+        const chartItem = chartInfo;
+        const index = pos; // 指标
+        //this.setChartSize(chartItem.span, index); // 设置该图表宽度
+        if(chartItem.type === 'assetInfo'){
+          this.getAssetInfoChartData(chartItem);
+          return;
         }
-      }
-      return statisticsRlt;
-    },*/
-    // 获取一个图表具体数据,图表信息，图表位置index
-    getChartData(chartInfo, pos, filterType) {
-      const chartItem = chartInfo;
-      const index = pos; // 指标
-      this.setSize(chartItem.span, index); // 设置该图表宽度
-      if(chartItem.type === 'assetInfo'){
-        this.getAssetInfoChartData(chartItem);
-        return;
-      }
-      if(chartItem.type === 'alertList'){
-        this.getAlertListChartData(chartItem,filterType);
-        return;
-      }
-      if (this.isModel) {
-        this.modelStaticData(chartInfo, filterType);
-      } else {
-        // 没有数据的设置提示信息暂无数据-针对每一个图
-        const len = chartItem.elements.length;
-        if (len === 0) {
-          this.$nextTick(() => {
-            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
-            }
-          });
+        if(chartItem.type === 'alertList'){
+          this.getAlertListChartData(chartItem,filterType);
+          return;
+        }
+        if (this.isModel) {
+          this.modelStaticData(chartInfo, filterType);
         } else {
-          let startTime = '';
-          let endTime = '';
-          if (filterType === 'refresh') {//刷新
-            const now = new Date();
-            const origin = new Date(this.filter.end_time);
-            const numInterval = now.getTime() - origin.getTime();
-            if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
-              startTime = this.getNewTime(this.filter.start_time, numInterval);
-              endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          // 没有数据的设置提示信息暂无数据-针对每一个图
+          const len = chartItem.elements.length;
+          if (len === 0) {
+            this.$nextTick(() => {
+              if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
+              }
+            });
+          } else {
+            let startTime = '';
+            let endTime = '';
+            if (filterType === 'refresh') {//刷新
+              const now = new Date();
+              const origin = new Date(this.filter.end_time);
+              const numInterval = now.getTime() - origin.getTime();
+              if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
+                startTime = this.getNewTime(this.filter.start_time, numInterval);
+                endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+              } else {
+                startTime = this.filter.start_time;
+                endTime = this.filter.end_time;
+              }
+            } else if (filterType === 'showFullScreen') {//全屏时间查询
+              startTime = this.filter.start_time;
+              endTime = this.filter.end_time;
+              //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
             } else {
               startTime = this.filter.start_time;
               endTime = this.filter.end_time;
             }
-          } else if (filterType === 'showFullScreen') {//全屏时间查询
-            startTime = this.filter.start_time;
-            endTime = this.filter.end_time;
-            //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-          } else {
-            startTime = this.filter.start_time;
-            endTime = this.filter.end_time;
-          }
-          let step = bus.getStep(startTime, endTime);
-          this.$nextTick(() => {
-            const axiosArr = chartItem.elements.map((ele) => {
-              const filterItem = ele;
-              let query = encodeURIComponent(filterItem.expression);
-              return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-            });
-            // 一个图表的所有element单独获取数据
-            axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = [];
-                let singleStatRlt = '';
-                const legend = [];
-                const tableData = [];
-                const sumData = {
-                  name: 'sum',
-                  data: [],
-                  visible: true,
-                  threshold: null,
-                };
-                let errorMsg = "";
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    errorMsg = "";
-                    if (response.data.result) {
-                      // 循环处理每个elements下获取的数据列
-                      if (chartItem.type === 'singleStat') {
-                        if (response.data.result.length === 1) {
-                          let statistics = chartItem.param.statistics;
-                          if (response.data.result[0].values) {
-                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
+            let step = bus.getStep(startTime, endTime);
+            this.$nextTick(() => {
+              const axiosArr = chartItem.elements.map((ele) => {
+                const filterItem = ele;
+                let query = encodeURIComponent(filterItem.expression);
+                return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              });
+              // 一个图表的所有element单独获取数据
+              axios.all(axiosArr).then((res) => {
+                if (res.length > 0) {
+                  const series = [];
+                  let singleStatRlt = '';
+                  const legend = [];
+                  const tableData = [];
+                  const sumData = {
+                    name: 'sum',
+                    data: [],
+                    visible: true,
+                    threshold: null,
+                  };
+                  let errorMsg = "";
+                  res.forEach((response, innerPos) => {
+                    if (response.status === 'success') {
+                      errorMsg = "";
+                      if (response.data.result) {
+                        // 循环处理每个elements下获取的数据列
+                        if (chartItem.type === 'singleStat') {
+                          if (response.data.result.length === 1) {
+                            let statistics = chartItem.param.statistics;
+                            if (response.data.result[0].values) {
+                              singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
+                            }
+                          } else if (response.data.result.length > 1) {
+                            singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
                           }
-                        } else if (response.data.result.length > 1) {
-                          singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
-                        }
-                      } else {
-                        response.data.result.forEach((queryItem, resIndex) => {
-                          const seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle',  //去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2,  //曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              type: chartInfo.type,
-                            },
-                            //visible: true,
-                            //threshold: null,
-                            metric_name: '',
-                          };
+                        } else {
+                          response.data.result.forEach((queryItem, resIndex) => {
+                            const seriesItem = {
+                              theData: {
+                                name: '',
+                                symbol: 'emptyCircle',  //去掉点
+                                symbolSize: [2, 2],
+                                smooth: 0.2,  //曲线变平滑
+                                showSymbol: false,
+                                data: [],
+                                type: chartInfo.type,
+                              },
+                              metric_name: '',
+                            };
 
-                          if (chartInfo.type === 'stackArea') {
-                            seriesItem.theData.type = 'line';
-                            seriesItem.theData.stack = chartInfo.title;
-                            seriesItem.theData.areaStyle = {"opacity": 0.3};
-                          }
-                          if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
-                            seriesItem.theData.markLine={
-                              silent: true,
-                              symbol:['circle','circle'],
-                              label:{
-                                distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
-                                formatter:function(params){
-                                  return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
-                                }
-                              },
-                              lineStyle:{
-                                color:'#d64f40',
-                                width:2,
-                                type:'dotted'
-                              },
-                              data: [{
-                                yAxis: Number(chartInfo.param.threshold)
-                              }, ]
+                            if (chartInfo.type === 'stackArea') {
+                              seriesItem.theData.type = 'line';
+                              seriesItem.theData.stack = chartInfo.title;
+                              seriesItem.theData.areaStyle = {"opacity": 0.3};
                             }
-                          }
-                          // 图表中每条线的名字,后半部分
-                          let host = '';//up,
-                          if (queryItem.metric.__name__) {
-                            host = `${queryItem.metric.__name__}{`;//up,
-                          }
-                          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          let tempArr = [];
-                          let dpsArr = [];
-                          tempArr = queryItem.values;
-                          dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          dpsArr = dpsArr.map(item => {
-                            return [item[0], [item[1][0], Number(item[1][1])]]
-                          })
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`;
+                            if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+                              seriesItem.theData.markLine={
+                                silent: true,
+                                symbol:['circle','circle'],
+                                label:{
+                                  distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+                                  formatter:function(params){
+                                    return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+                                  }
+                                },
+                                lineStyle:{
+                                  color:'#d64f40',
+                                  width:2,
+                                  type:'dotted'
+                                },
+                                data: [{
+                                  yAxis: Number(chartInfo.param.threshold)
+                                }, ]
                               }
-                            });
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1);
                             }
+                            // 图表中每条线的名字,后半部分
+                            let host = '';//up,
                             if (queryItem.metric.__name__) {
-                              host += "}";
+                              host = `${queryItem.metric.__name__}{`;//up,
                             }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression;
-                            }
-                            //处理legend别名
-                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                            if (!alias || alias === '') {
-                              alias = host;
-                            }
-                            legend.push({name: host + resIndex, alias: alias});
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                            seriesItem.theData.name = host + resIndex;
-                            //alert(seriesItem.theData.name);
-                            seriesItem.metric_name = seriesItem.theData.name;
-                            // 将秒改为毫秒
-                            //alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                              /*曲线汇总暂不需要
-                              if (sumData.data[dpsIndex]) {
-                                const sumNum = sumData.data[dpsIndex][1] || 0;
-                                sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                              } else {
-                                sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                              }
-                              */
-                              let t_date = new Date(dpsItem[0] * 1000);
-                              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                              tableData.push({//表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: {element: host, alias: alias},
-                                time: timeTmp,//采集时间
-                                value: dpsItem[1],//数值
+                            const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                            // 设置时间-数据格式对
+                            let tempArr = [];
+                            let dpsArr = [];
+                            tempArr = queryItem.values;
+                            dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                            dpsArr = dpsArr.map(item => {
+                              return [item[0], [item[1][0], Number(item[1][1])]]
+                            })
+                            // 判断是否有数据, && tagsArr.length > 0
+                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                              tagsArr.forEach((tag, i) => {
+                                if (tag !== '__name__') {
+                                  host += `${tag}="${queryItem.metric[tag]}",`;
+                                }
                               });
-                              return [dpsItem[0] * 1000, dpsItem[1]];
-                            });
-                            series.push(seriesItem.theData);
+                              if (host.endsWith(',')) {
+                                host = host.substr(0, host.length - 1);
+                              }
+                              if (queryItem.metric.__name__) {
+                                host += "}";
+                              }
+                              if (!host || host === '') {
+                                host = chartItem.elements[innerPos].expression;
+                              }
+                              //处理legend别名
+                              let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
+                              if (!alias || alias === '') {
+                                alias = host;
+                              }
+                              legend.push({name: host + resIndex, alias: alias});
+                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                              seriesItem.theData.name = host + resIndex;
+                              //alert(seriesItem.theData.name);
+                              seriesItem.metric_name = seriesItem.theData.name;
+                              // 将秒改为毫秒
+                              //alert('table=='+JSON.stringify(queryItem))
+                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                                /*曲线汇总暂不需要
+                                if (sumData.data[dpsIndex]) {
+                                  const sumNum = sumData.data[dpsIndex][1] || 0;
+                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                } else {
+                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                }
+                                */
+                                let t_date = new Date(dpsItem[0] * 1000);
+                                let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                                tableData.push({//表格数据
+                                  // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                  // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                  element: {element: host, alias: alias},
+                                  time: timeTmp,//采集时间
+                                  value: dpsItem[1],//数值
+                                });
+                                return [dpsItem[0] * 1000, dpsItem[1]];
+                              });
+                              series.push(seriesItem.theData);
 
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /*
-                            const currentInfo = chartItem.elements[innerPos];
-                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                            this.$message.warning({
-                              duration: 15,
-                              content: errorMsg,
-                              closable: true,
-                            });
-                            */
-                          }
-                        });
+                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                              // 无数据提示
+                              /*
+                              const currentInfo = chartItem.elements[innerPos];
+                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                              this.$message.warning({
+                                duration: 15,
+                                content: errorMsg,
+                                closable: true,
+                              });
+                              */
+                            }
+                          });
+                        }
+                      }
+                    } else {
+                      if (response.msg) {
+                        //this.$message.error(response.msg);
+                        errorMsg = response.msg;
+                      } else if (response.error) {
+                        //this.$message.error(response.error);
+                        errorMsg = response.error;
+                      } else {
+                        //this.$message.error(response);
+                        errorMsg = response;
                       }
                     }
-                  } else {
-                    if (response.msg) {
-                      //this.$message.error(response.msg);
-                      errorMsg = response.msg;
-                    } else if (response.error) {
-                      //this.$message.error(response.error);
-                      errorMsg = response.error;
-                    } else {
-                      //this.$message.error(response);
-                      errorMsg = response;
-                    }
-                  }
-                });
+                  });
 
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  let chartData = {
-                    chartItem: chartItem,
-                    series: series,
-                    singleStatRlt: singleStatRlt,
-                    legend: legend,
-                    tableData: tableData,
-                    panelId: this.filter.panelId,
-                    filter: this.filter,
-                    filterType: filterType,
-                    errorMsg: errorMsg,
+                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                    let chartData = {
+                      chartItem: chartItem,
+                      series: series,
+                      singleStatRlt: singleStatRlt,
+                      legend: legend,
+                      tableData: tableData,
+                      panelId: this.filter.panelId,
+                      filter: this.filter,
+                      filterType: filterType,
+                      errorMsg: errorMsg,
+                    }
+                    this.chartDataCacheGroup.set(chartInfo.id, chartData);
+                    if (chartItem.type === 'table') {//表格
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                          this.filter.panelId, this.filter, '', errorMsg);
+                      }
+                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                      if (series.length && chartItem.type === 4) {//曲线汇总
+                        //series.push(sumData);//后续需要
+                      }
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, '', errorMsg);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, '', errorMsg);
+                      }
+                    }
                   }
-                  this.chartDataCacheGroup.set(chartInfo.id, chartData);
-                  if (chartItem.type === 'table') {//表格
-                    if (filterType === 'showFullScreen') {//全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, filterType, errorMsg);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                        this.filter.panelId, this.filter, '', errorMsg);
-                    }
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
-                    if (series.length && chartItem.type === 4) {//曲线汇总
-                      //series.push(sumData);//后续需要
-                    }
-                    if (filterType === 'showFullScreen') {//全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, filterType, errorMsg);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                        this.filter.panelId, this.filter, legend, '', errorMsg);
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') {//全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, filterType, errorMsg);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                        this.filter.panelId, this.filter, '', errorMsg);
+                } else {
+                  const type = chartItem.type;
+                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                    if (type === 'table') {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                          this.filter.panelId, this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                          this.filter.panelId, this.filter);
+                      }
                     }
                   }
                 }
-              } else {
-                const type = chartItem.type;
-                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                  if (type === 'table') {
-                    if (filterType === 'showFullScreen') {//table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter);
-                    }
-                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
-                    if (filterType === 'showFullScreen') {//table的全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                        this.filter);
-                    }
-                  } else if (chartItem.type === 'singleStat') {
-                    if (filterType === 'showFullScreen') {//全屏查询
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter, filterType);
-                    } else {
-                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                        this.filter.panelId, this.filter);
-                    }
-                  }
+              }).catch((error) => {
+                if (error) {
+                  this.$message.error(error.toString());
+                  console.error(error)
                 }
-              }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString());
-                console.error(error)
+              });
+            });
+          }
+        }
+      },
+      computeDistance:function(str){
+        var width = 0;
+        var html = document.createElement('span');
+        html.innerText = str;
+        html.className = 'getTextWidth';
+        document.querySelector('body').appendChild(html);
+        width = document.querySelector('.getTextWidth').offsetWidth;
+        document.querySelector('.getTextWidth').remove();
+        return Number('-'+width);
+      },
+      modelStaticData(chartInfo, filterType) {
+        let series = [];
+        let legend = [];
+        let tableData = [];
+        let singleStatRlt = 999;
+        if (chartInfo.type === 'singleStat') {
+          let statistics = chartInfo.param.statistics;
+        } else {
+          let seriesItem = {
+            theData: {
+              name: '',
+              symbol: 'emptyCircle',  //去掉点
+              symbolSize: [2, 2],
+              smooth: 0.2,  //曲线变平滑
+              showSymbol: false,
+              data: [],
+              type: chartInfo.type,
+            },
+            //visible: true,
+            //threshold: null,
+            metric_name: '',
+          };
+          if (chartInfo.type === 'stackArea') {
+            seriesItem.theData.type = 'line';
+            seriesItem.theData.stack = chartInfo.title;
+            seriesItem.theData.areaStyle = {"opacity": 0.3};
+          }
+          // 图表中每条线的名字,后半部分
+          let host = 'host';//up,
+          let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
+          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+          // 设置时间-数据格式对
+          let tempArr = [];
+          let dpsArr = [];
+          let timeStamp = Math.floor(new Date().getTime() / 1000);
+          for (let i = 0; i < 20; i++) {
+            tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ""]);
+            queryItem.values.push(tempArr[i])
+            dpsArr.push([i + "", tempArr[i]]);
+          }
+          // 判断是否有数据, && tagsArr.length > 0
+          if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+            tagsArr.forEach((tag, i) => {
+              if (tag !== '__name__') {
+                host += `${tag}="${queryItem.metric[tag]}",`;
               }
             });
+            if (queryItem.metric.__name__) {
+              host += "}";
+            }
+            //处理legend别名
+            let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend);
+            if (!alias || alias === '') {
+              alias = host;
+            }
+            legend.push({name: host, alias: alias});
+            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+            seriesItem.theData.name = host;
+            //alert(seriesItem.theData.name);
+            seriesItem.metric_name = seriesItem.theData.name;
+            // 将秒改为毫秒
+            //alert('table=='+JSON.stringify(queryItem))
+            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+              /*曲线汇总暂不需要
+            if (sumData.data[dpsIndex]) {
+              const sumNum = sumData.data[dpsIndex][1] || 0;
+              sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+            } else {
+              sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+            }
+            */
+              let t_date = new Date(dpsItem[0] * 1000);
+              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+              tableData.push({//表格数据
+                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                element: {element: host, alias: alias},
+                time: timeTmp,//采集时间
+                value: dpsItem[1],//数值
+              });
+              return [dpsItem[0] * 1000, dpsItem[1]];
+            });
+            series.push(seriesItem.theData);
+
+          } else if (chartInfo.elements && chartInfo.elements[0]) {
+            // 无数据提示
+            /*
+          const currentInfo = chartItem.elements[innerPos];
+          const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+          this.$message.warning({
+            duration: 15,
+            content: errorMsg,
+            closable: true,
           });
+          */
+          }
         }
-      }
-    },
-    computeDistance:function(str){
-      var width = 0;
-      var html = document.createElement('span');
-      html.innerText = str;
-      html.className = 'getTextWidth';
-      document.querySelector('body').appendChild(html);
-      width = document.querySelector('.getTextWidth').offsetWidth;
-      document.querySelector('.getTextWidth').remove();
-      return Number('-'+width);
-    },
-    modelStaticData(chartInfo, filterType) {
-      let series = [];
-      let legend = [];
-      let tableData = [];
-      let singleStatRlt = 999;
-      if (chartInfo.type === 'singleStat') {
-          let statistics = chartInfo.param.statistics;
-      } else {
-        let seriesItem = {
-          theData: {
-            name: '',
-            symbol: 'emptyCircle',  //去掉点
-            symbolSize: [2, 2],
-            smooth: 0.2,  //曲线变平滑
-            showSymbol: false,
-            data: [],
-            type: chartInfo.type,
-          },
-          //visible: true,
-          //threshold: null,
-          metric_name: '',
-        };
-        if (chartInfo.type === 'stackArea') {
-          seriesItem.theData.type = 'line';
-          seriesItem.theData.stack = chartInfo.title;
-          seriesItem.theData.areaStyle = {"opacity": 0.3};
+        if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+          let errorMsg = '';
+          let chartData = {
+            chartItem: chartInfo,
+            series: series,
+            singleStatRlt: singleStatRlt,
+            legend: legend,
+            tableData: tableData,
+            panelId: this.filter.panelId,
+            filter: this.filter,
+            filterType: filterType,
+            errorMsg: errorMsg
+          }
+          this.chartDataCacheGroup.set(chartInfo.id, chartData);
+          if (chartInfo.type === 'table') {//表格
+            if (filterType === 'showFullScreen') {//全屏查询
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+                this.filter.panelId, this.filter, filterType, '');
+            } else {
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+                this.filter.panelId, this.filter, '', '');
+            }
+          } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+            if (series.length && chartInfo.type === 4) {//曲线汇总
+              //series.push(sumData);//后续需要
+            }
+            if (filterType === 'showFullScreen') {//全屏查询
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+                this.filter.panelId, this.filter, legend, filterType, errorMsg);
+            } else {
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+                this.filter.panelId, this.filter, legend, '', errorMsg);
+            }
+          } else if (chartInfo.type === 'singleStat') {
+            if (filterType === 'showFullScreen') {//全屏查询
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+                this.filter.panelId, this.filter, filterType, errorMsg);
+            } else {
+              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+                this.filter.panelId, this.filter, '', errorMsg);
+            }
+          }
         }
-        // 图表中每条线的名字,后半部分
-        let host = 'host';//up,
-        let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
-        const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-        // 设置时间-数据格式对
-        let tempArr = [];
-        let dpsArr = [];
-        let timeStamp = Math.floor(new Date().getTime() / 1000);
-        for (let i = 0; i < 20; i++) {
-          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ""]);
-          queryItem.values.push(tempArr[i])
-          dpsArr.push([i + "", tempArr[i]]);
+      },
+      getAssetInfoChartData(chartInfo){
+        if(!this.isModel){
+          this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
+          this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
+            if(response.code == 200){
+              let data=response.data;
+              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+            }else{
+              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
+            }
+          })
+        }else {
+          let data = {Basic: {
+              alert:0,
+              assetType: "xxx",
+              cabinet: "xxx",
+              dataCenter: "xxx",
+              endpoint: 1,
+              host: "xxx.xxx.xxx.xxx",
+              id: -1,
+              model: "xxx",
+              pingLastReply: new Date(),
+              pingRtt: 0,
+              pingStatus: 1,
+              principal: "admin",
+              purchaseDate: null,
+              sn: "xxx",
+              state: 1,
+              tel: "xxxxxxxxxxx",
+              vendor: "xxx"
+            }};
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
         }
-        // 判断是否有数据, && tagsArr.length > 0
-        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-          tagsArr.forEach((tag, i) => {
-            if (tag !== '__name__') {
-              host += `${tag}="${queryItem.metric[tag]}",`;
+      },
+      getAlertListChartData:function(chartInfo,filterType){
+        this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
+      },
+      // 设置图表的尺寸
+      setChartSize(item, index) {
+        this.$nextTick(() => {
+          let chartBox = document.getElementById("chart-" + item.id);
+          chartBox.style.width = `${(item.span / 12) * 100}%`;
+          chartBox.style.height = `${item.height}px`;
+        });
+      },
+      getNewTime(time, num) {
+        const date = new Date(time);
+        const newDate = new Date(parseInt(date.getTime(), 10) + num);
+        return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
+      },
+      // 删除图表
+      removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+        const chart = this.dataList.find(item => item.id === chartId);
+        if (chart) {
+          this.$emit('on-remove-chart', chart);
+        }
+      },
+      //复制图表
+      duplicateChart(chartId,duplicateChartBack){
+        let duplicateChartId = duplicateChartBack.id;
+        let chart;
+        let chartIndex = -1;
+        this.dataList.forEach((item,index)=>{
+          if(item.id===chartId){
+            chartIndex = index;
+            chart = item;
+          }
+        });
+        let chartNext;
+        let chartNextIndex = chartIndex+1;
+        if(chartNextIndex<=(this.dataList.length-1)){
+          chartNext = this.dataList[chartNextIndex];
+        }
+
+        if (chart) {
+          chart.next = duplicateChartId;
+          let duplicateChart = JSON.parse(JSON.stringify(chart));
+          duplicateChart.id = duplicateChartId;
+          duplicateChart.prev = duplicateChartBack.prev;
+          duplicateChart.next = duplicateChartBack.next;
+          duplicateChart.title = duplicateChartBack.title;
+          duplicateChart.elements = duplicateChartBack.elements;
+          if(chartNext){
+            chartNext.prev = duplicateChartId;
+          }
+
+          this.dataList.splice(chartNextIndex,0,duplicateChart);
+
+          let indexInTotal = this.dataTotalList.indexOf(chart);
+          this.dataTotalList.splice(indexInTotal+1,0,duplicateChart);
+          let chartInTotal = this.dataTotalList.find(item => item.id === chartId);
+          chartInTotal.next = duplicateChartId;
+          if(chartNext) {
+            let chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id);
+            chartNextInTotal.prev = chartNext.prev;
+          }
+
+          let indexInTotalBak = this.dataTotalListBak.indexOf(chart);
+          this.dataTotalListBak.splice(indexInTotalBak+1,0,duplicateChart);
+          let chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId);
+          chartInTotalBak.next = duplicateChartId;
+          if(chartNext) {
+            let chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id);
+            chartNextInTotalBak.prev = chartNext.prev;
+          }
+
+          this.currentRecordNum = this.currentRecordNum+1;
+          let chartData = this.chartDataCacheGroup.get(chart.id);
+          console.log("__chartItem00__",JSON.stringify(chartData))
+
+          let duplicateChartData = JSON.parse(JSON.stringify(chartData));
+          duplicateChartData.chartItem = duplicateChart;
+          this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
+          this.$nextTick(() => {
+            if (this.$refs['editChart'+duplicateChartId][0]) {
+              this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
+            }
+
+            let chartType = duplicateChart.type;
+            if(chartType!=='url'){
+              this.getChartDataForSearch(duplicateChart,chartNextIndex);
+            }else {
+              this.setChartSize(duplicateChart.span, chartNextIndex); // 设置该图表宽度
             }
           });
-          if (queryItem.metric.__name__) {
-            host += "}";
-          }
-          //处理legend别名
-          let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend);
-          if (!alias || alias === '') {
-            alias = host;
-          }
-          legend.push({name: host, alias: alias});
-          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-          seriesItem.theData.name = host;
-          //alert(seriesItem.theData.name);
-          seriesItem.metric_name = seriesItem.theData.name;
-          // 将秒改为毫秒
-          //alert('table=='+JSON.stringify(queryItem))
-          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-            /*曲线汇总暂不需要
-          if (sumData.data[dpsIndex]) {
-            const sumNum = sumData.data[dpsIndex][1] || 0;
-            sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-          } else {
-            sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-          }
-          */
-            let t_date = new Date(dpsItem[0] * 1000);
-            let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-            tableData.push({//表格数据
-              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-              element: {element: host, alias: alias},
-              time: timeTmp,//采集时间
-              value: dpsItem[1],//数值
-            });
-            return [dpsItem[0] * 1000, dpsItem[1]];
-          });
-          series.push(seriesItem.theData);
-
-        } else if (chartInfo.elements && chartInfo.elements[0]) {
-          // 无数据提示
-          /*
-        const currentInfo = chartItem.elements[innerPos];
-        const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-        this.$message.warning({
-          duration: 15,
-          content: errorMsg,
-          closable: true,
-        });
-        */
         }
-      }
-      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-        let errorMsg = '';
-        let chartData = {
-          chartItem: chartInfo,
-          series: series,
-          singleStatRlt: singleStatRlt,
-          legend: legend,
-          tableData: tableData,
-          panelId: this.filter.panelId,
-          filter: this.filter,
-          filterType: filterType,
-          errorMsg: errorMsg
+      },
+      // 编辑图表
+      editData(chartId) {
+        // 获取该id下chart的相关信息
+        const chart = this.dataList.find(item => item.id === chartId);
+        if (chart) {
+          this.$emit('on-edit-chart', chart);
         }
-        this.chartDataCacheGroup.set(chartInfo.id, chartData);
-        if (chartInfo.type === 'table') {//表格
-          if (filterType === 'showFullScreen') {//全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, filterType, '');
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-              this.filter.panelId, this.filter, '', '');
-          }
-        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
-          if (series.length && chartInfo.type === 4) {//曲线汇总
-            //series.push(sumData);//后续需要
-          }
-          if (filterType === 'showFullScreen') {//全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, filterType, errorMsg);
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-              this.filter.panelId, this.filter, legend, '', errorMsg);
-          }
-        } else if (chartInfo.type === 'singleStat') {
-          if (filterType === 'showFullScreen') {//全屏查询
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, filterType, errorMsg);
-          } else {
-            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-              this.filter.panelId, this.filter, '', errorMsg);
-          }
-        }
-      }
-    },
-    getAssetInfoChartData(chartInfo){
-      if(!this.isModel){
-        this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
-        this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
-          if(response.code == 200){
-            let data=response.data;
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
-          }else{
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
-          }
-        })
-      }else {
-        let data = {Basic: {
-          alert:0,
-          assetType: "xxx",
-          cabinet: "xxx",
-          dataCenter: "xxx",
-          endpoint: 1,
-          host: "xxx.xxx.xxx.xxx",
-          id: -1,
-          model: "xxx",
-          pingLastReply: new Date(),
-          pingRtt: 0,
-          pingStatus: 1,
-          principal: "admin",
-          purchaseDate: null,
-          sn: "xxx",
-          state: 1,
-          tel: "xxxxxxxxxxx",
-          vendor: "xxx"
-        }};
-        this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
-      }
-    },
-    getAlertListChartData:function(chartInfo,filterType){
-      this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
-    },
-    // 设置图表的宽度
-    setSize(size, index) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementsByClassName('chartBox');
-        chartBox[index].style.width = `${(size / 12) * 100}%`;
-      });
-    },
-    getNewTime(time, num) {
-      const date = new Date(time);
-      const newDate = new Date(parseInt(date.getTime(), 10) + num);
-      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
-    },
-    // 删除图表
-    removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-      const chart = this.dataList.find(item => item.id === chartId);
-      if (chart) {
-        this.$emit('on-remove-chart', chart);
-      }
-    },
-    //复制图表
-    duplicateChart(chartId,duplicateChartBack){
-      let duplicateChartId = duplicateChartBack.id;
-      let chart;
-      let chartIndex = -1;
-      this.dataList.forEach((item,index)=>{
-        if(item.id===chartId){
-          chartIndex = index;
-          chart = item;
-        }
-      });
-      let chartNext;
-      let chartNextIndex = chartIndex+1;
-      if(chartNextIndex<=(this.dataList.length-1)){
-        chartNext = this.dataList[chartNextIndex];
-      }
+      },
 
-      if (chart) {
-        chart.next = duplicateChartId;
-        let duplicateChart = JSON.parse(JSON.stringify(chart));
-        duplicateChart.id = duplicateChartId;
-        duplicateChart.prev = duplicateChartBack.prev;
-        duplicateChart.next = duplicateChartBack.next;
-        duplicateChart.title = duplicateChartBack.title;
-        duplicateChart.elements = duplicateChartBack.elements;
-        if(chartNext){
-          chartNext.prev = duplicateChartId;
-        }
-
-        this.dataList.splice(chartNextIndex,0,duplicateChart);
-
-        let indexInTotal = this.dataTotalList.indexOf(chart);
-        this.dataTotalList.splice(indexInTotal+1,0,duplicateChart);
-        let chartInTotal = this.dataTotalList.find(item => item.id === chartId);
-        chartInTotal.next = duplicateChartId;
-        if(chartNext) {
-          let chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id);
-          chartNextInTotal.prev = chartNext.prev;
-        }
-
-        let indexInTotalBak = this.dataTotalListBak.indexOf(chart);
-        this.dataTotalListBak.splice(indexInTotalBak+1,0,duplicateChart);
-        let chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId);
-        chartInTotalBak.next = duplicateChartId;
-        if(chartNext) {
-          let chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id);
-          chartNextInTotalBak.prev = chartNext.prev;
-        }
-
-        this.currentRecordNum = this.currentRecordNum+1;
-        let chartData = this.chartDataCacheGroup.get(chart.id);
-        console.log("__chartItem00__",JSON.stringify(chartData))
-
-        let duplicateChartData = JSON.parse(JSON.stringify(chartData));
-        /*
-        let chartData2 = {
-          chartItem:chartItem,
-          series:series,
-          singleStatRlt:singleStatRlt,
-          legend:legend,
-          tableData:tableData,
-          panelId:this.filter.panelId,
-          filter:this.filter,
-          filterType:filterType,
-          errorMsg:errorMsg,
-        }*/
-        duplicateChartData.chartItem = duplicateChart;
-        this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
-        this.$nextTick(() => {
-          if (this.$refs['editChart'+duplicateChartId][0]) {
-              this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
-          }
-
-          let chartType = duplicateChart.type;
-          if(chartType!=='url'){
-            this.getChartDataForSearch(duplicateChart,chartNextIndex);
-          }else {
-            this.setSize(duplicateChart.span, chartNextIndex); // 设置该图表宽度
+      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) => {
+          if (item.id === chartId) {
+            this.getChartData(item, index, 'refresh');
           }
         });
-      }
-    },
-    // 编辑图表
-    editData(chartId) {
-      // 获取该id下chart的相关信息
-      const chart = this.dataList.find(item => item.id === chartId);
-      if (chart) {
-        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) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'refresh');
+      },
+      searchData(chartId,searchTime){
+        if(searchTime){//全屏时间查询
+          this.filter.start_time=bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+          this.filter.end_time=bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         }
-      });
-    },
-    searchData(chartId,searchTime){
-      if(searchTime){//全屏时间查询
-        this.filter.start_time=bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time=bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-      }
-      this.dataList.forEach((item, index) => {
-        if (item.id === chartId) {
-          this.getChartData(item, index, 'showFullScreen');
-        }
-      });
-    },
-    /*
-    // 刷新数据
-    refreshData() {
-      this.getData(this.filter);
-    },
-     */
-    handleElementInViewport(ele,scrollTop,item,index,isSearch) {
+        this.dataList.forEach((item, index) => {
+          if (item.id === chartId) {
+            this.getChartData(item, index, 'showFullScreen');
+          }
+        });
+      },
       /*
-      网页被卷去的高：document.body.scrollTop
-      网页正文全文高：document.body.scrollHeight
-      网页可见区域高（包括边线的高）：document.body.offsetHeight；
-      网页可见区域高：document.body.clientHeight
-      */
-      let that = this;
-      setTimeout(function () {
-        let itemHeight = item.height;
-        //1.元素距离页面顶部的距离
-        var mainOffsetTop = ele.offsetTop;//offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
-        //2.元素的高度
-        var mainHeight = itemHeight//ele.offsetHeight;//itemHeight;
-        //3.页面滚动的距离
-        var windowScrollTop = scrollTop;//document.documentElement.scrollTop || document.body.scrollTop;
-        //4.浏览器可见区域的高度
-        var windowHeight = (window.innerHeight || document.documentElement.clientHeight)-50-42;
-
+      // 刷新数据
+      refreshData() {
+        this.getData(this.filter);
+      },
+       */
+      handleElementInViewport(ele,scrollTop,item,index,isSearch) {
         /*
-        * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
-        1.向上滚动超出可见区域
-        2.向下滚动超出可视区域
-        3.在可视区域内
-        * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
-        * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
-        * */
+        网页被卷去的高：document.body.scrollTop
+        网页正文全文高：document.body.scrollHeight
+        网页可见区域高（包括边线的高）：document.body.offsetHeight；
+        网页可见区域高：document.body.clientHeight
+        */
+        let that = this;
+        setTimeout(function () {
+          let itemHeight = item.height;
+          //1.元素距离页面顶部的距离
+          var mainOffsetTop = ele.offsetTop;//offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
+          //2.元素的高度
+          var mainHeight = itemHeight//ele.offsetHeight;//itemHeight;
+          //3.页面滚动的距离
+          var windowScrollTop = scrollTop;//document.documentElement.scrollTop || document.body.scrollTop;
+          //4.浏览器可见区域的高度
+          var windowHeight = (window.innerHeight || document.documentElement.clientHeight)-50-42;
+
+          /*
+          * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
+          1.向上滚动超出可见区域
+          2.向下滚动超出可视区域
+          3.在可视区域内
+          * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
+          * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
+          * */
           //console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
           //console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
           //console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
@@ -1502,16 +1289,16 @@ export default {
               that.getChartDataForSearch(item,index);
             }
           }
-      }, 100);
+        }, 100);
+      },
     },
-  },
 
-  mounted() {
-  },
-  beforeDestroy() {
-  },
-  destroyed () {
-  },
-};
+    mounted() {
+    },
+    beforeDestroy() {
+    },
+    destroyed () {
+    },
+  };
 
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.scss b/nezha-fronted/src/components/charts/chart-single-stat.scss
index 4df08fc1d..d6bde456b 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.scss
+++ b/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;
-  padding-bottom: 3px;
+  box-sizing: border-box;
   .single-stat-container{
     padding-left: 8px;
     padding-right: 8px;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 25694819a..c31aa6e40 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/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">
diff --git a/nezha-fronted/src/components/charts/chart-url.scss b/nezha-fronted/src/components/charts/chart-url.scss
index af570eeec..1259160e1 100644
--- a/nezha-fronted/src/components/charts/chart-url.scss
+++ b/nezha-fronted/src/components/charts/chart-url.scss
@@ -40,8 +40,7 @@
   background: #FFF;
   border: 1px solid #d8dce1;
   padding: 0px 0px;
-  margin-bottom: 10px;
-  padding-bottom: 3px;
+  box-sizing: border-box;
   .url-container{
     padding-left: 8px;
     padding-right: 8px;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 9ad843023..56abeb7d0 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/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;
-  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;
-  }
+  background-color: white;
   .chartTitle:hover {
     background-color:#d8dce1;
   }
   .chartTitle {
-     text-align: center;
-     width: 100%;
-     line-height: 28px;
-
+    text-align: center;
+    width: 100%;
+    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;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 7176daea1..bb1182f71 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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">
-    <loading  :ref="'localLoading'+chartIndex"></loading>
-
-    <!--<div class="edit">
-
-      <div class="list-icon" v-if="firstShow">
-        <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
-          <i class="el-icon-refresh-right"></i>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box" ref="resizeBox">
+      <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
+          <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>
-        <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
-          <i class="el-icon-edit-outline"></i>
-        </span>
-        <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
-          <i class="el-icon-delete"></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>
+          </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-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">
-
-          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
-          <!--
-          <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
-                          format="yyyy/MM/dd HH:mm"
-                          @change="dateChange"
-                          v-model="searchTime"
-                          type="datetimerange"
-                          :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>-->
+            <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>
-      </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 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 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>
-      </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>
-    </el-dialog>
-    <!--</Modal>-->
-    <!--style="touch-action: none;" -->
-    <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+            </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 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: {
-        type: String,
-        default: 'editChartId',
+      chartData: {
+        type: Object
       },
       // 看板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,
-        legendHeight:80,
+        screenTitleHeight:58
       };
     },
-    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 height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-            if(height<this.minHeight){
-              height = this.minHeight;
-            }
-            chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-
+            let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+            chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
           });
           this.$refs['localLoading'+this.chartIndex].startLoading();
           this.divFirstShow = true;
@@ -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();
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index d8154fe7b..115975540 100644
--- a/nezha-fronted/src/main.js
+++ b/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: { //打开二级列表后的高度
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
index 6f99090a2..d1fe2618c 100644
--- a/nezha-fronted/src/tools.js
+++ b/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) {
+
+    }
+  }
+}