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

perf: 右侧内容min-width=1200及相关处理

Browse Source 
1.右侧内容min-width=1200
2.浏览器窗体缩小后增加横向滚动条
3.增加project、asset左侧菜单滚动条
4.将table高度抽取为常量
This commit is contained in:
陈劲松
2020-03-09 18:05:43 +08:00
parent de4bf4b9a0
commit e381419eb5
13 changed files with 114 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,25 +31,28 @@
</style>
<template>
<div class="project">
<div class="content-left">
<div class="sidebar-title too-long-split">{{$t('project.project.project')}}：{{currentProject.name}}</div>
<div class="sidebar-info">
<div
v-for="item in moduleList"
class="sidebar-info-item"
:class="{'sidebar-info-item-active': item.id == currentModule.id}"
@click="changeModule(item)"
:id="'project-module-'+item.id"
>
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
<span slot="reference">{{item.name}}</span>
</el-popover>
<span v-else>{{item.name}}</span>
<el-scrollbar ref="leftScrollbar" style="height: 100%">
<div class="sidebar-title too-long-split">{{$t('project.project.project')}}：{{currentProject.name}}</div>
<div class="sidebar-info">
<div
v-for="item in moduleList"
class="sidebar-info-item"
:class="{'sidebar-info-item-active': item.id == currentModule.id}"
@click="changeModule(item)"
:id="'project-module-'+item.id"
>
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
<span slot="reference">{{item.name}}</span>
</el-popover>
<span v-else>{{item.name}}</span>
</div>
<div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
</div>
<div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
</div>
</div>
</el-scrollbar>
</div>
<!--metrics-->
@@ -120,7 +123,7 @@
:data="endpointTableData"
border
class="nz-table endpoint-table"
height="calc(100% - 125px)"
:height="$tableHeight.normal"
v-scrollBar:el-table
ref="endpointTable"
style="width: 100%;">
@@ -230,7 +233,7 @@
v-scrollBar:el-table
class="nz-table endpoint-query-table"
:header-cell-class-name="cellClass"
height="calc(100% - 92px)"
:height="$tableHeight.endpointQuery"
@selection-change="selectChange"
ref="metricInfoTab"
style="width: 100%;">
@@ -1584,6 +1587,11 @@
});
}
});
//resize时刷新左侧列表滚动条
let _this = this;
window.onresize = function() {
_this.$refs.leftScrollbar.update();
}
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
@@ -1631,6 +1639,9 @@
temp.tableFilter();
},100)
},
},
destroyed() {
window.onresize = null;
}
}
</script>