From f07b6e889ebdcbd6fcac4b8877a3f8000a164a68 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 7 Dec 2020 11:14:11 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9terminal=20?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E9=80=9A=E8=BF=87=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E6=8E=A7=E5=88=B6=20=E6=B7=BB=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chartPreview.vue    |   2 -
 nezha-fronted/src/components/cli/console.vue  |   2 +-
 nezha-fronted/src/components/cli/webSSH.scss  |   3 +-
 nezha-fronted/src/components/cli/webSSH.vue   | 299 +++++++++---------
 .../components/page/dashboard/chartBox.vue    |   2 -
 5 files changed, 159 insertions(+), 149 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 2a29aaf80..34700c9dd 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -368,7 +368,6 @@
       // 获取一个图表具体数据
       getChartData() {
         const chartItem = this.chart;
-        console.log(chartItem);
         if(chartItem.type === 'alertList'){
           this.getAlertListChartData(chartItem,null);
           return;
@@ -572,7 +571,6 @@
                         if(this.mapping&&!this.mapping.color){
                           this.mapping.color={bac:'#fff',text:'#000'}
                         }
-                        console.log(mapping)
                         this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
                       }else{
                         this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index ede24a47c..fa04ea695 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -98,7 +98,7 @@ export default {
       if (resizeHeight) {
         this.termimalHeight = resizeHeight;
       }
-      this.isFullScreen = isFullScreen;
+      // this.isFullScreen = isFullScreen;
       //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
       let height = document.body.clientHeight-this.topMenuHeight;//可视高度
       let width = document.body.clientWidth;//可视宽度
diff --git a/nezha-fronted/src/components/cli/webSSH.scss b/nezha-fronted/src/components/cli/webSSH.scss
index 0f1137a06..233cd2349 100644
--- a/nezha-fronted/src/components/cli/webSSH.scss
+++ b/nezha-fronted/src/components/cli/webSSH.scss
@@ -128,9 +128,8 @@
   }
 }
 .shell-service-max {
-  height: 100% !important;
+  height: 100%;
   position: fixed !important;
-  top: 0;
   bottom: 0;
 }
 
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index ef2d3355f..4634c1252 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -7,170 +7,171 @@
       <div class="sub-list-resize-copy">一</div>
     </div>
     <div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen">一</div>-->
-  <div ref="webSShBox" id="shell-service" class="sub-box" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" v-show="consoleShow">
-    <div class="resize-modal">
-      <div class="sub-list-resize-copy" style="width: 100%">一</div>
-    </div>
-    <div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
-    <div style='position: relative;' class="sub-list">
-      <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
-      <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
-      <el-menu  mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
-        <el-submenu index="1"  style="width:40px;" popper-class="fontSizeBox">
-          <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
-          <!--<el-submenu index="1-1">-->
+    <div ref="webSShBox" id="shell-service" class="sub-box ani-webSHH-height" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" style="height: 0;background: #000">
+      <div class="resize-modal">
+        <div class="sub-list-resize-copy" style="width: 100%">一</div>
+      </div>
+      <div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen">一</div>
+      <div class="sub-list-resize" v-show="isFullScreen"></div>
+      <div style='position: relative;' class="sub-list">
+        <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
+        <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
+        <el-menu  mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
+          <el-submenu index="1"  style="width:40px;" popper-class="fontSizeBox">
+            <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
+            <!--<el-submenu index="1-1">-->
             <!--<template slot="title">文字大小</template>-->
             <el-menu-item @click="changeFontSize(12)" :class="{fontSet:true,menuActive:fontSize==12, smallFont:true}" index="1-1">A</el-menu-item>
             <el-menu-item @click="changeFontSize(15)" :class="{fontSet:true,menuActive:fontSize==15, middleFont:true}" index="1-2">A</el-menu-item>
             <el-menu-item @click="changeFontSize(20)" :class="{fontSet:true,menuActive:fontSize==20, bigFont:true}" index="1-3">A</el-menu-item>
             <!--<el-menu-item class="fontSet" index="1-4">大</el-menu-item>-->
-          <!--</el-submenu>-->
-          <!--<el-submenu index="1-2" >-->
+            <!--</el-submenu>-->
+            <!--<el-submenu index="1-2" >-->
             <!--<template slot="title">字体</template>-->
             <!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>-->
             <!--<el-menu-item index="1-2-2">Courier New</el-menu-item>-->
-          <!--</el-submenu>-->
-        </el-submenu>
-        <el-submenu index="2" style="width:50px;">
-          <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
-          <el-menu-item index="2-1" @click="showUploadBox">
+            <!--</el-submenu>-->
+          </el-submenu>
+          <el-submenu index="2" style="width:50px;">
+            <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
+            <el-menu-item index="2-1" @click="showUploadBox">
               <div>{{$t('webshell.upload')}}</div>
-          </el-menu-item>
-          <el-menu-item index="2-2" @click="showDownloadBox">
-            <div>{{$t('webshell.download')}}</div>
-          </el-menu-item>
-        </el-submenu>
-      </el-menu>
+            </el-menu-item>
+            <el-menu-item index="2-2" @click="showDownloadBox">
+              <div>{{$t('webshell.download')}}</div>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
 
-      <el-tabs v-model="editableTabsValue"
-               @tab-click="handleClick"
-               @tab-remove="removeTab"
-               :before-leave="beforeLeave"
-               style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
-               type="border-card" >
-        <el-tab-pane v-for="(item, index) in editableTabs"
-          :key="item.name"
-          :label="item.title"
-          :name="item.name"
-           closable
-        >
-          <!-- tab显示的内容 1 grey,2 green, 3 red-->
-          <span slot="label" style="">
+        <el-tabs v-model="editableTabsValue"
+                 @tab-click="handleClick"
+                 @tab-remove="removeTab"
+                 :before-leave="beforeLeave"
+                 style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
+                 type="border-card" >
+          <el-tab-pane v-for="(item, index) in editableTabs"
+                       :key="item.name"
+                       :label="item.title"
+                       :name="item.name"
+                       closable
+          >
+            <!-- tab显示的内容 1 grey,2 green, 3 red-->
+            <span slot="label" style="">
             <div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}"
