feat: 【仪表板】筛选框文字支持排列设置（靠上、居中等）

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

@@ -153,7 +153,7 @@
 
       <div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <el-tooltip content="标题位置">
-          <title-postion :style-info="styleInfo" />
+          <title-postion :show-vertical="showVertical" :style-info="styleInfo" />
         </el-tooltip>
       </div>
       <!--tab 内部组件样式-->
@@ -181,7 +181,6 @@
 
 <script>
 import { mapState } from 'vuex'
-import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
 import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
@@ -189,7 +188,7 @@ import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
 
 export default {
-  components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks, StreamMediaLinks },
+  components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
   props: {
     scrollLeft: {
       type: Number,
@@ -356,6 +355,9 @@ export default {
     canvasWidth() {
       return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
     },
+    showVertical() {
+      return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName)
+    },
     ...mapState([
       'curComponent',
       'curCanvasScale',

frontend/src/components/dataease/DeOutWidget.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="myContainer" class="my-container">
-    <div ref="conditionMain" class="condition-main" :class="mainClass">
-      <div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
+    <div ref="conditionMain" :style="outsideStyle" class="condition-main">
+      <div v-if="element.options.attrs.title" ref="deTitleContainer" :style="titleStyle" class="condition-title">
         <div class="condition-title-absolute">
           <div class="first-title">
             <div class="span-container">
@@ -13,6 +13,7 @@
       <div
         ref="deContentContainer"
         class="condition-content"
+        :style="titleStyle"
         :class="element.options.attrs.title ? '' : 'condition-content-default'"
       >
         <div class="condition-content-container">
@@ -43,7 +44,6 @@
 </template>
 
 <script>
-import elementResizeDetectorMaker from 'element-resize-detector'
 import { mapState } from 'vuex'
 export default {
   name: 'DeOutWidget',
@@ -81,7 +81,9 @@ export default {
       showNumber: false,
       mainClass: '',
       mainHeight: 75,
-      duHeight: 46
+      duHeight: 46,
+      titleStyle: null,
+      outsideStyle: null
     }
   },
   computed: {
@@ -101,61 +103,43 @@ export default {
     ])
   },
   watch: {
-    element: {
-      handler() {
-        this.watchSize()
+    'element.style': {
+      handler(val) {
+        this.handlerPositionChange(val)
       },
-      deep: true
+      deep: true,
+      immediate: true
     }
   },
   mounted() {
-    this.watchSize()
+    // this.watchSize()
   },
   created() {
+    // console.log('aaaaaa')
+    const { horizontal, vertical } = this.element.style
+    this.$set(this.element.style, 'horizontal', horizontal || 'left')
+    this.$set(this.element.style, 'vertical', vertical || 'top')
   },
   methods: {
-
-    watchSize() {
-      const erd = elementResizeDetectorMaker()
-      erd.listenTo(this.$refs.myContainer, ele => {
-        const deContentContainer = this.$refs.deContentContainer
-        const height = ele.offsetHeight
-        this.mainHeight = height
-        if (!this.element.options.attrs.title) {
-          this.duHeight = this.mainHeight
-          deContentContainer.style.marginLeft = '0px'
-          return
+    handlerPositionChange(val) {
+      const { horizontal = 'left', vertical = 'top' } = val
+      this.titleStyle = {
+        width: '100%',
+        textAlign: horizontal
+      }
+      this.outsideStyle = {
+        flexWrap: 'wrap'
+      }
+      if (vertical !== 'top') {
+        this.titleStyle = null
+        this.outsideStyle = {
+          flexDirection: horizontal === 'right' ? 'row-reverse' : '',
+          alignItems: 'center'
         }
-        const titleWidth = this.$refs.deTitle.offsetWidth
-        this.$nextTick(() => {
-          let numRange = 0
-          let min = this.element.style.fontSize * 2 + 30
-          if (this.element.component === 'de-number-range') {
-            min = this.element.style.fontSize * 2 + 55
-            numRange = 25
-          }
-          if (height < min) {
-            this.duHeight = height - numRange
-            this.mainClass = 'condition-main-line'
-
-            if (deContentContainer) {
-              deContentContainer.style.top = '0px'
-              deContentContainer.style.marginLeft = (titleWidth + 15) + 'px'
-            }
-          } else {
-            this.duHeight = height - titleWidth + numRange
-            this.mainClass = ''
-            if (deContentContainer) {
-              deContentContainer.style.top = '2em'
-              deContentContainer.style.marginLeft = '0px'
-            }
-          }
-        })
-      })
+      }
     }
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -167,7 +151,6 @@ export default {
     bottom: 0px;
     left: 0px;
   }
-
   .ccondition-main {
     position: absolute;
     overflow: auto;
@@ -175,53 +158,23 @@ export default {
     right: 0px;
     bottom: 0px;
     left: 0px;
+    display: flex;
   }
-
   .condition-title {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    position: absolute;
     height: 2em;
     cursor: -webkit-grab;
+    line-height: 2em;
+    white-space: nowrap;
   }
-
-  .first-title {
-    width: 100%;
-    overflow: hidden;
-    position: absolute;
-    color: inherit;
-    display: flex;
-    align-items: center;
-  }
-
-  .condition-title-absolute {
-    right: 0px;
-    bottom: 0px;
-    position: absolute;
-    top: 0px;
-    left: 4px;
-    display: flex;
-    align-items: flex-end;
-  }
-
   .span-container {
     overflow: hidden auto;
     position: relative;
     padding: 0 5px;
   }
-
   .condition-content {
     overflow: auto hidden;
-    top: 2em;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    position: absolute;
     letter-spacing: 0px !important;
   }
-
   .condition-content-container {
     position: relative;
     display: table;
@@ -229,7 +182,6 @@ export default {
     height: 100%;
     white-space: nowrap;
   }
-
   .first-element {
     position: relative;
     display: table-cell;
@@ -238,34 +190,29 @@ export default {
     padding: 0px;
     height: 100%;
   }
-
   .first-element-contaner {
     width: calc(100% - 10px);
     background: initial;
-    position: absolute;
-    bottom: 5px;
     margin: 0 4px;
-
     div {
       width: 100%;
     }
-
     display: flex;
     align-items: flex-end;
   }
-
   .first-element-grid-contaner {
     background: #fff;
     border: 1px solid #d7dae2;
     top: 5px;
   }
-
   .condition-main-line {
     height: 40px !important;
   }
-
+  .condition-main {
+    display: flex;
+    padding-top: 5px;
+  }
   .condition-content-default {
     inset: 0px 0px 0px !important;
   }
-
 </style>

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

@@ -7,17 +7,16 @@
     <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-group v-model="styleInfo.horizontal" size="mini">
             <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-form-item v-if="showVertical" :label="$t('chart.text_v_position')" class="form-item">
+          <el-radio-group v-model="styleInfo.vertical" size="mini">
             <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>
 
@@ -37,25 +36,10 @@ export default {
     styleInfo: {
       type: Object,
       default: null
-    }
-  },
-
-  data() {
-    return {
-      defaultPosition: {
-        hPosition: 'left',
-        vPosition: 'center'
-      }
-    }
-  },
-
-  created() {
-
-  },
-  methods: {
-
-    styleChange() {
-      this.$store.commit('recordStyleChange')
+    },
+    showVertical: {
+      type: Boolean,
+      default: false
     }
   }