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

feat:左侧菜单改为可隐藏（部分页面完成）

Browse Source
This commit is contained in:
wangwenrui
2020-04-14 19:33:57 +08:00
parent 241f196a31
commit 3b9c728c30
15 changed files with 179 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
nezha-fronted/src/components/common/leftMenu.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="content">
<div class="content-left left-slot" :class="{'left-slot-shrink':isShrink}">
<slot name="content-left"></slot>
<div @click="toggleStat" class="bottom-icon">
<div class="bottom-divider"></div>
<div style="display: inline-block;float: right"><i style="font-size: 16px;" :class="{'el-icon-d-arrow-right':isShrink,'el-icon-d-arrow-left':!isShrink}"></i></div>
</div>
</div>
<div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
<slot name="content-right" ></slot>
</div>
</div>
</template>
<script>
export default {
name: "leftMenu",
props:{
resizeFunc:{type:Function}
},
data(){
return{
isShrink:false,
}
},
methods:{
toggleStat:function(){
this.isShrink=!this.isShrink;
this.$store.commit('setLeftMenuStat',this.isShrink);
if(this.resizeFunc){
this.resizeFunc();
}
}
},
mounted() {
this.isShrink=this.$store.state.leftMenuStat ;
}
}
</script>
<style scoped lang="scss">
.content{
height: 100%;
position:relative;
}
.slot-content{
height: 100%;
}
.content .left-slot{
position: relative;
/*border-bottom: 1px solid #eeeeee;*/
/*transition: all 100ms;*/
}
.content .right-slot{
margin-left: unset !important;
width: calc(100% - 210px);
float: right;
}
.content .left-slot-shrink{
width: 25px;
padding: 0px;
.bottom-icon{
margin-left: 5px;
}
.bottom-icon .bottom-divider{
width: 0px;
}
.slot-content{
visibility: hidden;
}
}
.content .right-slot-open{
width:calc(100% - 35px);
}
.left-slot .bottom-icon{
position:absolute;
bottom: 15px;
left: 0px;
}
.left-slot .bottom-icon:hover{
cursor: pointer;
}
.bottom-icon .bottom-divider{
display: inline-block;
height: 1px;
width: 175px;
border-top: 1px solid lightgrey;
vertical-align: middle;
}
.content .left-slot-shrink:hover{
width: 200px;
padding: 0px 0px 0px 15px;
position: absolute;
background-color: #FFF;
z-index: 100;
.slot-content{
visibility: visible;
}
.bottom-icon{
z-index: 101;
}
.bottom-icon .bottom-divider{
width: 175px;
}
}
</style>
<style lang="scss">
</style>

6
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="config">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
@@ -14,7 +15,7 @@
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :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}">
@@ -94,6 +95,7 @@
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab="targetTab" :detail="ruleDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</div>
</left-menu>
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
<module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>

6
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="list">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
@@ -14,7 +15,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :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}">
@@ -128,6 +129,7 @@
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab="targetTab" :detailList="tabDetailList"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
</div>
</left-menu>
<!--<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>-->

10
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="asset" ref="asset">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('asset.asset')}}</div>
<div class="sidebar-info" style="height: 90%">
<el-scrollbar ref="leftScrollbar" style="height: 100%">
@@ -89,8 +89,7 @@
</el-scrollbar>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :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}">
@@ -254,6 +253,7 @@
@exitFullScreen="exitFullScreen"
@listResize="listResize" ></bottom-box>
</div>
</left-menu>
<asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
ref="assetEditUnit"></asset-box>
@@ -400,7 +400,7 @@
}, {
label: this.$t("asset.tableTitle.procurementDate"),
prop: 'purchaseDate',
show: true,
show: false,
}, {
label: this.$t("asset.tableTitle.principal"),
prop: 'principal',

9
nezha-fronted/src/components/page/config/account.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="account">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
@@ -32,7 +33,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<!-- 主页面 -->
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<!-- 顶部工具栏 -->
@@ -112,7 +113,7 @@
<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>
</div>
</left-menu>
<transition name="right-box">
<div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
@@ -571,7 +572,7 @@
}
}
this.getTableData();
}
},
},
computed: {
isCurrentUser() {

8
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -33,7 +33,8 @@
</style>
<template>
<div class="dc" >
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -63,7 +64,7 @@
</div>
</div>
<!--dc table start-->
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :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}">
@@ -81,6 +82,7 @@
class="nz-table"
:data="tableData"
border
tooltip-effect="light"
v-show="mainResizeShow"
v-scrollBar:el-table
:height="mainTableHeight"
@@ -88,6 +90,7 @@
style="width: 100%;">
<el-table-column
:resizable="false"
show-overflow-tooltip
v-for="(item, index) in tablelable"
v-if="item.show"
:width="item.width"
@@ -150,6 +153,7 @@
<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>
</div>
</left-menu>
<!--dc table end-->
<element-set
v-clickoutside="elementsetHide"

7
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="mib">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="mib-jump-account">
@@ -32,7 +33,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<template v-if="showTab == 'file'">
<div class="top-tools">
<div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
@@ -113,7 +114,7 @@
</template>
<mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
</div>
</left-menu>
<element-set
v-clickoutside="elementsetHide"
:table-title="tableTitle"

7
nezha-fronted/src/components/page/config/model.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="model">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="model-jump-account">
@@ -32,7 +33,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="top-tools">
<div class="top-tool-main-right">
<div class="top-tool-search">
@@ -82,7 +83,7 @@
<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>
</div>
</left-menu>
<element-set
v-clickoutside="elementsetHide"
:table-title="tableTitle"

6
nezha-fronted/src/components/page/config/operationlog.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="operationlog">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -34,7 +35,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="top-tools">
<div></div>
<div>
@@ -79,6 +80,7 @@
<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>
</div>
</left-menu>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"

7
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="prom">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -32,7 +33,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right"class="slot-content">
<div class="main-list main-and-sub-transition" :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}">
@@ -101,7 +102,7 @@
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab="targetTab" :detail="promDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</div>
</left-menu>
<transition name="right-box">
<div class="right-box right-box-prom" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->

