解决大屏拖拽卡顿的问题

packages/bigscreen/designer/components/Layout.vue

@@ -48,12 +48,11 @@
               v-model="dashboard.presetLine"
               class="vueRuler"
               :step-length="50"
-              :parent="true"
+              parent
-              :position="'relative'"
+              is-scale-revise
-              :is-scale-revise="true"
+              position="relative"
               :visible.sync="dashboard.presetLineVisible">
-            <div
+            <div id="workbench"
-                id="workbench"
                  class="workbench"
                  :style="{
                 transform: workbenchTransform,
@@ -80,8 +79,8 @@
                       :class="[activeIndex === index ? 'drag-active' : '']"
                       class="draggable"
                       @contextmenu.native.stop="e => onContextmenu(e, index)"
-                      @dragging="(x, y) => onDrag(x, y, index)"
+                      @dragstop="(x, y) => onDrag(x, y,item)"
-                      @resizing="(x, y, w, h) => onResizing(x, y, w, h, index, item.type)"
+                      @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
                       @activated="onActivated(index)"
                       @click.native.stop="activeIndex = index"
                       v-for="(item, index) in componentList"
@@ -587,22 +586,15 @@ export default {
     onActivated(index) {
       this.activeIndex = index
     },
-
+    onDrag(x, y, item) {
-
+      item.left = x
-    onDrag(x, y, index) {
+      item.top = y
-      this.$set(this.componentList[index], 'left', x)
-      this.$set(this.componentList[index], 'top', y)
     },
-
+    onResizing(x, y, w, h, item) {
-    onResizing(x, y, w, h, index, type) {
+      item.left = x
-      this.$set(this.componentList[index], 'left', x)
+      item.top = y
-      this.$set(this.componentList[index], 'top', y)
+      item.width = w
-      this.$set(this.componentList[index], 'width', w)
+      item.height = h
-      this.$set(this.componentList[index], 'height', h)
-
-      if (type.indexOf('Chart') > -1) {
-        // this.$refs[`chart${index}`][0].watchResize()
-      }
     },
 
     initCanvas() {
@@ -1052,6 +1044,7 @@ export default {
     .draggable {
       position: absolute;
       border: none;
+      transition: none;
 
       &::after {
         position: absolute;

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -122,14 +122,13 @@
   import 'bin-code-editor/lib/styles/index.css'
 
   export default {
-    name: 'dataCofing',
+    name: 'dataConfig',
 
     props: {
       options: Object,
       instance: Function,
       dict: Object,
       params: Object,
-      urlPrefix: String
     },
 
     data () {
@@ -168,7 +167,7 @@
       this.getDataList()
 
       if ((this.options.dataY && this.options.dataY.length && this.options.dataX) || this.options.type === 'monitor') {
-        const api = this.options.dataType === 'apiData' ? this.options.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
+        const api = this.options.dataType === 'apiData' ? this.options.api : `/app/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
         this.instance.post(api).then(res => {
           if (res.code == 0) {
             if (res.data.length && this.options.type !== 'monitor') {
@@ -201,7 +200,7 @@
       },
 
       onMoniterId (e) {
-        this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
+        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
           if (res.code == 0) {
             this.options.src = JSON.parse(res.data).url
           }
@@ -209,7 +208,7 @@
       },
 
       getDataList () {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceByPage`, null, {
+        this.instance.post(`/app/appdiylargescreen/allDatasourceByPage`, null, {
           params: {
             current: 1,
             size: 10000
@@ -286,7 +285,7 @@
       onDataChange (e) {
         this.options.dataX = ''
         this.options.dataY = []
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${e}`).then(res => {
+        this.instance.post(`/app/appdiylargescreen/statisticsByLsid?id=${e}`).then(res => {
           if (res.code == 0) {
             if (res.data.length) {
               if (this.options.type === 'table') {