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-03-31 10:02:12 +08:00
parent 8d062562e2
commit 21a31be44f
8 changed files with 559 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/charts/chartDataFormat.js
View File

@@ -745,7 +745,6 @@ export default {
}
interVal = Math.ceil(interVal) * Math.pow(1024, pow)
}
console.log(interVal)
interVal = !isNaN(interVal) ? interVal : 1
return interVal
}

66
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -131,7 +131,7 @@
<div class="float-right panel-calendar dialog-tool">
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
<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>
</div>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
@@ -354,11 +354,13 @@ export default {
mouseLeaveFullChart () {
if (this.echartModalStore) {
setTimeout(() => {
if (this.echartModalStore) {
this.echartModalStore.setOption({
toolbox: {
show: false
}
})
}
}, 300)
}
},
@@ -569,6 +571,8 @@ export default {
if (chartInfo.type === 4) { // line,bar
this.chartType = 'line'
}
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
const minusFlag = this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length
let minTime = null
let maxTime = null
if (dataArg.length > 0 && dataArg[0].data &&
@@ -590,7 +594,7 @@ export default {
const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
let maxValue = maxValueCopies.maxValue
const maxValue = maxValueCopies.maxValue
// let minValue = maxValueCopies.minValue
if (chartInfo.unit && dataArg.length > 0) {
// maxValue = dataArg[0].data[0][1]
@@ -739,6 +743,13 @@ export default {
str += bus.timeFormate(tData)
str += '</div>'
}
if (i === params.length / 2 && tip.alias.indexOf('process_') !== -1) {
const value = item.data[0] - minusTime
const tData = new Date(value)
str += '<div style="margin-bottom: 5px;margin-top: 5px">'
str += bus.timeFormate(tData)
str += '</div>'
}
let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(2)) : ''
if (val === 0) {
val = Number(item.data[1]).toExponential(2)
@@ -1035,6 +1046,7 @@ export default {
})
} else if (chartSite === 'screen') { // 全屏显示
// eslint-disable-next-line
console.log(legend)
if (legend) {
this.screenLegendList = []
this.isGreyScreen = []
@@ -1092,7 +1104,7 @@ export default {
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
// self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
self.echartModalStore.off('finished')
})
}, 100)
@@ -1358,7 +1370,8 @@ export default {
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.screenModal = true
this.isGreyScreen = []
this.$refs.pickTime.$refs.multipleTime.searchTime = []
// this.$refs.pickTime.$refs.timerPick.setCustomTime(this.searchTime)
this.seriesItemScreen = this.seriesItem
// this.seriesItemScreen = this.seriesItem;
/*
@@ -1401,7 +1414,7 @@ export default {
dateChange (time) {
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')
this.echartModalStore.clear()
// this.echartModalStore.clear()
this.showLegend = false
this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
if (this.showSetting) {
@@ -1430,6 +1443,7 @@ export default {
}
const step = bus.getStep(startTime, endTime)
if (type === 'list') { // 普通模式,主控台使用
console.log(123)
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele
let query = encodeURIComponent(filterItem.expression)
@@ -1440,6 +1454,21 @@ export default {
}
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
})
console.log(this.$refs.pickTime.$refs.multipleTime.searchTime)
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
this.data.elements.forEach((ele) => {
const filterItem = ele
let query = encodeURIComponent(filterItem.expression)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
!this.chartInfo.param && (this.chartInfo.param = {})
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
query += '&nullType=' + this.chartInfo.param.nullType
}
axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
})
}
} else if (type === 'dashboard') { // 概览模式,指标概览中使用
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
@@ -1460,6 +1489,7 @@ export default {
}
// 一个图表
axios.all(axiosArr).then((res) => {
console.log(res)
if (res.length > 0) {
const series = []
const legend = []
@@ -1540,21 +1570,26 @@ export default {
host += `${tag}="${queryItem.metric[tag]}",`
}
})
const elements = this.data.elements[pos] || this.data.elements[pos - this.data.elements.length] // 处理添加对比时的legend
if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
if (queryItem.metric.__name__) {
host += '}'
}
if (!host || host === '') {
host = this.data.elements[pos].expression
host = elements.expression
}
let alias = this.dealLegendAlias(host, this.data.elements[pos].legend)
let alias = this.dealLegendAlias(host, elements.legend)
if (!alias || alias === '') {
alias = host
}
legend.push({ name: host + '-' + this.data.elements[pos].id + '-' + innerPos, alias: alias })
if (pos >= this.data.elements.length) {
legend.push({ name: 'process_' + host + '-' + elements.id + '-' + innerPos, alias: 'process_' + alias })
} else {
legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
}
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host + '-' + this.data.elements[pos].id + '-' + innerPos
seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
seriesItem.metric_name = seriesItem.theData.name
// 将秒改为毫秒
// alert('table=='+JSON.stringify(queryItem))
@@ -1588,6 +1623,19 @@ export default {
}
})
this.setColor(legend.length)
console.log(series)
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
console.log(minusTime)
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) {
series.forEach((item, index) => {
if (index >= series.length / 2) {
console.log(123123);
series[index].data.forEach((item1, index1) => {
item1[0] = item1[0] + minusTime
})
}
})
}
this.seriesItemScreen = series
// this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
this.initChart(this.data, series, this.$refs.screenShowArea, 'screen', legend)

13
nezha-fronted/src/components/common/language/cn.js
View File

@@ -211,7 +211,7 @@ const cn = {
staticTip: '双大括号中的内容将会在asset页面被替换'
},
singleStat: {
label: 'SingleStat'
label: 'Single value'
},
pie: {
label: '饼图'
@@ -297,6 +297,17 @@ const cn = {
lastTwo: '最近2天',
lastSevenDay: '最近7天',
lastThirtyDay: '最近30天',
beforeFiveMin: '之前5分钟',
beforeFifteenMin: '之前15分钟',
beforeThirtyMin: '之前30分钟',
beforeOneHour: '之前1小时',
beforeThreeHour: '之前3小时',
beforeSixHour: '之前6小时',
beforeTwelveHour: '之前12小时',
beforeTwentyFourHour: '之前24小时',
beforeTwoDay: '之前2天',
beforeSevenDay: '之前7天',
beforeThirtyDay: '之前30天',
refreshInterval: {
never: '关闭',
oneMinute: '1分钟',

15
nezha-fronted/src/components/common/language/en.js
View File

@@ -211,7 +211,7 @@ const en = {
label: 'Line Chart' // "曲线图"
},
bar: {
label: 'Histogram' // "柱状图"
label: 'Bar' // "柱状图"
},
table: {
label: 'Table' // "表格"
@@ -224,7 +224,7 @@ const en = {
staticTip: 'The content in the double curly braces will be replaced on the Asset page'
},
singleStat: {
label: 'SingleStat'
label: 'Single value'
},
pie: {
label: 'Pie'
@@ -304,6 +304,17 @@ const en = {
lastTwoDay: 'Last 2 days',
lastSevenDay: 'Last 7 days',
lastThirtyDay: 'Last 30 days',
beforeFiveMin: 'Before 5 minutes',
beforeFifteenMin: 'Before 15 minutes',
beforeThirtyMin: 'Before 30 minutes',
beforeOneHour: 'Before 1 hour',
beforeThreeHour: 'Before 3 hours',
beforeSixHour: 'Before 6 hours',
beforeTwelveHour: 'Before 12 hours',
beforeTwentyFourHour: 'Before 24 hours',
beforeTwoDay: 'Before 2 days',
beforeSevenDay: 'Before 7 days',
beforeThirtyDay: 'Before 30 days',
refreshInterval: {
never: 'Off', // '从不'
oneMinute: '1 minute', // 1 minute

418
nezha-fronted/src/components/common/multipleTime.vue Normal file
View File

@@ -0,0 +1,418 @@
<style scoped lang="scss">
.loading-font{
color:#232f3e !important;
}
popper-z-index{
z-index: 3000 !important;
}
.calendar{
}
.nz-dashboard-dropdown-bg {
background: $global-text-color-active;
color: #fff;
}
.calendar-dropdown-title {
line-height:28px;
padding-left:5px;
margin-left:0px;
margin-top: 0px !important;
text-align:left;
border-radius:2px;
min-width:80px;
height:28px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-dropdown-link {
cursor: pointer;
}
.calendar-popover{
line-height:22px;
text-align:center;
}
.panel-time-picker-hidden{
width:0px !important;
padding:0px !important;
border:0px !important;
height: 0 !important;
overflow: hidden;
}
.time-picker-button{
padding: 0 1px !important;
height:24px !important;
margin-top:0px !important;
}
.time-picker-left-button{
margin-right: 4px;
}
.time-picker-right-button{
margin-left: 4px;
}
.calendar-popover-text {}
</style>
<style lang="scss">
.panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
left: 85% !important;
}
.panel-time-picker-popper[x-placement^=bottom] {
}
.panel-time-picker-popper .el-date-table td.today span {
color: #232f3e !important;
}
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
display:none;
}
.dropdown--suffix {
padding: 0 8px;
color: #aaa;
}
</style>
<template>
<div class="calendar top-tools" id="panel-calender">
<el-date-picker prefix-icon=" " size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
popper-class="panel-time-picker-popper"
align="right">
</el-date-picker>
<!--
<button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
<i style="font-size: 12px" class="el-icon-arrow-right"></i>
</button>-->
<el-dropdown @command="timeChange" @visible-change="popoverClick" class="calendar-dropdown-title" ref="timePickerDropdown" trigger="click">
<el-popover
placement="bottom-end"
min-width="120px"
:visible-arrow="false"
:disabled="isPopoverDisabled"
trigger="hover"
popper-class="popper-z-index"
id="panel-calender-popover">
<template v-if="this.searchTime&&this.searchTime.length>1">
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24" class="calendar-popover-text">{{searchTime[0]}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
</el-row>
</template>
<template v-else>
<div style="text-align: center;width: 100%;color: #909399;font-family: NotoSans !important;font-size: 12px !important;">{{$t("dashboard.panel.noDate")}}</div>
</template>
<div class="el-dropdown-link" slot="reference">
<i class="nz-icon nz-icon-time" style="width:20px;"></i>
<span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
<span class="dropdown--suffix">
<i class="el-icon-arrow-down"></i>
</span>
</div>
</el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" slot="dropdown">
<!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item> -->
<template v-for="(item, index) in timeData" >
<el-dropdown-item v-if="item.id !== 12" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
{{item.text}}
</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import bus from '../../libs/bus'
export default {
name: 'multipleTime',
props: {
stepSearchTime: {},
defaultPick: Number,
showEmpty: { default: false, type: Boolean }
},
components: {},
data () {
return {
startTime: '',
searchTime: [],
showSelect: false,
step: '',
showTime: {
id: 4,
text: this.$t('dashboard.panel.beforeOneHour')
},
timeData: [
{
id: 0,
text: this.$t('dashboard.panel.customTimeRange')
},
{
id: 12,
text: this.$t('dashboard.panel.noDate')
},
{
id: 1,
text: this.$t('dashboard.panel.beforeFiveMin'),
type: 'minute',
value: 5
},
{
id: 2,
text: this.$t('dashboard.panel.beforeFifteenMin'),
type: 'minute',
value: 15
},
{
id: 3,
text: this.$t('dashboard.panel.beforeThirtyMin'),
type: 'minute',
value: 30
},
{
id: 4,
text: this.$t('dashboard.panel.beforeOneHour'),
type: 'hour',
value: 1
},
{
id: 5,
text: this.$t('dashboard.panel.beforeThreeHour'),
type: 'hour',
value: 3
},
{
id: 6,
text: this.$t('dashboard.panel.beforeSixHour'),
type: 'hour',
value: 6
},
{
id: 7,
text: this.$t('dashboard.panel.beforeTwelveHour'),
type: 'hour',
value: 12
},
{
id: 8,
text: this.$t('dashboard.panel.beforeTwentyFourHour'),
type: 'hour',
value: 24
},
{
id: 9,
text: this.$t('dashboard.panel.beforeTwoDay'),
type: 'date',
value: 2
},
{
id: 10,
text: this.$t('dashboard.panel.beforeSevenDay'),
type: 'date',
value: 7
},
{
id: 11,
text: this.$t('dashboard.panel.beforeThirtyDay'),
type: 'date',
value: 30
}
],
nowTimeType: {
id: 4,
text: this.$t('dashboard.panel.beforeOneHour'),
type: 'hour',
value: 1
},
isPopoverDisabled: false,
isCustom: false,
valueArr: []
}
},
watch: {
stepSearchTime: {
immediate: true,
handler (n, o) {
if (n && this.searchTime[0]) {
if (this.showTime.value) {
this.setSearchTime(this.showTime.type, this.showTime.value)
} else {
const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
}
}
}
},
defaultPick: {
immediate: true,
handler (n, o) {
if (n && Number.isInteger(n)) {
const showTime = this.timeData.find(item => item.id == n)
if (showTime) {
this.showTime = Object.assign({}, showTime)
}
if (this.showEmpty && this.defaultPick === 12) {
this.searchTime = []
}
}
}
}
},
mounted () {
console.log(this.searchTime, 'this.searchTime')
},
methods: {
dateChange (val) {
const startTime = bus.timeFormate(val, 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
// let timerPicker = document.querySelector('#timePickerContent');
// timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
this.$set(this.showTime, 'id', 0)
this.$set(this.showTime, 'text', this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1])
this.$set(this.showTime, 'type', '')
this.$set(this.showTime, 'value', '')
/*
let tipElementList = document.getElementsByClassName('calendar-popover-text');
if(tipElementList && tipElementList.length===3){
console.log('-0-0-0',tipElementList);
tipElementList[0].innerHTML = this.searchTime[0];
tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
tipElementList[2].innerHTML = this.searchTime[1];
console.log('-0-0-2',tipElementList);
} */
this.$emit('change', this.searchTime)
},
setCustomTime (timeGroup) {
if (timeGroup.length === 2) {
this.$set(this.searchTime, 0, timeGroup[0])
this.$set(this.searchTime, 1, timeGroup[1])
this.nowTimeType = {
id: 4,
text: this.$t('dashboard.panel.beforeOneHour'),
type: 'hour',
value: 1
}
this.$set(this.showTime, 'id', this.nowTimeType.id)
this.$set(this.showTime, 'value', this.nowTimeType.value)
this.$set(this.showTime, 'type', this.nowTimeType.type)
this.$set(this.showTime, 'text', this.nowTimeType.text)
}
},
// left(){},
// right(){},
timeChange (val, from) {
this.nowTimeType = val
this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, 'text', val.text)
this.$set(this.showTime, 'value', val.value)
this.$set(this.showTime, 'type', val.type)
if (!val) {
this.isCustom = false
return false
} else {
this.setSearchTime(val.type, val.value)
if (this.searchTime[0]) {
this.startTime = this.searchTime[0]
}
// let timerPicker = document.querySelector('#timePickerContent');
// timerPicker.innerText = val.text;
/*
let tipElementList = document.getElementsByClassName('calendar-popover-text');
if(tipElementList && tipElementList.length===3){
tipElementList[0].innerHTML = this.searchTime[0];
tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
tipElementList[2].innerHTML = this.searchTime[1];
} */
const id = val.id
if (id === 0) { // custom
if (from === 'chart') {
this.isCustom = false
this.$emit('change', this.searchTime)
} else {
console.log(123123)
this.isCustom = true
this.$refs.calendar.focus()
}
} else {
this.isCustom = false
if (this.showEmpty && id === 12) {
this.searchTime = []
}
this.$emit('change', this.searchTime)
}
}
},
getCurrentTime () {
let timeTypeId = this.showTime.id
if (timeTypeId === 0) {
return this.searchTime
} else {
if (!timeTypeId) { timeTypeId = 4 }
const currentTime = this.timeData.find(item => item.id === timeTypeId)
this.setSearchTime(currentTime.type, currentTime.value)
return this.searchTime
}
},
setSearchTime (type, val) {
console.log(132, this.stepSearchTime ,val,new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60)
if (type === 'minute') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'm')
} else if (type === 'hour') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h')
} else if (type === 'date') {
const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'd')
}
},
setCostomTime: function (costomTime) {
this.searchTime = Object.assign(costomTime)
const val = Object.assign(this.timeData[0])
this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, 'text', val.text)
this.$set(this.showTime, 'type', val.type)
this.$set(this.showTime, 'value', val.value)
},
popoverClick (val) {
if (val) {
this.isPopoverDisabled = true
} else {
this.isPopoverDisabled = false
}
}
}
}
</script>
<style scoped>
.bR4004{
border-radius: 4px 0 0 4px ;
}
</style>

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

