Merge pull request #2249 from dataease/pr@dev@fix_panel_filter_title_position

feat: 仪表板条件组件设置标题位置

frontend/src/components/canvas/components/TextAttr.vue

@@ -150,6 +150,12 @@
           <tab-style :style-info="styleInfo" />
         </el-tooltip>
       </div>
+
+      <div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+        <el-tooltip content="标题位置">
+          <title-postion :style-info="styleInfo" />
+        </el-tooltip>
+      </div>
       <!--tab 内部组件样式-->
       <div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <el-tooltip content="视频信息">
@@ -264,7 +270,8 @@ export default {
         'fontSize',
         'fontWeight',
         'letterSpacing',
-        'color'
+        'color',
+        'titlePostion'
       ],
       // tab组件显示的属性
       'de-tabs': [

frontend/src/components/widget/DeWidget/TitlePostion.vue

@@ -0,0 +1,67 @@
+<template>
+
+  <el-popover
+    placement="right"
+    trigger="click"
+  >
+    <el-col>
+      <el-form ref="tabsStyleForm" :model="styleInfo" label-width="80px" size="mini" class="demo-form-inline">
+        <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+          <el-radio-group v-model="styleInfo.hPosition" size="mini" @change="styleChange">
+            <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+            <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_v_position')" class="form-item">
+          <el-radio-group v-model="styleInfo.vPosition" size="mini" @change="styleChange">
+            <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+            <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+
+      </el-form>
+    </el-col>
+
+    <i slot="reference" class="iconfont icon-tabs" />
+  </el-popover>
+
+</template>
+
+<script>
+export default {
+
+  name: 'TitlePosition',
+  props: {
+    styleInfo: {
+      type: Object,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      defaultPosition: {
+        hPosition: 'left',
+        vPosition: 'center'
+      }
+    }
+  },
+
+  created() {
+
+  },
+  methods: {
+
+    styleChange() {
+      this.$store.commit('recordStyleChange')
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

@@ -37,7 +37,9 @@ const drawPanel = {
     lineHeight: '',
     letterSpacing: 0,
     textAlign: '',
-    color: ''
+    color: '',
+    hPosition: 'left',
+    vPosition: 'center'
   },
   component: 'de-select'
 }