6
nezha-fronted/src/components/page/config/system.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="system">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -27,7 +28,7 @@
</div>
</div>
</div>
<div class="content-right system-tabs">
<div slot="content-right" class="slot-content system-tabs">
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs">
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
<div class="system-config-form">
@@ -190,6 +191,7 @@
</el-tab-pane>
</el-tabs>
</div>
</left-menu>
</div>
</template>

6
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -5,7 +5,8 @@
</style>
<template>
<div class="terminallog">
<div class="content-left">
<left-menu >
<div slot="content-left" class="slot-content">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -34,7 +35,7 @@
</div>
</div>
</div>
<div class="content-right">
<div slot="content-right" class="slot-content">
<div class="top-tools">
<div></div>
<div>
@@ -88,6 +89,7 @@
<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>
</div>
</left-menu>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"

23
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="overview">
<!--左侧菜单栏-->
<div class="overview-left content-left">
<left-menu :resize-func="resizeChart">
<div slot="content-left" class="overview-left slot-content">
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
@@ -10,7 +11,7 @@
</div>
</div>
<!--右侧内容-->
<div class="overview-right content-right" id="mainDisplay">
<div class="overview-right slot-content" id="mainDisplay" slot="content-right">
<!--标题-->
<div class="overview-content-header">
<div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
@@ -86,6 +87,7 @@
</el-scrollbar>
</div>
</div>
</left-menu>
</div>
</template>
@@ -1175,6 +1177,16 @@
}
});
},
resizeChart:function() {
this.$nextTick(() => {
let width = this.$refs.chartbox.$el.clientWidth;
let height = this.$refs.chartbox.$el.clientHeight * .95;
this.$refs.chartbox.resizeChart(width, height);
let mapWidth = this.$refs.dataCenterMap.$el.clientWidth;
let mapHeight = this.$refs.dataCenterMap.$el.clientHeight * .95;
this.$refs.dataCenterMap.resizeChart(mapWidth, mapHeight);
})
}
},
computed:{
@@ -1207,12 +1219,7 @@
watch:{
isFullScreen:function(n,o){
this.$nextTick(()=>{
let width=this.$refs.chartbox.$el.clientWidth;
let height=this.$refs.chartbox.$el.clientHeight * .95;
this.$refs.chartbox.resizeChart(width,height);
let mapWidth=this.$refs.dataCenterMap.$el.clientWidth;
let mapHeight=this.$refs.dataCenterMap.$el.clientHeight * .95;
this.$refs.dataCenterMap.resizeChart(mapWidth,mapHeight);
this.resizeChart();
});
}
}

2
nezha-fronted/src/main.js
View File

@@ -40,6 +40,7 @@ import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
import "perfect-scrollbar/css/perfect-scrollbar.css";
import loading from "./components/common/loading";
import mibBox from "./components/common/rightBox/mibBox";
import leftMenu from "./components/common/leftMenu";
Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
@@ -62,6 +63,7 @@ Vue.component("select-area", selectArea);
Vue.component('loading',loading);
Vue.component('bottom-box', bottomBox);
Vue.component('mib-box',mibBox);
Vue.component('left-menu',leftMenu);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post;

4
nezha-fronted/src/store/index.js
View File

@@ -39,6 +39,7 @@ const store = new Vuex.Store({
consoleCount:0,//当前console窗口数
isAddConsole:false,//是否增加窗口
consoleParam:{},//新开console窗口参数
leftMenuStat:false, //0展开状态，1隐藏状态
},
getters: {
},
@@ -111,6 +112,9 @@ const store = new Vuex.Store({
minConsole(state){//最小化窗口
state.consoleShow=false;
},
setLeftMenuStat:function(state,data){
state.leftMenuStat=data
}
},
actions: {
}