gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 二级页面布局调整、增加动画

Browse Source
This commit is contained in:
陈劲松
2020-03-18 20:38:16 +08:00
parent 0955a68a6b
commit 6160e850ad
9 changed files with 90 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

3
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,6 +20,9 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="exit-full-screen" unicode="&#58962;" d="M566.872 478.454l177.54 177.54 39.599-39.598-177.54-177.54zM537.328 409.395l0.068 56 205.82-0.252-0.068-56zM537.153 615.137l56 0.068 0.251-205.82-56-0.068zM240.012 151.59400000000005l177.54 177.54 39.599-39.598-177.54-177.54zM280.794 302.855l0.069 56 205.82-0.252-0.069-56zM430.616 358.597l56 0.068 0.252-205.82-56-0.068zM866.68 241.66999999999996h56v-268.22h-56zM654.37 29.360000000000014h268.22v-56H654.37zM100.89 795.06h56v-268.22h-56zM100.98 795.15H369.2v-56H100.98zM654.37 795.15h268.22v-56H654.37zM866.68 795.06h56v-268.22h-56zM100.98 29.360000000000014H369.2v-56H100.98zM100.89 241.66999999999996h56v-268.22h-56z" horiz-adv-x="1024" />
<glyph glyph-name="asset" unicode="&#58925;" d="M1024 128H0V896h1024v-768zM960 832H64v-576h896V832zM384 64h256v-128h128v-64H256v64h128V64z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

16
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

