From ec891e5785ae5423b816d0dad8182b5076fe2b55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Fri, 27 Mar 2020 18:44:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20account=E3=80=81promserver=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=94=B9=E4=B8=BA=E5=BA=95=E9=83=A8=E4=B8=8A=E6=BB=91?=
 =?UTF-8?q?=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.account、promserver详情改为底部上滑
2.将main.js中的工具内容单独抽出
---
 .../common/bottomBox/alertMessageBox.vue      |   2 +-
 .../common/bottomBox/dcBottomBox.vue          |   2 +-
 .../common/bottomBox/tabs/cabinetTab.vue      |   2 +-
 .../common/bottomBox/tabs/commonDetailTab.vue |   3 +-
 .../src/components/page/alert/config.vue      |   2 +-
 .../src/components/page/alert/list.vue        |   2 +-
 .../src/components/page/asset/asset.vue       |   6 +-
 .../src/components/page/config/account.vue    |  13 +-
 .../src/components/page/config/dc.vue         |   2 +-
 .../src/components/page/config/mib.vue        |   2 +-
 .../src/components/page/config/model.vue      |   2 +-
 .../src/components/page/config/promServer.vue | 230 +++++++++++++++---
 .../src/components/page/dashboard/panel.vue   |   2 +-
 .../src/components/page/project/project.vue   |   4 +-
 nezha-fronted/src/main.js                     | 186 +-------------
 nezha-fronted/src/tools.js                    | 168 +++++++++++++
 16 files changed, 391 insertions(+), 237 deletions(-)
 create mode 100644 nezha-fronted/src/tools.js

diff --git a/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue b/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
index 38d49ed8c..4dfa70cbd 100644
--- a/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
@@ -100,7 +100,7 @@
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+      <button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
     <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
diff --git a/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue b/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
index f715164f3..cb89b4d9d 100644
--- a/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
@@ -85,7 +85,7 @@
           </el-table-column>
         </el-table>
         <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
-        <button class="to-top" v-show="showTopBtn && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+        <button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
       </template>
     </div>
   </span>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
index 569645b8e..d7e51a02d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -72,7 +72,7 @@
       </el-table-column>
     </el-table>
     <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
-    <button class="to-top" v-show="showTopBtn" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+    <button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
   </span>
 </template>
 
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
index f3059dd03..9a9f009e6 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
@@ -5,8 +5,9 @@
         <div class="sub-list-tab-title">
           <template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
           <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
+          <template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
         </div><div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
-        <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
+          <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
         </template>
       </div>
     </div>
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index e1461a7d4..7468fe35d 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -89,7 +89,7 @@
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen"
                          @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index eb92f0bce..604743174 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -94,7 +94,7 @@
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="toTop()"><i class="nz-icon nz-icon-top"></i></button>
+      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 471b23cad..91762405a 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -185,7 +185,7 @@
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'asset'" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen"
                          @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
@@ -661,10 +661,6 @@
         });
         window.open(routeData.href);
       },
