Merge pull request #3674 from dataease/pr@dev@feat_map_suspension

feat(视图): 色彩地图增加悬浮组件显隐设置

frontend/src/components/suspensionSelector/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div style="width: 100%;">
+    <el-col>
+      <el-form
+        ref="suspensionForm"
+        :model="suspensionForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('show')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="suspensionForm.show"
+            @change="changeSuspensionAttr('show')"
+          >{{ $t('chart.show') }}
+          </el-checkbox>
+        </el-form-item>
+
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_SUSPENSION } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'SuspensionForm',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      suspensionForm: JSON.parse(JSON.stringify(DEFAULT_SUSPENSION)),
+      fontSize: []
+
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.suspension) {
+          this.suspensionForm = customAttr.suspension
+        }
+      }
+    },
+
+    changeSuspensionAttr(modifyName) {
+      this.suspensionForm['modifyName'] = modifyName
+      this.$emit('onSuspensionChange', this.suspensionForm)
+    },
+
+    showProperty(property) {
+      return this.propertyInner.includes(property)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+  .switch-style{
+    position: absolute;
+    right: 10px;
+    margin-top: -4px;
+  }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>

frontend/src/components/widget/deWidget/inputStyleMixin.js

@@ -58,7 +58,7 @@ export default {
   mounted() {
     if (!this.isFilterComponent) return
     this.typeTransform().forEach(item => {
-      const nodeCache = this.$refs.deOutWidget.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el
+      const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el
       this.styleAttrs.forEach(ele => {
         nodeCache.style[this.attrsMap[ele]] = this.element.style[ele]
         this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(item), ele, this.element.style[ele])
@@ -70,7 +70,7 @@ export default {
       let nodeCache = ''
       this.styleAttrs.forEach(ele => {
         if (!nodeCache) {
-          nodeCache = this.$refs.deOutWidget.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el
+          nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el
         }
         nodeCache.style[this.attrsMap[ele]] = newValue[ele]
         this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele])

frontend/src/lang/en.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    suspension: 'Suspension',
     chart_background: 'Component background',
     solid_color: 'Solid color',
     split_gradient: 'Split gradient',

frontend/src/lang/tw.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    suspension: '懸浮',
     chart_background: '組件背景',
     solid_color: '純色',
     split_gradient: '分離漸變',

frontend/src/lang/zh.js

@@ -914,6 +914,7 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    suspension: '悬浮',
     chart_background: '组件背景',
     solid_color: '纯色',
     split_gradient: '分离渐变',

frontend/src/views/chart/chart/chart.js

@@ -124,6 +124,9 @@ export const DEFAULT_SIZE = {
   showIndex: false,
   indexLabel: '序号'
 }
+export const DEFAULT_SUSPENSION = {
+  show: true
+}
 export const DEFAULT_LABEL = {
   show: false,
   position: 'top',

frontend/src/views/chart/chart/map/map.js

@@ -125,6 +125,11 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
         if (themeStyle) {
           chart_option.visualMap.textStyle = { color: themeStyle }
         }
+        if (customAttr.suspension && !customAttr.suspension.show) {
+          chart_option.visualMap.show = false
+        } else if ('show' in chart_option.visualMap) {
+          delete chart_option.visualMap.show
+        }
       }
 
       for (let i = 0; i < valueArr.length; i++) {

frontend/src/views/chart/chart/util.js

@@ -3073,7 +3073,8 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'label-selector',
       'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'suspension-selector'
     ],
     propertyInner: {
 
@@ -3107,6 +3108,9 @@ export const TYPE_CONFIGS = [
         'vPosition',
         'isItalic',
         'isBolder'
+      ],
+      'suspension-selector': [
+        'show'
       ]
     }
   }

frontend/src/views/chart/components/ChartComponent.vue

@@ -13,7 +13,7 @@
       :style="{ borderRadius: borderRadius}"
     />
     <div
-      v-if="chart.type === 'map'"
+      v-if="chart.type === 'map' && showSuspension"
       class="map-zoom-box"
     >
       <div style="margin-bottom: 0.5em;">
@@ -143,7 +143,8 @@ export default {
       mapCenter: null,
       linkageActiveParam: null,
       buttonTextColor: null,
-      loading: true
+      loading: true,
+      showSuspension: true
     }
   },
 
@@ -318,6 +319,9 @@ export default {
       }
       if (chart.type === 'map') {
         const customAttr = JSON.parse(chart.customAttr)
+        if (customAttr.suspension) {
+          this.showSuspension = customAttr.suspension.show
+        }
         if (!customAttr.areaCode) {
           this.myChart.clear()
           return

frontend/src/views/chart/view/ChartEdit.vue

@@ -951,6 +951,7 @@
             @onLegendChange="onLegendChange"
             @onMarginChange="onMarginChange"
             @onChangeBackgroundForm="onChangeBackgroundForm"
+            @onSuspensionChange="onSuspensionChange"
           />
         </el-tab-pane>
         <el-tab-pane
@@ -2415,6 +2416,10 @@ export default {
       this.view.customAttr.color = val
       this.calcStyle('color')
     },
+    onSuspensionChange(val) {
+      this.view.customAttr.suspension = val
+      this.calcStyle()
+    },
 
     onSizeChange(val) {
       this.view.customAttr.size = val

frontend/src/views/chart/view/ChartStyle.vue

@@ -121,6 +121,19 @@
               @onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
             />
           </el-collapse-item>
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['suspension-selector'])"
+            name="suspension"
+            :title="$t('chart.suspension')"
+          >
+            <suspension-selector
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              :property-inner="propertyInnerAll['suspension-selector']"
+              @onSuspensionChange="onSuspensionChange($event,'suspension-selector')"
+            />
+          </el-collapse-item>
         </el-collapse>
       </el-row>
       <el-row class="de-collapse-style">
@@ -317,6 +330,7 @@ import LegendSelectorAntV from '@/views/chart/components/componentStyle/LegendSe
 import BackgroundColorSelector from '@/views/chart/components/componentStyle/BackgroundColorSelector'
 import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
 import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
+import SuspensionSelector from '@/components/suspensionSelector'
 import { mapState } from 'vuex'
 
 export default {
@@ -344,7 +358,8 @@ export default {
     SizeSelector,
     ColorSelector,
     MarginSelector,
-    PluginCom
+    PluginCom,
+    SuspensionSelector
   },
   props: {
     chart: {
@@ -422,6 +437,10 @@ export default {
       val['propertyName'] = propertyName
       this.$emit('onColorChange', val)
     },
+    onSuspensionChange(val, propertyName) {
+      val['propertyName'] = propertyName
+      this.$emit('onSuspensionChange', val)
+    },
     onSizeChange(val, propertyName) {
       val['propertyName'] = propertyName
       this.$emit('onSizeChange', val)