From d56fc014c4d1a686dbf61ac542e27e57a04866f4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 20 May 2021 11:18:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=20=E5=81=9A=E5=87=BA=E8=8F=9C=E5=8D=95=E4=B8=8D?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/PreviewEject.vue |   3 +-
 frontend/src/views/panel/ViewSelect/index.vue |   2 +-
 frontend/src/views/panel/edit/index.vue       | 160 +++++++++++-------
 3 files changed, 101 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
index 62bad79e79..9e84d2b3eb 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -57,7 +57,7 @@ export default {
     customStyle() {
       let style = {}
       if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image'&&this.canvasStyleData.panel.imageUrl) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
             width: '100%',
             height: '100%',
@@ -80,6 +80,7 @@ export default {
   mounted() {
     const _this = this
 
+    debugger
     // 加载数据
     _this.restore()
     const erd = elementResizeDetectorMaker()
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index a902115051..83367c9260 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -128,7 +128,7 @@ export default {
     overflow-y : auto
   }
   .detail-class {
-    width: 100%;
+    width: 300px;
     position: fixed;
     bottom: 0px;
   }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 151d316117..af4dae2521 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -11,66 +11,82 @@
         <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
       </el-col>
     </el-header>
-    <el-main style="padding: 0px">
-      <de-container>
-        <de-aside-container class="ms-aside-container">
-          <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
-            <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
-              <!-- 视图图表 -->
-              <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
-                <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
+    <de-container>
+      <de-aside-container class="ms-aside-container">
+        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
+          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
+            <i class="el-icon-s-unfold" @click="visible = true">test</i>
+            <!-- 视图图表 -->
+            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
+              <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
+            </div>
+            <!-- 视图文字 -->
+            <div style="position: relative; margin: 18px auto 30px">
+              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                {{ $t('panel.view') }}
               </div>
-              <!-- 视图文字 -->
-              <div style="position: relative; margin: 18px auto 30px">
-                <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                  {{ $t('panel.view') }}
+            </div>
+            <!-- 视图分割线 -->
+            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
+              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+            </div>
+            <!-- 过滤组件 -->
+            <div tabindex="-1" style="position: relative; margin: 20px auto">
+              <div style="height: 60px; position: relative">
+                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
+                  <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
                 </div>
-              </div>
-              <!-- 视图分割线 -->
-              <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-                <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
-              </div>
-              <!-- 过滤组件 -->
-              <div tabindex="-1" style="position: relative; margin: 20px auto">
-                <div style="height: 60px; position: relative">
-                  <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
-                    <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
-                  </div>
-                  <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
-                    <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                      {{ $t('panel.module') }}
-                    </div>
+                <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
+                  <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                    {{ $t('panel.module') }}
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
-            <div />
-            <div v-if="show" class="leftPanel">
-              <div style="height:100%;overflow-y: auto">
-                <view-select v-show=" show && showIndex===0" />
-                <filter-group v-show=" show &&showIndex===1" />
-                <subject-setting v-show=" show &&showIndex===2" />
-              </div>
-            </div>
-          </div>
-        </de-aside-container>
+        </div>
+        <!--        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
+        <!--          <div />-->
+        <!--          <div v-if="show" class="leftPanel">-->
+        <!--            <div style="height:100%;overflow-y: auto">-->
+        <!--              <view-select v-show=" show && showIndex===0" />-->
+        <!--              <filter-group v-show=" show &&showIndex===1" />-->
+        <!--              <subject-setting v-show=" show &&showIndex===2" />-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+      </de-aside-container>
 
-        <!--画布区域-->
-        <de-main-container>
-          <div
-            class="content"
-            @drop="handleDrop"
-            @dragover="handleDragOver"
-            @mousedown="handleMouseDown"
-            @mouseup="deselectCurComponent"
-          >
-            <Editor />
-          </div>
-        </de-main-container>
-      </de-container>
-    </el-main>
+      <!--画布区域-->
+      <el-main>
+        <el-drawer
+          title="我是标题"
+          :visible.sync="show"
+          :with-header="false"
+          style="position: absolute;"
+          direction="ltr"
+          :modal="false"
+          :size="drawerSize"
+          :wrapper-closable="false"
+          :close-on-press-escape="false"
+          :modal-append-to-body="true"
+        >
+          <view-select v-show=" show && showIndex===0" />
+          <filter-group v-show=" show &&showIndex===1" />
+          <subject-setting v-show=" show &&showIndex===2" />
+        </el-drawer>
+
+        <div
+          class="content this_canvas"
+          @drop="handleDrop"
+          @dragover="handleDragOver"
+          @mousedown="handleMouseDown"
+          @mouseup="deselectCurComponent"
+        >
+          <Editor />
+        </div>
+      </el-main>
+    </de-container>
 
     <el-dialog
       v-if="filterVisible && panelInfo.id"
@@ -138,6 +154,8 @@ export default {
   },
   data() {
     return {
+      drawerSize: '300px',
+      visible: false,
       show: false,
       editView: false,
       clickNotClose: false,
@@ -186,7 +204,7 @@ export default {
     listenGlobalKeyDown()
   },
   mounted() {
-    this.insertToBody()
+    // this.insertToBody()
     bus.$on('component-on-drag', () => {
       this.show = false
     })
@@ -222,7 +240,10 @@ export default {
       this.$router.replace('/panel/index')
     },
     showPanel(type) {
-      this.show = !this.show
+      debugger
+      if (this.showIndex === -1 || this.showIndex === type) {
+        this.show = !this.show
+      }
       this.showIndex = type
     },
     addEventClick() {
@@ -230,7 +251,7 @@ export default {
     },
     closeSidebar(evt) {
       const parent = evt.target.closest('.button-div-class')
-      const self = evt.target.closest('.leftPanel')
+      const self = evt.target.closest('.el-drawer__wrapper')
       // 点击样式按钮 排除
       const stick = evt.target.closest('.el-icon-magic-stick')
       if (!parent && !self && !stick) {
@@ -239,13 +260,13 @@ export default {
         this.showIndex = -1
       }
     },
-    insertToBody() {
-      this.$nextTick(() => {
-        const elx = this.$refs.leftPanel
-        const body = document.querySelector('body')
-        body.insertBefore(elx, body.firstChild)
-      })
-    },
+    // insertToBody() {
+    //   this.$nextTick(() => {
+    //     const elx = this.$refs.leftPanel
+    //     const body = document.querySelector('body')
+    //     body.insertBefore(elx, body.firstChild)
+    //   })
+    // },
 
     resetID(data) {
       if (data) {
@@ -422,4 +443,19 @@ export default {
   }
 }
 
+.this_canvas{
+  height: calc(100vh - 91px);
+  overflow: auto;
+}
+.el-main{
+  height: calc(100vh - 91px);
+  padding: 0!important;
+  overflow: auto;
+  position: relative;
+}
+
+.el-main >>> .el-drawer__wrapper{
+  width: 310px!important;
+}
+
 </style>