refactor: 过滤组件可以跟随仪表板缩放

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -15,6 +15,7 @@
       :out-style="config.style"
       :element="config"
       :in-screen="inScreen"
+      :h="config.style.height"
     />
     <component
       :is="config.component"

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -37,6 +37,17 @@
           </span>
           <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
+
+        <!--手机视图详情-->
+        <el-dialog
+          :title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
+          :visible.sync="mobileChartDetailsVisible"
+          :fullscreen="true"
+          class="mobile-dialog-css"
+          :destroy-on-close="true"
+        >
+          <UserViewMobileDialog :chart="showChartInfo" :chart-table="showChartTableInfo" />
+        </el-dialog>
       </div>
     </div>
   </div>
@@ -53,9 +64,10 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 
 export default {
-  components: { ComponentWrapper, UserViewDialog, CanvasOptBar },
+  components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
   model: {
     prop: 'show',
     event: 'change'
@@ -103,6 +115,7 @@ export default {
       mainHeight: '100%',
       searchCount: 0,
       chartDetailsVisible: false,
+      mobileChartDetailsVisible: false,
       showChartInfo: {},
       showChartTableInfo: {},
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
@@ -249,7 +262,11 @@ export default {
     openChartDetailsDialog(chartInfo) {
       this.showChartInfo = chartInfo.chart
       this.showChartTableInfo = chartInfo.tableChart
+      if (this.terminal === 'pc') {
         this.chartDetailsVisible = true
+      } else {
+        this.mobileChartDetailsVisible
+      }
     },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
@@ -309,6 +326,9 @@ export default {
     padding: 10px 20px 20px;
   }
 
+  .mobile-dialog-css > > > .el-dialog__body {
+    padding: 0px;
+  }
   ::-webkit-scrollbar {
     width: 0px!important;
     height: 0px!important;

frontend/src/components/canvas/components/Editor/index.vue

@@ -80,6 +80,7 @@
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
         :active="item === curComponent"
+        :h="getShapeStyleIntDeDrag(item.style,'height')"
       />
       <component
         :is="item.component"
@@ -1567,7 +1568,6 @@ export default {
    padding:3px;
 }
 
-
 .ref-line {
   position: absolute;
   background-color: #70c0ff;;

frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue

 <template>
   <de-container>
-    <de-main-container v-if="!chart.type.includes('table')" :style="customStyle">
+    <de-main-container v-if="!chart.type.includes('table')" :style="customStyle" class="full-div">
       <chart-component v-if="!chart.type.includes('text') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
       <chart-component-g2 v-if="!chart.type.includes('text') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
       <label-normal v-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@@ -16,14 +16,14 @@
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
 import LabelNormal from '@/views/chart/components/normal/LabelNormal'
-import DeMainContainer from '@/components/dataease/DeMainContainer'
-import DeContainer from '@/components/dataease/DeContainer'
 import { mapState } from 'vuex'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
 
 export default {
   name: 'UserViewMobileDialog',
-  components: { ChartComponentG2, DeMainContainer, DeContainer, ChartComponent, TableNormal, LabelNormal },
+  components: { DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal },
   props: {
     chart: {
       type: Object,
@@ -78,16 +78,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .ms-aside-container {
-    height: 50vh;
-    min-width: 400px;
-    max-width: 400px;
-    padding: 0 0;
-  }
   .ms-main-container {
-    height: 100vh;
-    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
+    border: 0px;
   }
   .chart-class{
     height: 100%;

frontend/src/components/dataease/DeOutWidget.vue

@@ -23,6 +23,7 @@
                 :element="element"
                 :in-draw="inDraw"
                 :in-screen="inScreen"
+                :size="sizeInfo"
               />
             </div>
           </div>
@@ -49,16 +50,37 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    h: {
+      type: Number,
+      default: 50
     }
   },
   data() {
     return {
+      inputMaxSize: 46,
+      inputLargeSize: 42,
+      inputSmallSize: 38,
+      inputMiniSize: 34,
       options: null,
       showNumber: false,
       mainClass: ''
     }
   },
-
+  computed: {
+    sizeInfo() {
+      let size
+      if (this.h > this.inputMaxSize) {
+      } else if (this.h > this.inputLargeSize) {
+        size = 'medium'
+      } else if (this.h > this.inputSmallSize) {
+        size = 'small'
+      } else {
+        size = 'mini'
+      }
+      return size
+    }
+  },
   mounted() {
     this.watchSize()
   },

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

@@ -4,6 +4,7 @@
     v-if="options!== null && options.attrs!==null"
     :type="options.attrs.type"
     :round="options.attrs.round"
+    :size="size"
   >
     {{ options.value }}
   </el-button>
@@ -20,7 +21,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

@@ -9,8 +9,8 @@
     :end-placeholder="$t(options.attrs.endPlaceholder)"
     :placeholder="$t(options.attrs.placeholder)"
     :append-to-body="inScreen"
-    style="min-height: 36px;"
     value-format="timestamp"
+    :size="size"
     @change="dateChange"
   />
 </template>
@@ -32,7 +32,8 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

@@ -7,6 +7,7 @@
     :placeholder="$t(options.attrs.placeholder)"
     @keypress.enter.native="search"
     @dblclick="setEdit"
+    :size="size"
   >
 
     <el-button slot="append" icon="el-icon-search" @click="search" />
@@ -25,7 +26,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

 <template>
 
-  <el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
+  <el-form v-if="options!== null && options.attrs!==null" ref="form" style="max-height:34px" :model="form" :rules="rules">
     <div class="de-number-range-container">
       <el-form-item prop="min">
-        <el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" @change="handleMinChange" />
+        <el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" :size="size" @change="handleMinChange" />
       </el-form-item>
       <span>{{ $t('denumberrange.split_placeholder') }}</span>
       <el-form-item prop="max">
-        <el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" @change="handleMaxChange" />
+        <el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" :size="size" @change="handleMaxChange" />
       </el-form-item>
     </div>
   </el-form>
@@ -27,7 +27,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
 
   data() {
@@ -186,6 +187,7 @@ export default {
 <style lang="scss" scoped>
 .de-number-range-container {
   display: inline;
+  max-height: 40px;
   >>>div.el-form-item {
     width: calc(50% - 10px) !important;
     display: inline-block;

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

@@ -2,8 +2,8 @@
   <el-quarter
     v-if="options!== null && options.attrs!==null"
     v-model="options.value"
-
     :placeholder="options.attrs.placeholder"
+    :size="size"
   />
 </template>
 
@@ -18,7 +18,8 @@ export default {
     inDraw: {
       type: Boolean,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

@@ -9,6 +9,7 @@
     :multiple="options.attrs.multiple"
     :placeholder="$t(options.attrs.placeholder)"
     :popper-append-to-body="inScreen"
+    :size="size"
     @change="changeValue"
     @focus="setOptionWidth"
   >
@@ -42,7 +43,8 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

@@ -2,7 +2,7 @@
 
   <div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
     <div class="de-select-grid-search">
-      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
+      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable :size="size" />
     </div>
     <div class="list">
       <el-tree
@@ -12,6 +12,7 @@
         :props="defaultProp"
         :indent="0"
         class="de-filter-tree"
+        :size="size"
         default-expand-all
       >
         <span slot-scope="{ node, data }" class="custom-tree-node-list father">
@@ -58,7 +59,8 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

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

 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
+  <el-select :size="size" v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -28,7 +28,8 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    size: String
   },
   data() {
     return {

frontend/src/views/panel/edit/ComponentWaitItem.vue

@@ -11,6 +11,7 @@
       :style="getComponentStyleDefault(config.style)"
       :out-style="outStyle"
       :element="config"
+      :in-screen="true"
     />
     <component
       :is="config.component"
@@ -30,10 +31,11 @@
 import { mapState } from 'vuex'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import { getStyle } from '@/components/canvas/utils/style'
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 
 export default {
   name: 'ComponentWaitItem',
-  components: { MobileCheckBar },
+  components: { DeOutWidget, MobileCheckBar },
   props: {
     config: {
       type: Object,
@@ -87,6 +89,7 @@ export default {
 
 <style scoped>
   .component-custom {
+    position: relative!important;
     outline: none;
     width: 100% !important;
     height: 100%;