-      /*toTop() {
-        let el = document.querySelector(".el-table__body-wrapper");
-        el.scrollTop = 0;
-      },*/
       cli(id,host,accounts){
         let port = '';
         let accountId = '';
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index cb1107ac5..749fc64e8 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -30,8 +30,8 @@
             <div class="top-tool-search">
               <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
             </div>
-            <button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
+            <button type="button" @click="toAdd" :title="$t('overall.createAccount')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
           </div>
@@ -105,7 +105,7 @@
         <div class="pagination-bottom" v-show="!showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
-       <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+       <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab="targetTab" :detail="userDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -198,14 +198,18 @@
     name: "account",
     data() {
       return {
+        //底部上滑框相关
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        showSubList: false, //是否展示二级列表
         targetTab: '', //展示二级列表中的哪个页签
         showElementSet: false, //控制自定义列的弹框
         inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
         mainResizeShow: true, //dom高度改变时部分内容是否展示
         subResizeShow: true,
         isFullScreen: false,
-        showSubList: false, //是否展示二级列表
+        userDetail: [],
+        //底部上滑框相关end
+
         tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
@@ -222,7 +226,6 @@
           receiver: [],
           lang: ''
         },
-        userDetail: [],
         pageObj: {
           pageNo: 1,
           pageSize: 20,
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index f3006482d..72ecd1cde 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -136,7 +136,7 @@
           <div class="pagination-bottom" v-show="!showSubList">
             <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
           </div>
-          <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+          <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
         </div>
         <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab="targetTab" :detail="dcDetail"
                      @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index 37d1a7fc8..c2ea60efd 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -94,7 +94,7 @@
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <element-set
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 9fd396b44..6cd08c711 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -73,7 +73,7 @@
         </el-table-column>
       </el-table>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <element-set
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 86ab52f18..6177ebf37 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -24,7 +24,20 @@
       </div>
     </div>
     <div class="content-right">
-      <div class="top-tools">
+      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+        <div class="top-tools" v-show="mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+            <div class="top-tool-search">
+              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+            </div>
+            <button type="button" @click="toAdd" :title="$t('overall.createPrometheusServer')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
+              <i class="nz-icon-create-square nz-icon"></i>
+            </button>
+          </div>
+          <div class="pagination-top pagination-top-hide display-none"></div>
+        </div>
+      <!--<div class="top-tools">
         <div class="top-tool-main-right">
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
@@ -34,19 +47,12 @@
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
         </div>
-      </div>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
-        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
-                         :key="`col-${index}`" :label="item.label">
-          <template slot-scope="scope" :column="item">
-            <!--<idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox"
-                            :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false"
-                            placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
-              <template v-slot:optionZone>
-                <span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
-              </template>
-            </idc-config-box>-->
-            <span  v-if="item.prop == 'idc'" >{{scope.row[item.prop].name}}</span>
+      </div>-->
+        <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
+          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                           :key="`col-${index}`" :label="item.label">
+            <template slot-scope="scope" :column="item">
+              <span v-if="item.prop == 'idc'" >{{scope.row[item.prop].name}}</span>
 
             <span v-else-if="item.prop == 'type'">
                 {{scope.row[item.prop] == '1' ? 'Global' : ''}}
@@ -112,32 +118,15 @@
           <el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules"
                    ref="promServerForm">
             <!--DC start-->
-            <el-form-item label="DC" prop="idc.name">
+            <el-form-item :label="$t('config.dc.dc')" prop="idc.name">
               <div class="right-box-form-content">
-<!--                <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown"-->
-<!--                           v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">-->
                 <el-select  value-key="id" popper-class="config-dropdown"
                            v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
                   <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name"
                              :value="item" :id="'prom-edit-idc-op-'+item.id">
                     <span class="config-dropdown-label-txt">{{item.name}}</span>
-<!--                    <div class="config-dropdown-label-icons">-->
-<!--                       <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"-->
-<!--                             :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>-->
-<!--                      <idc-config-box :post-idc="item" placement="left" @after="getIdcData"-->
-<!--                                      :button-class="'config-dropdown-btn'">-->
-<!--                        <template v-slot:optionZone>-->
-<!--                          <i class="nz-icon nz-icon-edit"></i>-->
-<!--                        </template>-->
-<!--                      </idc-config-box>-->
-<!--                    </div>-->
                   </el-option>
                 </el-select>
-
-
-<!--                <div class="right-box-row-btn" v-if="rightBox.isEdit">-->
-<!--                  <idc-config-box placement="left" @after="getIdcData"></idc-config-box>-->
-<!--                </div>-->
                 <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
               </div>
             </el-form-item>
@@ -201,6 +190,18 @@
     name: "prom",
     data() {
       return {
+        //底部上滑框相关
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        showSubList: false, //是否展示二级列表
+        targetTab: '', //展示二级列表中的哪个页签
+        showElementSet: false, //控制自定义列的弹框
+        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        mainResizeShow: true, //dom高度改变时部分内容是否展示
+        subResizeShow: true,
+        isFullScreen: false,
+        promDetail: [],
+        //底部上滑框相关end
+
         tableId: 'promTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
@@ -345,6 +346,117 @@
       }
     },
     methods: {
+      // 鼠标拖动二级列表
+      listResize(e) {
+        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
+        let subListDom = document.querySelector(".sub-list"); //副列表
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //得到点击时俩dom的初始高度：
+        let mainInitialHeight = mainListDom.offsetHeight;
+        let subInitialHeight = subListDom.offsetHeight;
+        //点击时鼠标的Y轴位置
+        let mouseInitialY = e.clientY;
+
+        let _this = this;
+
+        document.onmousemove = (e) => {
+          e.preventDefault();
+          //得到鼠标拖动的距离
+          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
+
+          //往上方拖动：
+          if (e.clientY < mouseInitialY) {
+            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
+            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
+          }
+          //往下方拖动：
+          if (e.clientY > mouseInitialY) {
+            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
+            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
+          }
+
+          // 主、副列表最小高度限制为15px
+          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
+            mainListDom.style.height = contentRightHeight-15+'px';
+          }
+          if(parseInt(mainListDom.style.height) <= 15){
+            mainListDom.style.height = 15+'px';
+          }
+          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
+            subListDom.style.height = contentRightHeight-15+'px';
+          }
+          if(parseInt(subListDom.style.height) <= 15){
+            subListDom.style.height = 15+'px';
+          }
+          //当主副列表可视区域小于一定值时，不展示内容
+          if(parseInt(mainListDom.style.height) <= 100){
+            if (_this.mainResizeShow) {
+              _this.mainResizeShow = false;
+            }
+          } else {
+            if (!_this.mainResizeShow) {
+              _this.mainResizeShow = true;
+            }
+          }
+          if(parseInt(subListDom.offsetHeight) <= 100){
+            if (_this.subResizeShow) {
+              _this.subResizeShow = false;
+            }
+          } else {
+            if (!_this.subResizeShow) {
+              _this.subResizeShow = true;
+            }
+          }
+        };
+        document.onmouseup = () => {
+          document.onmousemove = null;
+        }
+      },
+      exitFullScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //主列表
+        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
+
+        //副列表
+        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
+        setTimeout(() => {
+          this.isFullScreen = false;
+          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
+            this.mainResizeShow = true;
+          }
+          if (document.querySelector(".sub-list").offsetHeight >= 100) {
+            this.subResizeShow = true;
+          }
+        }, 210);
+      },
+      fullScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        this.isFullScreen = true;
+        //主列表
+        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
+        document.querySelector(".main-list-with-sub").style.height = '0';
+        this.mainResizeShow = false;
+        //副列表
+        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+      },
+      convertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("config.dc.dc"), value: obj.idc.name});
+        detail.push({label: "Host", value: obj.host});
+        detail.push({label: "Port", value: obj.port});
+        let type = "";
+        for (let i = 0; i < this.typeData.length; i++) {
+          if (obj.key == this.typeData[i].type) {
+            type = this.typeData[i].value;
+            break;
+          }
+        }
+        detail.push({label: this.$t('config.promServer.type'), value: type});
+        return detail;
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
@@ -403,9 +515,11 @@
       },
       detail: function (u) {
         this.promServer = Object.assign({}, u);
-        this.rightBox.isEdit = false;
+        /*this.rightBox.isEdit = false;
         this.rightBox.title = "Prometheus Server ID：" + u.id;
-        this.rightBox.show = true;
+        this.rightBox.show = true;*/
+        this.targetTab = "detail";
+        this.showSubList = true;
       },
       toAdd: function () {
         this.cleanPromServer();
@@ -676,9 +790,57 @@
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     },
+
     watch: {
       'promServer.idc': function (n, o) {
         this.promServer.idcId = n.id;
+      },
+      promServer: {
+        deep: true,
+        handler(n) {
+          this.promDetail = this.convertToDetail(n);
+        }
+      },
+      showSubList(n) {
+        this.inTransform = n;
+        if (!n) {
+          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
+          this.isFullScreen = false;
+          //移动分页组件的位置
+          let paginationTop = document.querySelector(".pagination-top");
+          let paginationBottom = document.querySelector(".pagination-bottom");
+          paginationTop.classList.remove("display-none");
+          if (paginationTop.classList.contains("pagination-top-show")) {
+            paginationTop.classList.remove("pagination-top-show");
+          }
+          if (!paginationTop.classList.contains("pagination-top-hide")) {
+            paginationTop.classList.add("pagination-top-hide");
+          }
+          setTimeout(() => {
+            paginationTop.classList.add("display-none");
+            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
+          }, 210);
+
+          // 主列表恢复全屏
+          this.mainResizeShow = this.subResizeShow = true;
+          document.querySelector('.main-list').style.height = "";
+          //副列表高度清空
+          document.querySelector(".sub-list").style.height = '';
+        } else {
+          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
+          //移动分页组件的位置
+          let paginationTop = document.querySelector(".pagination-top");
+          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
+          paginationTop.classList.remove("display-none");
+          setTimeout(() => {
+            if (paginationTop.classList.contains("pagination-top-hide")) {
+              paginationTop.classList.remove("pagination-top-hide");
+            }
+            if (!paginationTop.classList.contains("pagination-top-show")) {
+              paginationTop.classList.add("pagination-top-show");
+            }
+          }, 210);
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 293d4103d..3ab333262 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -86,7 +86,7 @@
           </div>
         </el-scrollbar>
        </div>
-      <button class="to-top" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
+      <button class="to-top" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 18bbacb9d..654d2cadb 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -147,7 +147,7 @@
         <div class="pagination-bottom" v-show="tableShow == 1">
           <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         </div>
-        <button class="to-top" v-show="showTopBtn1 && mainResizeShow" @click="toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+        <button class="to-top" v-show="showTopBtn1 && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
       </div>
 
       <!-- 副列表 endpoint query-->
@@ -251,7 +251,7 @@
             width="180">
           </el-table-column>
         </el-table>
-        <button class="to-top" v-show="showTopBtn2 && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+        <button class="to-top" v-show="showTopBtn2 && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
       </div>
     </div>
 
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 188a1353b..96f40edfa 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -15,6 +15,7 @@ import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios';
 import {post, get, put, del} from './http.js'
+import {toTop, clickoutside, scrollBar} from './tools.js'
 
 import Pagination from "./components/common/pagination"; //引入全局分页组件
 import searchInput from "./components/common/searchInput"; //搜索框组件
@@ -38,7 +39,6 @@ import selectArea from "./components/common/popBox/selectArea"; //dc弹框
 import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框
 import dcBottomBox from "./components/common/bottomBox/dcBottomBox"; //机柜上滑框
 import bottomBox from "./components/common/bottomBox/bottomBox"; //机柜上滑框
-import PerfectScrollbar from "perfect-scrollbar";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
@@ -72,6 +72,7 @@ Vue.prototype.$post = post;
 Vue.prototype.$get = get;
 Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
+Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
 Vue.prototype.$tableHeight = { //列表页表格的高度
   normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
   openSubList: { //打开二级列表后的高度
@@ -80,181 +81,16 @@ Vue.prototype.$tableHeight = { //列表页表格的高度
   },
   noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
 };
-Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
-  if (type == 'el') {
-    let currentTop = wrap.scrollTop;
-    let interval = currentTop/10;
-    let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-      if (currentTop == 0) {
-        clearInterval(intervalFunc);
-      } else {
-        currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-        wrap.scrollTop = currentTop;
-      }
-    }, 20);
-  } else {
-    let els = document.querySelectorAll(".el-table__body-wrapper");
-    if (wrap || wrap == 0) { //指定index的table__body
-      let currentTop = els[wrap].scrollTop;
-      let interval = currentTop/10;
-      let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-        if (currentTop == 0) {
-          clearInterval(intervalFunc);
-        } else {
-          currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-          els[wrap].scrollTop = currentTop;
-        }
-      }, 20);
-    } else { //所有table__body
-      for (let i = 0; i < els.length; i++) {
-        let currentTop = els[i].scrollTop;
-        let interval = currentTop/10;
-        let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-          if (currentTop == 0) {
-            clearInterval(intervalFunc);
-          } else {
-            currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-            els[i].scrollTop = currentTop;
-          }
-        }, 20);
-      }
-    }
-  }
-};
 
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
-const el_scrollBar = el => {
-  //在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_
-  if (el._ps_ instanceof PerfectScrollbar) {
-    el._ps_.update();
-  } else {
-    //el上挂一份属性
-    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
-  }
-};
-Vue.directive("scrollBar", {
-  inserted(el, binding, vnode) {
-    const { arg } = binding;
-    if (arg === "el-table") {
-      el = el.querySelector(".el-table__body-wrapper");
-      !el && console.warn("未发现className为el-table__body-wrapper的dom");
-    } else if (arg === "el-dropdown") {
-      el = el.querySelector(".el-dropdown-menu");
-      !el && console.warn("未发现className为el-dropdown-menu的dom");
-    } else if (arg == "legend") {
-      el = el.querySelector(".legend-container");
-      !el && console.warn("未发现className为legend-container的dom");
-    }
+/*指令*/
+Vue.directive('clickoutside', clickoutside);
+Vue.directive('scrollBar', scrollBar);
 
-    // 启用x轴后不让原生滚动条出来作乱
-    vnode.context.$nextTick(() => {
-      if (arg === "xterm") {
-        el = el.querySelector(".xterm-viewport");
-        !el && console.warn("未发现className为xterm-viewport的dom");
-      }
-      el.classList.add("ps");
-      el.addEventListener("ps-scroll-y", () =>
-        el.classList.add("ps")
-      );
-      el.addEventListener("ps-scroll-x", () =>
-        el.classList.add("ps")
-      );
-      //el上挂一份属性
-      el_scrollBar(el);
-    });
-
-    const rules = ["fixed", "absolute", "relative"];
-    if (!rules.includes(window.getComputedStyle(el, null).position)) {
-      console.error(
-        `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
-          "、"
-        )}`
-      );
-    }
-  },
-  componentUpdated(el, binding, vnode, oldVnode) {
-    const { arg } = binding;
-    if (arg === "el-table") {
-      el = el.querySelector(".el-table__body-wrapper");
-      !el && console.warn("未发现className为el-table__body-wrapper的dom");
-    } else if (arg === "el-dropdown") {
-      el = el.querySelector(".el-dropdown-menu");
-      !el && console.warn("未发现className为el-dropdown-menu的dom");
-    }else if (arg === "xterm") {
-      el = el.querySelector(".xterm-viewport");
-      !el && console.warn("未发现className为xterm-viewport的dom");
-    }
-    setTimeout(() => {
-      el.classList.add("ps");
-      el.classList.add("ps--active-y");
-      el._ps_.update();
-    }, 1500)
-
-    try {
-      vnode.context.$nextTick(() => {
-        el_scrollBar(el);
-      });
-    } catch (error) {
-      console.error(error);
-      el_scrollBar(el);
-    }
-  },
-});
-
-const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box']; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
-const clickoutside = {
-  // 初始化指令
-  bind(el, binding, vnode) {
-    function documentHandler(e) {
-      if (el.contains(e.target)) {
-        return false;
-      } else {
-        //console.info(e)
-        let flag = true;
-        top: for (let i = 0; i < e.path.length; i++) {
-          for (let j = 0; j < exceptClassName.length; j++) {
-            if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
-              flag = false;
-              break top;
-            }
-          }
-        }
-        if (!flag) {
-          return false;
-        }
-      }
-      // 判断指令中是否绑定了函数
-      if (binding.expression) {
-        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
-        if (binding.arg) {
-          binding.value(e, binding.arg);
-        } else {
-          binding.value(e);
-        }
-
-      }
-    }
-
-    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
-    el.__vueClickOutside__ = documentHandler;
-    document.addEventListener('mousedown', documentHandler);
-  },
-  unbind(el, binding) {
-    // 解除事件监听
-    document.removeEventListener('mousedown', el.__vueClickOutside__);
-    delete el.__vueClickOutside__;
-  },
-};
-
-Vue.directive('clickoutside',
-    clickoutside
-)
-
-/* eslint-disable no-new */
 window.vm = new Vue({
   el: '#app',
   router,
@@ -265,18 +101,6 @@ window.vm = new Vue({
 })
 
 export default vm;
-/*router.beforeEach((to, from, next) => {
-  if (to.path === '/login') {
-    next()
-  } else {
-    let token = sessionStorage.getItem('nz-token');
-    if (token) {
-      next()
-    } else {
-      next({ path: '/dashboard' })
-    }
-  }
-})*/
 
 /* 重写组件内容 */
 const elUi = require("element-ui");
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
new file mode 100644
index 000000000..51682d163
--- /dev/null
+++ b/nezha-fronted/src/tools.js
@@ -0,0 +1,168 @@
+import PerfectScrollbar from "perfect-scrollbar";
+
+//top置顶按钮公共方法
+export function toTop(type, wrap) {
+  if (type == 'el') {
+    let currentTop = wrap.scrollTop;
+    let interval = currentTop/10;
+    let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+      if (currentTop == 0) {
+        clearInterval(intervalFunc);
+      } else {
+        currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+        wrap.scrollTop = currentTop;
+      }
+    }, 20);
+  } else {
+    let els = document.querySelectorAll(".el-table__body-wrapper");
+    if (wrap || wrap == 0) { //指定index的table__body
+      let currentTop = els[wrap].scrollTop;
+      let interval = currentTop/10;
+      let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+        if (currentTop == 0) {
+          clearInterval(intervalFunc);
+        } else {
+          currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+          els[wrap].scrollTop = currentTop;
+        }
+      }, 20);
+    } else { //所有table__body
+      for (let i = 0; i < els.length; i++) {
+        let currentTop = els[i].scrollTop;
+        let interval = currentTop/10;
+        let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+          if (currentTop == 0) {
+            clearInterval(intervalFunc);
+          } else {
+            currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+            els[i].scrollTop = currentTop;
+          }
+        }, 20);
+      }
+    }
+  }
+}
+
+/*弹窗点击外部后关闭*/
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box']; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+export const clickoutside = {
+  // 初始化指令
+  bind(el, binding, vnode) {
+    function documentHandler(e) {
+      if (el.contains(e.target)) {
+        return false;
+      } else {
+        //console.info(e)
+        let flag = true;
+        top: for (let i = 0; i < e.path.length; i++) {
+          for (let j = 0; j < exceptClassName.length; j++) {
+            if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
+              flag = false;
+              break top;
+            }
+          }
+        }
+        if (!flag) {
+          return false;
+        }
+      }
+      // 判断指令中是否绑定了函数
+      if (binding.expression) {
+        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
+        if (binding.arg) {
+          binding.value(e, binding.arg);
+        } else {
+          binding.value(e);
+        }
+
+      }
+    }
+
+    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler;
+    document.addEventListener('mousedown', documentHandler);
+  },
+  unbind(el, binding) {
+    // 解除事件监听
+    document.removeEventListener('mousedown', el.__vueClickOutside__);
+    delete el.__vueClickOutside__;
+  },
+};
+
+/*el-table自定义滚动条*/
+const el_scrollBar = el => {
+  if (el._ps_ instanceof PerfectScrollbar) {
+    el._ps_.update();
+  } else {
+    //el上挂一份属性
+    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
+  }
+};
+export const scrollBar = {
+  inserted(el, binding, vnode) {
+    const { arg } = binding;
+    if (arg === "el-table") {
+      el = el.querySelector(".el-table__body-wrapper");
+      !el && console.warn("未发现className为el-table__body-wrapper的dom");
+    } else if (arg === "el-dropdown") {
+      el = el.querySelector(".el-dropdown-menu");
+      !el && console.warn("未发现className为el-dropdown-menu的dom");
+    } else if (arg == "legend") {
+      el = el.querySelector(".legend-container");
+      !el && console.warn("未发现className为legend-container的dom");
+    }
+
+    // 启用x轴后不让原生滚动条出来作乱
+    vnode.context.$nextTick(() => {
+      if (arg === "xterm") {
+        el = el.querySelector(".xterm-viewport");
+        !el && console.warn("未发现className为xterm-viewport的dom");
+      }
+      el.classList.add("ps");
+      el.addEventListener("ps-scroll-y", () =>
+        el.classList.add("ps")
+      );
+      el.addEventListener("ps-scroll-x", () =>
+        el.classList.add("ps")
+      );
+      //el上挂一份属性
+      el_scrollBar(el);
+    });
+
+    const rules = ["fixed", "absolute", "relative"];
+    if (!rules.includes(window.getComputedStyle(el, null).position)) {
+      console.error(
+        `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
+          "、"
+        )}`
+      );
+    }
+  },
+  componentUpdated(el, binding, vnode, oldVnode) {
+    const { arg } = binding;
+    if (arg === "el-table") {
+      el = el.querySelector(".el-table__body-wrapper");
+      !el && console.warn("未发现className为el-table__body-wrapper的dom");
+    } else if (arg === "el-dropdown") {
+      el = el.querySelector(".el-dropdown-menu");
+      !el && console.warn("未发现className为el-dropdown-menu的dom");
+    }else if (arg === "xterm") {
+      el = el.querySelector(".xterm-viewport");
+      !el && console.warn("未发现className为xterm-viewport的dom");
+    }
+    setTimeout(() => {
+      el.classList.add("ps");
+      el.classList.add("ps--active-y");
+      el._ps_.update();
+    }, 1500)
+
+    try {
+      vnode.context.$nextTick(() => {
+        el_scrollBar(el);
+      });
+    } catch (error) {
+      console.error(error);
+      el_scrollBar(el);
+    }
+  },
+};