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

NEZ-1875 feat：dashboard增加view mode切换功能

Browse Source
This commit is contained in:
zyh
2022-06-01 15:26:05 +08:00
parent ceb59b3719
commit a08a6e8094
9 changed files with 153 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/assets/css/components/layout/header.scss
View File

@@ -4,6 +4,8 @@
background-color: $--background-color-empty;
box-sizing: border-box;
border-bottom: 1px solid $--border-color-light;
padding-left: 20px;
box-sizing: border-box;
.personal-avatar {
cursor: pointer;
span {
@@ -102,7 +104,7 @@
transition: all .4s;
height: 100%;
line-height: 50px;
margin-left: 20px;
margin-right: 15px;
i {
transform: rotateY(0);
transition: transform .4s;
@@ -125,9 +127,7 @@ a.link-title:hover{
color: $--color-primary !important;
}
.nz-breakcrumb {
padding-left: 15px;
line-height: 50px;
.el-breadcrumb__item {
.el-breadcrumb__inner, .el-breadcrumb__separator {
color: $--color-text-secondary;

36
nezha-fronted/src/assets/css/components/layout/home.scss
View File

@@ -3,7 +3,7 @@
transition: all .2s;
background-color: $--background-color-empty;
.body {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
width: calc(100% - 240px);
@@ -20,3 +20,37 @@
font-size: 12px;
position: fixed;
}
.home.tv,.home.se{
.left-menu{
display: none;
}
.body{
width: 100%;
.header{
display: none;
}
.container{
height: 100%;
.main-container{
&>.panel-top-tools{
padding-left: 10px;
}
&>.table-list{
padding-left: 0;
}
}
}
}
}
.home.se{
.main-container{
&>.panel-top-tools{
display: none;
}
&>.table-list{
height: 100%;
padding-left: 0;
}
}
}

9
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
View File

@@ -8,7 +8,7 @@
}
.panel.list-page {
.table-list {
height: calc(100% - 58px);
height: calc(100% - 60px);
padding-left: 10px;
}
.no-data {
@@ -126,6 +126,7 @@
.select-panel-title{
font-weight: bold;
font-size: 14px;
color:$--color-text-primary;
}
/* end-chart list*/
.panel-loading {
@@ -148,9 +149,3 @@
vertical-align: bottom;
color: $--color-text-primary;
}
.starred-pop{
padding: 8px 12px;
margin-bottom: 8px;
min-width: auto;
}

8
nezha-fronted/src/components/chart/chart/grid/GridLayout.vue
View File

@@ -11,10 +11,10 @@
</div>
</template>
<style>
.vue-grid-layout {
position: relative;
transition: height 200ms ease;
}
.vue-grid-layout {
position: relative;
transition: height 200ms ease;
}
</style>
<script>
import Vue from 'vue'

8
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -533,8 +533,10 @@ export default {
.chart-list {
height: 100%;
width: 100%;
border-top: 1px solid transparent;
box-sizing: border-box;
}
.group-hide-header {
height: 40px!important;
}
.group-hide-header {
height: 40px!important;
}
</style>

3
nezha-fronted/src/components/common/popBox/selectPanel.vue
View File

@@ -303,9 +303,6 @@ export default {
}
</script>
<style scoped>
.theme-light .select-panel-title{
color: #333;
}
.starred-tree>>>.el-tree__empty-block{
display: none;
}

8
nezha-fronted/src/components/layout/home.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="home">
<div class="home" :class="mode">
<left-menu @refresh="refresh"></left-menu>
<div ref="body" class="body">
<Header></Header>
@@ -38,6 +38,12 @@ export default {
containerShow: true
}
},
computed: {
// 查看模式
mode () {
return this.$store.state.panel.mode
}
},
methods: {
refresh () {
this.$store.commit('setIsRouteLive')

103
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -24,17 +24,8 @@
<template v-slot:trigger>
<i style="color: #BEBEBE" class="el-icon-menu"></i>
<span :title="showPanel.name + ' (' + showPanel.chartNum +' charts）' " class="show-panel-name">{{showPanel.name}}</span>
<el-popover
placement="top-start"
trigger="hover"
:content="$t('tip.addFavorites')"
popper-class="starred-pop"
>
<span slot="reference">
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="el-rate__icon el-icon-star-on"></i>
<i @click.stop="addStarred(showPanel)" v-else class="el-rate__icon el-icon-star-off"></i>
</span>
</el-popover>
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="el-rate__icon el-icon-star-on"></i>
<i @click.stop="addStarred(showPanel)" v-else class="el-rate__icon el-icon-star-off"></i>
</template>
<template v-slot:tail>
<div class="panel-select-tail">
@@ -50,6 +41,11 @@
<!-- </el-input>-->
<!-- </div>-->
<!-- 切换查看模式 -->
<button slot="reference" class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
<i class="el-icon-monitor"></i>
</button>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
<button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
@@ -285,7 +281,9 @@ export default {
nowTimeType: {},
showTopLine: false,
// 导出html 以及 pdf的弹窗
exportBoxShow: false
exportBoxShow: false,
// 查看模式
mode: ''
}
},
components: {
@@ -909,6 +907,62 @@ export default {
} else {
this.exportToHtml(this.showPanel.name)
}
},
// 切换查看模式
cycle () {
if (!this.mode) {
// TV模式（隐藏 menu，header）
this.mode = 'tv'
} else if (this.mode === 'tv') {
// 简易模式（隐藏 menu，header 和 操作栏）
this.mode = 'se'
this.$message({
type: 'success',
message: this.$t('overall.toExit')
})
} else if (this.mode === 'se') {
// 默认模式
this.mode = ''
}
this.$store.commit('setMode', this.mode)
setTimeout(() => {
this.$nextTick(() => {
this.$refs.chartList.resize()
})
}, 200)
const param = {
panelId: this.panelId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
const path = this.fromRoute.panel
this.updatePath(param, path)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
},
// 按ESC退出查看模式
escExit (e) {
if (e.keyCode === 27 && this.mode) {
// 默认模式
this.mode = ''
this.$store.commit('setMode', this.mode)
setTimeout(() => {
this.$nextTick(() => {
this.$refs.chartList.resize()
})
}, 200)
const param = {
panelId: this.panelId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
const path = this.fromRoute.panel
this.updatePath(param, path)
}
}
},
created () {
@@ -917,13 +971,21 @@ export default {
// value: vue set 参数
panelId: { target: this, propertyName: 'panelId', type: 'number' },
searchTime: { target: this, propertyName: 'searchTime', type: 'jsonParse' },
nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' }
nowTimeType: { target: this, propertyName: 'nowTimeType', type: 'jsonParse' },
mode: { target: this, propertyName: 'mode', type: 'string' }
}
this.initQueryFromPath(searchKeys)
setTimeout(() => {
this.showPanel.id = this.panelId
this.filter.panelId = this.panelId
})
// 设置查看模式
this.$store.commit('setMode', this.mode)
setTimeout(() => {
this.$nextTick(() => {
this.$refs.chartList.resize()
})
}, 200)
if (this.nowTimeType.type) {
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
@@ -938,6 +1000,8 @@ export default {
})
},
mounted () {
// 监听键盘ESC事件
document.addEventListener('keydown', this.escExit)
bus.$on('refreshPanel', this.refreshPanel)
this.scrollbarWrap = this.$refs.dashboardScrollbar
this.onScroll()
@@ -1007,6 +1071,8 @@ export default {
}
},
beforeDestroy () {
// 移除键盘ESC事件
document.removeEventListener('keydown', this.escExit)
this.$store.dispatch('dispatchPanelLock', { flag: true })
if (document.querySelector('#tableList')) {
document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
@@ -1033,4 +1099,15 @@ export default {
color:#FF9219 !important;
transform: translateY(1px) scale(1.2);
}
.view-mode{
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.view-mode .el-icon-monitor{
display: flex;
align-items: center;
font-size: 20px;
}
</style>

8
nezha-fronted/src/store/panel.js
View File

@@ -17,7 +17,9 @@ const panel = {
y: 0
},
topologyShow: false,
topologyChartInfo: {}
topologyChartInfo: {},
// 查看模式
mode: ''
},
mutations: {
setShowRightBox (state, flag) {
@@ -67,6 +69,10 @@ const panel = {
},
setTopologyChartInfo (state, topologyChartInfo) {
state.topologyChartInfo = topologyChartInfo
},
// 设置查看模式
setMode (state, mode) {
state.mode = mode
}
},
getters: {