Merge pull request #640 from dataease/dev

Dev

Dockerfile

@@ -1,4 +1,4 @@
-FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre
+FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre:map
 
 ARG IMAGE_TAG
 

backend/src/main/java/io/dataease/datasource/service/DatasourceService.java

@@ -28,7 +28,6 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
-import javax.xml.crypto.Data;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;

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,11 +413,21 @@ export default {
         }
       }
     },
-    // chart
-    chartResize() {
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+
+    // 边框变化
+    chartResize(index) {
       if (this.$refs[this.element.propValue.id]) {
+        this.timeMachine = setTimeout(() => {
+          if (index === this.changeIndex) {
             this.$refs[this.element.propValue.id].chartResize()
           }
+          this.destroyTimeMachine()
+        }, 200)
+      }
     }
   }
 }

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -13,7 +13,7 @@
               <div style="padding: 6px 10px;">
                 <div>
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
-                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
                     <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                       <div style="float: left">
                         <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@@ -187,10 +187,14 @@ export default {
     }
   },
   watch: {
-    'chart': {
+    'chart.id': {
       handler: function() {
         this.customColor = null
         this.colorIndex = 0
+      }
+    },
+    'chart': {
+      handler: function() {
         this.init()
       }
     }
@@ -199,17 +203,26 @@ export default {
     this.init()
   },
   methods: {
-    changeColorCase() {
+    changeColorOption() {
       const that = this
       const items = this.colorCases.filter(ele => {
         return ele.value === that.colorForm.value
       })
-      const val = JSON.parse(JSON.stringify(this.colorForm))
-      val.value = items[0].value
-      val.colors = items[0].colors
-      this.$emit('onColorChange', val)
-      this.customColor = null
+      // const val = JSON.parse(JSON.stringify(this.colorForm))
+      // val.value = items[0].value
+      // val.colors = items[0].colors
+      // this.colorForm.value = items[0].value
+      this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
+
+      this.customColor = this.colorForm.colors[0]
       this.colorIndex = 0
+
+      this.changeColorCase()
+    },
+    changeColorCase() {
+      this.$emit('onColorChange', this.colorForm)
+      // this.customColor = null
+      // this.colorIndex = 0
     },
     init() {
       const chart = JSON.parse(JSON.stringify(this.chart))
@@ -239,9 +252,7 @@ export default {
     },
 
     resetCustomColor() {
-      this.customColor = this.colorForm.colors[0]
-      this.colorIndex = 0
-      this.changeColorCase()
+      this.changeColorOption()
     }
   }
 }

frontend/src/views/system/datasource/form.vue

@@ -114,7 +114,8 @@ export default {
   },
   data() {
     return {
-      form: { configuration: {
+      form: {
+        configuration: {
           initialPoolSize: 5,
           minPoolSize: 5,
           maxPoolSize: 50,
@@ -122,7 +123,8 @@ export default {
           acquireIncrement: 5,
           idleConnectionTestPeriod: 5,
           connectTimeout: 5
-        }},
+        }
+      },
       rule: {
         name: [{ required: true, message: this.$t('datasource.input_name'), trigger: 'blur' },
           { min: 2, max: 25, message: this.$t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
@@ -213,7 +215,6 @@ export default {
         this.form.configuration.connectTimeout = 5
       }
     },
-
     reset() {
       this.$refs.dsForm.resetFields()
     },