diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index 0a01e28e04..c019654d98 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -17,17 +17,17 @@
     @touchstart="elementTouchDown"
   >
     <div
-      v-for="(handle,index) in actualHandles"
+      v-for="(item,index) in actualHandles"
       :key="index"
-      :class="[classNameHandle, classNameHandle + '-' + handle]"
-      :style="handleStyle(handle,index)"
-      @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+      :class="[classNameHandle, classNameHandle + '-' + item]"
+      :style="handleStyle(item,index)"
+      @mousedown.stop.prevent="handleDown(item, $event)"
+      @touchstart.stop.prevent="handleTouchDown(item, $event)"
     >
-      <slot :name="handle"></slot>
+      <slot :name="handle" />
     </div>
-    <i class="el-icon-circle-close" @click.stop="removeView()"></i>
-    <slot></slot>
+    <i class="el-icon-circle-close" @click.stop="removeView()" />
+    <slot />
   </div>
 </template>
 
@@ -46,7 +46,7 @@ const events = {
     move: 'touchmove',
     stop: 'touchend'
   }
-};
+}
 
 // 禁止用户选取
 const userSelectNone = {
@@ -54,20 +54,20 @@ const userSelectNone = {
   MozUserSelect: 'none',
   WebkitUserSelect: 'none',
   MsUserSelect: 'none'
-};
+}
 // 用户选中自动
 const userSelectAuto = {
   userSelect: 'auto',
   MozUserSelect: 'auto',
   WebkitUserSelect: 'auto',
   MsUserSelect: 'auto'
-};
+}
 
