Merge pull request #1450 from dataease/pr@dev@fix_panel-style

refactor: 移动端仪表板视图明细优化，手机端明细展开改为全屏模式

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="bar-main">
+    <div style="margin-right: -1px;width: 18px">
+      <i class="icon iconfont icon-guanbi" @click.stop="closePreview" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
+import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+
+export default {
+  components: { },
+
+  props: {
+
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    closePreview() {
+      this.$emit('closePreview')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bar-main{
+    position: absolute;
+    right: 0px;
+    float:right;
+    z-index: 2;
+    border-radius:2px;
+    padding-left: 5px;
+    padding-right: 2px;
+    cursor:pointer!important;
+    background-color: #0a7be0;
+  }
+  .bar-main i{
+    color: white;
+    float: right;
+    margin-right: 3px;
+  }
+
+</style>

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

@@ -6,29 +6,33 @@
     @mousedown="elementMouseDown"
   >
     <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
-    <de-out-widget
-      v-if="config.type==='custom'"
-      :id="'component' + config.id"
-      class="component-custom"
-      :style="getComponentStyleDefault(config.style)"
-      :out-style="config.style"
-      :element="config"
-      :in-screen="inScreen"
-    />
-    <component
-      :is="config.component"
-      v-else
-      ref="wrapperChild"
-      :out-style="config.style"
-      :style="getComponentStyleDefault(config.style)"
-      :prop-value="config.propValue"
-      :is-edit="false"
-      :active="componentActiveFlag"
-      :element="config"
-      :search-count="searchCount"
-      :h="config.style.height"
-      :edit-mode="'preview'"
-    />
+    <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
+      <close-bar v-if="previewVisible" @closePreview="closePreview" />
+      <de-out-widget
+        v-if="config.type==='custom'"
+        :id="'component' + config.id"
+        class="component-custom"
+        :style="getComponentStyleDefault(config.style)"
+        :out-style="config.style"
+        :element="config"
+        :in-screen="inScreen"
+      />
+      <component
+        :is="config.component"
+        v-else
+        ref="wrapperChild"
+        :out-style="config.style"
+        :style="getComponentStyleDefault(config.style)"
+        :prop-value="config.propValue"
+        :is-edit="false"
+        :active="componentActiveFlag"
+        :element="config"
+        :search-count="searchCount"
+        :h="config.style.height"
+        :edit-mode="'preview'"
+      />
+    </fullscreen>
+
   </div>
 </template>
 
@@ -40,9 +44,10 @@ import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import CloseBar from '@/components/canvas/components/Editor/CloseBar'
 
 export default {
-  components: { MobileCheckBar, DeOutWidget, EditBar },
+  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
     config: {
@@ -64,11 +69,20 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    terminal: {
+      type: String,
+      default: 'pc'
+    }
+  },
+  data() {
+    return {
+      previewVisible: false
     }
   },
   computed: {
     componentActiveFlag() {
-      return this.curComponent && this.config === this.curComponent
+      return (this.curComponent && this.config === this.curComponent) && !this.previewVisible
     },
     curGap() {
       return this.config.auxiliaryMatrix ? this.componentGap : 0
@@ -156,7 +170,14 @@ export default {
       this.$store.commit('setCurComponent', { component: this.config, index: this.index })
     },
     showViewDetails() {
-      this.$refs.wrapperChild.openChartDetailsDialog()
+      if (this.terminal === 'pc') {
+        this.$refs.wrapperChild.openChartDetailsDialog()
+      } else {
+        this.previewVisible = true
+      }
+    },
+    closePreview() {
+      this.previewVisible = false
     }
   }
 }

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

@@ -1,10 +1,10 @@
 <template>
   <div class="bar-main">
-    <div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
+    <div v-if="linkageAreaShow" style="margin-right: -1px;width: 18px">
       <el-checkbox v-model="linkageInfo.linkageActive" />
       <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
     </div>
-    <div v-else-if="!linkageSettingStatus">
+    <div v-if="normalAreaShow">
       <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet">
         <span slot="icon" :title="$t('panel.setting')">
           <i class="icon iconfont icon-shezhi" style="margin-top:2px" />
@@ -26,7 +26,6 @@
         <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
       </span>
     </div>
-
   </div>
 </template>
 
@@ -54,6 +53,10 @@ export default {
       type: String,
       required: false,
       default: 'preview'
+    },
+    previewVisible: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -70,6 +73,14 @@ export default {
   mounted() {
   },
   computed: {
+    // 联动区域按钮显示
+    linkageAreaShow() {
+      return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
+    },
+    // 编辑或预览区域显示
+    normalAreaShow() {
+      return !this.linkageSettingStatus
+    },
     existLinkage() {
       let linkageFiltersCount = 0
       this.componentData.forEach(item => {
@@ -102,6 +113,9 @@ export default {
   beforeDestroy() {
   },
   methods: {
+    closePreview() {
+      this.$emit('closePreview')
+    },
     createTimer() {
       if (!this.timer) {
         this.timer = setInterval(() => {

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

@@ -19,6 +19,7 @@
           :config="item"
           :search-count="searchCount"
           :in-screen="inScreen"
+          :terminal="terminal"
         />
         <!--视图详情-->
         <el-dialog

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

@@ -0,0 +1,98 @@
+<template>
+  <de-container>
+    <de-main-container v-if="!chart.type.includes('table')" :style="customStyle">
+      <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" />
+    </de-main-container>
+    <de-main-container v-else>
+      <table-normal :chart="chartTable" :show-summary="false" class="table-class" />
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+
+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'
+
+export default {
+  name: 'UserViewMobileDialog',
+  components: { ChartComponentG2, DeMainContainer, DeContainer, ChartComponent, TableNormal, LabelNormal },
+  props: {
+    chart: {
+      type: Object,
+      default: null
+    },
+    chartTable: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      refId: null
+    }
+  },
+  computed: {
+    customStyle() {
+      let style = {
+      }
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      if (!style.background) {
+        style.background = '#FFFFFF'
+      }
+      return style
+    },
+    ...mapState([
+      'isClickComponent',
+      'curComponent',
+      'componentData',
+      'canvasStyleData'
+    ])
+  },
+  methods: {
+
+    renderComponent() {
+      return this.chart.render
+    }
+  }
+}
+</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;
+  }
+  .chart-class{
+    height: 100%;
+  }
+  .table-class{
+    height: 100%;
+  }
+</style>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1639546982753') format('woff2'),
-       url('iconfont.woff?t=1639546982753') format('woff'),
-       url('iconfont.ttf?t=1639546982753') format('truetype');
+  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
+       url('iconfont.woff?t=1639622225820') format('woff'),
+       url('iconfont.ttf?t=1639622225820') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-guanbi:before {
+  content: "\e60d";
+}
+
 .icon-juxing1:before {
   content: "\e67e";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1367318",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
     {
       "icon_id": "23446403",
       "name": "矩形",