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

NEZ-2747 playlist 页面增加mode配置项

Browse Source
This commit is contained in:
zyh
2023-04-06 10:37:06 +08:00
parent aca18f3d38
commit 72f065c367
8 changed files with 178 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,6 +65,9 @@
&>.table-list{
height: 100%;
padding-left: 0;
.panel-variables-box{
padding-top: 14px;
}
}
}
}

28
nezha-fronted/src/components/common/playlist.vue
View File

@@ -21,30 +21,39 @@
</template>
<script>
import bus from '@/libs/bus'
export default {
name: 'playlist',
props: {
playlistObj: {
type: Object
},
panelData: {
type: Array
}
},
data () {
return {
dashboardList: [], // 轮播仪表盘列表
timer: null,
currentIndex: 0
currentIndex: 0,
playlistDashboard: [] // 轮播仪表盘列表
}
},
watch: {
panelData: {
handler () {
this.getPlaylistDashboard()
}
},
playlistObj: {
immediate: true,
async handler () {
this.currentIndex = 0
this.getPlaylistDashboard()
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
await this.getDashboard()
this.startPlay()
}
}
@@ -92,7 +101,7 @@ export default {
this.$emit('stopPlaylist')
},
changePlay () {
let data = this.dashboardList[this.currentIndex]
let data = this.$loadsh.cloneDeep(this.playlistDashboard[this.currentIndex])
if (!data) {
data = {
id: this.playlistObj.dashboardIds[this.currentIndex],
@@ -101,13 +110,12 @@ export default {
}
this.$emit('changePlay', data)
},
async getDashboard () {
this.dashboardList = []
const ids = this.playlistObj.dashboardIds.join(',')
const res = await this.$get('visual/dashboard?ids=' + ids)
getPlaylistDashboard () {
this.playlistDashboard = []
const arr = bus.flatten(this.panelData)
this.playlistObj.dashboardIds.forEach(id => {
const findItem = res.data.list.find(item => item.id == id)
this.dashboardList.push(findItem)
const findItem = arr.find(item => item.id == id)
this.playlistDashboard.push(findItem)
})
}
},

35
nezha-fronted/src/components/common/popBox/selectDashboard.vue
View File

@@ -223,13 +223,13 @@ export default {
break
}
case 'create': { // 我的创建
const flatArr = this.flatten(this.panelData)
const flatArr = bus.flatten(this.panelData)
this.otherData = flatArr.filter(item => item.createBy == userId)
break
}
case 'browse': { // 最近浏览
const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${userId}`) || '[]')
const flatArr = this.flatten(this.panelData)
const flatArr = bus.flatten(this.panelData)
const tempArr = []
// 比对id获取最近浏览的数据
browseArr.forEach(item => {
@@ -278,7 +278,8 @@ export default {
this.playlistObj = {
name: '',
intvl: undefined,
dashboardIds: []
dashboardIds: [],
mode: 'normal'
}
this.playlistVisible = true
},
@@ -289,7 +290,8 @@ export default {
id: res.data.id,
name: res.data.name,
intvl: res.data.intvl,
dashboardIds: res.data.dashboardIds
dashboardIds: res.data.dashboardIds,
mode: res.data.mode || 'normal'
}
this.playlistObj.dashboardIds = JSON.parse(this.playlistObj.dashboardIds)
this.playlistVisible = true
@@ -323,34 +325,17 @@ export default {
// 获取收藏的列表
async getStarred () {
// 1: 已收藏 0：未收藏
const flatArr = this.flatten(this.panelData) // 数组对象扁平化
const flatArr = bus.flatten(this.panelData) // 数组对象扁平化
this.starredList = flatArr.filter(item => {
return item.starred === 1
})
},
// 数组对象扁平化
flatten (arr) {
const tempArr = JSON.parse(JSON.stringify(arr))
// 递归调用
function handler (tempArr) {
const newArr = []
tempArr.forEach(element => {
newArr.push(element)
if (element.children) {
newArr.push.apply(newArr, handler(element.children))
delete element.children
}
})
return newArr
}
return handler(tempArr)
},
// 存储最近浏览的面板
setBrowse () {
const userId = localStorage.getItem('nz-user-id')
// 获取最近浏览id数组
let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${userId}`) || '[]')
const flatArr = this.flatten(this.panelData)
const flatArr = bus.flatten(this.panelData)
// 若最近浏览的数据已被删除 则截取掉
for (let i = 0; i < browseArr.length; i++) {
const flag = flatArr.some(item => {
@@ -471,13 +456,13 @@ export default {
},
// 确认选择某个节点，与父组件交互
selectDashboard (data, checked, child) {
if (this.currentTab === 'playlist') return
this.$emit('selectDashboard', data, 'select')
if (this.currentTab === 'all') {
this.$refs.panelTree && this.$refs.panelTree.setCurrentKey(data)
} else {
this.$refs.otherTree && this.$refs.otherTree.setCurrentKey(data)
}
if (this.currentTab === 'playlist') return
this.$emit('selectDashboard', data, 'select')
this.esc()
}
}

12
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -44,15 +44,9 @@
<!-- chartShare -->
<el-form-item :label="$t('dashboard.dashboard.chartTooltip')" class="item-receivers" prop="chartShare">
<el-select v-model="editPanel.param.chartShare" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option value="none" label="Default">
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
</el-option>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.dashboard.crosshair')}}</span>
</el-option>
<el-option value="tooltip" label="Share tooltip">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.dashboard.shareTooltip')}}</span>
</el-option>
<el-option value="none" :label="$t('config.assetLabel.default')"></el-option>
<el-option value="crosshair" :label="$t('dashboard.dashboard.crosshair')"></el-option>
<el-option value="tooltip" :label="$t('dashboard.dashboard.shareTooltip')"></el-option>
</el-select>
<div class="item-receivers-text">{{$t('dashboard.dashboard.chartTooltipText')}}</div>
</el-form-item>

28
nezha-fronted/src/components/common/rightBox/playlistBox.vue
View File

@@ -51,6 +51,14 @@
</el-option>
</el-select>
</el-form-item>
<!-- mode -->
<el-form-item :label="$t('dashboard.mode')" prop="mode">
<el-select v-model="editPlaylist.mode" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside right-box-select-width" size="small" style="width:100%">
<el-option value="normal" :label="$t('dashboard.metric.normal')"></el-option>
<el-option value="tv" label="tv"></el-option>
<el-option value="se" label="se"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
@@ -67,6 +75,7 @@
<script>
import editRigthBox from '../mixin/editRigthBox'
import bus from '@/libs/bus'
export default {
name: 'playlistBox',
props: {
@@ -111,24 +120,7 @@ export default {
},
async getDashboard () {
const res = await this.$get('visual/dashboard?type=dashboard&pageSize=-1')
this.dashboardList = this.flatten(res.data.list)
},
// 数组对象扁平化
flatten (arr) {
const tempArr = this.$loadsh.cloneDeep(arr)
// 递归调用
function handler (tempArr) {
const newArr = []
tempArr.forEach(element => {
newArr.push(element)
if (element.children) {
newArr.push.apply(newArr, handler(element.children))
delete element.children
}
})
return newArr
}
return handler(tempArr)
this.dashboardList = bus.flatten(res.data.list)
},
save () {
if (this.prevent_opt.save) {

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

@@ -46,10 +46,11 @@
<div class="top-tool-right">
<!-- 仪表盘轮播 -->
<playlist v-if="playListControls" :playlistObj="playlistObj" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>
<playlist v-if="playListControls" :playlistObj="playlistObj" :panelData="panelData" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>
<template v-if="!playListControls">
<!-- 切换查看模式 -->
<button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
<i class="nz-icon nz-icon-moshiqiehuan"></i>
@@ -88,6 +89,7 @@
</el-dropdown-item>
</template>
</top-tool-more-options>
</template>
</div>
</template>
</div>
@@ -376,12 +378,31 @@ export default {
},
methods: {
// 开始轮播列表
startPlay (data) {
this.playListControls = true
async startPlay (data) {
this.playlistObj = data
let mode = data.mode
if (!mode || mode == 'normal') {
mode = ''
}
this.mode = mode
this.$store.commit('setMode', this.mode)
this.playListControls = true
},
// 结束轮播列表
stopPlaylist () {
this.clearPlaylist()
const param = { ...this.$route.query }
if (param.mode) {
delete param.mode
const path = this.fromRoute.dashboard
this.updatePath(param, path)
}
},
clearPlaylist () {
if (this.mode) {
this.mode = ''
this.$store.commit('setMode', this.mode)
}
this.playListControls = false
this.playlistObj = {}
},
@@ -425,10 +446,10 @@ export default {
})
// 判断删除的是否是当前面板
if (this.showPanel.id == u.id) {
this.clearPlaylist()
const param = { t: +new Date() }
const path = this.fromRoute.dashboard
this.updatePath(param, path)
this.stopPlaylist()
this.getTableData(true)
} else {
this.getTableData(false)
@@ -726,15 +747,15 @@ export default {
if (!val) {
return false
}
if (type === 'select') { // 选择面板 则停止仪表盘轮播
this.stopPlaylist()
}
// 切换面板 重置参数
const param = {
dashboardId: val.id
}
this.mode = ''
this.$store.commit('setMode', this.mode)
if (type === 'select') {
// 切换面板 则停止仪表盘轮播
this.clearPlaylist()
} else {
param.mode = this.mode
}
const path = this.fromRoute.dashboard
this.updatePath(param, path)
setTimeout(() => {
@@ -1050,13 +1071,20 @@ export default {
},
// 按ESC键退出查看模式
escExit (e) {
// 轮播时禁止esc
if (this.playListControls) {
return
}
const message = document.querySelectorAll('.el-message-box__wrapper')
const showMessage = message.length && Array.from(message).some(item => {
return item.style.display !== 'none'
})
const showFullscreen = document.querySelector('.chart-fullscreen')
const dialog = document.querySelectorAll('.el-dialog__wrapper')
const showDialog = dialog.length && Array.from(dialog).some(item => {
return item.style.display !== 'none'
})
// 防止ESC键冲突
if (showMessage || showFullscreen) {
if (showMessage || showDialog) {
return false
}
if (e.keyCode === 27 && this.mode) {

95
nezha-fronted/src/libs/bus.js
View File

@@ -234,6 +234,48 @@ export default new Vue({
getOffsetTimezoneData (offset = 0) {
return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
},
UTCTimeToConfigTimezone (utcTime) {
let offset = localStorage.getItem('nz-sys-timezone')
offset = moment.tz(offset).format('Z')
if (offset && offset !== 'undefined') {
let time = utcTime
if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
time = new Date(time).getTime()
}
offset = Number.parseInt(offset)
time += offset * 60 * 60 * 1000
return time
} else {
return utcTime
}
},
configTimezoneToUTCTime: function (configTime) {
let offset = localStorage.getItem('nz-sys-timezone')
offset = moment.tz(offset).format('Z')
if (offset && offset !== 'undefined') {
let time = configTime
if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
time = new Date(time).getTime()
}
offset = Number.parseInt(offset)
time -= offset * 60 * 60 * 1000
return time
} else {
return configTime
}
},
countDecimals (value) {
if ((value || value === 0) && Math.floor(value) !== value) {
const arr = value.toString().split('.')
if (Math.abs(arr[0] > 0) || arr.length < 2) {
return 2
}
const dot = arr[1].split('0').length + 1
return dot || 2
}
return 2
},
debounce (fn, delay, fn1) {
// 记录上一次的延时器
let timer = null
@@ -276,47 +318,22 @@ export default new Vue({
}
}
},
UTCTimeToConfigTimezone (utcTime) {
let offset = localStorage.getItem('nz-sys-timezone')
offset = moment.tz(offset).format('Z')
if (offset && offset !== 'undefined') {
let time = utcTime
if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
time = new Date(time).getTime()
// 数组对象扁平化
flatten (arr) {
const tempArr = this.$loadsh.cloneDeep(arr)
// 递归调用
function handler (tempArr) {
const newArr = []
tempArr.forEach(element => {
newArr.push(element)
if (element.children) {
newArr.push.apply(newArr, handler(element.children))
delete element.children
}
offset = Number.parseInt(offset)
time += offset * 60 * 60 * 1000
return time
} else {
return utcTime
})
return newArr
}
},
configTimezoneToUTCTime: function (configTime) {
let offset = localStorage.getItem('nz-sys-timezone')
offset = moment.tz(offset).format('Z')
if (offset && offset !== 'undefined') {
let time = configTime
if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
time = new Date(time).getTime()
}
offset = Number.parseInt(offset)
time -= offset * 60 * 60 * 1000
return time
} else {
return configTime
}
},
countDecimals (value) {
if ((value || value === 0) && Math.floor(value) !== value) {
const arr = value.toString().split('.')
if (Math.abs(arr[0] > 0) || arr.length < 2) {
return 2
}
const dot = arr[1].split('0').length + 1
return dot || 2
}
return 2
return handler(tempArr)
}
},
created () {