-let eventsFor = events.mouse;
+let eventsFor = events.mouse
 
 export default {
   replace: true,
-  name: 'vue-drag-resize-rotate',
+  name: 'VueDragResizeRotate',
   props: {
     className: {
       type: String,
@@ -152,9 +152,9 @@ export default {
       default: 200,
       validator: val => {
         if (typeof val === 'number') {
-          return val > 0;
+          return val > 0
         }
-        return val === 'auto';
+        return val === 'auto'
       }
     },
     h: {
@@ -162,9 +162,9 @@ export default {
       default: 200,
       validator: val => {
         if (typeof val === 'number') {
-          return val > 0;
+          return val > 0
         }
-        return val === 'auto';
+        return val === 'auto'
       }
     },
     minWidth: {
@@ -279,8 +279,8 @@ export default {
     snapTolerance: {
       type: Number,
       default: 5,
-      validator: function (val) {
-        return typeof val === 'number';
+      validator: function(val) {
+        return typeof val === 'number'
       }
     },
     // 缩放比例
@@ -297,12 +297,12 @@ export default {
           size: 8,
           offset: -4,
           switch: true
-        };
+        }
       }
     }
   },
 
-  data: function () {
+  data: function() {
     return {
       left: this.x,
       top: this.y,
@@ -337,8 +337,209 @@ export default {
       lastCenterY: 0
     }
   },
+  computed: {
+    handleStyle() {
+      return (stick, index) => {
+        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
+        // 新增 当没有开启旋转的时候，旋转手柄不显示
+        if (stick === 'rot' && !this.rotatable) return { display: 'none' }
+        const size = (this.handleInfo.size / this.scaleRatio).toFixed(2)
+        const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2)
+        const center = (size / 2).toFixed(2)
 
-  created: function () {
+        const styleMap = {
+          tl: {
+            top: `${offset}px`,
+            left: `${offset}px`
+          },
+          tm: {
+            top: `${offset}px`,
+            left: `calc(50% - ${center}px)`
+          },
+          tr: {
+            top: `${offset}px`,
+            right: `${offset}px`
+          },
+          mr: {
+            top: `calc(50% - ${center}px)`,
+            right: `${offset}px`
+          },
+          br: {
+            bottom: `${offset}px`,
+            right: `${offset}px`
+          },
+          bm: {
+            bottom: `${offset}px`,
+            right: `calc(50% - ${center}px)`
+          },
+          bl: {
+            bottom: `${offset}px`,
+            left: `${offset}px`
+          },
+          ml: {
+            top: `calc(50% - ${center}px)`,
+            left: `${offset}px`
+          },
+          rot: {}
+        }
+        const stickStyle = {
+          width: `${size}px`,
+          height: `${size}px`,
+          top: styleMap[stick].top,
+          left: styleMap[stick].left,
+          right: styleMap[stick].right,
+          bottom: styleMap[stick].bottom
+        }
+        // 新增 让控制手柄的鼠标样式跟随玄幻角度变化
+        if (stick !== 'rot') {
+          const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
+          const STEP = 45
+          const rotate = this.rotate + STEP / 2
+          const deltaIndex = Math.floor(rotate / STEP)
+          index = (index + deltaIndex) % 8
+          stickStyle.cursor = cursorStyleArray[index]
+        }
+        stickStyle.display = this.enabled ? 'block' : 'none'
+        return stickStyle
+      }
+    },
+    style() {
+      return {
+        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
+        width: this.computedWidth,
+        height: this.computedHeight,
+        zIndex: this.zIndex,
+        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
+      }
+    },
+    // 控制柄显示与否
+    actualHandles() {
+      if (!this.resizable) return []
+
+      return this.handles
+    },
+    //  根据left right 算出元素的宽度
+    computedWidth() {
+      if (this.w === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+      return this.width + 'px'
+    },
+    // 根据top bottom 算出元素的宽度
+    computedHeight() {
+      if (this.h === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+      return this.height + 'px'
+    },
+    // 表示只修改宽度
+    resizingOnX() {
+      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'))
+    },
+    // 表示只修改高度
+    resizingOnY() {
+      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'))
+    },
+    // 表示正在调整边角
+    isCornerHandle() {
+      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle)
+    }
+  },
+
+  watch: {
+    active(val) {
+      this.enabled = val
+
+      if (val) {
+        this.$emit('activated')
+      } else {
+        this.$emit('deactivated')
+      }
+    },
+    z(val) {
+      if (val >= 0 || val === 'auto') {
+        this.zIndex = val
+      }
+    },
+    x(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+
+      this.moveHorizontally(val)
+    },
+    y(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+
+      this.moveVertically(val)
+    },
+    // 新增 监听外部传入参数  旋转角度
+    r(val) {
+      if (val >= 0) {
+        this.rotate = val % 360
+      }
+    },
+    lockAspectRatio(val) {
+      if (val) {
+        this.aspectFactor = this.width / this.height
+      } else {
+        this.aspectFactor = undefined
+      }
+    },
+    minWidth(val) {
+      if (val > 0 && val <= this.width) {
+        this.minW = val
+      }
+    },
+    minHeight(val) {
+      if (val > 0 && val <= this.height) {
+        this.minH = val
+      }
+    },
+    maxWidth(val) {
+      this.maxW = val
+    },
+    maxHeight(val) {
+      this.maxH = val
+    },
+    w(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+
+      this.changeWidth(val)
+    },
+    h(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+
+      this.changeHeight(val)
+    }
+  },
+
+  created: function() {
     // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth
     if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth')
     // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight'
@@ -360,7 +561,7 @@ export default {
     this.BR = {}
     this.resetBoundsAndMouseState()
   },
-  mounted: function () {
+  mounted: function() {
     if (!this.enableNativeDrag) {
       this.$el.ondragstart = () => false
     }
@@ -383,7 +584,7 @@ export default {
     //  窗口变化时，检查容器大小
     addEvent(window, 'resize', this.checkParentSize)
   },
-  beforeDestroy: function () {
+  beforeDestroy: function() {
     removeEvent(document.documentElement, 'mousedown', this.deselect)
     removeEvent(document.documentElement, 'touchstart', this.handleUp)
     removeEvent(document.documentElement, 'mousemove', this.move)
@@ -504,7 +705,7 @@ export default {
           minTop: -9999,
           maxTop: 9999,
           minBottom: -9999,
-          maxBottom: 9999,
+          maxBottom: 9999
         }
       } else {
         return {
@@ -515,42 +716,42 @@ export default {
           minTop: this.top % this.grid[1],
           maxTop: Math.floor((this.parentHeight - this.height - this.top) / this.grid[1]) * this.grid[1] + this.top,
           minBottom: this.bottom % this.grid[1],
-          maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom,
-        };
+          maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom
+        }
       }
     },
     // 取消
     deselect(e) {
-      const target = e.target || e.srcElement;
-      const regex = new RegExp(this.className + '-([trmbl]{2})', '');
+      const target = e.target || e.srcElement
+      const regex = new RegExp(this.className + '-([trmbl]{2})', '')
       if (!this.$el.contains(target) && !regex.test(target.className)) {
         if (this.enabled && !this.preventDeactivation) {
-          this.enabled = false;
-          this.$emit('deactivated');
-          this.$emit('update:active', false);
+          this.enabled = false
+          this.$emit('deactivated')
+          this.$emit('update:active', false)
         }
 
-        removeEvent(document.documentElement, eventsFor.move, this.move);
+        removeEvent(document.documentElement, eventsFor.move, this.move)
       }
 
-      this.resetBoundsAndMouseState();
+      this.resetBoundsAndMouseState()
     },
     // 控制柄触摸按下
     handleTouchDown(handle, e) {
-      eventsFor = events.touch;
+      eventsFor = events.touch
 
-      this.handleDown(handle, e);
+      this.handleDown(handle, e)
     },
     // 控制柄按下
     handleDown(handle, e) {
       if (e instanceof MouseEvent && e.which !== 1) {
-        return false;
+        return false
       }
       if (this.onResizeStart(handle, e) === false) {
-        return false;
+        return false
       }
 
-      if (e.stopPropagation) e.stopPropagation();
+      if (e.stopPropagation) e.stopPropagation()
       // 锁定纵横比时，将顶点转换为中点 - 不在需要因而将其注释
       // if (this.lockAspectRatio && !handle.includes('m')) {
       //   this.handle = 'm' + handle.substring(1)
@@ -558,7 +759,7 @@ export default {
       // this.handle = handle;
       // }
 
-      this.handle = handle;
+      this.handle = handle
       // 新增
       if (this.handle === 'rot') {
         this.rotating = true
@@ -567,57 +768,57 @@ export default {
       }
       // 新增保存矩形信息
       // 获取父元素的位置大小信息
-      let { top, left, width, height } = this.$el.getBoundingClientRect()
+      const { top, left, width, height } = this.$el.getBoundingClientRect()
       // 保存旋转中心的绝对坐标
       this.lastCenterX = window.pageXOffset + left + width / 2
       this.lastCenterY = window.pageYOffset + top + height / 2
       // 保存四个顶点的坐标
-      let oleft = this.left
-      let otop = this.top
-      let owidth = this.width
-      let oheight = this.height
-      let centerX = oleft + owidth / 2
-      let centerY = otop + oheight / 2
-      let rotate = this.rotate
-      this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate);
-      this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate);
-      this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate);
-      this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate);
+      const oleft = this.left
+      const otop = this.top
+      const owidth = this.width
+      const oheight = this.height
+      const centerX = oleft + owidth / 2
+      const centerY = otop + oheight / 2
+      const rotate = this.rotate
+      this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate)
+      this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate)
+      this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate)
+      this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate)
 
       //  保存鼠标按下时的当前状态
-      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX;
-      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY;
-      this.mouseClickPosition.left = this.left;
-      this.mouseClickPosition.right = this.right;
-      this.mouseClickPosition.top = this.top;
-      this.mouseClickPosition.bottom = this.bottom;
-      this.mouseClickPosition.width = this.width;
-      this.mouseClickPosition.height = this.height;
+      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
+      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
+      this.mouseClickPosition.left = this.left
+      this.mouseClickPosition.right = this.right
+      this.mouseClickPosition.top = this.top
+      this.mouseClickPosition.bottom = this.bottom
+      this.mouseClickPosition.width = this.width
+      this.mouseClickPosition.height = this.height
       // 计算边界
-      this.bounds = this.calcResizeLimits();
+      this.bounds = this.calcResizeLimits()
       // 添加事件
-      addEvent(document.documentElement, eventsFor.move, this.move);
-      addEvent(document.documentElement, eventsFor.stop, this.handleUp);
+      addEvent(document.documentElement, eventsFor.move, this.move)
+      addEvent(document.documentElement, eventsFor.stop, this.handleUp)
     },
     // 计算调整大小范围
     calcResizeLimits() {
-      let minW = this.minW;
-      let minH = this.minH;
-      let maxW = this.maxW;
-      let maxH = this.maxH;
+      const minW = this.minW
+      const minH = this.minH
+      let maxW = this.maxW
+      let maxH = this.maxH
 
-      const [gridX, gridY] = this.grid;
+      const [gridX, gridY] = this.grid
       // 获取矩形信息
-      const width = this.width;
-      const height = this.height;
-      const left = this.left;
-      const top = this.top;
-      const right = this.right;
-      const bottom = this.bottom;
+      const width = this.width
+      const height = this.height
+      const left = this.left
+      const top = this.top
+      const right = this.right
+      const bottom = this.bottom
 
       // 对齐网格
-      maxW = maxW - (maxW % gridX);
-      maxH = maxH - (maxH % gridY);
+      maxW = maxW - (maxW % gridX)
+      maxH = maxH - (maxH % gridY)
 
       const limits = {
         minLeft: null,
@@ -631,7 +832,7 @@ export default {
       }
       // 边界限制
       if (this.parent) {
-        limits.minLeft = left;
+        limits.minLeft = left
         limits.maxLeft = left + Math.floor((width - minW) / gridX)
         limits.minTop = top
         limits.maxTop = top + Math.floor((height - minH) / gridY)
@@ -640,17 +841,14 @@ export default {
         limits.minBottom = bottom
         limits.maxBottom = bottom + Math.floor((height - minH) / gridY)
 
-
         if (maxW) {
-          limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW);
-          limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW);
-
+          limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW)
+          limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW)
         }
 
         if (maxH) {
-          limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH);
-          limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH);
-
+          limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH)
+          limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH)
         }
       } else {
         limits.minLeft = null
@@ -684,7 +882,7 @@ export default {
     // 移动
     move(e) {
       if (this.resizing) {
-        console.log('resizing');
+        console.log('resizing')
         this.handleResize(e)
       } else if (this.dragging) {
         this.handleDrag(e)
@@ -721,8 +919,8 @@ export default {
       const rad = (Math.PI / 180) * rotate
       const cos = Math.cos(rad)
       const sin = Math.sin(rad)
-      let x = offsetX - originX
-      let y = offsetY - originY
+      const x = offsetX - originX
+      const y = offsetY - originY
       return {
         x: x * cos - y * sin + originX,
         y: x * sin + y * cos + originY
@@ -761,12 +959,14 @@ export default {
       this.$emit('dragging', this.left, this.top)
     },
     moveHorizontally(val) {
+      // eslint-disable-next-line no-unused-vars
       const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale)
       const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
       this.left = left
       this.right = this.parentWidth - this.width - left
     },
     moveVertically(val) {
+      // eslint-disable-next-line no-unused-vars
       const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
       const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
       this.top = top
@@ -779,17 +979,17 @@ export default {
       const { TL, TR, BL, BR } = this
       const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
       // 获取鼠标移动的坐标差
-      let deltaX = mouseX - this.mouseClickPosition.mouseX
-      let deltaY = mouseY - this.mouseClickPosition.mouseY
+      const deltaX = mouseX - this.mouseClickPosition.mouseX
+      const deltaY = mouseY - this.mouseClickPosition.mouseY
       let diffX, diffY, scale, scaleB, scaleC, newX, newY, newW, newH
-      let Fixed = {}   // 固定点
-      let BX = {}      // 高度边选点
-      let CX = {}     //  宽度边选点
-      let Va = {}      // 固定点到鼠标 向量
-      let Vb = {}      // 固定点到投影边  向量
-      let Vc = {}     //  另一边投影
-      let Vw = {};    // 宽度向量
-      let Vh = {}     // 高度向量
+      let Fixed = {} // 固定点
+      let BX = {} // 高度边选点
+      let CX = {} //  宽度边选点
+      let Va = {} // 固定点到鼠标 向量
+      let Vb = {} // 固定点到投影边  向量
+      let Vc = {} //  另一边投影
+      let Vw = {} // 宽度向量
+      let Vh = {} // 高度向量
       // 拖动中点
       if (handle.includes('m')) {
         switch (handle) {
@@ -804,7 +1004,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vh = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'bm':
             diffX = deltaX + (BL.x + BR.x) / 2
             diffY = deltaY + (BL.y + BR.y) / 2
@@ -816,7 +1016,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vh = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'ml':
             diffX = deltaX + (TL.x + BL.x) / 2
             diffY = deltaY + (TL.y + BL.y) / 2
@@ -828,7 +1028,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vw = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'mr':
             diffX = deltaX + (TR.x + TR.x) / 2
             diffY = deltaY + (TR.y + TR.y) / 2
@@ -840,9 +1040,9 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vw = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           default:
-            break;
+            break
         }
         newX = Fixed.x + (Vw.x + Vh.x) / 2
         newY = Fixed.y + (Vw.y + Vh.y) / 2
@@ -857,30 +1057,30 @@ export default {
             Fixed = BR
             BX = BL // 高度 TL BL
             CX = TR // 宽度 TL TR
-            break;
+            break
           case 'tr':
             diffX = deltaX + TR.x
             diffY = deltaY + TR.y
             Fixed = BL
             BX = BR
             CX = TL
-            break;
+            break
           case 'bl':
             diffX = deltaX + BL.x
             diffY = deltaY + BL.y
             Fixed = TR
             BX = TL
             CX = BR
-            break;
+            break
           case 'br':
             diffX = deltaX + BR.x
             diffY = deltaY + BR.y
             Fixed = TL
             BX = TR
             CX = BL
-            break;
+            break
           default:
-            break;
+            break
         }
         Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
         Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
@@ -896,28 +1096,28 @@ export default {
       }
 
       // 边界限制(矩形的外接圆不能超出父盒子)
-      let bounds = this.bounds
+      const bounds = this.bounds
       if (this.rotatable) {
         this.left = newX - newW / 2
         this.top = newY - newH / 2
         this.width = newW
         this.height = newH
       } else {
-        this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft);
-        this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop);
+        this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft)
+        this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop)
         if (this.parent) {
           newW = newW <= this.parentWidth ? newW : this.parentWidth
           newH = newH <= this.parentHeight ? newH : this.parentHeight
         }
-        this.width = restrictToBounds(newW, this.minW, this.maxW);
-        this.height = restrictToBounds(newH, this.minH, this.maxH);
+        this.width = restrictToBounds(newW, this.minW, this.maxW)
+        this.height = restrictToBounds(newH, this.minH, this.maxH)
       }
 
       this.$emit('resizing', this.left, this.top, this.width, this.height)
     },
 
-
     changeWidth(val) {
+      // eslint-disable-next-line no-unused-vars
       const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale)
       const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight)
       let bottom = this.bottom
@@ -932,6 +1132,7 @@ export default {
       this.height = height
     },
     changeHeight(val) {
+      // eslint-disable-next-line no-unused-vars
       const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale)
       const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom)
       let right = this.right
@@ -949,10 +1150,10 @@ export default {
     async handleUp(e) {
       this.handle = null
       // 初始化辅助线数据
-      const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' });
-      const refLine = { vLine: [], hLine: [] };
+      const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+      const refLine = { vLine: [], hLine: [] }
       for (const i in refLine) {
-        refLine[i] = JSON.parse(JSON.stringify(temArr));
+        refLine[i] = JSON.parse(JSON.stringify(temArr))
       }
       // 保存 鼠标松开的坐标
       const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
@@ -961,14 +1162,14 @@ export default {
 
       if (this.resizing) {
         this.resizing = false
-        await this.conflictCheck();
-        this.$emit('refLineParams', refLine);
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
         this.$emit('resizestop', this.left, this.top, this.width, this.height)
       }
       if (this.dragging) {
         this.dragging = false
-        await this.conflictCheck();
-        this.$emit('refLineParams', refLine);
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
         this.$emit('dragstop', this.left, this.top)
       }
       if (this.rotating) {
@@ -1042,16 +1243,16 @@ export default {
         let activeBottom = this.top + height
 
         // 初始化辅助线数据
-        const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' });
-        const refLine = { vLine: [], hLine: [] };
+        const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+        const refLine = { vLine: [], hLine: [] }
         for (const i in refLine) {
-          refLine[i] = JSON.parse(JSON.stringify(temArr));
+          refLine[i] = JSON.parse(JSON.stringify(temArr))
         }
         const tem = {
           value: { x: [[], [], []], y: [[], [], []] },
           display: [],
           position: []
-        };
+        }
         // 获取当前父节点下所有子节点
         const nodes = this.$el.parentNode.childNodes
         //  当允许多个同时激活时，获取总体的属性
@@ -1085,8 +1286,8 @@ export default {
               const hc = Math.abs((activeTop + height / 2) - (t + h / 2)) <= this.snapTolerance // 水平中线
               const vc = Math.abs((activeLeft + width / 2) - (l + w / 2)) <= this.snapTolerance // 垂直中线
 
-              const ts = Math.abs(t - activeBottom) <= this.snapTolerance; // 从上到下
-              const TS = Math.abs(b - activeBottom) <= this.snapTolerance; // 从上到下
+              const ts = Math.abs(t - activeBottom) <= this.snapTolerance // 从上到下
+              const TS = Math.abs(b - activeBottom) <= this.snapTolerance // 从上到下
 
               const bs = Math.abs(t - activeTop) <= this.snapTolerance // 从下到上 上边共线
               const BS = Math.abs(b - activeTop) <= this.snapTolerance // 从下到上
@@ -1096,61 +1297,61 @@ export default {
               const rs = Math.abs(l - activeLeft) <= this.snapTolerance // 外右
               const RS = Math.abs(r - activeLeft) <= this.snapTolerance // 外右
 
-              tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc];
-              tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2];
+              tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc]
+              tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2]
 
               // 单个可激活元素与其他元素对齐
               if (bln) {
                 if (ts) {
                   this.top = t - height
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[0].push(l, r, activeLeft, activeRight);
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
                 }
                 if (bs) {
                   this.top = t
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[0].push(l, r, activeLeft, activeRight);
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
                 }
                 if (TS) {
                   this.top = b - height
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[1].push(l, r, activeLeft, activeRight);
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
                 }
                 if (BS) {
                   this.top = b
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[1].push(l, r, activeLeft, activeRight);
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
                 }
 
                 if (ls) {
                   this.left = l - width
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[0].push(t, b, activeTop, activeBottom);
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
                 }
                 if (rs) {
                   this.left = l
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[0].push(t, b, activeTop, activeBottom);
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
                 }
                 if (LS) {
                   this.left = r - width
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[1].push(t, b, activeTop, activeBottom);
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
                 }
                 if (RS) {
                   this.left = r
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[1].push(t, b, activeTop, activeBottom);
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
                 }
                 if (hc) {
                   this.top = t + h / 2 - height / 2
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[2].push(l, r, activeLeft, activeRight);
+                  tem.value.y[2].push(l, r, activeLeft, activeRight)
                 }
                 if (vc) {
                   this.left = l + w / 2 - width / 2
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[2].push(t, b, activeTop, activeBottom);
+                  tem.value.x[2].push(t, b, activeTop, activeBottom)
                 }
                 // 和容器贴边
                 if (this.snapBorder) {
@@ -1173,279 +1374,79 @@ export default {
                 }
               }
               // 再次进行边界处理
-              let bounds = this.bounds
-              this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft);
-              this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop);
-              this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight);
-              this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom);
+              const bounds = this.bounds
+              this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft)
+              this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop)
+              this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight)
+              this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom)
 
               // 辅助线坐标与是否显示(display)对应的数组,易于循环遍历
