diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/Editor/EditBarView.vue
index e7d995173d..9d9a652572 100644
--- a/frontend/src/components/canvas/components/Editor/EditBarView.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue
@@ -9,7 +9,7 @@
       </span>
     </div>
     <div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
-      <el-checkbox size="medium" @change="multiplexingCheck" />
+      <el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
     </div>
   </div>
 </template>
@@ -41,6 +41,7 @@ export default {
   },
   data() {
     return {
+      multiplexingCheckModel: false,
       componentType: null,
       linkageActiveStatus: false,
       editFilter: [
@@ -67,6 +68,10 @@ export default {
     ])
   },
   mounted() {
+    if (this.showPosition === 'multiplexing-view') {
+      this.multiplexingCheckModel = true
+      this.multiplexingCheck(this.multiplexingCheckModel)
+    }
   },
   beforeDestroy() {
   },
@@ -86,7 +91,7 @@ export default {
       this.$emit('showViewDetails')
     },
     positionCheck(position) {
-      return this.showPosition === position
+      return this.showPosition.includes(position)
     },
     multiplexingCheck(val) {
       if (val) {
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index cc775d6b4d..b3bab89ced 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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',
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 3b96027fc0..3cfe242ec6 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -233,7 +233,7 @@ export default {
       }
     },
     editBarViewShowFlag() {
-      return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition === 'multiplexing'
+      return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition.includes('multiplexing')
     },
     charViewShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 72b5811aaa..16e7c3b21a 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/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>
diff --git a/frontend/src/components/widget/DeWidget/TitlePostion.vue b/frontend/src/components/widget/DeWidget/TitlePostion.vue
index 513a07563f..f2ac85e4e6 100644
--- a/frontend/src/components/widget/DeWidget/TitlePostion.vue
+++ b/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
     }
   }
 
diff --git a/frontend/src/views/panel/ViewSelect/multiplexing.vue b/frontend/src/views/panel/ViewSelect/multiplexing.vue
index 787989953c..93b2dc8ec8 100644
--- a/frontend/src/views/panel/ViewSelect/multiplexing.vue
+++ b/frontend/src/views/panel/ViewSelect/multiplexing.vue
@@ -11,7 +11,7 @@
         v-if="selectedPanel"
         :component-data="componentData"
         :canvas-style-data="canvasStyleData"
-        :show-position="'multiplexing'"
+        :show-position="showPosition"
       />
       <el-col v-else style="height: 100%;">
         <el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
@@ -45,6 +45,7 @@ export default {
   },
   data() {
     return {
+      showPosition: 'multiplexing',
       activeName: 'PanelList',
       viewLoading: false,
       panelLoading: false,
@@ -60,21 +61,25 @@ export default {
 
   },
   mounted() {
+    this.$store.commit('initCurMultiplexingComponents')
   },
   methods: {
     showDetails(params) {
+      this.$store.commit('initCurMultiplexingComponents')
       const _this = this
       _this.selectedPanel = params
       if (params.showType === 'panel') {
-        this.panelLoading = true
+        _this.showPosition = 'multiplexing'
+        _this.panelLoading = true
         findOne(params.showId).then(response => {
-          this.panelLoading = false
+          _this.panelLoading = false
           panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), function(rsp) {
             _this.componentData = rsp.componentData
             _this.canvasStyleData = rsp.componentStyle
           })
         })
       } else if (params.showType === 'view') {
+        _this.showPosition = 'multiplexing-view'
         _this.componentData = []
         const componentId = uuid.v1()
         _this.canvasStyleData = deepCopy(DEFAULT_COMMON_CANVAS_STYLE_STRING)