From 6db0747009311ca043fd8aa050adfd77778d09aa Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 16 Aug 2021 18:31:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E8=A7=86=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/UserView.vue      | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index c978f9e800..153100e9c1 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -91,7 +91,9 @@ export default {
       httpRequest: {
         status: true,
         msg: ''
-      }
+      },
+      timeMachine: null,
+      changeIndex: 0
     }
   },
   computed: {
@@ -131,6 +133,9 @@ export default {
     chartType() {
       return this.chart.type
     },
+    hw() {
+      return this.outStyle.width * this.outStyle.height
+    },
     ...mapState([
       'canvasStyleData',
       'nowPanelTrackInfo'
@@ -163,6 +168,22 @@ export default {
       deep: true
     },
     // 监听外部的样式变化 （非实时性要求）
+    'hw': {
+      handler(newVal, oldVla) {
+        // console.log('hw:' + newVal + '---' + oldVla)
+        if (newVal !== oldVla) {
+          this.destroyTimeMachine()
+          this.changeIndex++
+          this.chartResize(this.changeIndex)
+        }
+        //
+        // if (this.$refs[this.element.propValue.id]) {
+        //   this.$refs[this.element.propValue.id].chartResize()
+        // }
+      },
+      deep: true
+    },
+    // 监听外部的样式变化 （非实时性要求）
     outStyle: {
       handler(newVal, oldVla) {
         //
@@ -392,10 +413,20 @@ export default {
         }
       }
     },
-    // chart
-    chartResize() {
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+
+    // 边框变化
+    chartResize(index) {
       if (this.$refs[this.element.propValue.id]) {
-        this.$refs[this.element.propValue.id].chartResize()
+        this.timeMachine = setTimeout(() => {
+          if (index === this.changeIndex) {
+            this.$refs[this.element.propValue.id].chartResize()
+          }
+          this.destroyTimeMachine()
+        }, 200)
       }
     }
   }