-              const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2];
+              const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2]
               for (let i = 0; i <= arrTem.length; i++) {
                 // 前6为Y辅助线,后6为X辅助线
-                const xory = i < 6 ? 'y' : 'x';
-                const horv = i < 6 ? 'hLine' : 'vLine';
+                const xory = i < 6 ? 'y' : 'x'
+                const horv = i < 6 ? 'hLine' : 'vLine'
                 if (tem.display[i]) {
-                  const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]]);
-                  refLine[horv][arrTem[i]].display = tem.display[i];
-                  refLine[horv][arrTem[i]].position = tem.position[i] + 'px';
-                  refLine[horv][arrTem[i]].origin = origin;
-                  refLine[horv][arrTem[i]].lineLength = length;
+                  const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]])
+                  refLine[horv][arrTem[i]].display = tem.display[i]
+                  refLine[horv][arrTem[i]].position = tem.position[i] + 'px'
+                  refLine[horv][arrTem[i]].origin = origin
+                  refLine[horv][arrTem[i]].lineLength = length
                 }
               }
             }
           }
         }
-        this.$emit('refLineParams', refLine);
+        this.$emit('refLineParams', refLine)
       }
     },
     // 计算参考线
     calcLineValues(arr) {
-      const length = Math.max(...arr) - Math.min(...arr) + 'px';
-      const origin = Math.min(...arr) + 'px';
-      return { length, origin };
+      const length = Math.max(...arr) - Math.min(...arr) + 'px'
+      const origin = Math.min(...arr) + 'px'
+      return { length, origin }
     },
     async getActiveAll(nodes) {
-      const activeAll = [];
-      const XArray = [];
-      const YArray = [];
-      let groupWidth = 0;
-      let groupHeight = 0;
-      let groupLeft = 0;
-      let groupTop = 0;
+      const activeAll = []
+      const XArray = []
+      const YArray = []
+      let groupWidth = 0
+      let groupHeight = 0
+      let groupLeft = 0
+      let groupTop = 0
       for (const item of nodes) {
         // 修复判断条件
         if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) {
-          activeAll.push(item);
+          activeAll.push(item)
         }
       }
