diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 67f71bc4a..be93ef74d 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -20,6 +20,7 @@
+ {{data.title}} diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue index 49c60880a..6b7abb5d9 100644 --- a/nezha-fronted/src/components/charts/chart-url.vue +++ b/nezha-fronted/src/components/charts/chart-url.vue @@ -13,6 +13,7 @@
+ {{data.title}} diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index eb9f13ade..44d8a1889 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -26,6 +26,7 @@
+ {{data.title}} diff --git a/nezha-fronted/src/components/common/js/divResize.js b/nezha-fronted/src/components/common/js/divResize.js new file mode 100644 index 000000000..f61910b6e --- /dev/null +++ b/nezha-fronted/src/components/common/js/divResize.js @@ -0,0 +1,106 @@ +var EleResize = { + _handleResize: function (e) { + var ele = e.target || e.srcElement; + var trigger = ele.__resizeTrigger__; + if (trigger) { + var handlers = trigger.__z_resizeListeners; + if (handlers) { + var size = handlers.length; + for (var i = 0; i < size; i++) { + var h = handlers[i]; + var handler = h.handler; + var context = h.context; + handler.apply(context, [e]); + } + } + } + }, + _removeHandler: function (ele, handler, context) { + var handlers = ele.__z_resizeListeners; + if (handlers) { + var size = handlers.length; + for (var i = 0; i < size; i++) { + var h = handlers[i]; + if (h.handler === handler && h.context === context) { + handlers.splice(i, 1); + return; + } + } + } + }, + _createResizeTrigger: function (ele) { + var obj = document.createElement('object'); + obj.setAttribute('style', + 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'); + obj.onload = EleResize._handleObjectLoad; + obj.type = 'text/html'; + ele.appendChild(obj); + obj.data = 'about:blank'; + return obj; + }, + _handleObjectLoad: function (evt) { + this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__; + this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize); + } +}; +if (document.attachEvent) {//ie9-10 + EleResize.on = function (ele, handler, context) { + var handlers = ele.__z_resizeListeners; + if (!handlers) { + handlers = []; + ele.__z_resizeListeners = handlers; + ele.__resizeTrigger__ = ele; + ele.attachEvent('onresize', EleResize._handleResize); + } + handlers.push({ + handler: handler, + context: context + }); + }; + EleResize.off = function (ele, handler, context) { + var handlers = ele.__z_resizeListeners; + if (handlers) { + EleResize._removeHandler(ele, handler, context); + if (handlers.length === 0) { + ele.detachEvent('onresize', EleResize._handleResize); + delete ele.__z_resizeListeners; + } + } + } +} else { + EleResize.on = function (ele, handler, context) { + var handlers = ele.__z_resizeListeners; + if (!handlers) { + handlers = []; + ele.__z_resizeListeners = handlers; + + if (getComputedStyle(ele, null).position === 'static') { + ele.style.position = 'relative'; + } + var obj = EleResize._createResizeTrigger(ele); + ele.__resizeTrigger__ = obj; + obj.__resizeElement__ = ele; + } + handlers.push({ + handler: handler, + context: context + }); + }; + EleResize.off = function (ele, handler, context) { + var handlers = ele.__z_resizeListeners; + if (handlers) { + EleResize._removeHandler(ele, handler, context); + if (handlers.length === 0) { + var trigger = ele.__resizeTrigger__; + if (trigger) { + trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize); + ele.removeChild(trigger); + delete ele.__resizeTrigger__; + } + delete ele.__z_resizeListeners; + } + } + } +} + +export default EleResize; diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue index aaa47a738..ac8687c84 100644 --- a/nezha-fronted/src/components/common/login.vue +++ b/nezha-fronted/src/components/common/login.vue @@ -58,7 +58,7 @@ export default { localStorage.setItem('nz-sys-timezone',res.data.timezone); localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize); localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum); - localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwith); + localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch); this.$i18n.locale = this.lang; bus.$emit('login'); this.$router.push({ diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue new file mode 100644 index 000000000..c1e5c1a6d --- /dev/null +++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue @@ -0,0 +1,296 @@ + + + + + diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue new file mode 100644 index 000000000..cc44f07d2 --- /dev/null +++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue @@ -0,0 +1,192 @@ + + + + + + diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index 067f979d0..53754d9e8 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -4,8 +4,14 @@
{{chartTitle}}
-
+
+
+
+ {{item.alias?item.alias:item.name}} +
+
+
@@ -16,6 +22,8 @@ import loading from "../../../common/loading"; import uuidv1 from "uuid/v1"; import chartConfig from './chartConfig' + import bus from "../../../../libs/bus"; + import EleResize from "../../../common/js/divResize"; export default { name: "chart", components:{ @@ -24,6 +32,8 @@ props:{ chartTitle:{type:String}, chartType:{type:String,default:'line'}, + tooltipFormatter:Function, + yAxisFormatter:Function, map:{} }, data(){ @@ -31,19 +41,23 @@ chart:null, option:{}, chartId:new uuidv1()+'-'+new Date().getTime(), + legend:[], } }, created() { }, methods:{ - modifyOption:function(target,name,obj){ if(this.option){ this.option=chartConfig.getOption(this.chartType); } this.$set(this.option[target],name,obj) }, + setLegend:function(legend){ + this.legend=legend; + this.resize(); + }, setSeries:function(series){ if(!this.chart){ this.chart=echarts.init(document.getElementById(this.chartId)); @@ -61,21 +75,153 @@ if(this.option){ this.option=chartConfig.getOption(this.chartType); } + + this.modifyOption('tooltip','position',this.defaultTooltipPosition) + + if (this.tooltipFormatter) { + this.modifyOption('tooltip', 'formatter', this.tooltipFormatter) + } else { + this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter) + } + + if(this.chartType == 'line'){ + if(this.yAxisFormatter){ + this.modifyOption('yAxis','formatter',this.yAxisFormatter) + }else{ + this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter) + } + } + this.$set(this.option,'series',this.series); - /*if(this.chartType == 'line'){ - this.$set(this.option.tooltip,'formatter',this.tooltipFormatter); - this.$set(this.option.tooltip,'position',this.tooltipPosition); - this.$set(this.option.yAxis,'formatter',this.yAxisFormatter); - }*/ this.chart.clear(); this.chart.setOption(this.option) + this.resize(); }, resizeChart:function(width,height){ if(this.chart){ this.chart.resize({width:width,height:height}); } }, + resize:function(){ + if(this.chart){ + let height=this.$el.clientHeight ; + let width=this.$el.clientWidth; + if(this.chartTitle){ + height = height - 20; + } + if(this.legend && this.legend.length>0){ + height = height - 80; + } + this.chart.resize({width:width,height:height}); + } + }, + getBgColor:function(index){ + let color=chartConfig.getBgColorList()[index]; + return color; + }, + clickLegend(legendName,index){ + let curIsGrey=this.legend[index].isGray; + if(this.chart){ + this.legend.forEach((item,i)=>{ + let isGrey = item.isGray; + if(index != i){ //不是当前点击的 + if(!curIsGrey && !isGrey){ + this.chart.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + item.isGray=true; + }else if(!curIsGrey && isGrey){ + this.chart.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + item.isGray=false; + }else{ + this.chart.dispatchAction({ + type: 'legendUnSelect', + name: item.name + }); + item.isGray=true + } + }else {//当前点击的 + this.chart.dispatchAction({ + type: 'legendSelect', + name: item.name + }); + if(item.isGray === true){ + item.isGray = false; + } + } + }); + } + }, + defaultTooltipPosition:function(point,params,dom,rect,size){ + dom.style.transform = "translateZ(0)"; + //提示框位置 + var x=0; + var y=0; + //当前鼠标位置 + var pointX = point[0]; + var pointY = point[1]; + //外层div大小 + var viewWidth = size.viewSize[0]; + var viewHeight = size.viewSize[1]; + //提示框大小 + var boxWidth = size.contentSize[0]; + var boxHeight = size.contentSize[1]; + let chartDom = document.getElementById(this.chartId); + if(chartDom){ + let parTop = chartDom.offsetTop; + let parLeft = chartDom.offsetLeft; + + let parent = chartDom.parentElement; + let parClientHeight = parent.clientHeight;//可视高度 + let parClientWidth = parent.clientWidth;//可视宽度 + let parScrollTop = parent.scrollTop; + if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框 + x=pointX+10; + }else{ + x = pointX - boxWidth; + } + if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框 + y = pointY+10; + }else { + y = pointY-boxHeight; + } + return [x,y]; + }else { + x = pointX - boxWidth; + y = pointY+10; + return [x,y]; + } + }, + defaultTooltipFormatter:function(params){ + let str = `
`; + params.forEach((item, i) => { + if(i===0){ + let value=bus.computeTimezone(item.data[0]) + let t_date = new Date(value); + str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " + + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); + str +=`
`; + } + let val = Number(item.data[1]); + str += `
`; + str += `
${item.seriesName}:
`; + str += `
`; + str += chartDataFormat.getUnit(5).compute(val,null,2); + str += `
`; + str += `
`; + }); + str +=`
`; + return str; + }, + defaultYAxisFormatter:function(value,index){ + let unit=chartDataFormat.getUnit(5); + return unit.compute(value,index); + }, startLoading:function(){ this.$refs.loading.startLoading(); }, @@ -85,6 +231,7 @@ }, mounted() { this.chart=echarts.init(document.getElementById(this.chartId)); + EleResize.on(this.$el,this.resize); }, watch:{ @@ -98,9 +245,41 @@ diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index 0847fe6e1..74ba15a41 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -1,11 +1,19 @@ diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue index d8f2bbdcd..ed4799d53 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue @@ -8,6 +8,7 @@
{{$t('dashboard.overview.title')}}
{{$t('dashboard.panel.title')}}
{{$t('dashboard.metricPreview.title')}}
+
{{$t('dashboard.metricPreview.title')}}
@@ -48,7 +49,7 @@
- +
@@ -940,71 +941,6 @@ return tooltip; }, - tooltipPosition:function(point,params,dom,rect,size){ - dom.style.transform = "translateZ(0)"; - //提示框位置 - var x=0; - var y=0; - //当前鼠标位置 - var pointX = point[0]; - var pointY = point[1]; - //外层div大小 - var viewWidth = size.viewSize[0]; - var viewHeight = size.viewSize[1]; - //提示框大小 - var boxWidth = size.contentSize[0]; - var boxHeight = size.contentSize[1]; - let chartDom = document.getElementById(this.chartId); - if(chartDom){ - let parTop = chartDom.offsetTop; - let parLeft = chartDom.offsetLeft; - - let parent = chartDom.parentElement; - let parClientHeight = parent.clientHeight;//可视高度 - let parClientWidth = parent.clientWidth;//可视宽度 - let parScrollTop = parent.scrollTop; - if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框 - x=pointX+10; - }else{ - x = pointX - boxWidth; - } - if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框 - y = pointY+10; - }else { - y = pointY-boxHeight; - } - return [x,y]; - }else { - x = pointX - boxWidth; - y = pointY+10; - return [x,y]; - } - }, - tooltipFormatter:function(params){ - let str = `
`; - params.forEach((item, i) => { - if(i===0){ - let value=bus.computeTimezone(item.data[0]) - let t_date = new Date(value); - str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " - + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':'); - str +=`
`; - } - let val = Number(item.data[1]); - str += `
`; - str += `
${item.seriesName}:
`; - str += `
`; - str += chartDataFormat.getUnit(5).compute(val,null,2); - str += `
`; - str += `
`; - }); - str +=`
`; - return str; - }, - yAxisFormatter:function(value,index){ - let unit=chartDataFormat.getUnit(5); - return unit.compute(value,index); - }, getAssetTabTitle:function(){ switch (this.typeFilter) { case "typeStat":