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

NEZ-2725 feat：dashboard 编辑页面新增defaultTimeRange和Auto Refresh配置项

Browse Source
This commit is contained in:
zyh
2023-03-28 09:16:24 +08:00
parent dea5044c24
commit 0566e9f24e
13 changed files with 400 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
View File

@@ -19,6 +19,7 @@
font-size: 12px;
color: $--color-text-secondary;
padding-left: 5px;
line-height: 30px;
}
}
.el-input--suffix.el-date-editor--datetime .el-input__inner{

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

@@ -136,7 +136,7 @@
height: 100%;
width: 100%;
background: center center no-repeat $--background-color-empty;
z-index: 10;
z-index: 1010;
}
.show-panel-name{
display: inline-block;

10
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -54,7 +54,7 @@
<!-- comparison -->
<template v-if="comparisonShow(item)">
<div :class="{'comparison-text-center':chartInfo.param.text==='none'}" class="comparison-text" :style="{fontSize:item.fontSize>=36?'16px':'12px'}">
<div :class="{'comparison-text-center':chartInfo.param.text==='none'}" class="comparison-text" :style="{fontSize:item.comparisonFont+'px'}">
<span v-if="chartInfo.param.comparison==='hour'">{{$t('dashboard.hourComparison')}}</span>
<span v-if="chartInfo.param.comparison==='day'">{{$t('dashboard.dayComparison')}}</span>
<span v-if="chartInfo.param.comparison==='week'">{{$t('dashboard.weekComparison')}}</span>
@@ -357,6 +357,14 @@ export default {
item.scale = scale < 1 ? 1 : parseFloat(scale)
fontSize = fontSize > 12 ? fontSize : this.minFontSzie
item.fontSize = fontSize
if (fontSize > 36) {
item.comparisonFont = 16
} else if (fontSize > 24) {
item.comparisonFont = 14
} else {
item.comparisonFont = 12
}
})
this.isInit = false
},

