From a350372ed5609a070b2870b0ab00b939fbcc3890 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 12 May 2022 18:12:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=84=E4=BB=B6=E8=AE=BE=E7=BD=AE=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/components/TextAttr.vue |  9 ++-
 .../widget/DeWidget/TitlePostion.vue          | 67 +++++++++++++++++++
 .../serviceImpl/TextSelectServiceImpl.js      |  4 +-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/widget/DeWidget/TitlePostion.vue

diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index cab84b2b15..27268f32f9 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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': [
diff --git a/frontend/src/components/widget/DeWidget/TitlePostion.vue b/frontend/src/components/widget/DeWidget/TitlePostion.vue
new file mode 100644
index 0000000000..513a07563f
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index 6d1faf4e85..88ffa9679b 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/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'
 }