From 836fde170cbc34f525940c37e348c0fefc8cf8aa Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 27 May 2021 18:54:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20UI=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/components/Toolbar.vue  | 30 ++++++++++++++-----
 frontend/src/styles/index.scss                |  1 +
 frontend/src/views/panel/edit/index.vue       | 21 +++++++++----
 frontend/src/views/panel/list/PanelList.vue   |  5 ++++
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 846c585a96..15825ee885 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -1,20 +1,19 @@
 <template>
   <div>
     <div class="toolbar">
-
-      <div class="canvas-config">
+      <div class="canvas-config" style="margin-right: 10px">
         <span> {{ $t('panel.canvas_size') }} </span>
         <input v-model="canvasStyleData.width">
         <span>*</span>
         <input v-model="canvasStyleData.height">
       </div>
-      <div class="canvas-config" style="margin-right: 10px">
-        <span> {{ $t('panel.canvas_scale') }} </span>
-        <input v-model="scale" @input="handleScaleChange"> %
-      </div>
+      <!--      <div class="canvas-config" style="margin-right: 10px">-->
+      <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
+      <!--        <input v-model="scale" @input="handleScaleChange"> %-->
+      <!--      </div>-->
 
       <el-tooltip :content="$t('panel.style')">
-        <el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
+        <el-button :class="buttonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
       </el-tooltip>
       <el-tooltip :content="$t('panel.undo') ">
         <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
@@ -59,6 +58,14 @@ import {
 } from '@/views/panel/panel'
 
 export default {
+  name: 'Toolbar',
+  props: {
+    buttonActive: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
   data() {
     return {
       isShowPreview: false,
@@ -291,4 +298,13 @@ export default {
       }
     }
   }
+
+  .button-show{
+    background-color: #ebf2fe
+  }
+
+  .button-closed{
+    background-color: #ffffff
+  }
+
 </style>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index aa487b5151..44ea9d2e00 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -237,3 +237,4 @@ div:focus {
 .el-popper{
   position: fixed!important;
 }
+
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index bad0f95ca6..817b5a8521 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -8,7 +8,7 @@
       </el-col>
       <!--横向工具栏-->
       <el-col :span="16">
-        <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
+        <Toolbar :button-active="show&&showIndex===2" @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
       </el-col>
     </el-header>
     <de-container>
@@ -17,10 +17,10 @@
           <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)" />
+              <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
             </div>
             <!-- 视图文字 -->
-            <div style="position: relative; margin: 18px auto 30px">
+            <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>
@@ -33,7 +33,7 @@
             <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)" />
+                  <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" 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;">
@@ -42,6 +42,10 @@
                 </div>
               </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>
         </div>
         <!--        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
@@ -72,7 +76,7 @@
         >
           <view-select v-show=" show && showIndex===0" />
           <filter-group v-show=" show &&showIndex===1" />
-                    <subject-setting v-show=" show &&showIndex===2" />
+          <subject-setting v-show=" show &&showIndex===2" />
         </el-drawer>
 
         <div
@@ -479,5 +483,12 @@ export default {
 .el-main >>> .el-drawer__body{
   overflow-y: auto;
 }
+.button-show{
+    background-color: #ebf2fe
+}
+
+.button-closed{
+  background-color: #ffffff
+}
 
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index ca8bc155da..39f7a8d54c 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -5,6 +5,7 @@
         <span class="header-title">{{ $t('panel.default_panel') }}</span>
         <div class="block">
           <el-tree
+            ref="default_panel_tree"
             :default-expanded-keys="expandedArray"
             :data="defaultData"
             node-key="id"
@@ -631,6 +632,8 @@ export default {
         this.$nextTick(() => {
           // 延迟设置CurrentKey
           this.$refs.panel_list_tree.setCurrentKey(panelInfo.id)
+          // 去除default_tree 的影响
+          this.$refs.default_panel_tree.setCurrentKey(null)
           this.$nextTick(() => {
             document.querySelector('.is-current').firstChild.click()
             // 如果是仪表盘列表的仪表盘 直接进入编辑界面
@@ -647,6 +650,8 @@ export default {
         this.$nextTick(() => {
           // 延迟设置CurrentKey
           this.$refs.panel_list_tree.setCurrentKey(panelInfo.id)
+          // 去除default_tree 的影响
+          this.$refs.default_panel_tree.setCurrentKey(null)
           this.$nextTick(() => {
             document.querySelector('.is-current').firstChild.click()
           })