-      const AllLength = activeAll.length;
+      const AllLength = activeAll.length
       if (AllLength > 1) {
         for (const i of activeAll) {
-          const l = i.offsetLeft;
-          const r = l + i.offsetWidth;
-          const t = i.offsetTop;
-          const b = t + i.offsetHeight;
-          XArray.push(l, r);
-          YArray.push(t, b);
+          const l = i.offsetLeft
+          const r = l + i.offsetWidth
+          const t = i.offsetTop
+          const b = t + i.offsetHeight
+          XArray.push(l, r)
+          YArray.push(t, b)
         }
         groupWidth = Math.max(...XArray) - Math.min(...XArray)
         groupHeight = Math.max(...YArray) - Math.min(...YArray)
         groupLeft = Math.min(...XArray)
         groupTop = Math.min(...YArray)
       }
-      const bln = AllLength === 1;
-      return { groupWidth, groupHeight, groupLeft, groupTop, bln };
+      const bln = AllLength === 1
+      return { groupWidth, groupHeight, groupLeft, groupTop, bln }
     },
     // 修复 正则获取left与top
     formatTransformVal(string) {
-      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g);
-      if (top === undefined) top = 0;
-      return [Number(left), Number(top), rotate];
-    }
-  },
-  computed: {
-    handleStyle() {
-      return (stick, index) => {
-        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' };
-        // 新增 当没有开启旋转的时候，旋转手柄不显示
-        if (stick === 'rot' && !this.rotatable) return { display: 'none' };
-        const size = (this.handleInfo.size / this.scaleRatio).toFixed(2);
-        const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2);
-        const center = (size / 2).toFixed(2);
-
-        const styleMap = {
-          tl: {
-            top: `${offset}px`,
-            left: `${offset}px`
-          },
-          tm: {
-            top: `${offset}px`,
-            left: `calc(50% - ${center}px)`
-          },
-          tr: {
-            top: `${offset}px`,
-            right: `${offset}px`
-          },
-          mr: {
-            top: `calc(50% - ${center}px)`,
-            right: `${offset}px`
-          },
-          br: {
-            bottom: `${offset}px`,
-            right: `${offset}px`
-          },
-          bm: {
-            bottom: `${offset}px`,
-            right: `calc(50% - ${center}px)`
-          },
-          bl: {
-            bottom: `${offset}px`,
-            left: `${offset}px`
-          },
-          ml: {
-            top: `calc(50% - ${center}px)`,
-            left: `${offset}px`
-          },
-          rot: {}
-        };
-        const stickStyle = {
-          width: `${size}px`,
-          height: `${size}px`,
-          top: styleMap[stick].top,
-          left: styleMap[stick].left,
-          right: styleMap[stick].right,
-          bottom: styleMap[stick].bottom
-        }
-        // 新增 让控制手柄的鼠标样式跟随玄幻角度变化
-        if (stick !== 'rot') {
-          const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
-          const STEP = 45
-          const rotate = this.rotate + STEP / 2
-          const deltaIndex = Math.floor(rotate / STEP)
-          index = (index + deltaIndex) % 8
-          stickStyle.cursor = cursorStyleArray[index]
-        }
-        stickStyle.display = this.enabled ? 'block' : 'none'
-        return stickStyle
-      }
-    },
-    style() {
-      return {
-        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
-        width: this.computedWidth,
-        height: this.computedHeight,
-        zIndex: this.zIndex,
-        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
-      };
-    },
-    // 控制柄显示与否
-    actualHandles() {
-      if (!this.resizable) return [];
-
-      return this.handles;
-    },
-    //  根据left right 算出元素的宽度
-    computedWidth() {
-      if (this.w === 'auto') {
-        if (!this.widthTouched) {
-          return 'auto';
-        }
-      }
-      return this.width + 'px';
-    },
-    // 根据top bottom 算出元素的宽度
-    computedHeight() {
-      if (this.h === 'auto') {
-        if (!this.heightTouched) {
-          return 'auto';
-        }
-      }
-      return this.height + 'px';
-    },
-    // 表示只修改宽度
-    resizingOnX() {
-      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'));
-    },
-    // 表示只修改高度
-    resizingOnY() {
-      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'));
-    },
-    // 表示正在调整边角
-    isCornerHandle() {
-      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle);
-    }
-  },
-
-  watch: {
-    active(val) {
-      this.enabled = val;
-
-      if (val) {
-        this.$emit('activated');
-      } else {
-        this.$emit('deactivated');
-      }
-    },
-    z(val) {
-      if (val >= 0 || val === 'auto') {
-        this.zIndex = val;
-      }
-    },
-    x(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-      if (this.parent) {
-        this.bounds = this.calcDragLimits();
-      }
-
-      this.moveHorizontally(val);
-    },
-    y(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcDragLimits();
-      }
-
-      this.moveVertically(val);
-    },
-    // 新增 监听外部传入参数  旋转角度
-    r(val) {
-      if (val >= 0) {
-        this.rotate = val % 360;
-      }
-    },
-    lockAspectRatio(val) {
-      if (val) {
-        this.aspectFactor = this.width / this.height;
-      } else {
-        this.aspectFactor = undefined;
-      }
-    },
-    minWidth(val) {
-      if (val > 0 && val <= this.width) {
-        this.minW = val;
-      }
-    },
-    minHeight(val) {
-      if (val > 0 && val <= this.height) {
-        this.minH = val;
-      }
-    },
-    maxWidth(val) {
-      this.maxW = val;
-    },
-    maxHeight(val) {
-      this.maxH = val;
-    },
-    w(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcResizeLimits();
-      }
-
-      this.changeWidth(val);
-    },
-    h(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcResizeLimits();
-      }
-
-      this.changeHeight(val);
+      // eslint-disable-next-line prefer-const
+      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g)
+      if (top === undefined) top = 0
+      return [Number(left), Number(top), rotate]
     }
   }