17
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -487,14 +487,17 @@ li{
display: flex;
height: 50px;
align-items : center;
justify-content: space-between;
/*justify-content: space-between;*/
}
.top-tools-reverse {
/*flex-direction: row-reverse;*/
}
.top-tools>div {
margin-top: 2px;
}
.top-tools .top-tool-search {
width: 260px;
margin: -1px 0 0 0;
margin: -2px 0 0 0;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
@@ -1240,16 +1243,6 @@ li{
.top-tools input, .sub-top-tools input {
background-color: $content-right-background-color;
}
.top-tool-setting-btn {
width: 28px;
background-image: linear-gradient(#f8f8f8, #e6e6e6);
border: none;
height: 30px;
border-right: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
cursor: pointer;
outline: none;
}
.query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
height: 25px;
line-height: 25px !important;

13
nezha-fronted/src/components/common/pagination.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="pagination" :class="{'is-sub-list': isSubList}">
<div class="pagination">
<el-pagination
ref="page"
@size-change="size"
@@ -9,7 +9,7 @@
:current-page="pageObj.pageNo"
:page-sizes="pageSizes?pageSizes:[20, 50, 100]"
:page-size="pageSize"
:layout="isSubList ? 'prev, pager, next' : 'total, prev, pager, next, slot, jumper'"
layout="total, prev, pager, next, slot"
:total="this.pageObj.total"
>
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini" :popper-append-to-body="false" class="pagination-size-select" @change="size">
@@ -23,7 +23,7 @@
<script>
export default {
name: "pagination",
props: ['pageObj', 'tableId', 'postPageSizes', 'isSubList'],
props: ['pageObj', 'tableId', 'postPageSizes'],
data() {
return {
pageSize: 20,
@@ -117,6 +117,9 @@ export default {
text-align: center;
max-height: 42px;
}
.pagination-top .pagination {
padding-top: 0;
}
/*.pagination .el-popper[x-placement^=bottom] .popper__arrow {
bottom: -6px;
margin-right: 3px;
@@ -205,8 +208,4 @@ export default {
.el-pagination__sizes .el-input .el-input__inner:hover{
border-color: rgba(154,154,154,0.20);
}
.pagination.is-sub-list {
margin-top: -4px !important;
padding-top: 0;
}
</style>

91
nezha-fronted/src/components/page/project/project.vue
View File

@@ -3,10 +3,10 @@
.project-calendar .el-input__inner {
height: 24px;
}
.top-tools .el-input__inner {
/*.top-tools .el-input__inner {
height: 25px !important;
border-color: #d8d8d8;
}
}*/
.change-time-height {
height: 23px;
}
@@ -25,6 +25,7 @@
.main-list {
height: 100%;
transition: .4s height, .4s transform;
position: relative;
}
.main-list.main-list-with-sub {
transform: translate3d(0,0,0);
@@ -68,6 +69,22 @@
.window-control-btn>i:hover {
color: $global-text-color-active;
}
.abc {
right: 100% !important;
transform: translateX(100%);
}
.pagination-position {
position: absolute;
transition: .4s right, .4s top, .4s width;
}
.pagination-position-bottom {
width: 100%;
top: calc(100% - 50px);
}
.pagination-position-top {
top: 0;
right: 0;
}
</style>
<style scope>
.chart-bottom {
@@ -105,44 +122,36 @@
<div class="content-right">
<!-- 主列表 -->
<div class="main-list" :class="{'main-list-with-sub': tableShow == 3}">
<!-- 一般状态的工具栏 -->
<div class="top-tools" v-show="tableShow == 1">
<div class="nz-tab">
</div>
<div>
<!--<div style="position: absolute; left: 0; top: 13px; z-index: 2;">
<div class="top-tool-search margin-r-20" style="margin: -2px 0 0 0;"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<export-excel
export-file-name="endpoint"
export-url="/endpoint/export"
:params="endpointSearchLabel"
@afterImport="getEndpointTableData"
class="float-right">
>
<template slot="optionZone">
<i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
</template>
</export-excel>
<div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div>
</div>
<!-- 浏览副列表时的工具栏 -->
<div class="top-tools" v-show="tableShow == 3 && mainResizeShow">
<div>
</div>-->
<div class="top-tools" style="position: relative;" :class="{'top-tools-reverse': tableShow == 3}" v-show="mainResizeShow">
<!--<div class="pagination-top"></div>-->
<div style="position: absolute; right: 0; display: flex; align-items: center; transition: .4s right;" :class="{'abc': tableShow == 3}">
<div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<export-excel
export-file-name="endpoint"
export-url="/endpoint/export"
:params="endpointSearchLabel"
@afterImport="getEndpointTableData"
class="float-left margin-l-5">
class="margin-l-20"
style="width: 59px;"
>
<template slot="optionZone">
<i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
</template>
</export-excel>
<div class="top-tool-search float-right margin-l-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center">
<Pagination :isSubList="true" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination2"></Pagination>
<span class="nz-table-gear" @click.stop="elementsetShow('shezhi',$event)">
<button class="top-tool-setting-btn"><i class="nz-icon nz-icon-gear"></i></button>
</span>
</div>
</div>
<el-table
@@ -190,7 +199,7 @@
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column width="28" v-if="tableShow == 1">
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
@@ -198,7 +207,9 @@
</template>
</el-table-column>
</el-table>
<Pagination v-show="tableShow == 1" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
<div class="pagination-position pagination-position-bottom">
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn1" @click="toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</div>
@@ -246,9 +257,9 @@
</el-dropdown>
<div class="sub-list-window-control">
<!--半屏-->
<div class="window-control-btn" @click="halfScreen"><i class="el-icon-minus"></i></div>
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
<!--全屏-->
<div class="window-control-btn" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
<div class="window-control-btn" v-if="!isFullScreen" @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>
@@ -385,7 +396,8 @@
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true,
tableShow: 1, // 1.endpoint; 2.metrics
mainListHeight: '', //主列表dom的高度
tableShow: 1, // 1.endpoint; 3.query
showTopBtn1: false,
showTopBtn2: false,
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
@@ -842,14 +854,14 @@
document.onmousemove = null;
}
},
halfScreen() {
exitFullScreen() {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//主列表
document.querySelector(".main-list-with-sub").style.height = 'calc(50% - 4px)';
document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
//副列表
document.querySelector(".sub-list").style.height = 'calc(50% - 4px)';
document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
setTimeout(() => {
this.isFullScreen = false;
this.mainResizeShow = true;
@@ -859,12 +871,12 @@
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;
//副列表
this.isFullScreen = true;
document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
},
clickLegend(legendName,index){
@@ -1241,7 +1253,12 @@
},
showEndpoint:function(endpoint){
this.tableShow=3;
this.mainTableHeight = this.$tableHeight.openSubList.mainList;
this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
//移动分页组件的位置
let pagination = document.querySelector(".pagination-position");
pagination.classList.remove("pagination-position-bottom");
pagination.classList.add("pagination-position-top");
this.queryEdpLoading=true;
setTimeout(() => {
if(endpoint){
@@ -1347,10 +1364,16 @@
},
backToEdpTab:function(){
this.tableShow=1;
this.mainTableHeight = this.$tableHeight.normal;
this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
this.isFullScreen = false;
//重置二级列表数据
this.selectedEndpoints=[];
this.showTableData = [];
//移动分页组件的位置
let pagination = document.querySelector(".pagination-position");
pagination.classList.remove("pagination-position-top");
pagination.classList.add("pagination-position-bottom");
this.showTopBtn1 = false;
// 主列表恢复全屏
this.mainResizeShow = this.subResizeShow = true;