Merge pull request #640 from dataease/dev

Dev
2021-08-17 09:47:49 +08:00 · 2021-08-17 09:47:49 +08:00 · 72ed2e258d
commit 72ed2e258d
parent ac04e97369 f7bc4106a9
5 changed files with 79 additions and 37 deletions
--- a/2
+++ b/2
@ -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

--- a/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
+++ b/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;
--- 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)
      }
    }
  }
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/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()
    }
  }
 }
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@ -11,7 +11,7 @@
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item :label="$t('commons.description')" prop="desc">
-          <el-input v-model="form.desc" autocomplete="off"  />
+          <el-input v-model="form.desc" autocomplete="off" />
        </el-form-item>
        <el-form-item :label="$t('datasource.type')" prop="type">
          <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" :disabled="formType=='modify' || (formType==='add' && params && !!params.type)" @change="changeType()">
@ -61,26 +61,26 @@
            />
          </el-select>
        </el-form-item>
-        <el-collapse >
+        <el-collapse>
          <el-collapse-item :title="$t('datasource.priority')" name="1">

            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
-              <el-input v-model="form.configuration.initialPoolSize" autocomplete="off"  type="number"  min="0" size="small" />
+              <el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small" />
            </el-form-item>
            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
-              <el-input v-model="form.configuration.minPoolSize" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
            </el-form-item>
            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
-              <el-input v-model="form.configuration.maxPoolSize" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
            </el-form-item>
            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.max_idle_time')" prop="configuration.maxIdleTime">
-              <el-input v-model="form.configuration.maxIdleTime" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.maxIdleTime" autocomplete="off" type="number" min="0"/>
            </el-form-item>
            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.acquire_increment')" prop="configuration.acquireIncrement">
-              <el-input v-model="form.configuration.acquireIncrement" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.acquireIncrement" autocomplete="off" type="number" min="0"/>
            </el-form-item>
            <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.connect_timeout')" prop="configuration.connectTimeout">
-              <el-input v-model="form.configuration.connectTimeout" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.connectTimeout" autocomplete="off" type="number" min="0"/>
            </el-form-item>

          </el-collapse-item>
@ -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' }],
@ -191,29 +193,28 @@ export default {
      this.form = Object.assign({}, row)
      this.originConfiguration = this.form.configuration
      this.form.configuration = JSON.parse(this.form.configuration)
-      if(!this.form.configuration.initialPoolSize){
+      if (!this.form.configuration.initialPoolSize) {
        this.form.configuration.initialPoolSize = 5
      }
-      if(!this.form.configuration.minPoolSize){
+      if (!this.form.configuration.minPoolSize) {
        this.form.configuration.minPoolSize = 5
      }
-      if(!this.form.configuration.maxPoolSize){
+      if (!this.form.configuration.maxPoolSize) {
        this.form.configuration.maxPoolSize = 50
      }
-      if(!this.form.configuration.maxIdleTime){
+      if (!this.form.configuration.maxIdleTime) {
        this.form.configuration.maxIdleTime = 30
      }
-      if(!this.form.configuration.acquireIncrement){
+      if (!this.form.configuration.acquireIncrement) {
        this.form.configuration.acquireIncrement = 5
      }
-      if(!this.form.configuration.idleConnectionTestPeriod){
+      if (!this.form.configuration.idleConnectionTestPeriod) {
        this.form.configuration.idleConnectionTestPeriod = 5
      }
-      if(!this.form.configuration.connectTimeout){
+      if (!this.form.configuration.connectTimeout) {
        this.form.configuration.connectTimeout = 5
      }
    },
-
    reset() {
      this.$refs.dsForm.resetFields()
    },
@ -222,8 +223,8 @@ export default {
        this.$message.error(this.$t('datasource.please_choose_schema'))
        return
      }
-      if(this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0
-        || this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0){
+      if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0
+        || this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0) {
        this.$message.error(this.$t('datasource.no_less_then_0'))
        return
      }