-};
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2045dcf5e7..8a5a70be7f 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -21,7 +21,6 @@ import directives from './directive'
 
 import './styles/vdrr/common-temp.scss'
 
-
 import vdrr from './components/vue-drag-resize-rotate'
 Vue.component('vdrr', vdrr)
 
diff --git a/frontend/src/views/panel/list/PanelPreview.vue b/frontend/src/views/panel/list/PanelPreview.vue
index dee4a6d5f2..f2ff68f4d1 100644
--- a/frontend/src/views/panel/list/PanelPreview.vue
+++ b/frontend/src/views/panel/list/PanelPreview.vue
@@ -1,348 +1,348 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-    <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
-      <span>仪表盘名称：{{panelName}}</span>
-    </el-row>
+  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
+    <span>仪表盘名称：{{ panelName }}</span>
+  </el-row>
 </template>
 
 <script>
-  import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
+import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
 
-  export default {
-    name: 'PanelView',
-    data() {
+export default {
+  name: 'PanelView',
+  data() {
+    return {
+      sceneMode: false,
+      dialogTitle: '',
+      search: '',
+      editGroup: false,
+      editTable: false,
+      tData: [],
+      tableData: [],
+      currGroup: {},
+      expandedArray: [],
+      groupForm: {
+        name: '',
+        pid: null,
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      tableForm: {
+        name: '',
+        mode: '',
+        sort: 'type asc,create_time desc,name asc'
+      },
+      groupFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
+        ]
+      },
+      tableFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
+        ],
+        mode: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    panelName: function() {
+      console.log(this.$store.state.panel.panelName)
+      return this.$store.state.panel.panelName
+    }
+  },
+  watch: {
+    // search(val){
+    //   this.groupForm.name = val;
+    //   this.tree(this.groupForm);
+    // }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+    this.refresh()
+    this.tableTree()
+    // this.$router.push('/dataset');
+  },
+  methods: {
+    clickAdd(param) {
+      // console.log(param);
+      this.add(param.type)
+      this.groupForm.pid = param.data.id
+      this.groupForm.level = param.data.level + 1
+    },
+
+    beforeClickAdd(type, data, node) {
       return {
-        sceneMode: false,
-        dialogTitle: '',
-        search: '',
-        editGroup: false,
-        editTable: false,
-        tData: [],
-        tableData: [],
-        currGroup: {},
-        expandedArray: [],
-        groupForm: {
-          name: '',
-          pid: null,
-          level: 0,
-          type: '',
-          children: [],
-          sort: 'type desc,name asc'
-        },
-        tableForm: {
-          name: '',
-          mode: '',
-          sort: 'type asc,create_time desc,name asc'
-        },
-        groupFormRules: {
-          name: [
-            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
-          ]
-        },
-        tableFormRules: {
-          name: [
-            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
-          ],
-          mode: [
-            {required: true, message: this.$t('commons.input_content'), trigger: 'blur'}
-          ]
-        }
+        'type': type,
+        'data': data,
+        'node': node
       }
     },
-    computed: {
-      panelName: function () {
-        console.log(this.$store.state.panel.panelName)
-        return this.$store.state.panel.panelName
+
+    clickMore(param) {
+      console.log(param)
+      switch (param.type) {
+        case 'rename':
+          this.add(param.data.type)
+          this.groupForm = JSON.parse(JSON.stringify(param.data))
+          break
+        case 'move':
+
+          break
+        case 'delete':
+          this.delete(param.data)
+          break
+        case 'editTable':
+          this.editTable = true
+          this.tableForm = JSON.parse(JSON.stringify(param.data))
+          this.tableForm.mode = this.tableForm.mode + ''
+          break
+        case 'deleteTable':
+          this.deleteTable(param.data)
+          break
       }
     },
-    watch: {
-      // search(val){
-      //   this.groupForm.name = val;
-      //   this.tree(this.groupForm);
-      // }
+
+    beforeClickMore(type, data, node) {
+      return {
+        'type': type,
+        'data': data,
+        'node': node
+      }
     },
-    mounted() {
-      this.tree(this.groupForm)
-      this.refresh()
-      this.tableTree()
-      // this.$router.push('/dataset');
+
+    add(type) {
+      switch (type) {
+        case 'group':
+          this.dialogTitle = this.$t('dataset.group')
+          break
+        case 'scene':
+          this.dialogTitle = this.$t('dataset.scene')
+          break
+      }
+      this.groupForm.type = type
+      this.editGroup = true
     },
-    methods: {
-      clickAdd(param) {
-        // console.log(param);
-        this.add(param.type)
-        this.groupForm.pid = param.data.id
-        this.groupForm.level = param.data.level + 1
-      },
 
-      beforeClickAdd(type, data, node) {
-        return {
-          'type': type,
-          'data': data,
-          'node': node
-        }
-      },
-
-      clickMore(param) {
-        console.log(param)
-        switch (param.type) {
-          case 'rename':
-            this.add(param.data.type)
-            this.groupForm = JSON.parse(JSON.stringify(param.data))
-            break
-          case 'move':
-
-            break
-          case 'delete':
-            this.delete(param.data)
-            break
-          case 'editTable':
-            this.editTable = true
-            this.tableForm = JSON.parse(JSON.stringify(param.data))
-            this.tableForm.mode = this.tableForm.mode + ''
-            break
-          case 'deleteTable':
-            this.deleteTable(param.data)
-            break
-        }
-      },
-
-      beforeClickMore(type, data, node) {
-        return {
-          'type': type,
-          'data': data,
-          'node': node
-        }
-      },
-
-      add(type) {
-        switch (type) {
-          case 'group':
-            this.dialogTitle = this.$t('dataset.group')
-            break
-          case 'scene':
-            this.dialogTitle = this.$t('dataset.scene')
-            break
-        }
-        this.groupForm.type = type
-        this.editGroup = true
-      },
-
-      saveGroup(group) {
-        // console.log(group);
-        this.$refs['groupForm'].validate((valid) => {
-          if (valid) {
-            addGroup(group).then(res => {
-              this.close()
-              this.$message({
-                message: this.$t('commons.save_success'),
-                type: 'success',
-                showClose: true
-              })
-              this.tree(this.groupForm)
-            })
-          } else {
-            this.$message({
-              message: this.$t('commons.input_content'),
-              type: 'error',
-              showClose: true
-            })
-            return false
-          }
-        })
-      },
-
-      saveTable(table) {
-        //   console.log(table)
-        table.mode = parseInt(table.mode)
-        this.$refs['tableForm'].validate((valid) => {
-          if (valid) {
-            addTable(table).then(response => {
-              this.closeTable()
-              this.$message({
-                message: this.$t('commons.save_success'),
-                type: 'success',
-                showClose: true
-              })
-              this.tableTree()
-              // this.$router.push('/dataset/home')
-              this.$emit('switchComponent', {name: ''})
-              this.$store.dispatch('dataset/setTable', null)
-            })
-          } else {
-            this.$message({
-              message: this.$t('commons.input_content'),
-              type: 'error',
-              showClose: true
-            })
-            return false
-          }
-        })
-      },
-
-      delete(data) {
-        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-          confirmButtonText: this.$t('dataset.confirm'),
-          cancelButtonText: this.$t('dataset.cancel'),
-          type: 'warning'
-        }).then(() => {
-          delGroup(data.id).then(response => {
+    saveGroup(group) {
+      // console.log(group);
+      this.$refs['groupForm'].validate((valid) => {
+        if (valid) {
+          addGroup(group).then(res => {
+            this.close()
             this.$message({
+              message: this.$t('commons.save_success'),
               type: 'success',
-              message: this.$t('dataset.delete_success'),
               showClose: true
             })
             this.tree(this.groupForm)
           })
-        }).catch(() => {
-        })
-      },
+        } else {
+          this.$message({
+            message: this.$t('commons.input_content'),
+            type: 'error',
+            showClose: true
+          })
+          return false
+        }
+      })
+    },
 
-      deleteTable(data) {
-        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-          confirmButtonText: this.$t('dataset.confirm'),
-          cancelButtonText: this.$t('dataset.cancel'),
-          type: 'warning'
-        }).then(() => {
-          delTable(data.id).then(response => {
+    saveTable(table) {
+      //   console.log(table)
+      table.mode = parseInt(table.mode)
+      this.$refs['tableForm'].validate((valid) => {
+        if (valid) {
+          addTable(table).then(response => {
+            this.closeTable()
             this.$message({
+              message: this.$t('commons.save_success'),
               type: 'success',
-              message: this.$t('dataset.delete_success'),
               showClose: true
             })
             this.tableTree()
             // this.$router.push('/dataset/home')
-            this.$emit('switchComponent', {name: ''})
+            this.$emit('switchComponent', { name: '' })
             this.$store.dispatch('dataset/setTable', null)
           })
-        }).catch(() => {
-        })
-      },
-
-      close() {
-        this.editGroup = false
-        this.groupForm = {
-          name: '',
-          pid: null,
-          level: 0,
-          type: '',
-          children: [],
-          sort: 'type desc,name asc'
-        }
-      },
-
-      closeTable() {
-        this.editTable = false
-        this.tableForm = {
-          name: ''
-        }
-      },
-
-      tree(group) {
-        groupTree(group).then(res => {
-          this.tData = res.data
-        })
-      },
-
-      tableTree() {
-        this.tableData = []
-        if (this.currGroup.id) {
-          loadTable({
-            sort: 'type asc,create_time desc,name asc',
-            sceneId: this.currGroup.id
-          }).then(res => {
-            this.tableData = res.data
-          })
-        }
-      },
-
-      nodeClick(data, node) {
-        // console.log(data);
-        // console.log(node);
-        if (data.type === 'scene') {
-          this.sceneMode = true
-          this.currGroup = data
-          this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
-        }
-        if (node.expanded) {
-          this.expandedArray.push(data.id)
         } else {
-          const index = this.expandedArray.indexOf(data.id)
-          if (index > -1) {
-            this.expandedArray.splice(index, 1)
-          }
-        }
-        // console.log(this.expandedArray);
-      },
-
-      back() {
-        this.sceneMode = false
-        //   const route = this.$store.state.permission.currentRoutes
-        //   console.log(route)
-        // this.$router.push('/dataset/index')
-        this.$store.dispatch('dataset/setSceneData', null)
-        this.$emit('switchComponent', {name: ''})
-      },
-      clickAddData(param) {
-        // console.log(param);
-        switch (param.type) {
-          case 'db':
-            this.addDB()
-            break
-          case 'sql':
-            this.$message(param.type)
-            break
-          case 'excel':
-            this.$message(param.type)
-            break
-          case 'custom':
-            this.$message(param.type)
-            break
-        }
-      },
-
-      beforeClickAddData(type) {
-        return {
-          'type': type
-        }
-      },
-
-      addDB() {
-        // this.$router.push({
-        //   name: 'add_db',
-        //   params: {
-        //     scene: this.currGroup
-        //   }
-        // })
-        this.$emit('switchComponent', {name: 'AddDB', param: this.currGroup})
-      },
-      sceneClick(data, node) {
-        // console.log(data);
-        this.$store.dispatch('dataset/setTable', null)
-        this.$store.dispatch('dataset/setTable', data.id)
-        // this.$router.push({
-        //   name: 'table',
-        //   params: {
-        //     table: data
-        //   }
-        // })
-        this.$emit('switchComponent', {name: 'ViewTable'})
-      },
-      refresh() {
-        const path = this.$route.path
-        if (path === '/dataset/table') {
-          this.sceneMode = true
-          const sceneId = this.$store.state.dataset.sceneData
-          getScene(sceneId).then(res => {
-            this.currGroup = res.data
+          this.$message({
+            message: this.$t('commons.input_content'),
+            type: 'error',
+            showClose: true
           })
+          return false
         }
-      },
-      panelDefaultClick(data, node) {
-        // console.log(data);
-        // console.log(node);
-      },
+      })
+    },
+
+    delete(data) {
+      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
+        confirmButtonText: this.$t('dataset.confirm'),
+        cancelButtonText: this.$t('dataset.cancel'),
+        type: 'warning'
+      }).then(() => {
+        delGroup(data.id).then(response => {
+          this.$message({
+            type: 'success',
+            message: this.$t('dataset.delete_success'),
+            showClose: true
+          })
+          this.tree(this.groupForm)
+        })
+      }).catch(() => {
+      })
+    },
+
+    deleteTable(data) {
+      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
+        confirmButtonText: this.$t('dataset.confirm'),
+        cancelButtonText: this.$t('dataset.cancel'),
+        type: 'warning'
+      }).then(() => {
+        delTable(data.id).then(response => {
+          this.$message({
+            type: 'success',
+            message: this.$t('dataset.delete_success'),
+            showClose: true
+          })
+          this.tableTree()
+          // this.$router.push('/dataset/home')
+          this.$emit('switchComponent', { name: '' })
+          this.$store.dispatch('dataset/setTable', null)
+        })
+      }).catch(() => {
+      })
+    },
+
+    close() {
+      this.editGroup = false
+      this.groupForm = {
+        name: '',
+        pid: null,
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+
+    closeTable() {
+      this.editTable = false
+      this.tableForm = {
+        name: ''
+      }
+    },
+
+    tree(group) {
+      groupTree(group).then(res => {
+        this.tData = res.data
+      })
+    },
+
+    tableTree() {
+      this.tableData = []
+      if (this.currGroup.id) {
+        loadTable({
+          sort: 'type asc,create_time desc,name asc',
+          sceneId: this.currGroup.id
+        }).then(res => {
+          this.tableData = res.data
+        })
+      }
+    },
+
+    nodeClick(data, node) {
+      // console.log(data);
+      // console.log(node);
+      if (data.type === 'scene') {
+        this.sceneMode = true
+        this.currGroup = data
+        this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
+      }
+      if (node.expanded) {
+        this.expandedArray.push(data.id)
+      } else {
+        const index = this.expandedArray.indexOf(data.id)
+        if (index > -1) {
+          this.expandedArray.splice(index, 1)
+        }
+      }
+      // console.log(this.expandedArray);
+    },
+
+    back() {
+      this.sceneMode = false
+      //   const route = this.$store.state.permission.currentRoutes
+      //   console.log(route)
+      // this.$router.push('/dataset/index')
+      this.$store.dispatch('dataset/setSceneData', null)
+      this.$emit('switchComponent', { name: '' })
+    },
+    clickAddData(param) {
+      // console.log(param);
+      switch (param.type) {
+        case 'db':
+          this.addDB()
+          break
+        case 'sql':
+          this.$message(param.type)
+          break
+        case 'excel':
+          this.$message(param.type)
+          break
+        case 'custom':
+          this.$message(param.type)
+          break
+      }
+    },
+
+    beforeClickAddData(type) {
+      return {
+        'type': type
+      }
+    },
+
+    addDB() {
+      // this.$router.push({
+      //   name: 'add_db',
+      //   params: {
+      //     scene: this.currGroup
+      //   }
+      // })
+      this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
+    },
+    sceneClick(data, node) {
+      // console.log(data);
+      this.$store.dispatch('dataset/setTable', null)
+      this.$store.dispatch('dataset/setTable', data.id)
+      // this.$router.push({
+      //   name: 'table',
+      //   params: {
+      //     table: data
+      //   }
+      // })
+      this.$emit('switchComponent', { name: 'ViewTable' })
+    },
+    refresh() {
+      const path = this.$route.path
+      if (path === '/dataset/table') {
+        this.sceneMode = true
+        const sceneId = this.$store.state.dataset.sceneData
+        getScene(sceneId).then(res => {
+          this.currGroup = res.data
+        })
+      }
+    },
+    panelDefaultClick(data, node) {
+      // console.log(data);
+      // console.log(node);
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 7c4745b1a1..c8dd93f61a 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -5,7 +5,7 @@
         <el-tabs v-model="ViewActiveName">
           <!--视图展示操作-->
           <el-tab-pane name="Views" class="view-list-thumbnails-outline">
-            <span slot="label"><i class="el-icon-s-data"/>视图</span>
+            <span slot="label"><i class="el-icon-s-data" />视图</span>
             <draggable
               v-model="thumbnails"
               :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
@@ -15,9 +15,9 @@
               @end="end1"
             >
               <transition-group>
-                <div v-for="item in thumbnails" :key="item.name"  v-on:dblclick = panelViewAdd(item)>
-                  <span style="color: gray">{{item.name}}</span>
-                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
+                <div v-for="item in thumbnails" :key="item.name" @dblclick="panelViewAdd(item)">
+                  <span style="color: gray">{{ item.name }}</span>
+                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
                 </div>
               </transition-group>
             </draggable>
@@ -25,7 +25,7 @@
 
           <!--通用组件操作-->
           <el-tab-pane name="PublicTools">
-            <span slot="label"><i class="el-icon-s-grid"/>组件</span>
+            <span slot="label"><i class="el-icon-s-grid" />组件</span>
             开发中...
           </el-tab-pane>
         </el-tabs>
@@ -34,33 +34,33 @@
       <el-col class="panel-design">
         <!--TODO 仪表盘设计公共设置区域-->
         <el-row class="panel-design-head">
-            <span style="float: right;line-height: 40px;">
-              <el-button size="mini">
-                背景图
-              </el-button>
-              <el-button type="primary" size="mini" @click="save">
-                预览
-              </el-button>
-            </span>
+          <span style="float: right;line-height: 40px;">
+            <el-button size="mini">
+              背景图
+            </el-button>
+            <el-button type="primary" size="mini" @click="save">
+              预览
+            </el-button>
+          </span>
         </el-row>
         <el-row class="panel-design-show">
           <div class="container" style="overflow-y: auto">
 
             <div :style="gridStyle">
-<!--              <draggable-->
-<!--                v-model="thumbnailsTmp"-->
-<!--                :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
-<!--                animation="300"-->
-<!--                :move="onMove"-->
-<!--                style="height: 100%;overflow:auto"-->
-<!--                @end="end1"-->
-<!--              >-->
-              <vdrr v-if="item.keepFlag" :view-id="item.id" :parent="true" v-for="item in thumbnailsTmp" :key="item.name" @newStyle="newStyle" @removeView="removeView">
-                <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
+              <!--              <draggable-->
+              <!--                v-model="thumbnailsTmp"-->
+              <!--                :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
+              <!--                animation="300"-->
+              <!--                :move="onMove"-->
+              <!--                style="height: 100%;overflow:auto"-->
+              <!--                @end="end1"-->
+              <!--              >-->
+              <vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
+                <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
               </vdrr>
-<!--            </draggable>-->
+              <!--            </draggable>-->
 
-          </div>
+            </div>
           </div>
 
           <!--          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
@@ -74,251 +74,250 @@
 </template>
 
 <script>
-  import {post} from '@/api/dataset/dataset'
-  import draggable from 'vuedraggable'
-  import {BASE_BAR} from '../chart/chart'
+import { post } from '@/api/dataset/dataset'
+import draggable from 'vuedraggable'
+import { BASE_BAR } from '../chart/chart'
 
-  export default {
-    name: 'PanelViewShow',
-    components: {draggable},
-    data() {
-      return {
-        gridStyle: {
-          position: 'relative',
-          height: '2000px',
-          width: '2000px',
-          backgroundColor: '#808080',
-          background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
-          backgroundSize: '20px 20px, 20px 20px'
-        },
-        ViewActiveName: 'Views',
-        table: {},
-        thumbnailsTmp: [
-          {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1',keepFlag:true,style:''},
-          {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2',keepFlag:true,style:''}
-        ],
-        thumbnails: [
-          {id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1'},
-          {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2'},
-          {id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3'},
-          {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4'}
-        ],
-        quota: [],
-        view: {
-          xaxis: [],
-          yaxis: [],
-          show: true,
-          type: 'bar',
-          title: ''
-        },
-        // 定义要被拖拽对象的数组
-        arr1: [
-          {id: 1, name: 'id'},
-          {id: 2, name: '名称'},
-          {id: 3, name: '类型'},
-          {id: 5, name: '状态'},
-          {id: 4, name: '指标指标指标'}
-        ],
-        arr2: [
-          {id: 11, name: '容量'}
-        ],
-        moveId: -1
-      }
-    },
-    computed: {
-      tableId() {
-        // console.log(this.$store.state.chart.tableId);
-        this.initTableData(this.$store.state.chart.tableId)
-        return this.$store.state.chart.tableId
+export default {
+  name: 'PanelViewShow',
+  components: { draggable },
+  data() {
+    return {
+      gridStyle: {
+        position: 'relative',
+        height: '2000px',
+        width: '2000px',
+        backgroundColor: '#808080',
+        background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
+        backgroundSize: '20px 20px, 20px 20px'
       },
-      sceneId() {
-        // console.log(this.$store.state.chart.sceneId);
-        return this.$store.state.chart.sceneId
+      ViewActiveName: 'Views',
+      table: {},
+      thumbnailsTmp: [
+        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
+        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
+      ],
+      thumbnails: [
+        { id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
+        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
+        { id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
+        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
+      ],
+      quota: [],
+      view: {
+        xaxis: [],
+        yaxis: [],
+        show: true,
+        type: 'bar',
+        title: ''
       },
-      vId() {
-        // console.log(this.$store.state.chart.viewId);
-        this.getData(this.$store.state.chart.viewId)
-        return this.$store.state.chart.viewId
-      }
-
+      // 定义要被拖拽对象的数组
+      arr1: [
+        { id: 1, name: 'id' },
+        { id: 2, name: '名称' },
+        { id: 3, name: '类型' },
+        { id: 5, name: '状态' },
+        { id: 4, name: '指标指标指标' }
+      ],
+      arr2: [
+        { id: 11, name: '容量' }
+      ],
+      moveId: -1
+    }
+  },
+  computed: {
+    tableId() {
+      // console.log(this.$store.state.chart.tableId);
+      this.initTableData(this.$store.state.chart.tableId)
+      return this.$store.state.chart.tableId
     },
-    watch: {},
-    created() {
-      // this.get(this.$store.state.chart.viewId);
+    sceneId() {
+      // console.log(this.$store.state.chart.sceneId);
+      return this.$store.state.chart.sceneId
     },
-    mounted() {
-      // this.get(this.$store.state.chart.viewId);
+    vId() {
+      // console.log(this.$store.state.chart.viewId);
       this.getData(this.$store.state.chart.viewId)
-      // this.myEcharts();
+      return this.$store.state.chart.viewId
+    }
+
+  },
+  watch: {},
+  created() {
+    // this.get(this.$store.state.chart.viewId);
+  },
+  mounted() {
+    // this.get(this.$store.state.chart.viewId);
+    this.getData(this.$store.state.chart.viewId)
+    // this.myEcharts();
+  },
+  activated() {
+  },
+  methods: {
+    panelViewAdd(item) {
+      const pushItem = {
+        id: item.id,
+        name: item.name,
+        keepFlag: true
+      }
+      debugger
+      this.thumbnailsTmp.push(pushItem)
+      console.log(this.thumbnailsTmp)
     },
-    activated() {
+    removeView(viewId) {
+      this.thumbnailsTmp.forEach(function(item, index) {
+        if (item.id === viewId) {
+          item.keepFlag = false
+        }
+      })
     },
-    methods: {
-      panelViewAdd(item){
-        let pushItem = {
-          id:item.id,
-          name:item.name,
-          keepFlag:true
-        }
-        debugger
-        this.thumbnailsTmp.push(pushItem)
-        console.log(this.thumbnailsTmp);
-      },
-      removeView(viewId) {
-        this.thumbnailsTmp.forEach(function(item, index) {
-         if(item.id===viewId){
-           item.keepFlag = false
-         }
+    newStyle(viewId, newStyleInfo) {
+      console.log(viewId)
+      console.log(JSON.stringify(newStyleInfo))
+    },
+    initTableData(id) {
+      if (id != null) {
+        post('/dataset/table/get/' + id, null).then(response => {
+          this.table = response.data
+          this.initTableField(id)
         })
-      },
-      newStyle(viewId,newStyleInfo) {
-        console.log(viewId);
-        console.log(JSON.stringify(newStyleInfo))
-
-      },
-      initTableData(id) {
-        if (id != null) {
-          post('/dataset/table/get/' + id, null).then(response => {
-            this.table = response.data
-            this.initTableField(id)
-          })
-        }
-      },
-      initTableField(id) {
-        post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-          this.thumbnails = response.data.thumbnails
-          this.quota = response.data.quota
+      }
+    },
+    initTableField(id) {
+      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
+        this.thumbnails = response.data.thumbnails
+        this.quota = response.data.quota
+      })
+    },
+    click1(item) {
+      // console.log(item);
+      const c = this.view.xaxis.filter(function(ele) {
+        return ele.id === item.id
+      })
+      // console.log(c);
+      if (c && c.length === 0) {
+        this.view.xaxis.push(item)
+      }
+    },
+    click2(item) {
+      // console.log(item);
+      const c = this.view.yaxis.filter(function(ele) {
+        return ele.id === item.id
+      })
+      // console.log(c);
+      if (c && c.length === 0) {
+        this.view.yaxis.push(item)
+      }
+    },
+    clear1(index) {
+      this.view.xaxis.splice(index, 1)
+    },
+    clear2(index) {
+      this.view.yaxis.splice(index, 1)
+    },
+    get(id) {
+      if (id) {
+        post('/chart/view/get/' + id, null).then(response => {
+          this.view = response.data
+          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
         })
-      },
-      click1(item) {
-        // console.log(item);
-        const c = this.view.xaxis.filter(function (ele) {
-          return ele.id === item.id
+      } else {
+        this.view = {}
+      }
+    },
+    save() {
+      const view = JSON.parse(JSON.stringify(this.view))
+      view.id = this.view.id
+      view.sceneId = this.sceneId
+      view.name = this.table.name
+      view.tableId = this.$store.state.chart.tableId
+      view.xaxis = JSON.stringify(view.xaxis)
+      view.yaxis = JSON.stringify(view.yaxis)
+      post('/chart/view/save', view).then(response => {
+        // this.get(response.data.id);
+        this.getData(response.data.id)
+        this.$store.dispatch('chart/setChartSceneData', null)
+        this.$store.dispatch('chart/setChartSceneData', this.sceneId)
+      })
+    },
+    getData(id) {
+      if (id) {
+        post('/chart/view/getData/' + id, null).then(response => {
+          this.view = response.data
+          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+
+          const chart = response.data
+          const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
+          // console.log(chart_option);
+          if (chart.data) {
+            chart_option.title.text = chart.title
+            chart_option.xAxis.data = chart.data.x
+            chart.data.series.forEach(function(y) {
+              chart_option.legend.data.push(y.name)
+              chart_option.series.push(y)
+            })
+          }
+          // console.log(chart_option);
+          this.myEcharts(chart_option)
         })
-        // console.log(c);
-        if (c && c.length === 0) {
-          this.view.xaxis.push(item)
-        }
-      },
-      click2(item) {
-        // console.log(item);
-        const c = this.view.yaxis.filter(function (ele) {
-          return ele.id === item.id
-        })
-        // console.log(c);
-        if (c && c.length === 0) {
-          this.view.yaxis.push(item)
-        }
-      },
-      clear1(index) {
-        this.view.xaxis.splice(index, 1)
-      },
-      clear2(index) {
-        this.view.yaxis.splice(index, 1)
-      },
-      get(id) {
-        if (id) {
-          post('/chart/view/get/' + id, null).then(response => {
-            this.view = response.data
-            this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-            this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-          })
-        } else {
-          this.view = {}
-        }
-      },
-      save() {
-        const view = JSON.parse(JSON.stringify(this.view))
-        view.id = this.view.id
-        view.sceneId = this.sceneId
-        view.name = this.table.name
-        view.tableId = this.$store.state.chart.tableId
-        view.xaxis = JSON.stringify(view.xaxis)
-        view.yaxis = JSON.stringify(view.yaxis)
-        post('/chart/view/save', view).then(response => {
-          // this.get(response.data.id);
-          this.getData(response.data.id)
-          this.$store.dispatch('chart/setChartSceneData', null)
-          this.$store.dispatch('chart/setChartSceneData', this.sceneId)
-        })
-      },
-      getData(id) {
-        if (id) {
-          post('/chart/view/getData/' + id, null).then(response => {
-            this.view = response.data
-            this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-            this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+      } else {
+        this.view = {}
+      }
+    },
 
-            const chart = response.data
-            const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-            // console.log(chart_option);
-            if (chart.data) {
-              chart_option.title.text = chart.title
-              chart_option.xAxis.data = chart.data.x
-              chart.data.series.forEach(function (y) {
-                chart_option.legend.data.push(y.name)
-                chart_option.series.push(y)
-              })
-            }
-            // console.log(chart_option);
-            this.myEcharts(chart_option)
-          })
-        } else {
-          this.view = {}
-        }
-      },
+    // 左边往右边拖动时的事件
+    end1(e) {
+      // console.log(e)
+      // var that = this;
+      // var items = this.arr2.filter(function (m) {
+      //   return m.id == that.moveId
+      // })
+      // //如果左边
+      // if (items.length < 2) return;
+      // this.arr2.splice(e.newDraggableIndex, 1)
+    },
+    // 右边往左边拖动时的事件
+    end2(e) {
+      // console.log(e)
+      // var that = this;
+      // var items = this.yAxisData.filter(function (m) {
+      //   return m.id == that.moveId
+      // })
+      // //如果左边
+      // if (items.length < 2) return;
+      // this.yAxisData.splice(e.newDraggableIndex, 1)
+    },
+    end3(e) {
 
-      // 左边往右边拖动时的事件
-      end1(e) {
-        // console.log(e)
-        // var that = this;
-        // var items = this.arr2.filter(function (m) {
-        //   return m.id == that.moveId
-        // })
-        // //如果左边
-        // if (items.length < 2) return;
-        // this.arr2.splice(e.newDraggableIndex, 1)
-      },
-      // 右边往左边拖动时的事件
-      end2(e) {
-        // console.log(e)
-        // var that = this;
-        // var items = this.yAxisData.filter(function (m) {
-        //   return m.id == that.moveId
-        // })
-        // //如果左边
-        // if (items.length < 2) return;
-        // this.yAxisData.splice(e.newDraggableIndex, 1)
-      },
-      end3(e) {
+    },
+    end4(e) {
 
-      },
-      end4(e) {
+    },
+    // move回调方法
+    onMove(e, originalEvent) {
+      console.log(e)
+      // this.moveId = e.relatedContext.element.id;
+      // //不允许停靠
+      // if (e.relatedContext.element.id == 1) return false;
+      // //不允许拖拽
+      // if (e.draggedContext.element.id == 4) return false;
+      // if (e.draggedContext.element.id == 11) return false;
+      return true
+    },
 
-      },
-      // move回调方法
-      onMove(e, originalEvent) {
-        console.log(e)
-        // this.moveId = e.relatedContext.element.id;
-        // //不允许停靠
-        // if (e.relatedContext.element.id == 1) return false;
-        // //不允许拖拽
-        // if (e.draggedContext.element.id == 4) return false;
-        // if (e.draggedContext.element.id == 11) return false;
-        return true
-      },
-
-      myEcharts(option) {
-        // 基于准备好的dom，初始化echarts实例
-        var myChart = this.$echarts.init(document.getElementById('echart'))
-        // 指定图表的配置项和数据
-        setTimeout(myChart.setOption(option, true), 500)
-        window.onresize = function () {
-          myChart.resize()
-        }
+    myEcharts(option) {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('echart'))
+      // 指定图表的配置项和数据
+      setTimeout(myChart.setOption(option, true), 500)
+      window.onresize = function() {
+        myChart.resize()
       }
     }
   }
+}
 </script>
 
 <style scoped>