Merge pull request #1376 from dataease/pr@dev@refactor_panel-open

frontend/src/components/canvas/components/Toolbar.vue

@@ -11,6 +11,9 @@
       </span>
     </div>
     <div v-else class="toolbar">
+      <el-tooltip :content="$t('panel.mobile_layout')">
+        <el-button class="icon iconfont-tb icon-yidongduan" size="mini" circle @click="openMobileLayout" />
+      </el-tooltip>
       <el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
         <el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
       </el-tooltip>

frontend/src/lang/en.js

@@ -1427,7 +1427,9 @@ export default {
     video_add_tips: 'Please Add Video Info...',
     panel_view_result_show: 'View Result Show',
     panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
-    timeout_refresh: 'Timeout，Will Refresh...'
+    timeout_refresh: 'Timeout，Will Refresh...',
+    mobile_layout: 'Mobile Layout',
+    component_hidden: 'Component Hidden'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1430,7 +1430,9 @@ export default {
     video_add_tips: '請點擊添加配置視頻信息...',
     panel_view_result_show: '視圖結果展示',
     panel_view_result_tips: '選擇儀表板會覆蓋視圖的結果展示數量，取值範圍1~10000',
-    timeout_refresh: '请求超时，稍后刷新...'
+    timeout_refresh: '请求超时，稍后刷新...',
+    mobile_layout: '移动端布局',
+    component_hidden: '隐藏的组件'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1438,7 +1438,9 @@ export default {
     video_add_tips: '请点击添加配置视频信息...',
     panel_view_result_show: '视图结果展示',
     panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
-    timeout_refresh: '请求超时，稍后刷新...'
+    timeout_refresh: '请求超时，稍后刷新...',
+    mobile_layout: '移动端布局',
+    component_hidden: '隐藏的组件'
   },
   plugin: {
     local_install: '本地安装',

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

 <template>
   <el-row class="component-wait">
     <el-row class="component-wait-title">
-      隐藏的组件
+      {{ $t('panel.component_hidden') }}
     </el-row>
     <el-row class="component-wait-main">
       <component-wait-item
@@ -73,6 +73,8 @@ export default {
   .component-wait-title {
     width: 100%;
     height: 30px;
+    color: #FFFFFF;
+    vertical-align: center;
     background-color: #9ea6b2;
     border-bottom: 1px black;
   }

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

@@ -113,7 +113,7 @@
           <el-col :span="8" class="this_mobile_canvas_cell">
             <div
               v-proportion="2.5"
-              :style="customCanvasStyle"
+              :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
               @drop="handleDrop"
               @dragover="handleDragOver"
@@ -331,6 +331,11 @@ export default {
         return false
       }
     },
+    customCanvasMobileStyle() {
+      return {
+        padding: this.componentGap + 'px'
+      }
+    },
     customCanvasStyle() {
       let style = {
         padding: this.componentGap + 'px'