-                  style="margin-top: 0px;"></div>{{item.title}}
+                 style="margin-top: 0px;"></div>{{item.title}}
           </span>
 
-          <my-console :terminal="item.terminal"    @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index"    @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
+            <my-console :terminal="item.terminal"    @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index"    @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
 
-        </el-tab-pane>
-        <el-tab-pane key="add" name="add">
-          <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
-        </el-tab-pane>
-      </el-tabs>
-      <i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
-      <i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
-      <i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
-      <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-      <!--
-      <i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
-      <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
-      <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
-      <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
-      -->
-      <!--nz-icon-setting  nz-icon nz-icon-minus  el-icon-full-screen  el-icon-copy-document-->
-    </div>
+          </el-tab-pane>
+          <el-tab-pane key="add" name="add">
+            <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
+          </el-tab-pane>
+        </el-tabs>
+        <i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
+        <i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
+        <i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
+        <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
+        <!--
+        <i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
+        <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
+        <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
+        <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
+        -->
+        <!--nz-icon-setting  nz-icon nz-icon-minus  el-icon-full-screen  el-icon-copy-document-->
+      </div>
 
-    <div >
-      <el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
-        <div >
-          <div class="upload-body">
+      <div >
+        <el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
+          <div >
+            <div class="upload-body">
 
-            <el-row >
-              <el-col :span="24">
-                <el-upload drag class="upload-demo"
-                           ref="uploadFile" action=""
-                           :file-list="uploadFileList"
-                           :on-change="handleChange"
-                           :auto-upload="false" >
-                  <i class="nz-icon nz-icon-upload"></i>
-                  <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-                  <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                    <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
-                  </button>-->
-                </el-upload>
-              </el-col>
-            </el-row>
-            <el-row style="margin-top: 20px;">
-              <el-col :span="3" style="text-align:center;line-height: 24px;">
-                <label>{{$t('webshell.filePath')}}</label>
-              </el-col>
-              <el-col :span="21">
-                <el-input v-model="uploadFile.path" size="mini"></el-input>
-              </el-col>
-            </el-row>
-          </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
-              <button  @click="upload"  class="el-button el-button--default el-button--small">
-                <span>{{$t('webshell.uploadButtonTitle')}}</span>
-              </button>
-              <button @click="closeDialog"  class="el-button el-button--default el-button--small" >
-                <span>{{$t('overall.cancel')}}</span>
-              </button>
+              <el-row >
+                <el-col :span="24">
+                  <el-upload drag class="upload-demo"
+                             ref="uploadFile" action=""
+                             :file-list="uploadFileList"
+                             :on-change="handleChange"
+                             :auto-upload="false" >
+                    <i class="nz-icon nz-icon-upload"></i>
+                    <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+                    <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+                      <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
+                    </button>-->
+                  </el-upload>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top: 20px;">
+                <el-col :span="3" style="text-align:center;line-height: 24px;">
+                  <label>{{$t('webshell.filePath')}}</label>
+                </el-col>
+                <el-col :span="21">
+                  <el-input v-model="uploadFile.path" size="mini"></el-input>
+                </el-col>
+              </el-row>
             </div>
