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

feat: chart全屏添加时间选择器

Browse Source
This commit is contained in:
zhangyu
2021-12-22 18:40:46 +08:00
parent 3cfd072150
commit f483ae00c4
7 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header">
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page">
<span v-if="isError" class="chart-header-error">
<el-popover
placement="top-start"
@@ -15,13 +15,13 @@
</span>
<div class="chart-header__title">{{chartInfo.name}}</div>
<div class="chart-header__tools">
<span v-if="chartInfo.remark" class="chart-header__tool">
<span v-if="chartInfo.remark" class="chart-header__tool top-tool-btn-group">
<el-tooltip :content="chartInfo.remark" effect="light" placement="top">
<i class="nz-icon nz-icon-info-normal tool__icon"></i>
</el-tooltip>
</span>
<span class="chart-header__tool">
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="true" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
<span class="chart-header__tool" v-if="showTime(chartInfo.type)">
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="showMultiple(chartInfo.type)" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
</span>
<span class="chart-header__tool" @click="closeDialog">
<i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
@@ -75,9 +75,12 @@ export default {
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
console.log(this.filter)
this.filter.value = this.searchTime[2]
this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
this.$emit('dateChange', this.filter)
setTimeout(() => {
this.$emit('dateChange', this.filter, this.$refs.pickTime.$refs.multipleTime.searchTime)
}, 100)
},
closeDialog () {
this.$emit('close')
@@ -103,6 +106,31 @@ export default {
this.$set(this.searchTime, 2, val + 'd')
}
this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
},
showTime (type) {
switch (type) {
case 'line' :
case 'area' :
case 'point' :
case 'bar' :
case 'table' :
case 'stat' :
case 'guage' :
case 'pie' :
case 'treemap' :
case 'log' :
return true
default: return false
}
},
showMultiple (type) {
switch (type) {
case 'line' :
case 'area' :
case 'point' :
return true
default: return false
}
}
},
watch: {
@@ -131,6 +159,9 @@ export default {
if (this.$refs.pickTime) {
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
this.setSearchTime(this.nowType.type, this.nowType.value, this.nowType)
this.searchTime[0] = bus.timeFormate(this.timeRange[0], 'yyyy-MM-dd hh:mm:ss')
this.searchTime[1] = bus.timeFormate(this.timeRange[1], 'yyyy-MM-dd hh:mm:ss')
}
}
}