2
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -181,7 +181,7 @@ export default {
} else {
nowTimeType = JSON.parse(nowTimeType)
}
if (numInterval >= 6 && nowTimeType.value !== -1) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
if (numInterval >= 60000 && nowTimeType.value !== -1) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
startTime = bus.getNewTime(bus.formateTimeToTime(this.timeRange[0]), numInterval, 'YYYY-MM-DD HH:mm:ss')
endTime = bus.timeFormate(now, 'YYYY-MM-DD HH:mm:ss')
} else {

176
nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
View File

@@ -36,12 +36,6 @@
@panelLockChange="panelLockChange"
>
<template v-slot:after>
<!-- <el-dropdown-item v-has="'main_add'">
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
</el-dropdown-item>
<el-dropdown-item v-has="'main_edit'">
<div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
</el-dropdown-item> -->
<el-dropdown-item v-has="'dashboard_view'">
<div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
</el-dropdown-item>
@@ -71,27 +65,12 @@
@panelLockChange="panelLockChange"
>
<template v-slot:after>
<!-- <el-dropdown-item v-has="'main_add'">
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
</el-dropdown-item>
<el-dropdown-item v-has="'main_edit'">
<div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
</el-dropdown-item> -->
<el-dropdown-item v-has="'dashboard_view'">
<div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
</el-dropdown-item>
</template>
</top-tool-more-options>
</div>
<!-- chartTemp -->
<!-- <div v-else-if="from === fromRoute.chartTemp">
<button id="panel-lock" :title='panelLock ? $t("overall.unlocked") : $t("overall.locked")' class="top-tool-btn margin-r-10" @click="panelLockChange(!panelLock)" type="button">
<i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>
</button>
<button @click="chartBySync" id="chart-sync" :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10" type="button">
<i class="nz-icon nz-icon-sync"></i>
</button>
</div> -->
<!-- dashboardTemp -->
<div v-else-if="from === fromRoute.dashboardTemp">
<button v-has="'main_add'" id="endpoint-create-chart" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChartBefore">
@@ -288,8 +267,7 @@ export default {
filter: { // 过滤条件
// productId: 0,
dashboardId: 0,
start_time: '',
end_time: ''
from: this.from
},
showPanel: {
name: '',
@@ -312,7 +290,28 @@ export default {
chartDetailInfo: {},
variables: [],
variablesInit: false,
snapshotVisible: false
snapshotVisible: false,
timeData: [
{ id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
{ id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
{ id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
{ id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
{ id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
{ id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
{ id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
],
intervalList: [
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' }
]
}
},
components: {
@@ -529,14 +528,6 @@ export default {
return
}
this.chartListLoading = true
if (params.start_time === '' || params.end_time === '') {
const now = bus.getTimezontDateRange()
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'YYYY-MM-DD HH:mm:ss')
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'YYYY-MM-DD HH:mm:ss')
params.start_time = startTimeTmp
params.end_time = endTimeTmp
params.from = this.from
}
if (this.from !== 'chartTemp') {
this.$get('visual/dashboard/chart?dashboardId=' + params.dashboardId + '&groupId=0' + '&pageSize=-1').then(response => {
if (response.code === 200) {
@@ -559,13 +550,10 @@ export default {
/* 时间条件查询--start */
// 选择日期变化
dateChange (val) {
// this.searchTime = [...val];
if (this.$refs.pickTime) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime(nowTimeType.type, nowTimeType.value)
this.filter.start_time = bus.timeFormate(this.searchTime[0])
this.filter.end_time = bus.timeFormate(this.searchTime[1])
this.filter.dashboardId = this.showPanel.id
this.getData(this.filter)
this.$store.dispatch('dispatchPanelTime', {
@@ -603,28 +591,13 @@ export default {
}
},
// 公用操作
getTableData (linkId) {
async getTableData (linkId) {
if (this.from === this.fromRoute.alertRule) {
this.getData(this.filter)
} else {
if (this.from === this.fromRoute.chartTemp) {
if (this.obj.type === 'group') {
this.$get('/visual/dashboard/chart', { ids: this.obj.id }).then(res => {
this.panelDataList = res.data.list
if (this.panelDataList.length > 0) {
this.showPanel.id = this.filter.dashboardId = 0
this.getData(this.filter)
}
})
return
}
this.panelDataList = [this.obj]
if (this.panelDataList.length > 0) {
this.showPanel.id = this.filter.dashboardId = 0
this.getData(this.filter)
}
} else if (this.from === this.fromRoute.dashboardTemp) {
this.$get('visual/dashboard', { type: 'template', ids: this.obj.id }).then(response => {
if (this.from === this.fromRoute.dashboardTemp) {
try {
const response = await this.$get('visual/dashboard', { type: 'template', ids: this.obj.id })
if (response.code === 200) {
this.panelData = response.data.list
if (this.panelData.length > 0) {
@@ -634,18 +607,18 @@ export default {
this.getData(this.filter)
}
}
}).catch((error) => {
} catch (error) {
if (error) {
console.error(error)
this.$message.error(error.toString())
}
})
}
} else {
this.$get('visual/dashboard', { type: this.from, link: linkId || this.obj.id }).then(response => {
try {
const response = await this.$get('visual/dashboard', { type: this.from, link: linkId || this.obj.id })
if (response.code === 200) {
this.panelData = response.data.list
if (this.panelData.length > 0) {
// this.showPanel.id = this.filter.dashboardId = this.panelData[0].id
this.filter.dashboardId = this.panelData[0].id
this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
@@ -666,12 +639,12 @@ export default {
this.$message.error(response)
}
}
}).catch((error) => {
} catch (error) {
if (error) {
console.error(error)
this.$message.error(error.toString())
}
})
}
}
}
},
@@ -703,14 +676,6 @@ export default {
// 刷新数据
this.dateChange()
},
pageNo (val) {
this.pageObj.pageNo = val
this.getTableData(this.obj.id)
},
pageSize (val) {
this.pageObj.pageSize = val
this.getTableData(this.obj.id)
},
// 滚动事件触发下拉加载
onScroll () {
const _self = this
@@ -855,6 +820,35 @@ export default {
this.$nextTick(() => {
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
})
},
// 时间选择器设置默认时间范围
setDefaultTimeRange () {
this.$nextTick(() => {
let nowTimeType = this.$loadsh.cloneDeep(this.timeData[3])
const defaultTimeRange = this.$loadsh.get(this.showPanel, 'param.defaultTimeRange')
if (defaultTimeRange) {
nowTimeType = this.timeData.find(item => item.id == defaultTimeRange)
}
this.nowTimeType = this.$loadsh.cloneDeep(nowTimeType)
// 刷新时间范围
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
})
},
// 设置默认刷新
setDefaultRefresh () {
this.$nextTick(() => {
let refresh = this.$loadsh.cloneDeep(this.intervalList[0])
const defaultRefresh = this.$loadsh.get(this.showPanel, 'param.refresh')
if (defaultRefresh) {
refresh = this.intervalList.find(item => item.value == defaultRefresh)
}
this.$refs.pickTime.selectInterval(refresh)
})
}
},
mounted () {
@@ -872,36 +866,22 @@ export default {
obj: {
immediate: true,
handler (n, o) {
setTimeout(() => {
setTimeout(async () => {
if (n && n.id) {
this.searchLabel = {}
this.getTableData(n.id)
if (this.from === fromRoute.asset) {
this.searchLabel.assetIds = n.id
}
this.getTableData(n.id)
}
this.chartDetailInfo = n
}, 500)
}
},
chartRightBoxShow: {
immediate: false,
deep: true,
handler (n) {
if (n) {
this.disposeChart()
} else {
this.$refs.addChartModal.isStable = 'instability'
}
}
},
delChartFlag: {
immediate: false,
deep: true,
handler (n) {
if (n) {
this.disposeChart()
}
showPanel: {
handler () {
this.setDefaultTimeRange()
this.setDefaultRefresh()
}
},
// 监听图表联动配置
@@ -928,6 +908,26 @@ export default {
echarts.disconnect('timeSeriesGroup')
}
}
},
chartRightBoxShow: {
immediate: false,
deep: true,
handler (n) {
if (n) {
this.disposeChart()
} else {
this.$refs.addChartModal.isStable = 'instability'
}
}
},
delChartFlag: {
immediate: false,
deep: true,
handler (n) {
if (n) {
this.disposeChart()
}
}
}
},
beforeDestroy () {

2
nezha-fronted/src/components/common/js/constants.js
View File

@@ -361,7 +361,7 @@ export const chart = {
}
export const intervalList = [
{ value: -1, label: i18n.t('dashboard.dashboard.chartForm.lockList.off') },
{ value: 0, label: i18n.t('dashboard.dashboard.chartForm.lockList.off') },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },

2
nezha-fronted/src/components/common/mixin/routerPathParams.js
View File

@@ -53,7 +53,9 @@ export default {
if (!from) {
const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
localStorage.setItem('detail-view-' + this.tableId, this.detailType)
if (this.detailType) {
params.detailType = this.detailType
}
if (this.detailType === 'list' && this.$refs[detailType]) {
params.bottomBox = this.$refs[detailType].bottomBox.showSubList
params.targetTab = this.$refs[detailType].bottomBox.targetTab

22
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -9,11 +9,11 @@
<span><slot name="added-text"></slot></span>
</button>
<button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)" :title="$t('el.datepicker.selectTime')">
<span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
<span class="select-refresh-time-label" v-if="interval">{{interLabel}}</span>
<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
<transition name="el-zoom-in-top">
<ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown" v-clickoutside="dropdownHandler">
<li v-for="i in $CONSTANTS.intervalList" :key="i.value + i.label" :style="{color:interval === i.value || interval.value === i.value ? theme.themeColor : ''}" class="el-dropdown-menu__item dropdown-content" @click="selectInterval(i)">
<li v-for="i in $CONSTANTS.intervalList" :key="i.value + i.label" :style="{color:interval === i.value || interval.value === i.value ? theme.themeColor : ''}" class="el-dropdown-menu__item dropdown-content" @click="selectInterval(i,true)">
{{$t(i.label)}}
</li>
</ul>
@@ -67,7 +67,8 @@ export default {
defaultPick: Number,
showEmpty: { type: Boolean, default: false },
id: String,
sign: [Number, String]
sign: [Number, String],
from: String
},
data () {
return {
@@ -89,19 +90,26 @@ export default {
this.$emit('change', this.searchTime)
},
methods: {
selectInterval (val) {
selectInterval (val, route) {
this.visible = false
clearInterval(this.intervalTimer)
this.interval = val.value
this.interLabel = val.label
if (!this.showTimePicker && val && val.value != -1) {
if (!this.showTimePicker && val && val.value != 0) {
this.intervalTimer = setInterval(() => {
this.$emit('change', this.searchTime)
this.refreshDataFunc()
}, val.value * 1000)
return
}
if (val && val.value != -1) {
// refresh拼接到地址栏参数中
if (this.from === 'dashboard' && route) {
const newQuery = JSON.parse(JSON.stringify(this.$route.query))
if (val.label == newQuery.refresh) return
val.value ? newQuery.refresh = val.label : delete newQuery.refresh
this.$router.replace({ query: newQuery })
}
if (val && val.value != 0) {
const start = new Date(this.searchTime[1])
const now = bus.getOffsetTimezoneData()
const interval = Math.floor((now - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
@@ -144,7 +152,7 @@ export default {
this.searchTime = time
setTimeout(() => {
this.$emit('change', this.searchTime)
this.refreshDataFunc()
this.refreshDataFunc(true)
}, 100)
},
antiShake () {

4
nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
View File

@@ -753,7 +753,9 @@ export default {
},
receivers: []
},
chartShare: 'none'
chartShare: 'none',
defaultTimeRange: 4,
refresh: 0
}
}
}

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

@@ -13,7 +13,7 @@
<!-- begin--表单-->
<div class="right-box__container">
<div class="container__form">
<el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
<el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px">
<!-- name -->
<el-form-item :label='$t("overall.name")' prop="name">
@@ -34,7 +34,8 @@
<el-input
v-model="editPanel.remark"
maxlength="256"
size="small" :rows="2"
size="small"
:rows="2"
show-word-limit
type="textarea">
</el-input>
@@ -42,7 +43,7 @@
<!-- 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" value-key="chartType">
<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>
@@ -56,6 +57,34 @@
<div class="item-receivers-text">{{$t('dashboard.dashboard.chartTooltipText')}}</div>
</el-form-item>
<!-- defaultTimeRange -->
<el-form-item :label="$t('dashboard.defaultTimeRange')" class="item-receivers" prop="defaultTimeRange">
<el-select v-model="editPanel.param.defaultTimeRange" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option
v-for="item in timeData"
:value="item.id"
:label="item.text"
:key="item.id"
>
<span class="panel-dropdown-label-txt">{{item.text}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- Auto refresh -->
<el-form-item :label="$t('dashboard.autoRefresh')" class="item-receivers" prop="refresh">
<el-select v-model="editPanel.param.refresh" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option
v-for="item in intervalList"
:value="item.value"
:label="item.label"
:key="item.value"
>
<span class="panel-dropdown-label-txt">{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- variable -->
<div
class="variable-box"
@@ -471,6 +500,27 @@ export default {
{ name: this.$t('project.topology.none'), id: 0 },
{ name: this.$t('asset.asset'), id: 1 },
{ name: this.$t('asset.endpoint'), id: 2 }
],
timeData: [
{ id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
{ id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
{ id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
{ id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
{ id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
{ id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
{ id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
],
intervalList: [
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' }
]
}
},
@@ -596,6 +646,8 @@ export default {
receivers: this.editPanel.param.report.receivers
},
chartShare: this.editPanel.param.chartShare,
defaultTimeRange: this.editPanel.param.defaultTimeRange,
refresh: this.editPanel.param.refresh,
variables
}
}
@@ -689,6 +741,9 @@ export default {
item.uid = getUUID()
})
}
if (!this.editPanel.param.chartShare) this.$set(this.editPanel.param, 'chartShare', 'none')
if (!this.editPanel.param.defaultTimeRange) this.$set(this.editPanel.param, 'defaultTimeRange', 4)
if (!this.editPanel.param.refresh) this.$set(this.editPanel.param, 'refresh', 0)
}
},
'editPanel.param.report.schedule.stime': {

119
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -6,7 +6,7 @@
v-clickoutside="changeDropdownFlag"
>
<div @click="showDropdown" class="date-range-text">
<div @click="showDropdown(true)" class="date-range-text">
<div class="calendar-popover-text">
<i class="nz-icon nz-icon-time"></i>
</div>
@@ -182,82 +182,19 @@ export default {
text: this.$t('dashboard.dashboard.lastOneHour')
},
timeData: [
{
id: 0,
text: this.$t('dashboard.dashboard.customTimeRange'),
value: -1
},
{
id: 12,
text: this.$t('dashboard.dashboard.noDate'),
value: 0
},
{
id: 1,
text: this.$t('dashboard.dashboard.lastFiveMin'),
type: 'minute',
value: 5
},
{
id: 2,
text: this.$t('dashboard.dashboard.lastFifteenMin'),
type: 'minute',
value: 15
},
{
id: 3,
text: this.$t('dashboard.dashboard.lastThirtyMin'),
type: 'minute',
value: 30
},
{
id: 4,
text: this.$t('dashboard.dashboard.lastOneHour'),
type: 'hour',
value: 1
},
{
id: 5,
text: this.$t('dashboard.dashboard.lastThreeHour'),
type: 'hour',
value: 3
},
{
id: 6,
text: this.$t('dashboard.dashboard.lastSixHour'),
type: 'hour',
value: 6
},
{
id: 7,
text: this.$t('dashboard.dashboard.lastTwelveHour'),
type: 'hour',
value: 12
},
{
id: 8,
text: this.$t('dashboard.dashboard.lastTwentyFourHour'),
type: 'hour',
value: 24
},
{
id: 9,
text: this.$t('dashboard.dashboard.lastTwoDay'),
type: 'date',
value: 2
},
{
id: 10,
text: this.$t('dashboard.dashboard.lastSevenDay'),
type: 'date',
value: 7
},
{
id: 11,
text: this.$t('dashboard.dashboard.lastThirtyDay'),
type: 'date',
value: 30
}
{ id: 0, text: this.$t('dashboard.dashboard.customTimeRange'), value: -1 },
{ id: 12, text: this.$t('dashboard.dashboard.noDate'), value: 0 },
{ id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
{ id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
{ id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
{ id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
{ id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
{ id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
{ id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
],
timeShowData: [],
nowTimeType: {
@@ -345,7 +282,7 @@ export default {
text: this.searchTime[0] + ' ' + this.$t('dashboard.dashboard.to') + ' ' + this.searchTime[1],
value: -1
}
this.showDropdown()
this.showDropdown(false)
this.setSearchTime('', '', this.searchTime)
this.$emit('change', this.searchTime)
},
@@ -377,20 +314,19 @@ export default {
JSON.stringify(this.rangeHistory)
)
console.log(this.sign)
this.$set(this.searchTime, 2, '')
this.showDropdown()
this.showDropdown(false)
this.getRangeHistoryArr()
this.setSearchTime('', '', this.searchTime)
this.$emit('change', this.searchTime)
},
showDropdown () {
showDropdown (value) {
const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
this.oldSearchTime[0] = timeTemp[0]
this.oldSearchTime[1] = timeTemp[1]
this.oldSearchTimeError[0] = false
this.oldSearchTimeError[1] = false
this.dropdownFlag = !this.dropdownFlag
this.dropdownFlag = value
},
dateInputChange (type, v) {
const timeFormatMain = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
@@ -520,7 +456,7 @@ export default {
}
} else {
this.isCustom = false
this.showDropdown()
this.showDropdown(false)
if (this.showEmpty && id === 12) {
this.searchTime = ['', '']
}
@@ -528,6 +464,18 @@ export default {
}
}
},
setTimeRange (nowTimeType) {
this.isCustom = false
this.nowTimeType = nowTimeType
this.$set(this.showTime, 'id', nowTimeType.id)
this.$set(this.showTime, 'text', nowTimeType.text)
this.setSearchTime(nowTimeType.type, nowTimeType.value)
const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
this.oldSearchTime[0] = timeTemp[0]
this.oldSearchTime[1] = timeTemp[1]
this.oldSearchTimeError[0] = false
this.oldSearchTimeError[1] = false
},
getCurrentTime () {
return this.searchTime
// let timeTypeId = this.showTime.id;
@@ -617,11 +565,14 @@ export default {
}
}
},
sign (n) {
sign: {
handler (n, o) {
if (n) {
this.rangeHistory = localStorage.getItem('date-range-history' + this.sign)
? JSON.parse(localStorage.getItem('date-range-history' + this.sign))
: []
this.getRangeHistoryArr()
}
}
}
},

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

@@ -158,7 +158,9 @@ export default {
repeat: 1
}
},
chartShare: 'none'
chartShare: 'none',
defaultTimeRange: 4,
refresh: 0
}
}
},
@@ -184,7 +186,9 @@ export default {
},
receivers: []
},
chartShare: 'none'
chartShare: 'none',
defaultTimeRange: 4,
refresh: 0
}
}
}

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

@@ -7,7 +7,7 @@
</transition>
</div>
<div class="main-container">
<div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''">
<div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''" style="z-index: 1001;">
<div v-if="panelData.length === 0" class="top-tool-left" style="margin-left: 10px;">
<button id="dashboard-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'main_add'" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("overall.addDashboard")}}</button>
</div>
@@ -44,7 +44,7 @@
<div class="top-tool-right">
<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>
<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>
<!-- 切换查看模式 -->
<button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
@@ -313,10 +313,7 @@ export default {
// ---图表相关参数--start
dataList: [], // 数据列表
filter: { // 过滤条件
dashboardId: 0,
start_time: '',
end_time: '',
id: 4
dashboardId: 0
},
dashboardId: 0,
// ---图表相关参数--end
@@ -329,7 +326,28 @@ export default {
variables: [],
variablesInit: false, // 判断variables 是否加载完成
snapshotVisible: false,
stableTime: null
stableTime: null,
timeData: [
{ id: 1, text: this.$t('dashboard.dashboard.lastFiveMin'), type: 'minute', value: 5 },
{ id: 2, text: this.$t('dashboard.dashboard.lastFifteenMin'), type: 'minute', value: 15 },
{ id: 3, text: this.$t('dashboard.dashboard.lastThirtyMin'), type: 'minute', value: 30 },
{ id: 4, text: this.$t('dashboard.dashboard.lastOneHour'), type: 'hour', value: 1 },
{ id: 5, text: this.$t('dashboard.dashboard.lastThreeHour'), type: 'hour', value: 3 },
{ id: 6, text: this.$t('dashboard.dashboard.lastSixHour'), type: 'hour', value: 6 },
{ id: 7, text: this.$t('dashboard.dashboard.lastTwelveHour'), type: 'hour', value: 12 },
{ id: 8, text: this.$t('dashboard.dashboard.lastTwentyFourHour'), type: 'hour', value: 24 },
{ id: 9, text: this.$t('dashboard.dashboard.lastTwoDay'), type: 'date', value: 2 },
{ id: 10, text: this.$t('dashboard.dashboard.lastSevenDay'), type: 'date', value: 7 },
{ id: 11, text: this.$t('dashboard.dashboard.lastThirtyDay'), type: 'date', value: 30 }
],
intervalList: [
{ value: 0, label: this.$t('dashboard.dashboard.chartForm.lockList.off') },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' },
{ value: 300, label: '5m' },
{ value: 900, label: '15m' },
{ value: 1800, label: '30m' }
]
}
},
components: {
@@ -379,30 +397,6 @@ export default {
refreshPanel () {
this.getData(this.filter)
},
// 面板相关操作
panelChange (val) {
if (!val) {
return false
}
this.variablesInit = false
this.showPanel = val
this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
this.showPanel.type = 'dashboard'
this.filter.dashboardId = this.showPanel.id
this.dashboardId = this.showPanel.id
const param = {
dashboardId: this.dashboardId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
// this.getTableData()
// this.getData(this.filter)
const path = this.fromRoute.dashboard
this.updatePath(param, path)
this.dateChange()
this.$refs.chartList.cleanData()
},
del (u) {
this.$confirm(this.$t('tip.confirmDelete'), {
@@ -410,22 +404,22 @@ export default {
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('visual/dashboard?ids=' + u.id).then(response => {
this.$delete('visual/dashboard?ids=' + u.id).then(async (response) => {
if (response.code === 200) {
this.$message({
duration: 1000,
type: 'success',
message: this.$t('tip.deleteSuccess')
})
const param = {
dashboardId: 0,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
// 判断删除的是否是当前面板
if (this.showPanel.id == u.id) {
const param = { t: +new Date() }
const path = this.fromRoute.dashboard
this.updatePath(param, path)
this.getTableData(true)
} else {
this.getTableData(false)
}
} else {
this.$message.error(response.msg)
this.$store.dispatch('clearPanel')
@@ -457,7 +451,9 @@ export default {
},
receivers: []
},
chartShare: 'none'
chartShare: 'none',
defaultTimeRange: 4,
refresh: 0
}
}
}
@@ -505,7 +501,9 @@ export default {
repeat: 1
}
},
chartShare: 'none'
chartShare: 'none',
defaultTimeRange: 4,
refresh: 0
}
}
},
@@ -685,13 +683,6 @@ export default {
}
this.dataList = []
this.chartListLoading = true
if (params.start_time === '' || params.end_time === '') {
const now = bus.getTimezontDateRange()
const endTimeTmp = bus.timeFormate(now[1].getTime(), this.panelDateFormatTime)
const startTimeTmp = bus.timeFormate(now[0].getTime(), this.panelDateFormatTime)
params.start_time = startTimeTmp
params.end_time = endTimeTmp
}
if (le5leData) {
Object.keys(le5leData).forEach(key => {
le5leData[key] = null
@@ -717,32 +708,51 @@ export default {
})
},
// 面板相关操作
panelChange (val) {
if (!val) {
return false
}
// 切换面板 重置参数
const param = {
dashboardId: val.id
}
this.mode = ''
this.$store.commit('setMode', this.mode)
const path = this.fromRoute.dashboard
this.updatePath(param, path)
setTimeout(() => {
this.variablesInit = false
this.showPanel = val
this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
this.showPanel.type = 'dashboard'
this.filter.dashboardId = this.showPanel.id
this.dashboardId = this.showPanel.id
this.getData(this.filter)
this.$refs.chartList.cleanData()
})
},
/* 图表相关操作--end */
/* 时间条件查询--start */
// 选择日期变化
dateChange (val) {
dateChange (route) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
this.filter.start_time = bus.timeFormate(this.searchTime[0], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.value = this.searchTime[2]
this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
// this.getTableData()
this.getData(this.filter)
const param = {
dashboardId: this.dashboardId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
const path = this.fromRoute.dashboard
this.updatePath(param, path)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
// 选择时间范围时更新路由
if (route) {
const param = { ...this.$route.query }
param.nowTimeType = JSON.stringify(this.nowTimeType)
param.searchTime = JSON.stringify(this.searchTime)
const path = this.fromRoute.dashboard
this.updatePath(param, path)
}
},
setSearchTime (type, val, nowTimeType) { // 设置searchTime
if (type === 'minute') {
@@ -794,9 +804,18 @@ export default {
})
},
getTableData (clearShowPanel) {
async getTableData (clearShowPanel) {
const vm = this
this.$get('visual/dashboard?type=dashboard&pageSize=-1').then(response => {
let response
try {
response = await this.$get('visual/dashboard?type=dashboard&pageSize=-1')
} catch (error) {
// console.log('error................'+JSON.stringify(error));
if (error) {
console.error(error)
this.$message.error(error.toString())
}
}
if (response.code === 200) {
let isInitData = false
this.panelData = JSON.parse(JSON.stringify(response.data.list))
@@ -839,13 +858,6 @@ export default {
}
}
this.variables = this.$loadsh.get(this, 'showPanel.param.variables', []) || []
}).catch((error) => {
// console.log('error................'+JSON.stringify(error));
if (error) {
console.error(error)
this.$message.error(error.toString())
}
})
function handler (panelData) {
panelData.forEach(panel => {
@@ -887,14 +899,6 @@ export default {
// 刷新数据
this.dateChange()
},
pageNo (val) {
this.pageObj.pageNo = val
this.getTableData()
},
pageSize (val) {
this.pageObj.pageSize = val
this.getTableData()
},
// 滚动事件触发下拉加载
onScroll () {
const _self = this
@@ -1024,18 +1028,9 @@ export default {
this.mode = ''
}
this.$store.commit('setMode', this.mode)
const param = {
dashboardId: this.dashboardId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
const param = { ...this.$route.query, mode: this.mode }
const path = this.fromRoute.dashboard
this.updatePath(param, path)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
},
// 按ESC键退出查看模式
escExit (e) {
@@ -1052,12 +1047,8 @@ export default {
// 默认模式
this.mode = ''
this.$store.commit('setMode', this.mode)
const param = {
dashboardId: this.dashboardId,
nowTimeType: JSON.stringify(this.nowTimeType),
searchTime: JSON.stringify(this.searchTime),
mode: this.mode
}
const param = { ...this.$route.query }
delete param.mode
const path = this.fromRoute.dashboard
this.updatePath(param, path)
}
@@ -1067,9 +1058,40 @@ export default {
this.$nextTick(() => {
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
})
},
// 时间选择器设置默认时间范围
setDefaultTimeRange () {
this.$nextTick(() => {
if (this.$route.query.searchTime) return
let nowTimeType = this.$loadsh.cloneDeep(this.timeData[3])
const defaultTimeRange = this.$loadsh.get(this.showPanel, 'param.defaultTimeRange')
if (defaultTimeRange) {
nowTimeType = this.timeData.find(item => item.id == defaultTimeRange)
}
this.nowTimeType = this.$loadsh.cloneDeep(nowTimeType)
// 刷新时间范围
this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
})
},
// 设置默认刷新
setDefaultRefresh () {
this.$nextTick(() => {
if (this.$route.query.refresh) return
let refresh = this.$loadsh.cloneDeep(this.intervalList[0])
const defaultRefresh = this.$loadsh.get(this.showPanel, 'param.refresh')
if (defaultRefresh) {
refresh = this.intervalList.find(item => item.value == defaultRefresh)
}
this.$refs.pickTime.selectInterval(refresh)
})
}
},
created () {
async created () {
const searchKeys = {
// key: path 键
// value: vue set 参数
@@ -1079,24 +1101,27 @@ export default {
mode: { target: this, propertyName: 'mode', type: 'string' }
}
this.initQueryFromPath(searchKeys)
setTimeout(() => {
this.showPanel.id = this.dashboardId
this.filter.dashboardId = this.dashboardId
})
// 设置查看模式
this.$store.commit('setMode', this.mode)
await this.getTableData()
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)
this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.end_time = bus.timeFormate(this.searchTime[1], this.panelDateFormatTime)
this.filter.value = this.searchTime[2]
}
this.getTableData()
if (this.nowTimeType) {
this.nowTimeType.start_time = this.searchTime[0]
this.nowTimeType.end_time = this.searchTime[1]
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowTimeType)
}
this.$store.dispatch('dispatchPanelTime', {
time: this.searchTime,
nowTimeType: this.nowTimeType
})
if (this.$route.query.refresh) {
const refresh = this.intervalList.find(item => item.label == this.$route.query.refresh)
this.$refs.pickTime.selectInterval(refresh)
}
},
mounted () {
// 监听键盘ESC事件
@@ -1106,17 +1131,14 @@ export default {
this.onScroll()
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
if (this.nowTimeType) {
this.nowTimeType.start_time = this.searchTime[0]
this.nowTimeType.end_time = this.searchTime[1]
setTimeout(() => {
if (this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker) {
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowTimeType)
}
}, 100)
}
},
watch: {
showPanel: {
handler () {
this.setDefaultTimeRange()
this.setDefaultRefresh()
}
},
// 监听图表联动配置
'showPanel.param.chartShare': {
handler (value) {
@@ -1180,7 +1202,6 @@ export default {
const add = this.$route.query.add
this.$nextTick(() => {
if (add) {
console.log(add)
if (add === 'chart') {
this.addChartBefore()
}