@@ -2,6 +2,7 @@
<div class="interval-refresh ">
<time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
<chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
<multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" style="height: 28px;line-height: 28px;vertical-align: middle;" v-show="useRefresh">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc" :id="id+'-refresh'">
<i style="font-size: 14px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
@@ -24,12 +25,14 @@
<script>
import bus from '../../libs/bus'
import timePicker from './timePicker'
import multipleTime from './multipleTime'
import chartUnit from './chartUnit'
export default {
name: 'intervalRefresh',
components: {
'time-picker': timePicker,
'chart-unit': chartUnit
'chart-unit': chartUnit,
multipleTime
},
model: {
event: 'change',
@@ -56,6 +59,10 @@ export default {
type: Boolean,
default: true
},
showMultiple: {
type: Boolean,
default: false
},
defaultPick: Number,
showEmpty: { type: Boolean, default: false },
id: String
@@ -118,6 +125,7 @@ export default {
return [startTime, endTime]
},
dateChange (time) {
console.log(time)
this.searchTime = time
this.$emit('change', this.searchTime)
this.refreshDataFunc()
@@ -162,4 +170,7 @@ export default {
.sub-top-tools .interval-refresh {
margin-top: -1px;
}
.multiple-time{
margin-right: 10px;
}
</style>

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

@@ -61,7 +61,7 @@
}
.panel-time-picker-popper .el-date-table td.today span {
color: #FFF !important;
color: #232f3e !important;
}
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
@@ -155,12 +155,13 @@ export default {
timeData: [
{
id: 0,
text: this.$t('dashboard.panel.customTimeRange')
text: this.$t('dashboard.panel.customTimeRange'),
value: -1
},
{
id: 12,
text: this.$t('dashboard.panel.noDate')
text: this.$t('dashboard.panel.noDate'),
value: 0
},
{
id: 1,
@@ -260,15 +261,36 @@ export default {
this.$emit('change', this.searchTime)
},
setCustomTime (timeGroup) {
if (timeGroup.length === 2) {
console.log(timeGroup)
if (!timeGroup[2] || timeGroup.length === 2) {
this.$set(this.searchTime, 0, timeGroup[0])
this.$set(this.searchTime, 1, timeGroup[1])
this.nowTimeType = {
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
id: 0,
text: this.$t('dashboard.panel.customTimeRange')
}
this.$set(this.showTime, 'id', this.nowTimeType.id)
this.$set(this.showTime, 'text', this.nowTimeType.text)
} else if (timeGroup[2]) {
const type = timeGroup[2].substr(timeGroup[2].length - 1, 1)
const value = timeGroup[2].substr(0, timeGroup[2].length - 1)
if (value == 30 && type === 'd') {
this.showTime = this.nowTimeType = {
id: 11,
text: this.$t('dashboard.panel.lastThirtyDay'),
type: 'date',
value: 30
}
} else if (value == 30 && type === 'm') {
this.showTime = this.nowTimeType = {
id: 3,
text: this.$t('dashboard.panel.lastThirtyMin'),
type: 'minute',
value: 30
}
} else {
this.showTime = this.nowTimeType = this.timeData.find(item => item.value == value)
}
this.$set(this.showTime, 'id', this.nowTimeType.id)
this.$set(this.showTime, 'text', this.nowTimeType.text)
@@ -277,6 +299,7 @@ export default {
// left(){},
// right(){},
timeChange (val, from) {
console.log(val, from)
this.nowTimeType = val
this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, 'text', val.text)
@@ -305,6 +328,7 @@ export default {
this.$refs.calendar.focus()
}
} else {
console.log(123123123)
this.isCustom = false
if (this.showEmpty && id === 12) {
this.searchTime = []

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

@@ -190,7 +190,8 @@ export default {
panelId: 0,
start_time: '',
end_time: '',
searchName: ''
searchName: '',
id: 4
},
panelId: 0,
filterPanel: '',
@@ -273,7 +274,7 @@ export default {
refreshTime (st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
this.searchTime = [startTime, endTime]
this.searchTime = [startTime, endTime, '']
},
panelReloadForDel: function () {
if (this.showPanel.id === this.panel.id) {
@@ -387,14 +388,16 @@ export default {
// 选择日期变化
dateChange (val) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime(nowTimeType.type, nowTimeType.value)
this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
console.log(this.searchTime)
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')
this.filter.panelId = this.showPanel.id
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
this.filter.value = this.searchTime[2]
this.getTableData()
this.getData(this.filter)
},
setSearchTime (type, val) { // 设置searchTime
setSearchTime (type, val, nowTimeType) { // 设置searchTime
if (type === 'minute') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')