-          </div>
-        </div>
-      </el-dialog>
-      <el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
-        <div>
-          <div class="upload-body">
-            <el-row style="margin-top: 20px;">
-              <el-col :span="3" style="text-align:center;line-height: 24px;">
-                <label>{{$t('webshell.filePath')}}</label>
-              </el-col>
-              <el-col :span="21">
-                <el-input v-model="downloadFile.path" size="mini"></el-input>
-              </el-col>
-            </el-row>
-          </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
-              <button @click="download"  class="el-button el-button--default el-button--small">
-                <span>{{$t('webshell.downloadButtonTitle')}}</span>
-              </button>
-              <button  @click="closeDownloadDialog"  class="el-button el-button--default el-button--small">
-                <span>{{$t('overall.cancel')}}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </el-dialog>
-      <el-dialog :visible.sync="closeConfirmShow"  :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
-        <div >
-          <div class="el-message-box__content">
-            <div class="el-message-box__container">
-              <div class="el-message-box__status el-icon-warning">
-              </div>
-              <div class="el-message-box__message">
-                <p>{{$t('webshell.closeTip')}}</p>
+            <div slot="footer" class="footer">
+              <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+                <button  @click="upload"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('webshell.uploadButtonTitle')}}</span>
+                </button>
+                <button @click="closeDialog"  class="el-button el-button--default el-button--small" >
+                  <span>{{$t('overall.cancel')}}</span>
+                </button>
               </div>
             </div>
           </div>
-          <div slot="footer" class="footer">
-            <div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
-              <el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
-              <button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
-                <span>{{$t('tip.yes')}}</span>
-              </button>
-              <button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
-                <span>{{$t('tip.no')}}</span>
-              </button>
+        </el-dialog>
+        <el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
+          <div>
+            <div class="upload-body">
+              <el-row style="margin-top: 20px;">
+                <el-col :span="3" style="text-align:center;line-height: 24px;">
+                  <label>{{$t('webshell.filePath')}}</label>
+                </el-col>
+                <el-col :span="21">
+                  <el-input v-model="downloadFile.path" size="mini"></el-input>
+                </el-col>
+              </el-row>
+            </div>
+            <div slot="footer" class="footer">
+              <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+                <button @click="download"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('webshell.downloadButtonTitle')}}</span>
+                </button>
+                <button  @click="closeDownloadDialog"  class="el-button el-button--default el-button--small">
+                  <span>{{$t('overall.cancel')}}</span>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </el-dialog>
+        </el-dialog>
+        <el-dialog :visible.sync="closeConfirmShow"  :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
+          <div >
+            <div class="el-message-box__content">
+              <div class="el-message-box__container">
+                <div class="el-message-box__status el-icon-warning">
+                </div>
+                <div class="el-message-box__message">
+                  <p>{{$t('webshell.closeTip')}}</p>
+                </div>
+              </div>
+            </div>
+            <div slot="footer" class="footer">
+              <div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
+                <el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
+                <button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
+                  <span>{{$t('tip.yes')}}</span>
+                </button>
+                <button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
+                  <span>{{$t('tip.no')}}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -212,6 +213,7 @@
         downloadResult:null,
         // 字体大小
         fontSize:termFontSize?termFontSize:15,
+        webSSHHeight:'',//最小化之前的高度
       }
     },
     methods: {
@@ -311,7 +313,7 @@
         this.isFullScreen = false;
 
         let targetDiv= document.getElementById('shell-service');
-        targetDiv.style.height=this.initConsoleHeight+'px';
+        targetDiv.style.height=0+'px';
         this.consoleHeight = this.initConsoleHeight-50;
 
         this.$store.commit('closeConsole');
@@ -451,6 +453,9 @@
       minScreen(){
         this.consoleShow = false;
         this.$store.commit('minConsole');
+        let targetDiv= document.getElementById('shell-service');
+        this.webSSHHeight=targetDiv.style.height;
+        targetDiv.style.height=0+'px';
       },
       fullScreen(isChange){
         this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度
@@ -663,6 +668,8 @@
             let host = this.$store.state.consoleParam.host;
             let accountId = this.$store.state.consoleParam.accountId;
             let port = this.$store.state.consoleParam.port;
+            let targetDiv= document.getElementById('shell-service');
+            targetDiv.style.height=this.initConsoleHeight+'px';
             this.show(id,host,accountId,port);
           }else {
             this.consoleShow = true;
@@ -676,6 +683,8 @@
                 });
               }
             });
+            let targetDiv= document.getElementById('shell-service');
+            targetDiv.style.height=this.webSSHHeight;
           }
           this.$store.state.consoleShow = false;
         }
@@ -694,5 +703,11 @@
   }
 </script>
 <style scoped>
+  .ani-webSHH-height{
+    transition: height .25s ease-in;
+  }
+  .sub-list{
+    background: #E4E7ED;
 
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 37302bb87..d37e4d98c 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -1447,7 +1447,6 @@
                 });
               });
               params.elements = elements;
-              console.log(params,'params');
               if (valid) {
                 this.$refs.chartsPreview.show(params);
               }
@@ -1636,7 +1635,6 @@
         deep: true,
         immediate: true,
         handler(n) {
-          console.log(n,(n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table'));
           if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
             n.param.valueMapping.mapping.forEach(item=>{
               this.showPicker.push({bac:false,text:false})