perf: endpoint-query二级列表调整等

1.endpoint-query二级列表调整
2.修复project页asset弹框点击外部不消失的问题

nezha-fronted/src/assets/stylus/main.scss

@@ -265,6 +265,7 @@ li{
 .nz-btn-group .nz-btn:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
+  border-left: 1px solid rgba(162,162,162,0.5);
 }
 .nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
   border-radius: 0;
@@ -279,6 +280,10 @@ li{
 .nz-btn-group.nz-btn-group-light {
   box-shadow: $btn-normal-shadow;
 }
+.nz-btn-group .nz-input-group-middle input {
+  border-radius: 0px !important;
+  border: none;
+}
 /* end--按钮组件*/
 
 /*table提示样式*/
@@ -484,6 +489,38 @@ li{
 }
 /* end--顶部工具栏*/
 
+/* begin--二级顶部工具栏*/
+.sub-top-tools {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #DCDFE6;
+  border-bottom: 1px solid #E4E7ED;
+  margin: 0 -6px;
+  background-color: #fcfcfc;
+}
+.sub-top-tools>div {
+  margin-top: 2px;
+}
+.sub-top-tools .top-tool-search {
+  width: 260px;
+  margin: -1px 0 0 0;
+}
+.sub-top-tools .top-tool-btn-txt .nz-icon{
+  display: inline-block;
+  font-size: 12px;
+  margin-right: 6px;
+}
+.sub-top-tool-right {
+  display: flex;
+  align-content: center;
+}
+.has-sub-popper {
+ color: red;
+}
+/* end--二级顶部工具栏*/
+
 /* start--内容*/
 .nz-table.el-table{
   border: none;
@@ -1182,7 +1219,7 @@ li{
 .query-input-active {
   margin-top: 1px;
 }
-.top-tools input {
+.top-tools input, .sub-top-tools input {
   background-color: $content-right-background-color;
 }
 .query-input-active .el-input__inner, .query-input-inactive .el-input__inner {

nezha-fronted/src/components/common/pagination.vue

@@ -116,6 +116,27 @@ export default {
   .pagination {
     padding-top: 8px;
     text-align: center;
+    max-height: 42px;
+  }
+  .pagination .el-popper[x-placement^=bottom] .popper__arrow {
+    bottom: -6px;
+    margin-right: 3px;
+    border-top-color: #fff;
+    border-bottom-width: 0;
+    border-top-width: 6px;
+    top: unset;
+  }
+  .pagination .el-popper[x-placement^=bottom] .popper__arrow::after {
+    bottom: 1px;
+    margin-left: -6px;
+    border-top-color: #FFF;
+    border-bottom-width: 0;
+  }
+  .pagination .el-popper {
+    top: -135px !important;
+  }
+  .pagination .el-pagination {
+    max-height: 42px;
   }
   .pagination-size-select .el-input--mini .el-input__inner{
     height: 20px;

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -839,7 +839,6 @@
     display: inline-block;
     width: 100px;
     vertical-align: top;
-    border-right: 1px solid rgba(162,162,162,0.5);
   }
   /* end--搜索框*/
 
@@ -938,8 +937,4 @@
   .endpoints-box-endpoints .el-form-item.is-error {
     margin-bottom: 22px;
   }
-  .endpoint-asset-search input {
-    border-radius: 0 !important;
-    border: 0;
-  }
 </style>

nezha-fronted/src/components/page/project/project.vue

@@ -1,9 +1,8 @@
 <style lang="scss">
   @import '../../charts/line-chart-block';
-/*  .project-calendar .el-input__inner {
+  .project-calendar .el-input__inner {
-       height: 25px !important;
+     height: 24px;
-       border-color: #d8d8d8;
+  }
-     }*/
   .top-tools .el-input__inner {
     height: 25px !important;
     border-color: #d8d8d8;
@@ -29,12 +28,46 @@
   }
   .main-list.main-list-with-sub {
     transform: translate3d(0,0,0);
-    height: 50%;
+    height: calc(50% - 4px);
   }
   .sub-list {
-    height: 50%;
+    height: calc(50% - 4px);
     transition: .4s height;
   }
+  .sub-list-resize {
+    margin: 0 -6px;
+    border-top: 1px solid #aaa;
+    background-color: #eaeaea;
+    height: 9px;
+    box-sizing: border-box;
+    user-select: none;
+    color: #5f6368;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3px;
+    cursor: ns-resize;
+  }
+  .sub-list-window-control {
+    display: flex;
+    align-items: center;
+    margin-left: 14px;
+  }
+  .window-control-btn {
+    cursor: pointer;
+    width: 29px;
+    text-align: center;
+  }
+  .window-control-btn:last-of-type {
+    margin-right: 4px;
+  }
+  .window-control-btn>i {
+    color: #909399;
+    font-size: 17px;
+  }
+  .window-control-btn>i:hover {
+    color: $global-text-color-active;
+  }
 </style>
 <style scope>
   .chart-bottom {
@@ -72,7 +105,7 @@
     <div class="content-right">
       <!-- 主列表 -->
       <div class="main-list" :class="{'main-list-with-sub': tableShow == 3}">
-        <div class="top-tools">
+        <div class="top-tools" v-show="mainResizeShow">
           <div class="nz-tab">
   <!--          <div class="nz-tab-item-box">-->
   <!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>-->
@@ -137,7 +170,6 @@
                     <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
                   </div>
                 </el-popover>
-  <!--              {{ scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}-->
               </span>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               <template v-else>-</template>
@@ -151,20 +183,21 @@
             </template>
           </el-table-column>
         </el-table>
-        <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+        <Pagination v-show="mainResizeShow" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         <button class="to-top" v-show="showTopBtn1" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
 
       <!-- 副列表 endpoint query-->
-      <div class="sub-list" v-show="tableShow == 3" style="position: relative">
+      <div @mousedown="listResize" class="sub-list-resize" v-show="tableShow == 3">一</div>
-        <div class="top-tools" >
+      <div class="sub-list" v-show="tableShow == 3">
+        <div class="sub-top-tools" v-show="subResizeShow">
           <div>
-            <div @click="backToEdpTab">
+            <!--<div @click="backToEdpTab">
-              <button  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
+              <button class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
                 <span class='top-tool-btn-txt'>
                 {{$t('overall.back')}}</span>
               </button>
-            </div>
+            </div>-->
           </div>
           <!--时间选择器-->
           <div class="top-tool-right">
@@ -173,21 +206,19 @@
                 <i slot="suffix" class="el-input__icon el-icon-search" style="float:right" @click="focusInput"></i>
               </el-input>
             </div>
-            <div class="margin-r-20 date-pick-group">
+            <div class="margin-r-20 nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
-              <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-left"></i></button>
+              <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
-              <el-date-picker
                 v-model="formatTime"
                 type="datetime"
                 size="mini"
-                class="project-calendar"
+                class="project-calendar nz-input-group-middle"
                 clearable
                 :time-arrow-control="true"
                 placeholder="Moment"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 @change="pickTime"
                 >
-              </el-date-picker>
+              </el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
-              <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-right"></i></button>
             </div>
             <el-dropdown split-button type="primary"  size="mini" class="dropdownBtn" @click="viewGraph">
               <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
@@ -203,9 +234,14 @@
 
               </el-dropdown-menu>
             </el-dropdown>
-  <!--          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled':selectedEndpoints.length<1}">-->
+            <div class="sub-list-window-control">
-  <!--            <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>-->
+              <!--半屏-->
-  <!--          </button>-->
+              <div class="window-control-btn" @click="halfScreen"><i class="el-icon-minus"></i></div>
+              <!--全屏-->
+              <div class="window-control-btn" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
+              <!--关闭-->
+              <div class="window-control-btn" @click="backToEdpTab"><i class="el-icon-close"></i></div>
+            </div>
           </div>
         </div>
         <div  class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
@@ -220,7 +256,7 @@
           :height="$tableHeight.endpointQuery"
           @selection-change="selectChange"
           ref="metricInfoTab"
-          style="width: 100%;">
+          style="width: 100%; margin-top: 5px;">
           <el-table-column
             type="selection"
             width="38"
@@ -309,7 +345,8 @@
     <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
     <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
     <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-    <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
+    <asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
+               ref="assetEditUnit"></asset-box>
     <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData"></chart-box>
   </div>
 </template>
@@ -333,6 +370,8 @@
       let temp=this;
       return {
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
+        mainResizeShow: true, //dom高度改变时部分内容是否展示
+        subResizeShow: true,
         tableShow: 1, // 1.endpoint; 2.metrics
         showTopBtn1: false,
         showTopBtn2: false,
@@ -723,6 +762,92 @@
       }
     },
     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.style.height) <= 150){
+            if (_this.subResizeShow) {
+              _this.subResizeShow = false;
+            }
+          } else {
+            if (!_this.subResizeShow) {
+              _this.subResizeShow = true;
+            }
+          }
+        };
+        document.onmouseup = () => {
+          document.onmousemove = null;
+        }
+      },
+      halfScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //主列表
+        document.querySelector(".main-list-with-sub").style.height = 'calc(50% - 4px)';
+        this.mainResizeShow = true;
+        //副列表
+        document.querySelector(".sub-list").style.height = 'calc(50% - 4px)';
+        this.subResizeShow = true;
+      },
+      fullScreen() {
+        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+        //主列表
+        document.querySelector(".main-list-with-sub").style.height = '15px';
+        this.mainResizeShow = false;
+        //副列表
+        document.querySelector(".sub-list").style.height = contentRightHeight-24 + 'px';
+      },
       clickLegend(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
@@ -1205,6 +1330,10 @@
         this.selectedEndpoints=[];
         this.showTableData = [];
         this.showTopBtn1 = false;
+        // 主列表恢复全屏
+        this.mainResizeShow = this.subResizeShow = true;
+        document.querySelector('.main-list').style.height = "";
+
         this.$nextTick(() => {
           this.gutterHandler(".endpoint-table");
         });